@xiwebdesign/xicms-core 7.22.2 → 7.22.3

package/dist/styles.css

@@ -769,21 +769,28 @@
 
 /* Zwevende werkbalk voor editors */
 /*
- * De beheerbalk ZWEEFT bovenaan, gecentreerd — en in beide toestanden op precies dezelfde plek.
+ * De beheerbalk ZWEEFT ONDERAAN, gecentreerd — en in beide toestanden op precies dezelfde plek.
  *
- * Geschiedenis in twee stappen. Hij zweefde ooit als pilletje onderaan, terwijl de editor zijn
+ * Geschiedenis in drie stappen. Hij zweefde ooit als pilletje onderaan, terwijl de editor zijn
  * eigen balk bovenaan meebracht: overschakelen verplaatste je houvast. 7.8 loste dat op met één
  * vaste balk van rand tot rand — maar die las als een deel van de site in plaats van als
- * gereedschap dat erover heen ligt. 7.16 combineert beide lessen: wéér een zwevend pilletje
- * (duidelijk gereedschap, de site blijft zichtbaar), maar bovenaan gecentreerd en in beide
- * modi identiek gepositioneerd, zodat het houvast van 7.8 blijft.
+ * gereedschap dat erover heen ligt. 7.16 maakte er weer een zwevend pilletje van, nu bovenaan
+ * gecentreerd en in beide modi identiek.
  *
- * Onderaan blijft van de publiceerknop (sinds 7.8): die hoort bij je werk, niet bij de navigatie.
+ * 7.22 haalt hem terug naar onderen, om één reden: bovenaan lag hij pal over het hoofdmenu van
+ * de site. Precies de plek waar elke site zijn navigatie heeft, dus op elke klantsite dekte het
+ * gereedschap de menu-items af — en je kon niet meer klikken waar je heen wilde. Onderaan is er
+ * bijna nooit iets dat je nodig hebt terwijl je aan het bewerken bent, en de publiceerknop staat
+ * daar toch al: al het gereedschap zit nu aan dezelfde kant van het scherm.
+ *
+ * Publiceren en Verwerpen staan rechts, de balk in het midden — die botsen dus niet. Alleen op
+ * smalle schermen wordt de balk zo breed als het scherm; daar schuiven die twee knoppen erboven
+ * (zie de media-query bij .xicms-ve-publiceer).
  */
 .xicms-editbar,
 .xicms-ve__bar {
   position: fixed;
-  top: 10px;
+  bottom: calc(10px + var(--xicms-bottombar, 0px));
   left: 50%;
   transform: translateX(-50%);
   max-width: calc(100vw - 16px);
@@ -804,17 +811,6 @@
   font-size: 0.8rem;
   line-height: 1;
 }
-/*
- * De balk dekt de bovenkant van de site af; duw de pagina omlaag zolang hij er staat.
- *
- * Op `:root` en niet op `body`: de padding hoort bij de scroll-container, en `body` is bij
- * klantsites veel vaker het element waar eigen CSS aan zit (achtergronden, grid, `min-height`).
- * Hoe minder we aan `body` doen, hoe kleiner de kans dat deze balk iets in de weg legt op een
- * site die we niet kennen. Layout-technisch is het resultaat hetzelfde.
- *
- * Padding alleen is niet genoeg: een `position: sticky; top: 0`-header plakt aan het VENSTER en
- * schuift hier gewoon onderdoor. Die worden apart opzijgezet — zie components/barOffset.ts.
- */
 /* De balk scrolt op smalle schermen horizontaal; de scrollbalk zelf is dan alleen ruis. */
 .xicms-editbar,
 .xicms-ve__bar {
@@ -825,11 +821,11 @@
   display: none;
 }
 
-/* GEEN pagina-offset meer: het pilletje ZWEEFT over de site heen, de pagina schuift er gewoon
-   onderdoor. De vorige vaste balk duwde alles omlaag (padding op :root + sticky-header-correctie
+/* GEEN pagina-offset: het pilletje ZWEEFT over de site heen, de pagina schuift er gewoon
+   onderdoor. De vaste balk van 7.8 duwde alles omlaag (padding op :root + sticky-header-correctie
    in barOffset.ts) — dat hoorde bij een balk van rand tot rand, niet bij zwevend gereedschap.
-   Bewuste afweging: gecentreerd bovenin kan het pilletje een stukje site-header overlappen; dat
-   is de prijs van een site die er verder exact zo bijstaat als voor de bezoeker. */
+   Nu hij onderaan staat, vervalt ook het sticky-header-probleem: een `position: sticky; top: 0`
+   header schoof onder de bovenbalk door, onderaan is er niets om onderdoor te schuiven. */
 /* Smalle schermen: de balk hield alles en werd twee regels hoog — en de pagina-offset (2.6rem,
    vast) rekent op één regel, dus de site schoof onder de balk. Het pad en de statustekst zijn op
    een telefoon ballast; de vier moduskoppen en het gereedschap zijn de balk. */
@@ -3333,6 +3329,17 @@
   z-index: 10006;
   transition: right 0.2s ease;
 }
+/* Smalle schermen: daar is de beheerbalk geen gecentreerd pilletje meer maar loopt hij van rand
+   tot rand (zie de media-query bij .xicms-editbar), dus rechtsonder botst hij wél met deze twee.
+   Ze schuiven er dan bovenuit: balk 10px + ~40px hoog = 50, plus lucht. */
+@media (max-width: 720px) {
+  .xicms-ve-publiceer {
+    bottom: calc(66px + var(--xicms-bottombar, 0px));
+  }
+  .xicms-ve-verwerp {
+    bottom: calc(140px + var(--xicms-bottombar, 0px));
+  }
+}
 /* Lade open → knop schuift mee naar links, anders ligt hij óver het formulier waarin je net
    aan het typen bent. Alleen op schermen waar de lade een zijlade is (op mobiel komt hij van
    onderen en blijft de knop gewoon rechts). */

package/dist/version.js

@@ -1,4 +1,4 @@
-const CORE_VERSION = true ? "7.22.2" : "0.0.0-dev";
+const CORE_VERSION = true ? "7.22.3" : "0.0.0-dev";
 const CORE_PACKAGE = "@xiwebdesign/xicms-core";
 function isNieuwer(beschikbaar, huidig) {
   const delen = (v) => v.split("-")[0].split(".").map((n) => Number.parseInt(n, 10) || 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiwebdesign/xicms-core",
-  "version": "7.22.2",
+  "version": "7.22.3",
   "description": "XiCMS engine: gestructureerde content, pagina's, draft/publish, admin (TipTap+Radix), SEO en beveiliging voor klantsites.",
   "license": "UNLICENSED",
   "repository": {