Styleguide til Re-design af rapport modul for app.trendlog.io

af gruppe 24

Struktur for interaktiv løsning

Atomer

Meta data

HTML CSS
Styleguide - ineteraktiv løsning 2. semstereksamen

Vær opmærksom på at ROBOTS-sektionen stopper indeksering af siden.

Text

Example of a text explenation in a paragraf, that can be long, due to a need of many words to explain a complex function or situation.

Example of short description.
HTML CSS

Example of a text explenation in a paragraf, that can be long, due to a need of many words to explain a complex function or situation.

Example of short description. 		/* -- TEXT -- */ * { font-size: 11px; line-height: 16px; font-weight: 400; color: #000000; } @media (min-width:481px) { * { font-size: 2.287vw; /* ~11 px on 481px width */ line-height: 3.950vw; /* ~19 px on 481px width */ } } @media (min-width:768px) { * { font-size: 16px; line-height: 26px; } } @media (min-width:1366px) { * { line-height: 30px; } } @media (min-width: 1980px) { * { font-size: 0.707vw; /* ~14px on 1980px width */ line-height: 1.717vw; /* ~34px on 1980px width */ } } @media (min-width:3840px) { * { font-size: 0.729vw; /* ~28px on 3840px width */ line-height: 1.745vw; /* ~67x on 3840px width */ } }

Vær opmærksom på at * påvirker alt indhold.

h1 - title

Reports overview

HTML CSS

Reports overview

 /* -- h1 HEADING -- */ h1 { float: left; display: block; margin: 15px 0; font-size: 22px; line-height: 35px; font-weight: 400; color: #000000; } @media (min-width:481px) { h1 { font-size: 4.574vw; /* ~22 px on 481px width */ line-height: 7.277vw; /* ~35 px on 481px width */ } } @media (min-width:768px) { h1 { font-size: 32px; line-height: 52px; } } @media (min-width:1366px) { h1 { line-height: 56px; } } @media (min-width: 1980px) { h1 { font-size: 1.616vw; /* ~32px on 1980px width */ line-height: 3.030vw; /* ~60px on 1980px width */ } } @media (min-width:3840px) { h1 { font-size: 1.667vw; /* ~64px on 3840px width */ line-height: 3.099vw; /* ~119px on 3840px width */ } }

h2 - report titles

Reports name

HTML CSS

Reports name

 /* -- h2 HEADING -- */ h2 { float: left; display: block; margin: 10px 0; font-size: 16px; line-height: 26px; font-weight: 400; color: #000000; } @media (min-width:481px) { h2 { font-size: 3.333vw; /* ~16 px on 481px width */ line-height: 5.417vw; /* ~26 px on 481px width */ } } @media (min-width:768px) { h2 { font-size: 27px; line-height: 44px; } } @media (min-width:1366px) { h2 { line-height: 49px; } } @media (min-width: 1980px) { h2 { font-size: 0.909vw; /* ~27px on 1980px width */ line-height: 2.677vw; /* ~53px on 1980px width */ } } @media (min-width:3840px) { h2 { font-size: 1.146vw; /* ~44px on 3840px width */ line-height: 2.344vw; /* ~90px on 3840px width */ } }

h3 - tab titles

Favorite templates

HTML CSS

Favorite templates

 /* -- h3 HEADING -- */ h3 { float: left; display: block; margin-top: 10px; margin-bottom: 5px; font-size: 13px; line-height: 22px; font-weight: 400; color: #000000; } @media (min-width:481px) { h3 { font-size: 2.703vw; /* ~13 px on 481px width */ line-height: 4.574vw; /* ~22 px on 481px width */ } } @media (min-width:768px) { h3 { font-size: 21px; line-height: 36px; } } @media (min-width:1366px) { h3 { line-height: 40px; } } @media (min-width: 1980px) { h3 { font-size: 1.061vw; /* ~21px on 1980px width */ line-height: 2.222vw; /* ~44px on 1980px width */ } } @media (min-width:3840px) { h3 { font-size: 1.094vw; /* ~42px on 3840px width */ line-height: 2.057vw; /* ~79px on 3840px width */ } }

Molekyler

Stjerne Prioritering

HTML CSS JavaScript

.star { width: 26px; } /* PRIORITY STAR / STJERNE PRIORITERING */ function changeImage(elem) { console.log('changeImage function active.'); // console.log(document.getElementById("imgClickAndChange").src.endsWith("img/icons/star.svg")); elem = document.getElementById(elem); //if (document.getElementById("imgClickAndChange").src =="img/icons/star.svg") // Must use endsWith method instead of == when directory layout is uncertain if (elem.src.endsWith("img/icons/star.svg")) // Must use endsWith method instead of == when directory layout is uncertain { console.log('changeImage if true.'); elem.src = "img/icons/starfull.svg"; // Prioritize graph/template } else { console.log('changeImage if false.'); elem.src = "img/icons/star.svg"; // Unprioritize graph/template } }

Hver stjerne skal have et unikt id, som skal reffere til parrent.

Knapper med text og icon

Folder knap på filter pop-up

Folder

HTML CSS JavaScript

Folder

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } select.typebutton { height: 37px; color: #7C7C7C; font-style: italic; border: solid 1px #707070; padding:0 5px; box-sizing: border-box; cursor: pointer; } select.typebutton option{ color: #000; font-style: normal; cursor: pointer; } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Schedule knap på filter pop-up

Schedule

HTML CSS JavaScript

Schedule

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } select.typebutton { height: 37px; color: #7C7C7C; font-style: italic; border: solid 1px #707070; padding:0 5px; box-sizing: border-box; cursor: pointer; } select.typebutton option{ color: #000; font-style: normal; cursor: pointer; } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Result knap på filter pop-up

Result

HTML CSS JavaScript

Result

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } select.typebutton { height: 37px; color: #7C7C7C; font-style: italic; border: solid 1px #707070; padding:0 5px; box-sizing: border-box; cursor: pointer; } select.typebutton option{ color: #000; font-style: normal; cursor: pointer; } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Warning eller info.

Date target knap på filter pop-up

Date target

HTML CSS JavaScript

Date target

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } select.typebutton { height: 37px; color: #7C7C7C; font-style: italic; border: solid 1px #707070; padding:0 5px; box-sizing: border-box; cursor: pointer; } select.typebutton option{ color: #000; font-style: normal; cursor: pointer; } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Type knap på filter pop-up

Type

HTML CSS JavaScript

Type

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } select.typebutton { height: 37px; color: #7C7C7C; font-style: italic; border: solid 1px #707070; padding:0 5px; box-sizing: border-box; cursor: pointer; } select.typebutton option{ color: #000; font-style: normal; cursor: pointer; } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Folder overview knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

New report knap

HTML CSS JavaScript
.newreportbutton{ border: none; border-radius: 12px; background-color: #00cd00; width: 150px; cursor: pointer; display: grid; grid-template-columns: auto auto; align-content: center; overflow: hidden; } .newreport span{ font-size: 18px; display: grid; } .plusimg{ display: grid; margin: 0 0 0 auto; }

Warning eller info.

Sort by knap

Sort by
HTML CSS JavaScript
Sort by
.sortbydiv{ font-size: 19px; float: left; } .sortbybutton{ background-color: #fff; border-color: #000; border-radius: 12px; width: 150px; cursor: pointer; display: block; float: right; } .sortbybutton span{ float: left; color: #848484; font-size: 19px; margin-left: 7px; }

Sort

HTML CSS JavaScript
/* -- SELECT --*/ .select-label { position: relative; float: left; overflow: hidden; cursor: pointer; } .select-span { float: left; height: 37px; margin-right: 12px; font-size: 142.85%; line-height: 37px; color: #000; } @media (min-width:3200px) { .select-span { font-size: 32px; line-height: 37px; } } .select { display: block; padding-left: 10px; padding-right: 28px; border-radius: 19px; font-size: 16px; color: #7C7C7C; font-style: italic; -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; border-color: #6F6F6F; background-color: #fff; cursor: pointer; } .select option{ font-style: normal; } @media (min-width:786px) { .select { font-size: 100%; } } .select-wrapper { position: relative; } .select-wrapper:before { content: ""; position: absolute; top: calc(50% - 10px); right: 10px; width: 19px; height: 13px; background-image: url("../img/icons/chevron-down.svg"); background-repeat: no-repeat; background-size: cover; } .sort-by-select { float: right; width: 205px; height: 37px; line-height: 37px; } @media (min-width:786px) { .sort-by-select { font-size: 15px; } } @media (min-width:1920px) { .sort-by-select { font-size: 22px; } }

Date range

HTML CSS JavaScript
/* -- DATE-RANGE --*/ .date-range { float: left; width: 100%; cursor: pointer; } .date-range-title, .date-range-input, .date-range-start-end-split { font-size: 135.71%; line-height: 135.71%; color: #FFF; } .date-range-title { float: left; clear: both; } .date-range-date-wrapper { float: right; clear: both; } .date-range-input { position: relative; display: block; float: left; clear: both; border: none; text-decoration: underline; background-color: transparent; cursor: pointer; } .date-range-input:before { content:""; position: absolute; left: 0; bottom: 0; width: 65%; height: 1px; background-color: #FFF; } .date-range-input:placeholder { text-decoration: underline; } .date-range-start-end-split { display: none; float: left; margin: 0 10px; } @media (min-width:768px){ .date-range-title { width: 30%; clear: left; } .date-range-date-wrapper { clear: right; } .date-range-input { width: auto; clear: none; } } @media (min-width:1366px){ .date-range-start-end-split { display: inline-block; } }

Filter knap

HTML CSS JavaScript
/*Here starts CSS code for filter by button*/ .filterbutton { background-color: #fff; border: #000000; border-radius: 12px; width: auto; padding: 5px 17px; cursor: pointer; display: block; text-align: center; } .filterbutton span{ color: #000; margin-right: 15px; }

Forrige-knap

HTML CSS JavaScript
.previousbutton{ background-color: #fff; border: none; border-radius: 12px; width: 100px; cursor: pointer; display: block; } .previousbutton span{ color: #000; font-size: 10px; margin-right: 6px; float: right; } .previousbutton img{ margin: 6px auto; }

Næste-knap

HTML CSS JavaScript
.nextbutton{ background-color: #fff; border: none; border-radius: 12px; width: 100px; cursor: pointer; display: block; } .nextbutton span{ color: #000; font-size: 10px; } .nextbutton img{ margin: 6px auto; }

Add and delete page buttons

HTML CSS JavaScript
.adddelete-button{ border-radius: 15px; cursor: pointer; } .plusminus-iconimg{ width: 100%; display: block; }

Buttons with text and icons

Save report
Close editor
Delete report
HTML CSS JavaScript
Close editor
Save report
Delete report
.text-icon{ font-size: 20px; } .texticon-button{ background-color: transparent; border:none; display: inline-block; } .texticon-iconimg{ width: 100%; margin-bottom: -12px; } function savedAlert() { alert("Report saved"); } function closeEditor() { let txt; if (confirm("Are you sure you want to close?")) { txt = "Editor closed"; } else{ txt = null } document.getElementById("closeconfirm").innerHTML = txt; } function deleteReport() { let txt; if (confirm("Are you sure you want to delete this report?")) { txt = "Report deleted"; } else{ txt = null } document.getElementById("deleteconfirm").innerHTML = txt; }

Upload image

HTML CSS JavaScript
.uploadimagebutton{ min-height: 37px; background-color: #fff; border: none; border-radius: 12px; width: 120px; cursor: pointer; display: block; } .uploadimagebutton span{ color: #000; font-size: 12px; }

Burger menu knap

HTML CSS JavaScript
.burgerMenu{ display: inline-block; cursor: pointer; float: left; width: 35px; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 3px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } .burgerMenu:hover + .hiddenNav{ display: block; } function burgerMenuChange(burgerMenu) { burgerMenu.classList.toggle("change"); }

Burger menu knap + function

HTML CSS JavaScript
.burgerMenu{ display: inline-block; cursor: pointer; float: none; width: 35px; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 3px 0; transition: 0.4s; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); } .change .bar2 { opacity: 0; } .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); } function burgerMenuChange(burgerMenu) { burgerMenu.classList.toggle("change"); }

Chevron right

HTML CSS JavaScript
.nextbutton{ background-color: #fff; border: none; border-radius: 12px; width: 100px; cursor: pointer; display: block; } .nextbutton span{ color: #000; font-size: 14px; margin-left: 16px; }

Upload template

HTML CSS JavaScript
.upladtemplatebutton{ min-height: 37px; background-color: #D3D3D3; border: none; border-radius: 12px; width: 100px; cursor: pointer; display: block; } .upladtemplatebutton span{ color: #000; font-size: 10px; margin-left: 7px; float: left; } .upladtemplatebutton img{ width:15px; }

Help knap

HTML CSS JavaScript
.helpbutton{ min-height: 37px; /* Too small on small screens */ background-color: #D3D3D3; border: none; border-radius: 12px; width: 50px; cursor: pointer; display: block; } .helpbutton span{ color: #000; font-size: 10px; margin-left: 7px; float: left; } .helpbutton img{ width:10px; float: right; margin: 9px 9px 0 0; }

Size knap

Size
HTML CSS JavaScript
Size
.texteditdiv{ float: left; font-size: 20px; } .texteditdiv img{ float: right; } .texteditbutton{ background-color: #fff; border-color: #000; border-radius: 12px; width: 200px; cursor: pointer; display: block; float: right; } .texteditbutton span{ float: left; color: #000; font-size: 19px; margin-left: 7px; }

SnippetTittle

Weight
HTML CSS JavaScript
Weight
.texteditdiv{ float: left; font-size: 20px; } .texteditdiv img{ float: right; } .texteditbutton{ background-color: #fff; border-color: #000; border-radius: 12px; width: 200px; cursor: pointer; display: block; float: right; } .texteditbutton span{ float: left; color: #000; font-size: 19px; margin-left: 7px; }

Edit knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Show knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Schedule knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Share knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Save as.. knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Delete knap

HTML CSS JavaScript
.settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; margin-right: 15px; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Switch Knapper

Vertical/Horizontal Switch

HTML CSS JavaScript
.switch { position: relative; margin: 20px auto; height: 26px; width: 120px; background: white; border-radius: 15px; } .switch-label { position: relative; z-index: 2; float: left; width: 58px; line-height: 26px; font-size: 11px; color: black; text-align: center; cursor: pointer; } .switch-label:active { font-weight: regular; } .switch-label-off { padding-left: 2px; } .switch-label-on { padding-right: 2px; } .switch-input { display: none; } .switch-input:checked + .switch-label { font-weight: regular; color: black; } .switch-input:checked + .switch-label-on ~ .switch-selection { left: 60px; } .switch-selection { display: block; position: absolute; z-index: 1; top: 2px; left: 2px; width: 58px; height: 22px; background: #00CD00; border-radius: 15px; }

MEGASWITCH

HTML CSS JavaScript
.megaswitch { position: relative; height: 26px; width: 240px; background: white; border-radius: 15px; } /*slut*/ /*style for labels*/ .switch-label0 { position: relative; z-index: 2; float: left; width: 58px; line-height: 26px; font-size: 11px; color: black; text-align: center; cursor: pointer; } .switch-label0:active { font-weight: regular; } .switch-label-off0 { padding-left: 2px; } .switch-label-on0 { padding-right: 2px; } /*slut*/ /*style for labels*/ .switch-input0 { display: none; } /*slut*/ /*styling for hvor den runde grønne knap (.switch-selector) skal rykke sig hen alt efter hvilket hvilket label der bliver "checked" */ .switch-input0:checked + .switch-label0 { font-weight: bold; color: black; } .switch-input0:checked + .switch-label-on1 ~ .switch-selection0 { left: 60px; } .switch-input0:checked + .switch-label-on2 ~ .switch-selection0 { left: 120px; } .switch-input0:checked + .switch-label-on3 ~ .switch-selection0 { left: 180px; } /*slut*/ /*style for den runde grønne knap der switcher fra højre til venstre*/ .switch-selection0 { display: block; position: absolute; z-index: 1; top: 2px; left: 2px; width: 58px; height: 22px; background: #00CD00; border-radius: 15px; }

Søg

HTML CSS JavaScript
.searchInput { background-image: url('../img/icons/search.svg'); background-position: 10px 11px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 10px 20px 5px 50px; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; }

Other buttons

HTML CSS JavaScript
.button-g{ min-width: 75px; width: auto; border: solid 1px #00CD00; border-radius: 10px; background-color: #00CD00; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } .button-b{ min-width: 75px; width: auto; border: solid 1px #5071A3; border-radius: 10px; background-color: #5071A3; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } .button-r{ min-width: 75px; width: auto; color: white; border: solid 1px #E4342B; border-radius: 10px; background-color: #E4342B; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } .button-w{ min-width: 75px; width: auto; color: black; border: solid 1px grey; border-radius: 10px; background-color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } .buttont{ border: solid 1px #5071A3; border-radius: 10px; background-color: #5071A3; padding: 14px 28px; font-size: 16px; cursor: pointer; display: inline-block; } .Ticon{ width: 200%; margin-left:-45%; } .buttongr{ border: solid 1px #6F6F6F; border-radius: 10px; background-color: #6F6F6F; padding: 8px 28px; font-size: 16px; cursor: pointer; display: inline-block; }

Text inputs

Email-input knap

Email adress

HTML CSS JavaScript

Email adress

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Send with

Send with

HTML CSS JavaScript

Send with

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Time

Time

HTML CSS JavaScript

Time

 /*Here starts CSS code for type button*/ .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .typebutton { float: left; /* Added float to display height right */ width: 100%; border-radius: 10px; font-size: 110%; /* Must be larger on smaller screens */ } .typebuttontext { float: left; font-style: italic; color: grey; margin-left: 5px; font-size: 110%; } .chevronicon { float: right; margin-top: 5px; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Message

Message

HTML CSS JavaScript

Message

 .frame { float: left; /* Added float to display height right */ background-color: black; width: 100%; /* width: 400px; *//* Did not scale with parrent */ } .type { width: calc(100% - 10px); /* 100% width -10px margin */ margin-left: 5px; margin-right: 5px; /* Margin added */ } .typetext { float: left; /* Added float to display height right */ color: white; font-size: 110%; /* Must be larger on smaller screens */ } .type-text-field{ float: left; width: 100%; min-height: 165px; padding: 5px; border: solid 1px #707070; border-radius: 6px; resize: none; box-sizing: border-box; } @media (min-width:1366){ .typetext, .typebutton, .typebuttontext { font-size: 100%; } }

Quanitity select

HTML CSS JavaScript
/* -- SELECT --*/ .select-label { position: relative; float: left; overflow: hidden; cursor: pointer; } .select-span { float: left; height: 37px; margin-right: 12px; font-size: 142.85%; line-height: 37px; color: #000; } @media (min-width:3200px) { .select-span { font-size: 32px; line-height: 37px; } } .select { display: block; padding-left: 10px; padding-right: 28px; border-radius: 19px; font-size: 16px; color: #7C7C7C; font-style: italic; -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; border-color: #6F6F6F; background-color: #fff; cursor: pointer; } .select option{ font-style: normal; } @media (min-width:786px) { .select { font-size: 100%; } } .select-wrapper { position: relative; } .select-wrapper:before { content: ""; position: absolute; top: calc(50% - 10px); right: 10px; width: 19px; height: 13px; background-image: url("../img/icons/chevron-down.svg"); background-repeat: no-repeat; background-size: cover; }

Save to select

HTML CSS JavaScript
/* save-to-select */ .save-to-select { display: block; float: left; } /* -- SELECT --*/ .select-label { position: relative; float: left; overflow: hidden; cursor: pointer; } .select-span { float: left; height: 37px; margin-right: 12px; font-size: 142.85%; line-height: 37px; color: #000; } @media (min-width:3200px) { .select-span { font-size: 32px; line-height: 37px; } } .select { display: block; padding-left: 10px; padding-right: 28px; border-radius: 19px; font-size: 16px; color: #7C7C7C; font-style: italic; -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; border-color: #6F6F6F; background-color: #fff; cursor: pointer; } .select option{ font-style: normal; } @media (min-width:786px) { .select { font-size: 100%; } } .select-wrapper { position: relative; } .select-wrapper:before { content: ""; position: absolute; top: calc(50% - 10px); right: 10px; width: 19px; height: 13px; background-image: url("../img/icons/chevron-down.svg"); background-repeat: no-repeat; background-size: cover; }

Organsimer

Tandhjul 1 menu

HTML CSS JavaScript
.settingsmenu{ background-color: #D3D3D3; width: 250px; border-radius: 12px; } .closesettingmenu{ display: block; background-color: transparent; float: right; width: 100%; border: none; cursor: pointer; } .closesettingmenuicon{ float: right; width: 24px; padding-right: 12px; } .settingsmenubutton{ display: block; width: 225px; margin: 0 auto; text-align: center; border: #000000; border-radius: 12px; margin-bottom: 5px; cursor: pointer; } .settingsmenubutton span{ float: left; color: #848484; font-size: 19px; margin-left: 7px; } .settingsmenuicon{ float: right; margin-right: 7px; width: 20px; }

Tandhjul 2 menu

HTML CSS JavaScript
.settingsmenu, .settingsmenu-dark { width: 250px; border-radius: 12px; padding-right: 12px; padding-left: 12px; padding-top: 10px; padding-bottom: 25px; border-sizing: border-box; } .settingsmenu-dark .settingsmenubutton:last-child, .settingsmenu .settingsmenubutton:last-child { margin-bottom: 0; } .settingsmenu-dark .settingsmenubutton span, .settingsmenu .settingsmenubutton span { font-size: 16px; line-height: 20px; } .settingsmenu-dark{ background-color: #222222; width: 250px; border-radius: 12px; } .closesettingmenu-dark{ display: block; background-color: transparent; float: right; width: 100%; border: none; cursor: pointer; } .closesettingmenuicon-dark{ float: left; width: 24px; padding-left: 12px; }

Tandhjul 3 menu

HTML CSS JavaScript
.settingsmenu, .settingsmenu-dark { width: 250px; border-radius: 12px; padding-right: 12px; padding-left: 12px; padding-top: 10px; padding-bottom: 25px; border-sizing: border-box; } .settingsmenu-dark .settingsmenubutton:last-child, .settingsmenu .settingsmenubutton:last-child { margin-bottom: 0; } .settingsmenu-dark .settingsmenubutton span, .settingsmenu .settingsmenubutton span { font-size: 16px; line-height: 20px; } .settingsmenu{ background-color: #D3D3D3; width: 250px; border-radius: 12px; } .closesettingmenu{ display: block; background-color: transparent; float: right; width: 100%; border: none; cursor: pointer; } .closesettingmenuicon{ float: right; } .settingsmenubutton{ display: block; width: auto; margin: 0 auto; padding: 5px 17px; text-align: center; border: #000000; border-radius: 12px; cursor: pointer; } .settingsmenubutton:hover{ background-color: #adadad; } .settingsmenubutton span{ float: left; color: #848484; font-size: 19px; } .settingsmenuicon{ float: right; width: 20px; }

Delete pop-up's

Pop ud delete - report

Are you sure you want to delete "Report Name"?
HTML CSS JavaScript
Are you sure you want to delete "Report Name"?
.popupdelete { position: absolute; top: calc(50% - 110px); /* Half of screen - half of element height */ left: 0; background-color: #262626; text-align: center; width: 100%; max-width: 400px; height: 220px; border-radius: 12px; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .popupdelete { left: calc(50vw - 200px); /* Half of screen - element width */ } } .popupdelete span { color: #fff; margin: 50px auto; display: block; } .popupdeletebuttons { display: grid; grid-template-columns: auto auto; float: none; width: 100%; margin: 0 auto; } .cancel { background-color: #fff; text-align: center; border: none; border-radius: 12px; margin: 0 auto; width: 100px; height: 50px; cursor: pointer; } .delete { background-color: #DF5539; color: #fff; text-align: center; border: none; border-radius: 12px; margin: 0 auto; width: 100px; height: 50px; cursor: pointer; }

Pop ud delete - folder

Are you sure you want to delete "Folder Name"?
HTML CSS JavaScript
Are you sure you want to delete "Folder Name"?
.popupdelete { position: absolute; top: calc(50% - 110px); /* Half of screen - half of element height */ left: 0; background-color: #262626; text-align: center; width: 100%; max-width: 400px; height: 220px; border-radius: 12px; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .popupdelete { left: calc(50vw - 200px); /* Half of screen - element width */ } } .popupdelete span { color: #fff; margin: 50px auto; display: block; } .popupdeletebuttons { display: grid; grid-template-columns: auto auto; float: none; width: 100%; margin: 0 auto; } .cancel { background-color: #fff; text-align: center; border: none; border-radius: 12px; margin: 0 auto; width: 100px; height: 50px; cursor: pointer; } .delete { background-color: #DF5539; color: #fff; text-align: center; border: none; border-radius: 12px; margin: 0 auto; width: 100px; height: 50px; cursor: pointer; }

Side titler og settings bar

Side titel og settings bar for overview-side

Report overview

HTML CSS JavaScript

Report overview

 /* Styling for SIDE TITEL OG SETTINGS BAR" FOR OVERVIEW SIDEN ORAGBISME */ .frameforsidetitelogsettingsbar { width: 100%; min-height: 150px; background-color: #D3D3D3; } /*PLACERING / POSITIONER*/ .sidetitelogsettingswrap { width: 100%; padding-top: 20px; } .topEditorHeader{ width: 100%; } .bottomEditorHeader{ width: 100%; margin-top: 18px; } .sidetitelcontainer, .quantitycontainer { float: left; } .opretnyrapportcontainer { position: relative; float: right; height: 16px; width: 150px; } .opretnyrapportcontainer button { position: absolute; top: 50%; transform: translateY(-50%); clear: right; } @media (min-width:481px) { .opretnyrapportcontainer { height: 7.277vw; } } @media (min-width:768px) { .opretnyrapportcontainer { height: 52px; } } @media (min-width:1366px) { .opretnyrapportcontainer { height: 56px; } } @media (min-width: 1920px) { .opretnyrapportcontainer { height: 3.073vw; /* ~59px on 1920px width */ } } @media (min-width:3840px) { .opretnyrapportcontainer { height: 3.099vw; /* ~119px on 3840px width */ } } .quantitycontainer, .switch-preview-list-container, .folderoverviewcontainer, .filtercontainer, .sortbycontainer { margin-right: 1vw; } .quantitycontainer { clear: left; } .switch-preview-list-container { float: left; } .folderoverviewcontainer { float: left; } .folderoverviewcontainer .settingsmenubutton span, .filtercontainer .filterbutton span, .sortbycontainer .select-span { display: none; } .sortbycontainer .sort-by-select, .searchcontainer .searchInput { max-width: 108px; } .filtercontainer { float: left; } .sortbycontainer { float: left; } .searchcontainer { float: right; } @media (min-width:1366px) { .quantitycontainer, .switch-preview-list-container, .folderoverviewcontainer, .filtercontainer, .sortbycontainer { margin-right: 34px; } .folderoverviewcontainer .settingsmenubutton span, .filtercontainer .filterbutton span, .sortbycontainer .select-span { display: inline-block; } .sortbycontainer .sort-by-select, .searchcontainer .searchInput { max-width: 100%; } .searchcontainer { float: right; } } /* Styling for SIDE TITEL OG SETTINGS BAR" FOR OVERVIEW SIDEN ORAGBISME - SLUT */

Side titel og settings bar for editor-side

Report editor

Close editor
Delete report
Save report
HTML CSS JavaScript

Report editor

Close editor
Delete report
Save report
/* Styling for SIDE TITEL OG SETTINGS BAR" FOR EDITOR SIDEN ORAGBISME */ /*PLACERING / POSITIONER*/ .closecontainer, .savecontainer, .deletecontainer { float: right; } @media (min-width:481px) { .closecontainer, .savecontainer, .deletecontainer { height: 7.277vw; } } @media (min-width:768px) { .closecontainer, .savecontainer, .deletecontainer { height: 52px; } } @media (min-width:1366px) { .closecontainer, .savecontainer, .deletecontainer { height: 56px; } } @media (min-width: 1920px) { .closecontainer, .savecontainer, .deletecontainer { height: 3.073vw; /* ~59px on 1920px width */ } } @media (min-width:3840px) { .closecontainer, .savecontainer, .deletecontainer { height: 3.099vw; /* ~119px on 3840px width */ } } .sidetitelcontainer, .previouspagecontainer { float: left; } .previouspagecontainer, .savecontainer, .deletecontainer, .switch-multiple-singular-container, .switch-horizontal-vertical-container, .addpageknapcontainer, .deletepageknapcontainer, .uploadimageknapcontainer, .nextpagecontainer { margin-right: 1vw; } .closecontainer .text-icon, .savecontainer .text-icon, .deletecontainer .text-icon { transform: translateY(50%); } .switch-multiple-singular-container { float: left; } .switch-horizontal-vertical-container{ float: left; } .addpageknapcontainer { float: left; } .deletepageknapcontainer { float: left; } .uploadimageknapcontainer { float: left; } .nextpagecontainer { float: left; } .megaswitchcontainer { float: right; } @media (min-width:1366px) { .previouspagecontainer, .savecontainer, .deletecontainer, .switch-multiple-singular-container, .switch-horizontal-vertical-container, .addpageknapcontainer, .deletepageknapcontainer, .uploadimageknapcontainer, .nextpagecontainer { margin-right: 34px; } .folderoverviewcontainer .settingsmenubutton span, .filtercontainer .filterbutton span, .sortbycontainer .select-span { display: inline-block; } .sortbycontainer .sort-by-select, .searchcontainer .searchInput { max-width: 100%; } .searchcontainer { float: right; } } /* Styling for SIDE TITEL OG SETTINGS BAR" FOR EDITOR SIDEN ORAGBISME - SLUT */

Ulpoad pop-up's

Upload template pop-up

Upload a template

Upload template

HTML CSS JavaScript

Upload a template

Upload template

 /* Styling for Upload pop-up ORAGBISME*/ .frameforuploadpopup { position: absolute; top: calc(50% - 110px); /* Half of screen - half of element height */ left: 0; background-color: #D3D3D3; width: 100%; max-width: 425px; height: 220px; border-radius: 12px; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforuploadpopup { left: calc(50vw - 212px); /* Half of screen - element width */ } } .x1 { float: right; margin-right: -110px; } .x2{ float: right; margin-right: -170px; } .uploadtemplate { margin-top: -10px; } .uploadpopuptitelwrap { margin-top: 15px; } .uploadpopuptitelwrap, .uploadtemplateknap{ margin-left: 10px; margin-right: 10px; } .uploadpopuptextknaphøjre { float: right; margin-top: 10px; margin-right: 10px; } .uploadpopuptextknapvenstre { float: left; margin-top: 10px; margin-left: 10px; } /* Styling for Upload pop-up ORAGBISME - SLUT */

Upload image pop-up

Upload image

Upload image

HTML CSS JavaScript

Upload image

Upload image

 /* Styling for Upload pop-up ORAGBISME*/ .frameforuploadpopup { position: absolute; top: calc(50% - 110px); /* Half of screen - half of element height */ left: 0; background-color: #D3D3D3; width: 100%; max-width: 425px; height: 220px; border-radius: 12px; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforuploadpopup { left: calc(50vw - 212px); /* Half of screen - element width */ } } .x1 { float: right; margin-right: -110px; } .x2{ float: right; margin-right: -170px; } .uploadtemplate { margin-top: -10px; } .uploadpopuptitelwrap { margin-top: 15px; } .uploadpopuptitelwrap, .uploadtemplateknap{ margin-left: 10px; margin-right: 10px; } .uploadpopuptextknaphøjre { float: right; margin-top: 10px; margin-right: 10px; } .uploadpopuptextknapvenstre { float: left; margin-top: 10px; margin-left: 10px; } /* Styling for Upload pop-up ORAGBISME - SLUT */

Pop up's from dropdown menu

POP-UP SHARE AS ORGANISME

Share as

Share to

Your email

Message

HTML CSS JavaScript

Share as

Share to

Your email

Message

 /*Styling for setting pop-up organismer*/ .frameforsettingpopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 450px; height: 100vh; max-height: 400px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsettingpopup { left: calc(50vw - 200px); /* Half of screen - element width */ } } .settingtitel { color: white; margin-top: -10px; margin-left: 10px; } .settingpopupicon, .settingpopupxicon { width: 40px; height: 40px; } .settingpopupxicon { float: right; margin-right: -200px; } .popuptitel, .settingpopupknap{ margin-top: 20px; clear: right; } .settingpopupknap, .settingpopupknap, .settingpopupknap, .messageframe { width: calc(100% - 20px); /*100% width - 20px margin*/ clear: both; margin-left: 10px; margin-right: 10px; } .popupcancelknap, .popupdoneknap { margin-top: 20px; margin-left: 10px; margin-right: 10px; } .popupcancelknap{ clear: left; } .popupdoneknap { float: right; } /*Styling for setting pop-up organismer - SLUT*/ /*ekstra style til share as pop-up*/ .frameforshareaspopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 440px; height: 100vh; max-height: 600px; border-radius: 5px; overflow-y: auto; } @media (min-width:441px){ /* Calculate left position, when width is over 400px */ .frameforshareaspopup { left: calc(50vw - 220px); /* Half of screen - element width */ } } .textarea { width: 100px; height: 100px; } /*ekstra style til share as pop-up - SLUT*/ /*ekstra style til schedule as pop-up*/ .timebutton { width: 80px; border-radius: 10px; } /*ekstra style til schedule as pop-up - slut*/ /*ekstra style til save as as pop-up*/ .frameforsavaspopup { position: absolute; top: calc(50% - 175px); /* Half of screen - half of element height */ left: 0; background-color: #222222; width: 100%; max-width:420px; height: 100vh; max-height: 350px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsavaspopup { left: calc(50vw - 210px); /* Half of screen - element width */ } } .popupcancelknap1 { float: left; margin-top: 20px; margin-left: 10px; } .popsaveknap { float: right; margin-top: 20px; margin-right: 40px; } /*ekstra style til save pop-up - slut*/ /*ekstra style til filter pop-up*/ .daterangecontainer { background: grey; float: left; } .daterangetitelinfilterpopup { font-size: 10px; float: left; margin-left: 10px; } .popupcancelknapfilter{ float: left; margin left: 10px; margin-top: 20px; } .clearallfilterknap { float: left; margin left: 10px; margin-top: 20px; } .popupdoneknapfilter{ float: right; margin-top: 20px; margin right: 30px; } /*ekstra style til filter pop-up - slut*/ /*ekstra style for create report pop up*/ .frameforcreatenewreportpopup { width: 420px; height: 350px; } /*ekstra style for create report pop up - slut*/

POP-UP SCHEDULE

Schedule

Type

Time

Your email

Message

HTML CSS JavaScript

Schedule

Type

Time

Your email

Message

 /*Styling for setting pop-up organismer*/ .frameforsettingpopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 450px; height: 100vh; max-height: 400px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsettingpopup { left: calc(50vw - 200px); /* Half of screen - element width */ } } .settingtitel { color: white; margin-top: -10px; margin-left: 10px; } .settingpopupicon, .settingpopupxicon { width: 40px; height: 40px; } .settingpopupxicon { float: right; margin-right: -200px; } .popuptitel, .settingpopupknap{ margin-top: 20px; clear: right; } .settingpopupknap, .settingpopupknap, .settingpopupknap, .messageframe { width: calc(100% - 20px); /*100% width - 20px margin*/ clear: both; margin-left: 10px; margin-right: 10px; } .popupcancelknap, .popupdoneknap { margin-top: 20px; margin-left: 10px; margin-right: 10px; } .popupcancelknap{ clear: left; } .popupdoneknap { float: right; } /*Styling for setting pop-up organismer - SLUT*/ /*ekstra style til share as pop-up*/ .frameforshareaspopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 440px; height: 100vh; max-height: 600px; border-radius: 5px; overflow-y: auto; } @media (min-width:441px){ /* Calculate left position, when width is over 400px */ .frameforshareaspopup { left: calc(50vw - 220px); /* Half of screen - element width */ } } .textarea { width: 100px; height: 100px; } /*ekstra style til share as pop-up - SLUT*/ /*ekstra style til schedule as pop-up*/ .timebutton { width: 80px; border-radius: 10px; } /*ekstra style til schedule as pop-up - slut*/ /*ekstra style til save as as pop-up*/ .frameforsavaspopup { position: absolute; top: calc(50% - 175px); /* Half of screen - half of element height */ left: 0; background-color: #222222; width: 100%; max-width:420px; height: 100vh; max-height: 350px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsavaspopup { left: calc(50vw - 210px); /* Half of screen - element width */ } } .popupcancelknap1 { float: left; margin-top: 20px; margin-left: 10px; } .popsaveknap { float: right; margin-top: 20px; margin-right: 40px; } /*ekstra style til save pop-up - slut*/ /*ekstra style til filter pop-up*/ .daterangecontainer { background: grey; float: left; } .daterangetitelinfilterpopup { font-size: 10px; float: left; margin-left: 10px; } .popupcancelknapfilter{ float: left; margin left: 10px; margin-top: 20px; } .clearallfilterknap { float: left; margin left: 10px; margin-top: 20px; } .popupdoneknapfilter{ float: right; margin-top: 20px; margin right: 30px; } /*ekstra style til filter pop-up - slut*/ /*ekstra style for create report pop up*/ .frameforcreatenewreportpopup { width: 420px; height: 350px; } /*ekstra style for create report pop up - slut*/

POP-UP SAVE AS ORGANISME

Save as

Save as

Save to

HTML CSS JavaScript

Save as

Save as

Save to

 /*Styling for setting pop-up organismer*/ .frameforsettingpopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 450px; height: 100vh; max-height: 400px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsettingpopup { left: calc(50vw - 200px); /* Half of screen - element width */ } } .settingtitel { color: white; margin-top: -10px; margin-left: 10px; } .settingpopupicon, .settingpopupxicon { width: 40px; height: 40px; } .settingpopupxicon { float: right; margin-right: -200px; } .popuptitel, .settingpopupknap{ margin-top: 20px; clear: right; } .settingpopupknap, .settingpopupknap, .settingpopupknap, .messageframe { width: calc(100% - 20px); /*100% width - 20px margin*/ clear: both; margin-left: 10px; margin-right: 10px; } .popupcancelknap, .popupdoneknap { margin-top: 20px; margin-left: 10px; margin-right: 10px; } .popupcancelknap{ clear: left; } .popupdoneknap { float: right; } /*Styling for setting pop-up organismer - SLUT*/ /*ekstra style til share as pop-up*/ .frameforshareaspopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 440px; height: 100vh; max-height: 600px; border-radius: 5px; overflow-y: auto; } @media (min-width:441px){ /* Calculate left position, when width is over 400px */ .frameforshareaspopup { left: calc(50vw - 220px); /* Half of screen - element width */ } } .textarea { width: 100px; height: 100px; } /*ekstra style til share as pop-up - SLUT*/ /*ekstra style til schedule as pop-up*/ .timebutton { width: 80px; border-radius: 10px; } /*ekstra style til schedule as pop-up - slut*/ /*ekstra style til save as as pop-up*/ .frameforsavaspopup { position: absolute; top: calc(50% - 175px); /* Half of screen - half of element height */ left: 0; background-color: #222222; width: 100%; max-width:420px; height: 100vh; max-height: 350px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsavaspopup { left: calc(50vw - 210px); /* Half of screen - element width */ } } .popupcancelknap1 { float: left; margin-top: 20px; margin-left: 10px; } .popsaveknap { float: right; margin-top: 20px; margin-right: 40px; } /*ekstra style til save pop-up - slut*/ /*ekstra style til filter pop-up*/ .daterangecontainer { background: grey; float: left; } .daterangetitelinfilterpopup { font-size: 10px; float: left; margin-left: 10px; } .popupcancelknapfilter{ float: left; margin left: 10px; margin-top: 20px; } .clearallfilterknap { float: left; margin left: 10px; margin-top: 20px; } .popupdoneknapfilter{ float: right; margin-top: 20px; margin right: 30px; } /*ekstra style til filter pop-up - slut*/ /*ekstra style for create report pop up*/ .frameforcreatenewreportpopup { width: 420px; height: 350px; } /*ekstra style for create report pop up - slut*/

POP-UP PRINT ORGANISME

Print report

Choose printer

Choose quantity

HTML CSS JavaScript

Print report

Choose printer

Choose quantity

 /*Styling for setting pop-up organismer*/ .frameforsettingpopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 450px; height: 100vh; max-height: 400px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsettingpopup { left: calc(50vw - 200px); /* Half of screen - element width */ } } .settingtitel { color: white; margin-top: -10px; margin-left: 10px; } .settingpopupicon, .settingpopupxicon { width: 40px; height: 40px; } .settingpopupxicon { float: right; margin-right: -200px; } .popuptitel, .settingpopupknap{ margin-top: 20px; clear: right; } .settingpopupknap, .settingpopupknap, .settingpopupknap, .messageframe { width: calc(100% - 20px); /*100% width - 20px margin*/ clear: both; margin-left: 10px; margin-right: 10px; } .popupcancelknap, .popupdoneknap { margin-top: 20px; margin-left: 10px; margin-right: 10px; } .popupcancelknap{ clear: left; } .popupdoneknap { float: right; } /*Styling for setting pop-up organismer - SLUT*/ /*ekstra style til share as pop-up*/ .frameforshareaspopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 440px; height: 100vh; max-height: 600px; border-radius: 5px; overflow-y: auto; } @media (min-width:441px){ /* Calculate left position, when width is over 400px */ .frameforshareaspopup { left: calc(50vw - 220px); /* Half of screen - element width */ } } .textarea { width: 100px; height: 100px; } /*ekstra style til share as pop-up - SLUT*/ /*ekstra style til schedule as pop-up*/ .timebutton { width: 80px; border-radius: 10px; } /*ekstra style til schedule as pop-up - slut*/ /*ekstra style til save as as pop-up*/ .frameforsavaspopup { position: absolute; top: calc(50% - 175px); /* Half of screen - half of element height */ left: 0; background-color: #222222; width: 100%; max-width:420px; height: 100vh; max-height: 350px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsavaspopup { left: calc(50vw - 210px); /* Half of screen - element width */ } } .popupcancelknap1 { float: left; margin-top: 20px; margin-left: 10px; } .popsaveknap { float: right; margin-top: 20px; margin-right: 40px; } /*ekstra style til save pop-up - slut*/ /*ekstra style til filter pop-up*/ .daterangecontainer { background: grey; float: left; } .daterangetitelinfilterpopup { font-size: 10px; float: left; margin-left: 10px; } .popupcancelknapfilter{ float: left; margin left: 10px; margin-top: 20px; } .clearallfilterknap { float: left; margin left: 10px; margin-top: 20px; } .popupdoneknapfilter{ float: right; margin-top: 20px; margin right: 30px; } /*ekstra style til filter pop-up - slut*/ /*ekstra style for create report pop up*/ .frameforcreatenewreportpopup { width: 420px; height: 350px; } /*ekstra style for create report pop up - slut*/

POP-UP FILTER ORGANISME

Filter

Date target

Result

Schedule

Schedule

HTML CSS JavaScript

Filter

Date target

Result

Schedule

Schedule

 /*Styling for setting pop-up organismer*/ .frameforsettingpopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 450px; height: 100vh; max-height: 400px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsettingpopup { left: calc(50vw - 200px); /* Half of screen - element width */ } } .settingtitel { color: white; margin-top: -10px; margin-left: 10px; } .settingpopupicon, .settingpopupxicon { width: 40px; height: 40px; } .settingpopupxicon { float: right; margin-right: -200px; } .popuptitel, .settingpopupknap{ margin-top: 20px; clear: right; } .settingpopupknap, .settingpopupknap, .settingpopupknap, .messageframe { width: calc(100% - 20px); /*100% width - 20px margin*/ clear: both; margin-left: 10px; margin-right: 10px; } .popupcancelknap, .popupdoneknap { margin-top: 20px; margin-left: 10px; margin-right: 10px; } .popupcancelknap{ clear: left; } .popupdoneknap { float: right; } /*Styling for setting pop-up organismer - SLUT*/ /*ekstra style til share as pop-up*/ .frameforshareaspopup { position: absolute; top: 10vh; left: 0; background-color: #222222; width: 100%; max-width: 440px; height: 100vh; max-height: 600px; border-radius: 5px; overflow-y: auto; } @media (min-width:441px){ /* Calculate left position, when width is over 400px */ .frameforshareaspopup { left: calc(50vw - 220px); /* Half of screen - element width */ } } .textarea { width: 100px; height: 100px; } /*ekstra style til share as pop-up - SLUT*/ /*ekstra style til schedule as pop-up*/ .timebutton { width: 80px; border-radius: 10px; } /*ekstra style til schedule as pop-up - slut*/ /*ekstra style til save as as pop-up*/ .frameforsavaspopup { position: absolute; top: calc(50% - 175px); /* Half of screen - half of element height */ left: 0; background-color: #222222; width: 100%; max-width:420px; height: 100vh; max-height: 350px; border-radius: 5px; overflow-y: auto; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .frameforsavaspopup { left: calc(50vw - 210px); /* Half of screen - element width */ } } .popupcancelknap1 { float: left; margin-top: 20px; margin-left: 10px; } .popsaveknap { float: right; margin-top: 20px; margin-right: 40px; } /*ekstra style til save pop-up - slut*/ /*ekstra style til filter pop-up*/ .daterangecontainer { background: grey; float: left; } .daterangetitelinfilterpopup { font-size: 10px; float: left; margin-left: 10px; } .popupcancelknapfilter{ float: left; margin left: 10px; margin-top: 20px; } .clearallfilterknap { float: left; margin left: 10px; margin-top: 20px; } .popupdoneknapfilter{ float: right; margin-top: 20px; margin right: 30px; } /*ekstra style til filter pop-up - slut*/ /*ekstra style for create report pop up*/ .frameforcreatenewreportpopup { width: 420px; height: 350px; } /*ekstra style for create report pop up - slut*/

Highcharts indhold

Highcharts initiation

HTML CSS JavaScript
/* -- HIGHCHARTS -- */ .highcharts-credits { display: none; } .highcharts:hover .highcharts-credits { display: block; } /* -- Highcharts graphs -- */ Highcharts.setOptions({ colors: ['#F05440', '#192440', '#F05440', '#337AB7', '#F0AD4E', '#00CD00', '#FF0000'], chart: { backgroundColor: "rgba(0,0,0,0)", borderWidth: 0, plotShadow: false, plotBorderWidth: 0 } }); document.addEventListener('DOMContentLoaded', function () { // Initiate graphs here }

Highcharts type: bar - preview

Bar

HTML CSS JavaScript

Bar

 .highcart-preview { position: relative; margin: 0; width: 100%; } .highcart-preview h4 { float: left; cursor: pointer; font-weight: 400; font-size: 18px; line-height: 25px; } .highcart-preview .star { float: right; } .aspect-one-to-one { position: relative; float:left; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ margin-top: 16px; } .highchart-button { position: absolute; top: 0; left: 0; float: left; clear: both; width: 100%; height: 100%; padding: 15px; border: none; border-radius: 5px; background-color: #6F6F6F; border-sizing: border-box; } // #highcharts-type-bar-preview-example var typeBarPreviewExample = Highcharts.chart('highcharts-type-bar-preview-example', { chart: { type: 'bar', animation: false, AnimationOptionsObject: false, backgroundColor: "#FFF", borderWidth: 0, plotShadow: false, plotBorderWidth: 1, plotBorderColor: 0, }, tooltip: { enabled: false }, legend: { enabled: false }, credits: { enabled: false }, plotOptions: { series:{ states: { inactive: { opacity: 1 }, hover: { enabled: false } } } }, title: { text: 'Bar', align: "left" }, xAxis: { title: { text: '' }, categories: ['A', 'B', 'C'], }, yAxis: { title: { text: '' }, }, series: [{ name: '1', data: [1, 3, 5] // 0 of caregoy 1 // 2 of caregoy 2 // 4 of caregoy 3 }, { name: '2', data: [2, 4, 6] // 1 of caregoy 1 // 3 of caregoy 2 // 5 of caregoy 3 }] });

Highcharts type: bar - page element

HTML CSS JavaScript
document.addEventListener('DOMContentLoaded', function () { var myChart = Highcharts.chart('highcharts-type-bar-example', { chart: { type: 'bar', }, title: { text: 'Graph title' }, xAxis: { title: { text: 'X-axis title' }, categories: ['Category 1', 'Category 2', 'Category 3'] }, yAxis: { title: { text: 'Y-axis title' } }, series: [{ name: 'Series name 1', data: [0, 2, 4] // 0 of caregoy 1 // 2 of caregoy 2 // 4 of caregoy 3 }, { name: 'Series name 2', data: [1, 3, 5] // 1 of caregoy 1 // 3 of caregoy 2 // 5 of caregoy 3 }] }); });

Highcharts type: column - preview

Column

HTML CSS JavaScript

Column

 .highcart-preview { position: relative; float: left; margin: 0; width: 33%; } .highcart-preview h4 { float: left; cursor: pointer; font-weight: 400; font-size: 18px; line-height: 25px; } .highcart-preview .star { float: right; } .aspect-one-to-one { position: relative; float:left; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ margin-top: 16px; } .highchart-button { position: absolute; top: 0; left: 0; float: left; clear: both; width: 100%; height: 100%; padding: 15px; border: none; border-radius: 5px; background-color: #6F6F6F; border-sizing: border-box; } // #highcharts-type-column-element-preview var typeColumnPreviewExample = new Highcharts.chart('highcharts-type-column-preview-example', { chart: { type: 'column', animation: false, AnimationOptionsObject: false, backgroundColor: "#FFF", borderWidth: 0, plotShadow: false, plotBorderWidth: 1, plotBorderColor: 0, }, tooltip: { enabled: false }, legend: { enabled: false }, credits: { enabled: false }, plotOptions: { series:{ states: { inactive: { opacity: 1 }, hover: { enabled: false } } } }, title: { text: 'column', align: "left" }, xAxis: { title: { text: '' }, categories: ['A', 'B', 'C'], }, yAxis: { title: { text: '' }, }, series: [{ name: '1', data: [1, 3, 5] // 0 of caregoy 1 // 2 of caregoy 2 // 4 of caregoy 3 }, { name: '2', data: [2, 4, 6] // 1 of caregoy 1 // 3 of caregoy 2 // 5 of caregoy 3 }] });

Highcharts type: column - page element

HTML CSS JavaScript
document.addEventListener('DOMContentLoaded', function () { var myChart = Highcharts.chart('highcharts-type-column-example', { chart: { type: 'column', }, title: { text: 'Graph title' }, xAxis: { title: { text: 'X-axis title' }, categories: ['Category 1', 'Category 2', 'Category 3'] }, yAxis: { title: { text: 'Y-axis title' } }, series: [{ name: 'Series name 1', data: [0, 2, 4] // 0 of caregoy 1 // 2 of caregoy 2 // 4 of caregoy 3 }, { name: 'Series name 2', data: [1, 3, 5] // 1 of caregoy 1 // 3 of caregoy 2 // 5 of caregoy 3 }] }); });

Highcharts type: line - preview

line

HTML CSS JavaScript

line

 .highcart-preview { position: relative; float: left; margin: 0; width: 33%; } .highcart-preview h4 { float: left; cursor: pointer; font-weight: 400; font-size: 18px; line-height: 25px; } .highcart-preview .star { float: right; } .aspect-one-to-one { position: relative; float:left; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ margin-top: 16px; } .highchart-button { position: absolute; top: 0; left: 0; float: left; clear: both; width: 100%; height: 100%; padding: 15px; border: none; border-radius: 5px; background-color: #6F6F6F; border-sizing: border-box; } // #highcharts-type-line-element-preview var typelinePreviewExample = new Highcharts.chart('highcharts-type-line-preview-example', { chart: { type: 'line', animation: false, AnimationOptionsObject: false, backgroundColor: "#FFF", borderWidth: 0, plotShadow: false, plotBorderWidth: 1, plotBorderColor: 0, }, tooltip: { enabled: false }, legend: { enabled: false }, credits: { enabled: false }, plotOptions: { series:{ states: { inactive: { opacity: 1 }, hover: { enabled: false } } } }, title: { text: 'line', align: "left" }, xAxis: { title: { text: '' }, categories: ['A', 'B', 'C'], }, yAxis: { title: { text: '' }, }, series: [{ name: '1', data: [1, 3, 5] // 0 of caregoy 1 // 2 of caregoy 2 // 4 of caregoy 3 }, { name: '2', data: [2, 4, 6] // 1 of caregoy 1 // 3 of caregoy 2 // 5 of caregoy 3 }] });

Highcharts type: line - page element

HTML CSS JavaScript
document.addEventListener('DOMContentLoaded', function () { var myChart = Highcharts.chart('highcharts-type-line-example', { chart: { type: 'line', }, title: { text: 'Graph title' }, xAxis: { title: { text: 'X-axis title' }, categories: ['Category 1', 'Category 2', 'Category 3'] }, yAxis: { title: { text: 'Y-axis title' } }, series: [{ name: 'Series name 1', data: [0, 2, 4] // 0 of caregoy 1 // 2 of caregoy 2 // 4 of caregoy 3 }, { name: 'Series name 2', data: [1, 3, 5] // 1 of caregoy 1 // 3 of caregoy 2 // 5 of caregoy 3 }] }); });

Highcharts type: pie - preview

pie

HTML CSS JavaScript

pie

 .highcart-preview { position: relative; float: left; margin: 0; width: 33%; } .highcart-preview h4 { float: left; cursor: pointer; font-weight: 400; font-size: 18px; line-height: 25px; } .highcart-preview .star { float: right; } .aspect-one-to-one { position: relative; float:left; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ margin-top: 16px; } .highchart-button { position: absolute; top: 0; left: 0; float: left; clear: both; width: 100%; height: 100%; padding: 15px; border: none; border-radius: 5px; background-color: #6F6F6F; border-sizing: border-box; } // #highcharts-type-pie-element-preview var typepiePreviewExample = Highcharts.chart('highcharts-type-pie-preview-example', { chart: { type: 'pie', animation: false, AnimationOptionsObject: false, backgroundColor: "#FFF", borderWidth: 0, plotShadow: false, plotBorderWidth: 1, plotBorderColor: 0, }, tooltip: { enabled: false }, legend: { enabled: false }, credits: { enabled: false }, plotOptions: { pie: { allowPointSelect: false, }, series:{ states: { inactive: { opacity: 1 }, hover: { enabled: false } } } }, title: { text: 'pie', align: "left" }, xAxis: { title: { text: '' }, categories: ['A', 'B', 'C'], }, yAxis: { title: { text: '' }, }, series: [{ name: 'ABC', colorByPoint: true, data: [{ name: 'A', y: 4, }, { name: 'B', y: 3 }, { name: 'C', y: 2 }, { name: 'D', y: 1 }] }] });

Highcharts type: pie - page element

HTML CSS JavaScript
// #highcharts-type-pie-element-example var typepieElementExample = Highcharts.chart('highcharts-type-pie-element-example', { chart: { type: 'pie', }, title: { text: 'Graph title' }, xAxis: { title: { text: 'X-axis title' }, categories: ['Category 1', 'Category 2', 'Category 3'] }, yAxis: { title: { text: 'Y-axis title' } }, series: [{ name: 'ABC', colorByPoint: true, data: [{ name: 'A', y: 3, }, { name: 'B', y: 2 }, { name: 'C', y: 1 }, { name: 'D', y: 1 }] }] });

Popup infobox

Placeholder text
HTML CSS JavaScript
Placeholder text
/* popup infobox css*/ .popupinfobox{ position: absolute; top: 10vh; left: 0; background-color: #D3D3D3; text-align: center; width: 100%; max-width: 400px; height: 100vh; max-height: 220px; border-radius: 12px; } @media (min-width:401px){ /* Calculate left position, when width is over 400px */ .popupinfobox { left: calc(50vw - 200px); /* Half of screen - element width */ } } .popupinfobox span { color: black; font-size: 30px; display:inline-block; margin-top: 65px; } .popupinfobox .close-icon, .popupinfobox .close-icon .X-icon { float: right; margin-left: 0; } .close-icon{ background-color: transparent; border: none; cursor: pointer; display: grid; } .X-icon{ margin-left: 365px; margin-top: 2px; } /*popup infobox css slut*/

Report preview

Report name
HTML CSS JavaScript
Report name
.preview-outbox{ background-color: #404040; width: 300px; height: 342px; border-radius: 8px; margin-top: 10px; } .rep-name{ color: white; font-size: 20px; display: inline-block; margin-top: 40px; margin-left: 18px; } .gear-icon{ background-color: transparent; border: none; cursor: pointer; } .gear-iconimg{ width: 9%; margin-left: 250px; display: block; margin-top: -24px; margin-bottom: 12 } .preview-inbox{ background-color: #6F6F6F; width: 276px; height: 250px; border-radius: 6px; display: inline-block; margin-left: 12px; margin-right: 12px; margin-bottom: 12px; margin-top: 0px; } .preview-img{ width: 90%; display: inline-block; margin-top: 29px; margin-bottom: 29px; margin-left: 14px; margin-right: 14px; }

Template preview

Template name
HTML CSS JavaScript
Template name
.preview-outbox{ background-color: #404040; width: 300px; height: 342px; border-radius: 8px; margin-top: 10px; } .preview-inbox{ background-color: #6F6F6F; width: 276px; height: 250px; border-radius: 6px; display: inline-block; margin-left: 12px; margin-right: 12px; margin-bottom: 12px; margin-top: 0px; } .preview-img{ width: 90%; display: inline-block; margin-top: 29px; margin-bottom: 29px; margin-left: 14px; margin-right: 14px; } .temp-name{ color: white; font-size: 20px; display: inline-block; margin-top: 10px; margin-left: 18px; } .favstar-icon{ background-color: transparent; border: none; cursor: pointer; } .favstar-iconimg{ width: 9%; margin-left: 250px; display: block; margin-top: -24px; margin-bottom: 12px; }

Report list search funktion

HTML CSS JavaScript
.searchInput { background-image: url('search.svg'); background-position: 10px 5px; background-repeat: no-repeat; width: 50%; font-size: 16px; padding: 10px 20px 5px 50px; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; margin-bottom: 10px; } /*List view*/ #reportUL { /* Remove default list styling */ list-style-type: none; padding: 0; margin: 0; } .report-listbox{ background-color: #6F6F6F; width: 80%; height: 4%; border-radius: 6px; display: inline-block; margin-top: 5px; } .rep-namelist{ color: black; font-size: 18px; display: list-item; margin-left: 15px; margin-top: 1px; } function search_report() { let input = document.getElementById('myInput').value input=input.toLowerCase(); let repList = document.getElementsByClassName('rep-namelist'); for (i = 0; i < repList.length; i++) { if (!repList[i].innerHTML.toLowerCase().includes(input)) { repList[i].style.display="none"; } else { repList[i].style.display="list-item"; } } }

Templates

Wrapper with content.

Example content, with 100% width
HTML eksempel CSS
Example content, with 100% width
/* - WRAPPER - */ .wrapper, #example .wrapper { float: none; width: 95%; margin: 0 auto; overflow: auto; } @media (min-width:1366px) { .wrapper, #example .wrapper { width: 75%; } } nav .wrapper, nav #example .wrapper { width: 100%; } @media (min-width:1920px) { nav .wrapper, nav #example .wrapper { width: 75%; } }

Wrapper in header.

HTML eksempel CSS
header { width: 100%; background-color: #222; } header .wrapper { width: 100%; } @media (min-width:1920px) { header .wrapper{ width: 75%; } }

preview page in editor

First .page element

This page is the actual size of an A4 page

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Second .page element

This page is scaled down, so it'll fit into the editor preview

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

HTML eksempel CSS Java Script
/*Here starts CSS for Editor page preview*/ .report-preview{ width: 100%; background-color: #6f6f6f; align-content: center; overflow-x: auto; padding: 0 2vw; box-sizing: border-box; } .pagediv{ margin: 0 auto; } .page { /* Styles for better appearance on screens only -- are reset to defaults in print styles later */ /* Reflect the paper width in the screen rendering (must match size from @page rule) */ width: 21cm; /* Reflect the paper height in the screen rendering (must match size from @page rule) */ min-height: 29.7cm; /* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */ padding-left: 2cm; padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; } .pageHorizontal { /* Styles for better appearance on screens only -- are reset to defaults in print styles later */ /* Reflect the paper width in the screen rendering (must match size from @page rule) */ width: 25.839cm; /* Reflect the paper height in the screen rendering (must match size from @page rule) */ min-height: 18.27cm; /* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */ padding-left: 2cm; padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; } .page, .pageHorizontal { /* Styles for better appearance on screens only -- are reset to defaults in print styles later */ /* Divide single pages with some space and center all pages horizontally */ margin: 1cm auto; /* Define a white paper background that sticks out from the darker overall background */ background: #fff; /* Show a drop shadow beneath each page */ box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2); /* Override outline from user agent stylesheets */ outline: 0; } /*Disse to funktioner lader brugeren skifte mellem editor tabs*/ function switchedit(switcheditpage) { let editpage = ["graphs", "text", "templates", "codeEditorTab"]; for(i = 0; i < editpage.length; i++){ if(switcheditpage == editpage[i]){ document.getElementById(editpage[i]).classList.remove("hidden"); } else{ document.getElementById(editpage[i]).classList.add("hidden"); } } } function switcheditbg(editbgswitch) { let editbg = ["graphsDiv", "textDiv", "templatesDiv", "codeDiv"]; for(i = 0; i < editbg.length; i++){ if(editbgswitch == editbg[i]){ document.getElementById(editbg[i]).classList.remove("lightbg"); } else{ document.getElementById(editbg[i]).classList.add("lightbg"); } } }

Editor Tabs

Template name
template-example
Template name
template-example
Template name
template-example
Template name
template-example
HTML eksempel CSS Java Script
/*Here starts CSS for header in editor*/ .editorHeader{ background-color: #BBBBBB; border-color: black; display: block; width: 100%; } /*Here starts CSS for Main in Editor*/ .mainEditor{ display: grid; grid-template-columns: 55% 45%; } /*Here starts CSS for Editor page preview*/ .report-preview{ width: 100%; background-color: #6f6f6f; align-content: center; overflow-x: auto; padding: 0 2vw; box-sizing: border-box; } .pagediv{ margin: 0 auto; } /*CSS for the A4 page in report preview in editor*/ .page { /* Styles for better appearance on screens only -- are reset to defaults in print styles later */ /* Reflect the paper width in the screen rendering (must match size from @page rule) */ width: 21cm; /* Reflect the paper height in the screen rendering (must match size from @page rule) */ min-height: 29.7cm; /* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */ padding-left: 2cm; padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; } .pageHorizontal { /* Styles for better appearance on screens only -- are reset to defaults in print styles later */ /* Reflect the paper width in the screen rendering (must match size from @page rule) */ width: 25.839cm; /* Reflect the paper height in the screen rendering (must match size from @page rule) */ min-height: 18.27cm; /* Reflect the actual page margin/padding on paper in the screen rendering (must match margin from @page rule) */ padding-left: 2cm; padding-top: 2cm; padding-right: 2cm; padding-bottom: 2cm; } .page, .pageHorizontal { /* Styles for better appearance on screens only -- are reset to defaults in print styles later */ /* Divide single pages with some space and center all pages horizontally */ margin: 1cm auto; /* Define a white paper background that sticks out from the darker overall background */ background: #fff; /* Show a drop shadow beneath each page */ box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2); /* Override outline from user agent stylesheets */ outline: 0; } /*Here starts CSS for editor tabs*/ .editor{ float: right; width: 100%; height: 100%; background-color: #404040; } .editornav{ width: 100%; display: grid; grid-template-columns: auto auto auto auto; } .tabsnavbubtton{ display: grid; margin: 0 auto; width: 100%; height: 50px; text-align: center; } .tabsnavbubtton a{ text-decoration: none; color: #fff; font-size: 24px; margin: auto; cursor: pointer; } .lightbg{ background-color: #6F6F6F; } .editortabs{ margin: 20px 10px 0; background-color: #505050; width: calc(100% - 20px); /* 100% width - 20px margin */ } .graphsOverDiv{ display: grid; grid-template-columns: auto auto; width: 100%; } .graphs1{ width: 98%; display: grid; } .templates-overDiv{ width: 100%; display: grid; grid-template-columns: auto; } @media (min-width:1366px){ .templates-overDiv{ grid-template-columns: auto auto; } } #codeEditorTab, #text, #graphs, #templates{ width: 99%; } .codeEditorOverDiv{ width: 100%; margin: 0 auto; } .codeEditor{ margin: 0 auto; width: 99%; height: 1000px; background-color: #fff; display: block; float: right; padding: 15px; } .textTool{ width: 100%; margin: 20px 0 200px 0; padding: 0 20px; } .textTool label{ float: left; width: 100%; color: #fff; font-weight: bold; } .textToolImgButton{ background-color: #303030; border: none; border-radius: 12px; width: 40px; height: 40px; float: left; cursor: pointer; } .textToolImgButton img{ margin: 5px; width: 30px; float: none; } .textEditDiv{ color: #fff; margin-right: 30px; } .textEditDiv label{ margin-right: 50px; width: auto; } .codeEditorButtons{ width: 80%; float: right; margin: 0 auto; display: block; padding: 5px; } /*Disse to funktioner lader brugeren skifte mellem editor tabs*/ function switchedit(switcheditpage) { let editpage = ["graphs", "text", "templates", "codeEditorTab"]; for(i = 0; i < editpage.length; i++){ if(switcheditpage == editpage[i]){ document.getElementById(editpage[i]).classList.remove("hidden"); } else{ document.getElementById(editpage[i]).classList.add("hidden"); } } } function switcheditbg(editbgswitch) { let editbg = ["graphsDiv", "textDiv", "templatesDiv", "codeDiv"]; for(i = 0; i < editbg.length; i++){ if(editbgswitch == editbg[i]){ document.getElementById(editbg[i]).classList.remove("lightbg"); } else{ document.getElementById(editbg[i]).classList.add("lightbg"); } } }

Pages