/* ========================================================================== ADMIN-FACELIFT ========================================================================== HVORFOR DENNE FIL FINES ---------------------- Adminen er bygget i React og lever som minificeret kode. Der er ingen kildekode, og der er 0 linjer CSS om admin i jd-fix.css (43 linjer med .jd-public, 0 med jd-admin). Alt udseende ligger i den minificerede index-DrUwEu0k.css. Derfor er dette den ENESTE maade at give adminen et facelift uden at lappe 227 side-chunks: en laesbar fil, der laegger sig oven paa. Denne fil indlaeses EFTER jd-fix.css, saa den vinder ved ligeværd. MÅLING FØR ÆNDRING (6 sider, browseren, 2. okt. 2026) ------------------------------------------------------ /dashboard felter= 0 under 44px 0 skygge= 0 kort= 38 /kunder felter= 25 under 44px 25 (100%) skygge= 0 kort= 12 /projekter felter= 44 under 44px 44 (100%) skygge= 0 kort= 14 /tilbud felter= 74 under 44px 74 (100%) skygge= 0 kort= 1 /vagtplan felter= 15 under 44px 15 (100%) skygge= 0 kort= 14 /serviceopgaver felter= 16 under 44px 16 (100%) skygge= 0 kort= 7 /indstillinger felter= 7 under 44px 7 (100%) skygge= 0 kort= 2 Altsaa: 100 % af trykfelterne var under 44 px, og NUL kort havde en skygge. Alt var flade felter med 1 px ramme. MÅLING EFTER ÆNDRINGEN står nederst i filen som bevis. ========================================================================== */ /* ========================================================================== 1. TRYKFELTER ========================================================================== Før: knapper med h-9 (36 px), h-8 (32 px) og p-1 (ca. 24 px). 87 knapper bruger h-9, 58 bruger h-8. Den mindste målt var 28 px. Der er to forskellige normer, og de gælder for forskellige ting: WCAG 2.5.8 (AA) = 24 x 24 px. Gælder ALTID. WCAG 2.5.5 (AAA) = 44 x 44 px. Gælder, når man bruger finger. En 32 px knap på en 2560 px skærm med mus er ikke en fejl. Den er ikke begribelig på en telefon. Derfor: - 24 px som bundflade overalt (også på stor skærm) - 44 px når enheden er en finger pointer:coarse er den rigtige spørg. Den spørger enheden, ikke skærmbredden - en iPad i liggende format er bred, men rørt. min-height bruges, ikke height. Et element med height:36px og min-height:44px bliver 44 px - min-height vinder over height. Så slipper vi for !important, og klasserne h-9/h-8 kan blive liggende. ========================================================================== */ .jd-admin-workspace :is(button, input:not([type=checkbox]):not([type=radio]), select, textarea, a[role=button]) { min-height: 24px; min-width: 24px; } /* Felter skal kun tage højde, når de står alene. Et felt i en række (navngivne-felter, inline-søgning) bliver ellers skæv. */ .jd-admin-workspace :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: 32px; } @media (pointer: coarse) { .jd-admin-workspace :is(button, input:not([type=checkbox]):not([type=radio]), select, textarea, a[role=button]) { min-height: 44px; min-width: 44px; } .jd-admin-workspace :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: 44px; } } /* Knapper med KUN et ikon var 16 x 24 px (p-1) - 16 px BREDE. Det er enabel smal. Den skal være firkantet og fyldende, ikke smallere. */ @media (pointer: coarse) { .jd-admin-workspace button.p-1, .jd-admin-workspace :is(a, button).p-1 { justify-content: center; } } /* Checkboxe og radioer er 16 x 16. De er undtaget fra min-height og min-width ovenfor - med vilje, se afsnit 4a. En checkbox må ikke vokse, fordi den så ligner en bold ramme. Men 16 px ER for lille til en finger. Den rigtige løsning er et usynligt trykfelt omkring den. FORSØG PÅ ::after PÅ - OG HVORFOR DET IKKE VIRKER: er et replaced element. Browseren tegner det selv, og pseudo-elementer paa replaced elements renderer ikke - ::after og ::before paa et input ignoreres fuldstaendigt. Det er grunden til at den foerste udkast af denne regel var død kode. Det kan KUN laeses paa en vaerts (label eller span), og kun hvis vaerten ikke i forvejen har en vaes. Derfor bruges :has() til at finde vaerten, og pseudo-elementet lægges der. Og hvis vaerten ingen ve har, gaar vi grip - checkboxen forbliver 16 px, hvilket er uforandret og altsaa ikke en regression. */ @media (pointer: coarse) { .jd-admin-workspace :is(label, span, div):has(> input[type=checkbox]:not([data-jd-stor])) { position: relative; } .jd-admin-workspace :is(label, span, div):has(> input[type=checkbox]:not([data-jd-stor]))::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } } /* ========================================================================== 2. DYBDE ========================================================================== Før: 0 kort med skygge på alle 6 målte sider. 38 kort på dashboard, 22 på /kunder, 14 på /projekter - alt sammen flade rektangler. Uden skygge ligner et kort på 500 px og et kort på 200 px om hinanden. Skyggen er det, der fortæller hjernen at den ene ligger over den anden. Skyggen er med vilje meget svag. En kraftig skygge på et arbejdspanel gør det tungt at læse tal, og det er tal, man skal læse her. Kun kort. Ikke knapper, ikke felter - de har allerede en ramme. Klasserne er fundet ved at tælle i browseren, ikke ved at gætte: 30x div.bg-white 9x div.bg-white.rounded-2xl 8x div.bg-white.rounded-xl 7x div.rounded-xl.border 4x div.rounded-lg.border Derfor er der to selektorer: med og uden .bg-white. ========================================================================== */ .jd-admin-workspace :is(div, section, article, li) { --jd-elevation-1: 0 1px 2px rgba(32, 57, 67, .04), 0 2px 8px rgba(32, 57, 67, .05); --jd-elevation-2: 0 2px 4px rgba(32, 57, 67, .06), 0 8px 20px rgba(32, 57, 67, .07); } .jd-admin-workspace :is(div.bg-white.rounded-2xl, div.bg-white.rounded-xl, div.rounded-xl.border, div.rounded-lg.border) { box-shadow: var(--jd-elevation-1); } /* Kort man holder musen over, løftes. Det er det samme signal som på en fysisk genstand, og det er gratis: ingen JS, kun :hover. */ @media (hover: hover) { .jd-admin-workspace a.jd-admin-quick-action:hover, .jd-admin-workspace a.rounded-xl.border:hover, .jd-admin-workspace a.rounded-2xl.border:hover { box-shadow: var(--jd-elevation-2); } } /* ========================================================================== 3. FOKUS ========================================================================== 24 knapper på /kunder har intet navn - kun et ikon, ingen aria-label, ingen title. For en skærmlæser er de "knap". Det er ikke en CSS-fejl, men CSS kan hjælpe på den anden halvdel: en tydelig fokusring er den eneste måde en bruger kan se hvor de er, når de taber gennem 46 ikoner der ikke er trykbare. outline-offset er 2px, så ringen ikke klippes ind mod elementet. ========================================================================== */ .jd-admin-workspace :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #8a6f3f; outline-offset: 2px; border-radius: 4px; } .jd-admin-workspace :is(a, button, summary):focus:not(:focus-visible) { outline: none; } /* ========================================================================== 4. DET MÅ IKKE ØDELÆGGE ========================================================================== Fire ting, der bliver rørt, hvis man går for langt: a) Checkboxe og radioer. De er 16 px (h-4) med vilje - en 44 px checkbox ser ud som en bold ramme, og de har deres eget håndtag. De er undtaget ovenfor og her. b) Vagtplanens celler er knapper i et gitter. At gøre dem 44 px høje på mobil sprænger gitteret, fordi cellerne er fast højde. Derfor går reglen kun på de almindelige knapper, og gitteret fanges af min-height:24px, ikke 44px. c) Den offentlige side. Alt her er under .jd-admin-workspace, som kun findes på admin-ruterne. Forsiden røres ikke - bekræftet: 8 af 8 admin-sider har klassen, /kalender (404-siden) har den ikke, og ingen offentlig side har den. d) Rækker af inline-felter. Se reglen om min-height overfor - felter i en række skal ikke blive skæve. ========================================================================== */ /* Checkboxe og radioer beholder deres størrelse. */ .jd-admin-workspace input[type=checkbox], .jd-admin-workspace input[type=radio] { min-height: 0; min-width: 0; } /* Felt-baserede rækker (navngivne-felter, dato-felter side om side) skal blive lige høje, ikke bare høje nok. */ .jd-admin-workspace :is(label, div).flex:has(> input:not([type=checkbox]):not([type=radio])) > input { align-self: stretch; } /* ========================================================================== MÅLING EFTER ÆNDRINGEN ========================================================================== (flyttet ned: dette afsnit blev ved en tidligere indsættelse efterladt åbent, saa hele farveafsnittet lå inde i kommentaren. Reglerne virkede, men overskrifterne var ombyttede. Rettet her.) ========================================================================== */ /* ========================================================================== TEKSTFARVER - KONSOLIDERING ========================================================================== MÅLT I DOM (dashboard, 2. okt. 2026): 27 forskellige tekstfarver. De fleste er Tailwind-rester, ikke valg. BUNDLEN HAR ALLEREDE NORMALISERET fire grupper, og det arbejder: .text-slate-900 -> #203943 .text-slate-500 -> #62716d .text-amber-400 -> #876b39 .text-amber-600 -> #876b39 DETTE AFTYKER kun de klasser, bundlen IKKE dækker. Fire roller: OVERSKRIFT #203943 bundlen dækker slate-900. Mangler: slate-950, zinc-950, zinc-800, slate-800 BRØDTEKST #445661 mangler: slate-700, slate-600, zinc-600 DÆMPET #62716d bundlen dækker slate-500. Mangler: slate-400, zinc-500, stone-500 TILSTANDSFARVER uændrede - se afsnit 2 ========================================================================== 1. HVORFOR KLASSE OG IKKE RGB-VÆRDI ========================================================================== En regel som "color:#0a0a0a" rammer enhver side, inklusive den offentlige. Det er ikke tilladt at gøre. Klassenavne er specifikke for admin, og de er fundet ved at tælle i browseren: næsten-sort slate-900* slate-950 zinc-950 zinc-800 slate-800 brødtekst slate-700 slate-600 zinc-600 dæmpet slate-500* slate-400 zinc-500 stone-500 * = dækket allerede af bundlen, gentaget ikke Specificitet: min regel er .jd-admin-workspace :is(.text-slate-950) = to klasser. Bundlens er den samme struktur, og admin-fix.css indlæses efter - så ved LIGHED vinder min. Der er ingen !importants i spil. ========================================================================== 2. TILSTANDSFARVERNE RØRER JEG IKKE ========================================================================== De så ud som rod i målingen: fire røde, tre grønne, to blå. Men de er ikke rod - de er SEMANTIK. Rød betyder akut, grøn betyder gennemført, blå betyder igangværende. At gøre dem ens ville slette den eneste information, farven overhovedet giver. De bliver, som de er. Det er den ærlige vurdering, ikke en halv ordning. ========================================================================== 3. HVAD DER IKKE ER MED ========================================================================== a) Baggrundsfarver. Målingen fandt ogsaa 4 hvide (#ffffff, #fffdf8, #fffefa, #fffefA) og 3 papirtoner. Bundlen har allerede .bg-white -> #fffdf8. Mere her ville være at male over dens hensigt. b) Den offentlige side. Alt herunder er under .jd-admin-workspace, som kun findes paa admin-ruterne. c) Dark mode. Bundlen har dark:-prefixer, men adminen kører i lys modus. Jeg roerer ikke dark:. ========================================================================== 4. RESULTAT (forventet, skal bekræftes ved maaling) ========================================================================== foer: 27 tekstfarver paa dashboard efter: 12 - de 7 roller + 5 tilstandsfarver, der er mening ========================================================================== */ /* --- ROLLE 1: overskrift ------------------------------------------- */ .jd-admin-workspace :is(.text-slate-950, .text-zinc-950, .text-zinc-800, .text-slate-800) { color: #203943; } /* --- ROLLE 2: brødtekst ------------------------------------------- */ /* Mørkere end dæmpet, fordi brødtekst er det, man læser i lange tekster. #62716d er for lyst til en hel side, #203943 er for stift til brødtekst. #445661 ligger imellem. */ .jd-admin-workspace :is(.text-slate-700, .text-slate-600, .text-zinc-600) { color: #445661; } /* --- ROLLE 3: dæmpet ------------------------------------------------ */ /* Bundlen dækker allerede .text-slate-500 -> #62716d. Disse er de lettere varianter, som normalt er endnu mere dæmpede. De sættes til SAMME værdi, så "dæmpet" betyder én ting. */ .jd-admin-workspace :is(.text-slate-400, .text-zinc-500, .text-stone-400, .text-stone-500) { color: #62716d; } /* -------------------------------------------------------------------------- SLUT PAA TEKSTFARVER. 27 -> 12, hvor de 12 er 5 roller + 7 tilstandsfarver med hver sit betydning. -------------------------------------------------------------------------- */ /* ========================================================================== MÅLING - OG HVAD DER SANDT ER VIST Trykfelter (grænse: WCAG AA 24 px på skærm, AAA 44 px på finger) /kunder 25 felter under 24 px: 0 (før: 25 under 44 px) /projekter 44 felter under 24 px: 0 (før: 44 under 44 px) /vagtplan 15 felter under 24 px: 0 (før: 11) /serviceopgaver 16 felter under 24 px: 3 (før: 6) /indstillinger 7 felter under 24 px: 0 (før: 7 under 44 px) I ALT 100 felter under 24 px: 3 (før: 17) De 3 er checkbokse, som er bevidst undtaget - se afsnit 4a. Dybde 65 kort har nu en skygge, ford 0. Bundlens egen var 0 4px 20px #20394304 (alpha 0,0157). Denne fil: 0 1px 2px + 0 2px 8px ved alpha 0,04 og 0,05. 2,5x mere synlig, men 4x lavere skyghøjde. Tekstfarver på dashboard FØR: 27 forskellige. EFTER: 18 forskellige. DE 18 ER IKKE 18 ROLLER. De er: 12 tilstandsfarver - rød/gul/grøn/blå/lilla. De er semantik: rød betyder akut, grøn betyder gennemført. De er bevaret med vilje, ikke glemt. 5 lyse tekstfarver på mørk baggrund - tekst i den mørke sidebar og på den mørke "ny opgave"-knap. Lys paa lys ville være ulæseligt. 1 diagramtekst fra Recharts (rgb 15,23,42) - biblioteket sætter den, ikke Tailwind. Ikke vores at ændre. KONSOLIDERET: de 4 næsten sorte farver (000, 0a0a0a, 0f172a, 203943) er nu ÉN: #203943. De 4 grå er nu ÉN: #62716d. Brødteksten er sat til #445661 - mellem dæmpet og overskrift. DET OPRINDELIGE TAL VAR FOR HØJT. Jeg lovede "27 -> 7". Det forudsatte, at tilstandsfarverne var rod. De er ikke - de er den eneste information farve giver i en arbejdsdag. 18 er det ærlige tal. ========================================================================== */