FluentUI: postavitev wikija (lupina dokumentacije) podrobno

Nazaj: FluentUI (knjižnica oblikovalskega sistema)

Stanje: Tier 1 — opisuje dejansko uveljavljeno kodo. Prvi porabnik je predloga wkbizway (inc/wiki-shell.php skupaj s css/wiki-layout.css, css/area-wiki.css, css/dokuwiki-overrides.css, js/wiki-area.js), aktivna na vseh straneh s profilom območja wiki ({lang}:wiki:*). Vir resnice za podrobnosti izvedbe: lupina_wiki_podrocja_inc_wiki-shellphp — ta stran je referenca oblikovalskega sistema, vezana na to območje: vzorci, pogodbe in vodnik za prevzem za prihodnje porabnike, ne dokumentacija izvedbe.

Referenčni vzor: dokumentacijske strani Google Developers (developers.google.com/style, lupina devsite) in Microsoft Learn — vsebina kot „list papirja na podlogi„, ob straneh navigacijski in orodni stolpci.

Namen in koncept

Lupina dokumentacije za bralne strani: do pet stolpcev od 1024px, ki proti zunanjosti postopno postajajo „lažji“ — v sredini vsebina, ob njej navigacija (stranska vrstica dokumentacije) in orientacija (kazalo strani), skrajno zunaj dve ozki vrstici ikon (orodja/stikala). Pod 1024px se lupina postopno skrči (predali namesto stolpcev), pod 768px na en sam stolpec. Glava in noga sta namenoma enaki lupini celotnega spletnega mesta ustrezne predloge (ena znamka, dva profila).

Imena razredov popravljena 2026-08-23. Preglednica območij in pogodba o razmikih sta do tedaj navajali stanje pred preimenovanjem paketa 3. avgusta 2026 — premium-navy-ivory in premiumnavyivory-* namesto wkbizway in wkbizway-*. Koda nosi nova imena od datuma preimenovanja dosledno, preverjeno v inc/wiki-shell.php in datotekah CSS predloge; le ta stran preimenovanju ni sledila.

Območja

Skica z razmernimi razmiki (6px:10px = v živo 12px:20px):

1 Topbar (Logo + Suche + Avatar)

8 Breadcrumb-Leiste (nur Inhaltsseiten)

2 Action
Rail

3 Doc-Sidebar

wkacmenu-Baum

4 Hauptinhalt

Seiteninhalt

5 Seiten-TOC

Inhaltsverzeichnis

6 TOC-
Rail

7 Footer (identisch zur Site-Hülle)

Območje	Živ razred (`wkbizway`)	Ustreznica `wk-shell-*`	Vidnost
Topbar (logotip, iskanje, avatar)	`.wkbizway-topbar`	`.wk-shell-titlebar` (podedovano, brez ponovne izgradnje)	vedno
Vrstica drobtinic (navigacija po poti, polna širina neposredno pod topbarom — POZICIJA pasice, a namerno ne `.wk-shell-banner`, ki ostane rezervirana za zaprljivo obvestilno vrstico; podrobnosti: layout → Breadcrumbs)	`.wkbizway-wiki-crumbbar`	— (dodatek WvdS, ni ADS-part)	samo vsebinske strani (skrito na skrbniških zaslonih)
Action Rail (levo, orodja strani; na skrbniških zaslonih vrstica dejavnosti, glej FluentUI: skrbniško območje podrobno)	`.wkbizway-action-rail`	`.wk-shell-rail` (podedovano)	vedno (stolpec od 768px, pod tem vodoravna vrstica ikon)
Stranska vrstica dokumentacije (navigacija po imenskih prostorih)	`.wkbizway-doc-sidebar`	`.wk-shell-sidebar`	stolpec od 1024px, pod tem predal
Vsebina = siva podloga + bela kartica	`.wkbizway-wiki-main` + `.wkbizway-wiki-card`	`.wk-shell-content`	vedno
Kazalo strani („On this page„)	`.wkbizway-page-toc–desktop` / `–mobile`	vloga `.wk-shell-auxbar`	stolpec od 1024px, pod tem vstavljena plošča
Rail kazala (desno, zrcalno)	`.wkbizway-action-rail–right`	`.wk-shell-rail–right`	le od 1024px; stikalo se pod tem vrne na levi rail
Noga	`.wkbizway-footer`	—	vedno

