@klodd/ds 3.15.1 → 3.15.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/components/nav.css +15 -0
- package/package.json +1 -1
- package/references/DESIGN-LANGUAGE.md +57 -0
package/css/components/nav.css
CHANGED
|
@@ -113,6 +113,14 @@
|
|
|
113
113
|
/* ================================================================
|
|
114
114
|
==== TOPBAR (in-flow header)
|
|
115
115
|
Tre slots: back-knapp / titel / action. Display flex, full bredd.
|
|
116
|
+
|
|
117
|
+
Layout-doktrin (2026-05-12):
|
|
118
|
+
- Avatar (.avatar) ar ALLTID hogerstalld via margin-left: auto.
|
|
119
|
+
- Gor month-pill, brand-pill, topbar__logo eller back-knapp pa
|
|
120
|
+
vanster sida automatiskt vanster-positionerade.
|
|
121
|
+
- Galler aven nar avatar ar wrappad i <a href> for navigation.
|
|
122
|
+
- Doktrin gemensam for alla Klodd-appar (Ekonom, Jubb, framtida).
|
|
123
|
+
Se DESIGN-LANGUAGE.md sektion 13.
|
|
116
124
|
================================================================ */
|
|
117
125
|
.topbar {
|
|
118
126
|
display: flex;
|
|
@@ -123,6 +131,13 @@
|
|
|
123
131
|
margin-bottom: var(--space-16);
|
|
124
132
|
}
|
|
125
133
|
|
|
134
|
+
/* Avatar alltid hogerstalld. Galler bade direkt <.avatar> och
|
|
135
|
+
wrapped <a href="/profil"><span class="avatar"></span></a>. */
|
|
136
|
+
.topbar > .avatar,
|
|
137
|
+
.topbar > a:has(> .avatar) {
|
|
138
|
+
margin-left: auto;
|
|
139
|
+
}
|
|
140
|
+
|
|
126
141
|
.topbar__back {
|
|
127
142
|
display: inline-flex;
|
|
128
143
|
align-items: center;
|
package/package.json
CHANGED
|
@@ -294,6 +294,63 @@ Future custom stylelint-plugin kan enforce:
|
|
|
294
294
|
Tills sådan plugin finns: visual-coherence är CC-disciplin baserat
|
|
295
295
|
på denna fil.
|
|
296
296
|
|
|
297
|
+
## 13. Topbar-layout-doktrin (alla appar)
|
|
298
|
+
|
|
299
|
+
**Regel:** topbar-elementen positioneras enligt strikt mall:
|
|
300
|
+
|
|
301
|
+
| Position | Element | Användning |
|
|
302
|
+
|---|---|---|
|
|
303
|
+
| Vänster | `.month-pill`, `.brand-pill`, `.topbar__logo`, `.topbar__back` | Kontext/navigation per vy |
|
|
304
|
+
| Höger | `.avatar` (ev. wrappad i `<a href="/jag">`) | Persistent profil-länk |
|
|
305
|
+
|
|
306
|
+
**CSS-implementation** (paketets `nav.css`):
|
|
307
|
+
|
|
308
|
+
```css
|
|
309
|
+
.topbar > .avatar,
|
|
310
|
+
.topbar > a:has(> .avatar) {
|
|
311
|
+
margin-left: auto;
|
|
312
|
+
}
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
Avatar pushas automatiskt högerställd. Övriga element grupperas
|
|
316
|
+
vänster med `gap: var(--space-12)`.
|
|
317
|
+
|
|
318
|
+
**HTML-pattern:**
|
|
319
|
+
|
|
320
|
+
```html
|
|
321
|
+
<!-- Standard topbar med kontext + avatar -->
|
|
322
|
+
<div class="topbar">
|
|
323
|
+
<span class="brand-pill">Jubb</span> <!-- vänster -->
|
|
324
|
+
<a href="/jag"><span class="avatar">CE</span></a> <!-- höger -->
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<!-- Topbar med back-knapp + avatar -->
|
|
328
|
+
<div class="topbar">
|
|
329
|
+
<a href="/jobb" class="topbar__back">←</a> <!-- vänster -->
|
|
330
|
+
<span class="topbar__logo">Jobbdetalj</span> <!-- center-ish -->
|
|
331
|
+
<a href="/jag"><span class="avatar">CE</span></a> <!-- höger -->
|
|
332
|
+
</div>
|
|
333
|
+
|
|
334
|
+
<!-- Topbar utan avatar (back-only-vyer som /installningar/X) -->
|
|
335
|
+
<div class="topbar">
|
|
336
|
+
<a href="/installningar" class="topbar__back">←</a>
|
|
337
|
+
<span class="topbar__logo">Vart hushall</span>
|
|
338
|
+
</div>
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
**Förbjudet:**
|
|
342
|
+
- Avatar någon annanstans än i topbar
|
|
343
|
+
- Två avatar-element i samma topbar
|
|
344
|
+
- Manual flexbox-positioning som strider mot auto-margin-pattern
|
|
345
|
+
- Hardkodad `margin-left: auto` på avatar i app-domain-CSS (paketet
|
|
346
|
+
hanterar det)
|
|
347
|
+
|
|
348
|
+
**Konsekvens:** alla Klodd-appar (Ekonom, Jubb, framtida) får identisk
|
|
349
|
+
topbar-layout. Användaren får visuell anchor: "avatar = mitt konto =
|
|
350
|
+
alltid uppe höger".
|
|
351
|
+
|
|
352
|
+
**Etablerad 2026-05-12.** Lagt till paketets nav.css i samma commit.
|
|
353
|
+
|
|
297
354
|
## 12. När ändra regler
|
|
298
355
|
|
|
299
356
|
Denna fil är **locked**. Ändringar kräver:
|