Skip to content

Commit 677b5fa

Browse files
klascalklascal
committed
Weergave uitleg verbeterd
1 parent e70e4de commit 677b5fa

3 files changed

Lines changed: 21 additions & 82 deletions

File tree

‎index.html‎

Lines changed: 11 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link
77
rel="stylesheet"
8-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_back,arrow_back_ios_new,arrow_forward_ios,check,close,delete,error,event,link,more_horiz,notification_multiple,palette,qr_code_scanner,settings"
8+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_back,arrow_back_ios_new,arrow_forward_ios,bar_chart,check,close,delete,error,event,link,menu,more_horiz,notification_multiple,palette,qr_code_scanner,settings"
99
/>
1010
<link rel="stylesheet" href="dialog-polyfill.min.css" />
1111
<link rel="stylesheet" href="material.css" />
@@ -599,68 +599,20 @@ <h2>Instellingen</h2>
599599
<ol>
600600
<li>
601601
Open het
602-
<svg
603-
xmlns="http://www.w3.org/2000/svg"
604-
viewBox="0 -960 960 960"
605-
id="icon"
606-
>
607-
<path
608-
d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h640q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240H160Zm0-200q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h640q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640q17 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z"
609-
/></svg
610-
><b>Menu</b>
602+
<span id="icon">menu</span><b>Menu</b>
611603
</li>
612604
<li>
613605
<span>Klik op</span>
614-
<b
615-
><svg
616-
xmlns="http://www.w3.org/2000/svg"
617-
fill="none"
618-
id="icon"
619-
>
620-
<path
621-
d="M12.012 2.25c.734.008 1.465.093 2.182.253a.75.75 0 0 1 .582.649l.17 1.527a1.384 1.384 0 0 0 1.927 1.116l1.401-.615a.75.75 0 0 1 .85.174 9.792 9.792 0 0 1 2.204 3.792.75.75 0 0 1-.271.825l-1.242.916a1.381 1.381 0 0 0 0 2.226l1.243.915a.75.75 0 0 1 .272.826 9.797 9.797 0 0 1-2.204 3.792.75.75 0 0 1-.848.175l-1.407-.617a1.38 1.38 0 0 0-1.926 1.114l-.169 1.526a.75.75 0 0 1-.572.647 9.518 9.518 0 0 1-4.406 0 .75.75 0 0 1-.572-.647l-.168-1.524a1.382 1.382 0 0 0-1.926-1.11l-1.406.616a.75.75 0 0 1-.849-.175 9.798 9.798 0 0 1-2.204-3.796.75.75 0 0 1 .272-.826l1.243-.916a1.38 1.38 0 0 0 0-2.226l-1.243-.914a.75.75 0 0 1-.271-.826 9.793 9.793 0 0 1 2.204-3.792.75.75 0 0 1 .85-.174l1.4.615a1.387 1.387 0 0 0 1.93-1.118l.17-1.526a.75.75 0 0 1 .583-.65c.717-.159 1.45-.243 2.201-.252ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"
622-
></path></svg
623-
>Instellingen</b
624-
>
606+
<span id="icon">settings</span><b>Instellingen</b>
625607
</li>
626608
<li>
627609
<span>Klik op</span>
628-
<b
629-
><svg
630-
xmlns="http://www.w3.org/2000/svg"
631-
height="25"
632-
id="icon"
633-
viewBox="0 -960 757.257 880"
634-
>
635-
<defs>
636-
<clipPath id="a" clipPathUnits="userSpaceOnUse">
637-
<path
638-
d="M200-920v880h671.875v-311.484l-.08.08c-4.442 3.705-8.552 7.887-12.813 11.797-4.585 4.389-9.5 8.3-14.843 11.718-5.975 3.848-12.72 5.964-19.61 7.422-5.12.535-10.027 1.658-14.843 3.438-6.077 2.558-12.117 5.158-18.282 7.5-3.862 1.553-7.792 2.656-11.875 3.437-3.813.721-7.691.996-11.562 1.172-4.513.168-9.078.204-13.594.236-4.547-.033-9.05.068-13.594.236-3.996.256-7.955.691-11.953.938-8.061.344-16.15.456-24.219.547-6.795.372-13.53-.252-20.234-1.328-7.895-1.342-15.622-3.438-23.36-5.469-5.853-1.397-11.408-3.83-17.109-5.703a100.107 100.107 0 0 1-20-7.422c-11.459-6.314-21.069-15.412-30.703-24.14-9.21-8.126-17.398-17.399-24.062-27.735-1.947-3.02-3.7-6.136-5.547-9.219-10.588-19.347-19.371-39.586-28.75-59.531-4.134-8.627-8.037-17.425-13.125-25.547-4.112-6.738-7.273-14.045-10.469-21.25-3.775-8.762-6.606-17.861-8.906-27.11-2.407-11.895-5.335-23.658-8.438-35.39-2.136-8.099-4.402-16.154-6.328-24.297-1.82-8.476-4.091-16.806-6.406-25.156-1.206-4.42-2.4-8.861-3.281-13.36-.196-1.09-.425-2.191-.625-3.28-8.223-7.104-7.473-17.123.94-22.975 4.764-10.616 15.876-12.443 24.14-4.063 3.014.292 6.034.63 9.062.704 6.635-.058 13.293-.441 19.922-.704 4.56-.642 9.39.317 13.906-.625 2.36-.935 4.7-1.775 7.11-2.578 6.582-1.798 13.416-2.737 20.156-3.75 6.44-.985 12.89-1.54 19.375-2.109 7.379-.617 14.79-.974 22.188-1.25 7.61-.318 15.154-1.371 22.734-2.11 6.229-.573 12.504-1.128 18.75-1.484 5.161-.242 10.303-.258 15.469-.312 2.84-.028 5.674-.067 8.515-.078 5.132.012 9.966 1.75 14.61 3.75 4.236 1.712 7.912 4.33 11.562 7.031 1.369.874 2.507 2.136 3.907 2.969.124.074-.456-.288-.312-.312.67-.114 1.247.523 1.874.78 1.406.471 2.864 1.31 4.375.938 1.133-.046 2.193-.42 3.282-.703 5.247-1.49 10.684-1.93 16.093-2.422 7.283-.585 14.576-.95 21.875-1.25 4.418-.185 8.86-.353 13.282-.39 5.626-.025 11.248-.012 16.875 0 4.017-.186 7.93.174 11.875.937 5.25 1.426 10.184 3.683 15.156 5.86 3.789 1.836 7.723 3.369 11.719 4.687 4.673 1.27 8.873 3.625 13.125 5.86 2.796 1.184 5.632 2.318 8.359 3.671 4.745 2.5 8.898 5.903 12.812 9.531a88.261 88.261 0 0 1 10.782 13.282c.404.63.701 1.316 1.093 1.953V-920Zm442.344 296.016c-.728.064-1.462.09-2.188.156-8.268.804-16.46 1.959-24.765 2.266-6.817.253-13.67.532-20.47 1.093-5.781.508-11.602.997-17.343 1.875-4.81.718-9.597 1.513-14.375 2.422-4.49 1.457-8.782 3.472-13.516 4.063-5.65.642-11.352.633-17.03.86-5.963.235-11.926.441-17.891.546 2.355 8.5 4.7 17 6.562 25.625 1.838 7.842 4.054 15.647 6.094 23.438 3.147 11.92 6.169 23.847 8.594 35.937 1.772 7.289 4.03 14.492 6.953 21.406 2.536 5.734 4.995 11.482 8.203 16.875 1.915 3.093 3.295 6.478 5 9.688.541-2.424 1.395-4.625 1.953-7.031-3.87-5.852-6.037-12.36-3.906-20.625 1.76-6.83 5.09-9.535 9.453-14.532.875-.505 1.807-.922 2.656-1.484-1.93-1.422-4.008-2.764-5.703-4.453-.964-.961-.288-2.551-1.094-3.594-.638-1.299-2.333-1.724-2.812-3.125-.94-2.747-1.891-5.614-1.797-8.516.024-.72.376-1.396.469-2.109-.758-4.032-4.122-7.232-3.516-11.484 1.276-8.945 4.312-13.557 8.204-21.407 8.06-12.69 18.64-26.714 33.203-32.421 2.554-1.002 5.288-1.492 7.968-2.11 5.786-1.901 12.237-1.283 19.141.938.46.139.945.176 1.406.312 6.376-5.757 13.827-9.615 22.031-12.031-.668-.925-.763-1.692-1.484-2.578zm172.11 18.359c1.304.945 2.605 1.894 3.906 2.812 2.168 2.411 4.681 4.493 6.484 7.188.555.83-.24 1.948.236 2.812 2.533.194 4.951-.93 7.5-.625 3.027.57 4.53 2.563 7.031 3.594-1.135-1.449-2.246-2.918-3.437-4.297-1.43-1.423-3.002-2.641-4.688-3.75-2.824-1.544-6.043-2.262-8.828-3.906-2.582-1.365-5.018-2.964-7.89-3.672-.109-.037-.205-.119-.313-.156zM615.624-373.906c.384.332.546.847.938 1.172.67.609 1.439 1.106 2.109 1.719-.779-.746-1.247-1.755-2.031-2.5-.336-.132-.678-.256-1.016-.392zm3.047 2.89c6.685 6.115 13.263 12.465 21.015 17.188.244.128.538.112.782.236-7.862-4.895-14.989-11.28-21.797-17.422zm25.078 10.079c.048.184.104.364.156.546.032.108.364.18.312.08-.116-.232-.348-.396-.469-.625z"
639-
style="
640-
fill: red;
641-
fill-opacity: 1;
642-
fill-rule: nonzero;
643-
stroke: none;
644-
stroke-width: 40;
645-
"
646-
/>
647-
</clipPath>
648-
</defs>
649-
<path
650-
d="M280-920c-22 0-40.818 7.849-56.484 23.516C207.849-880.818 200-862 200-840v720c0 22 7.849 40.818 23.516 56.484C239.182-47.849 258-40 280-40h400c22 0 40.818-7.849 56.484-23.516C752.151-79.182 760-98 760-120v-120c0-11.333-3.818-20.849-11.484-28.516C740.849-276.182 731.333-280 720-280c-11.333 0-20.849 3.818-28.516 11.484C683.818-260.849 680-251.333 680-240H280v-480h400c0 11.333 3.818 20.849 11.484 28.516C699.151-683.818 708.667-680 720-680c11.333 0 20.849-3.818 28.516-11.484C756.182-699.151 760-708.667 760-720v-120c0-22-7.849-40.818-23.516-56.484C720.818-912.151 702-920 680-920Zm310.078 532.813 2.89 5.156c2.667 4.666 6.35 7.864 11.016 9.531 1.278.456 2.552-.341 3.828-.156-6.225-4.454-12.202-9.247-17.734-14.531zm167.11 48.984c-.21.03-.718.122-.938.156-4.336 1.104-8.618 2.386-13.047 3.047-.861.107-3.434.455-2.578.313 14.649-2.443-3.375.59-6.484.937-3.752.4-7.56.67-11.328.86-4.004.18-7.947.139-11.954.156-9.913.327-19.797-1.114-29.453-3.204-.954-.208-1.866-.55-2.812-.78.873 4.641 2.623 8.705 5.937 11.718 3.667 3.333 8.104 5 13.438 5h44.062c5.334 0 9.771-1.667 13.438-5 3.138-2.853 4.67-6.783 5.625-11.094-1.338-.627-2.57-1.473-3.907-2.11z"
651-
clip-path="url(#a)"
652-
transform="matrix(-1 0 0 1 957.257 -40)"
653-
/>
654-
<path
655-
d="M358.315-401.245q49.567 0 84.503-35.136t34.936-84.988q0-49.851-34.936-84.987-34.936-35.137-84.503-35.137h-71.663q-10.152 0-17.02 6.908-6.867 6.907-6.867 17.117t6.867 17.118q6.868 6.907 17.02 6.907h71.663q29.86 0 50.761 21.022 20.902 21.021 20.902 51.052t-20.902 51.053q-20.901 21.022-50.76 21.022h-71.664q-10.152 0-17.02 6.907-6.867 6.907-6.867 17.118 0 10.21 6.867 17.117 6.868 6.907 17.02 6.907zm-47.775-96.099q10.152 0 17.02-6.907t6.868-17.118q0-10.21-6.868-17.117t-17.02-6.907H167.214q-10.152 0-17.02 6.907t-6.868 17.117q0 10.211 6.868 17.118 6.868 6.907 17.02 6.907zm-119.439 96.1q10.153 0 17.02-6.908 6.868-6.907 6.868-17.117 0-10.211-6.868-17.118-6.867-6.907-17.02-6.907h-71.663q-29.86 0-50.76-21.022-20.903-21.022-20.903-51.053 0-30.03 20.902-51.052t50.761-21.022h71.663q10.153 0 17.02-6.907 6.868-6.907 6.868-17.118 0-10.21-6.868-17.117-6.867-6.908-17.02-6.908h-71.663q-49.566 0-84.502 35.137Q0-571.22 0-521.37q0 49.852 34.936 84.988t84.502 35.136z"
656-
style="stroke-width: 0.598905"
657-
/></svg
658-
>Koppel externe applicatie</b
659-
>
610+
<span id="icon">link</span
611+
><b>Koppel externe applicatie</b>
660612
</li>
661613
<li>
662-
De bovenste regel is je <b>Schoolnaam</b> (het deel voor
663-
.zportal.nl) en de regel daaronder je <b>Koppelcode</b>
614+
De bovenste regel is je <b>schoolnaam</b> (het deel voor
615+
.zportal.nl) en de regel daaronder je <b>koppelcode</b>
664616
</li>
665617
<li>Typ het over in Klascal of scan de QR-code</li>
666618
</ol>
@@ -969,15 +921,7 @@ <h2>Instellingen</h2>
969921
background-color: var(--primary-foreground);
970922
"
971923
>
972-
<svg
973-
xmlns="http://www.w3.org/2000/svg"
974-
viewBox="0 -960 960 960"
975-
id="icon"
976-
>
977-
<path
978-
d="M120-680q-17 0-28.5-11.5T80-720v-120q0-17 11.5-28.5T120-880h120q17 0 28.5 11.5T280-840q0 17-11.5 28.5T240-800h-80v80q0 17-11.5 28.5T120-680Zm0 600q-17 0-28.5-11.5T80-120v-120q0-17 11.5-28.5T120-280q17 0 28.5 11.5T160-240v80h80q17 0 28.5 11.5T280-120q0 17-11.5 28.5T240-80H120Zm600 0q-17 0-28.5-11.5T680-120q0-17 11.5-28.5T720-160h80v-80q0-17 11.5-28.5T840-280q17 0 28.5 11.5T880-240v120q0 17-11.5 28.5T840-80H720Zm91.5-611.5Q800-703 800-720v-80h-80q-17 0-28.5-11.5T680-840q0-17 11.5-28.5T720-880h120q17 0 28.5 11.5T880-840v120q0 17-11.5 28.5T840-680q-17 0-28.5-11.5ZM700-200v-60h60v60h-60Zm0-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm120-120v-60h60v60h-60Zm-60 60v-60h60v60h-60Zm-60-60v-60h60v60h-60Zm40-140q-17 0-28.5-11.5T520-560v-160q0-17 11.5-28.5T560-760h160q17 0 28.5 11.5T760-720v160q0 17-11.5 28.5T720-520H560ZM240-200q-17 0-28.5-11.5T200-240v-160q0-17 11.5-28.5T240-440h160q17 0 28.5 11.5T440-400v160q0 17-11.5 28.5T400-200H240Zm0-320q-17 0-28.5-11.5T200-560v-160q0-17 11.5-28.5T240-760h160q17 0 28.5 11.5T440-720v160q0 17-11.5 28.5T400-520H240Zm20 260h120v-120H260v120Zm0-320h120v-120H260v120Zm320 0h120v-120H580v120Z"
979-
/>
980-
</svg>
924+
<span id="icon">qr_code_scanner</span>
981925
<span>QR-code scannen</span>
982926
</button>
983927
</div>
@@ -1240,18 +1184,10 @@ <h2>Instellingen</h2>
12401184
</button>
12411185
<!--To do: JS hiervoor toevoegen
12421186
<button id="submenu" class="switch switch--2">
1243-
<svg
1244-
xmlns="http://www.w3.org/2000/svg"
1245-
viewBox="0 -960 960 960"
1246-
id="icon"
1247-
>
1248-
<path
1249-
d="M680-160q-17 0-28.5-11.5T640-200v-200q0-17 11.5-28.5T680-440h80q17 0 28.5 11.5T800-400v200q0 17-11.5 28.5T760-160h-80Zm-240 0q-17 0-28.5-11.5T400-200v-560q0-17 11.5-28.5T440-800h80q17 0 28.5 11.5T560-760v560q0 17-11.5 28.5T520-160h-80Zm-240 0q-17 0-28.5-11.5T160-200v-360q0-17 11.5-28.5T200-600h80q17 0 28.5 11.5T320-560v360q0 17-11.5 28.5T280-160h-80Z"
1250-
/>
1251-
</svg>
1187+
<span id="icon">bar_chart</span>
12521188
<div class="analytics-text">
1253-
<label for="analytics">Analyses</label>
1254-
<small>Analyses van PostHog</small>
1189+
<label for="analytics">Statistieken</label>
1190+
<small>Via PostHog</small>
12551191
</div>
12561192
<label class="switch__label">
12571193
<input type="checkbox" id="analytics" class="switch__input" />