Stolpec wk-shell-* preslika območja na splošni besednjak iz FluentUI: osnovna postavitev podrobno: topbar/raili so tam označeni kot „podedovano“ — prihodnji splošni modul lupine jih ne bi zgradil znova, temveč bi prevzel to izvedbo.

Pogodba o razmikih

Dva tokena razširitve (v lasti wkbizway, opredeljena v css/tokens.css — nista del medpredložne pogodbe o slogih):

Token	Vrednost	Velja za
`--wk-wiki-gap`	`1.25rem`/20px (1024–1279px: `1rem`/16px)	bralni razmik med vsebino↔stransko vrstico dokumentacije in vsebino↔kazalom strani
`--wk-wiki-gap-rail`	`0.75rem`/12px (neodvisno od prelomne točke)	fuge ob robovih railov (rail↔stranska vrstica, kazalo↔rail kazala)

Poleg tega: zunanji robovi so poravnani od 1024px navzgor (vodoravni notranji odmik lupine je nič — raili so neposredno na robu vidnega polja, kot Activity Bar v VS Code/Azure Data Studio); pod tem velja robni razmik 1em oz. 16px (<768px).

Mehanika v dveh stavkih: razmiki niso izvedeni prek lastnosti mreže gap (ta rezervira svojo vrednost tudi ob stolpcih, ki se med izvajanjem skrčijo na 0px), temveč kot robovi obeh skrčljivih stolpcev („lastništvo roba„); ko se stolpec skrči, vsebina napreduje natanko za razmik raila na sproščenem robu. Popolna utemeljitev je v komentarju kode bloka @media (min-width: 1024px) v css/wiki-layout.css.

Metafora papirja (podloga + kartica)

Vsebina leži kot bela kartica (max-width: 21cm = širina DIN-A4, token --wk-wiki-content-max-width) s senco na sivi podlogi. Obe ploskvi sta namenoma oglati (border-radius: 0 na vseh prelomnih točkah): papir je pravokoten; referenčni CSS na developers.google.com uporablja 2px/0 — praktično neopazno, torej je 0 skladno z referenco. Pojavna okna, gumbi in polja WRAP ohranjajo svoje radije — niso del ploskve papirja.

Obnašanje kazala strani

Fiksna velikost pisave 13px (družina pisav prek --wk-wiki-font-body).
Sploščitev 1. ravni (vzorec Google Developers): kadar ima kazalo natanko en vnos 1. ravni (pri toptoclevel=1), je to vedno podvojitev naslova H1 strani, prikazanega ob njem — njegova vrstica naslova se skrije, seznam podrejenih pa se začne brez zamika. Dva zaščitna pogoja: :only-child (strani z več naslovi H1 ostanejo nespremenjene) in :not(.mode_admin) (skrbniška kazala imajo prave oznake namesto podvojitev naslova, npr. „Podatkovna baza:“ na seznamu podatkovnih baz sqlite). Vedno se skrije le vrstica naslova, nikoli seznam podrejenih.
Prazno kazalo (stran brez naslovov) skrije cel stolpec, namesto da bi ga prikazalo praznega.

Prelomne točke

Razpon	Nabor stolpcev	Posebnost
≥1280px	rail, stranska vrstica (17em), vsebina, kazalo (15em), rail kazala	polna izvedba; razmiki 12/20/20/12, robovi poravnani
1024–1279px	kot zgoraj, ožje (stranska vrstica 14em, kazalo 12em)	bralni razmik 16px namesto 20px
768–1023px	rail + en prilagodljiv stolpec	stranska vrstica/kazalo kot predal oz. vstavljena plošča; navaden `gap` namesto lastništva roba; robni razmik 1em
<768px	en stolpec	rail postane vodoravna vrstica ikon; robni razmik 16px