‎material.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,7 +433,7 @@ body[data-theme="pink monochrome"] {
433433
background: var(--checked-thumb-background);
434434
content: "check";
435435
text-align: center;
436-
line-height: 1.3;
436+
line-height: 1.35;
437437
color: var(--checked-background);
438438
font-family: Material Symbols Rounded;
439439
font-size: 18px;

‎style.css‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -675,9 +675,6 @@ code {
675675
dialog details summary {
676676
cursor: pointer;
677677
}
678-
dialog details {
679-
margin-bottom: 4px;
680-
}
681678
details {
682679
overflow: hidden;
683680
font-weight: 450;
@@ -710,7 +707,8 @@ details[open]::details-content {
710707
}
711708
ol,
712709
ul {
713-
padding-left: 20px;
710+
padding-left: 21px;
711+
margin: 0;
714712
}
715713
.pill {
716714
border-radius: 0.5rem;
@@ -771,13 +769,12 @@ small {
771769
margin-left: 0;
772770
margin-bottom: 2px;
773771
}
774-
li {
772+
li:not(:last-of-type) {
775773
margin-bottom: 5px;
776774
}
777775
::marker {
778776
font-weight: bold;
779777
color: var(--primary-light);
780-
font-family: system-ui;
781778
}
782779
#dayBtn,
783780
#weekBtn {
@@ -1011,6 +1008,12 @@ label {
10111008
line-height: 1;
10121009
font-variation-settings: "FILL" 1;
10131010
}
1011+
#dialog li #icon {
1012+
font-variation-settings: "FILL" 0;
1013+
padding: 0.4rem;
1014+
margin-right: 0.25rem;
1015+
display: inline-block;
1016+
}
10141017
#content .submenu {
10151018
display: none;
10161019
}

0 commit comments

Comments
 (0)