Razredi stanj (referenca)

Po vzoru VS Code LayoutClasses (prim. layout → razredi vidnosti), nastavljeni na .wkbizway-wiki-shell:

Razred	Vir	Učinek
`sidebar-collapsed` / `toc-collapsed`	stikalo raila (JS) ali na strani strežnika (prazno kazalo)	skrči stolpec mreže na 0; vsebina prevzame razmik raila
`rail-collapsed`	na strani strežnika na skrbniških zaslonih brez vrstice dejavnosti	levi stolpec raila odpade
`mode_admin` in drugi	jedrna funkcija DokuWiki `tpl_classes()`	kljuke stanja za CSS (npr. izjema sploščitve kazala)
`is-sticky`	možnosti `wikiStickyHeader`/`wikiStickySidebars`	glava/stolpci ostanejo na mestu med drsenjem

Obnašanje JS in dostopnost

js/wiki-area.js (naložen le na straneh profila wiki): upravljanje predalov za stransko vrstico dokumentacije, rail in kazalo z enim ali več sprožilnimi gumbi na predal (stikalo kazala obstaja kot dve kopiji v DOM — desni rail od 1024px, levi rail pod tem; CSS nikoli ne prikaže obeh hkrati, aria-expanded pa je usklajen na vseh kopijah). Escape zapre in fokusira trenutno vidno kopijo gumba (preverjanje offsetParent med izvajanjem); stanje odprto/zaprto je po izbiri shranjeno v localStorage. Pomembno pri podvojenih elementih DOM, ki pokrivajo nadomestne rešitve za prelomne točke: vsaki kopiji vedno dodelite lasten modifikatorski razred — deljen razred povzroči, da pravila vidnosti ene kopije po nesreči zadenejo tudi drugo.

Vodnik za prevzem za prihodnje porabnike

Neposredno ponovno uporabno: besednjak območij in pogodbe obnašanja te strani (pogodba o razmikih, pristop z razredi stanj, vzorec sploščitve), poleg splošnih primitivov .wk-shell-* iz wkfluentui/style.css (odsek WIDGETS).
Specifično za predlogo (graditi analogno, ne kopirati): razredi wkbizway-*, tokeni razširitve --wk-wiki-* in oznake inc/wiki-shell.php.
Pred lastno abstrakcijo preverite, ali API pomočnika (npr. adminrail, nav, toolbar()) nalogo že pokriva.

Omejitve in odpravljanje težav

Past tseed: spremembe CSS predloge ne zavrtijo lomilca predpomnilnika — po vsakem uredku dotaknite conf/local.php (podrobnosti: preverjanje).
Pasti prevajalnika CSS (usodne za celotno spletno mesto): brez */ v besedilu komentarja (predčasno konča komentar) in brez min()/calc() z mešanimi enotami.
?t=<predloga> na css.php je zamenjava predloge, ne lomilec predpomnilnika.
Sled mreže ≠ širina elementa: robovi stolpcev so znotraj fiksnih sledi — spremembe razmika razširijo element stolpca, ne stolpca vsebine.

Sorodne teme

lupina_wiki_podrocja_inc_wiki-shellphp — izvedba (vir resnice)
FluentUI: osnovna postavitev podrobno — osnovna postavitev (lupina ADS) in besednjak wk-shell-*
FluentUI: skrbniško območje podrobno — skrbniško območje (vrstica dejavnosti, semantika barv, orodna vrstica)
FluentUI: oblikovalski tokeni · Styles Contract (--wk-*) — pogodbe tokenov
FluentUI: javni API pomočnika — API pomočnika (vkl. nav, adminrail)