popover: adapt the styling such that FF and Safari play nicely with t…

…he anchor positioning. More to understand about that.
WebEngineering-FHNW · Dec 15, 2024 · 080319c · 080319c
1 parent 0b6b7d4
commit 080319c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/docs/css/kolibri-base.css b/docs/css/kolibri-base.css
@@ -238,6 +238,9 @@ a.skip-link:not(:focus):not(:active) {
 
 /* --- end of utility classes --- */
 
+
+/* --- experimental popover and anchor positioning --- */
+
 [popover] {             /* style that pops for all elements with popover attribute */
       flex-direction:     column;
       gap:                .5em;
@@ -257,24 +260,29 @@ a.skip-link:not(:focus):not(:active) {
       animation-timing-function:  ease-in-out;
       animation-fill-mode:        forwards;
   }
-  :popover-open::backdrop {
-      background-color:           color-mix(in hsl, white, transparent 70%);
-      transition:                 background-color 1s linear;
-      @starting-style {
-          background-color:       transparent;
-      }
-  }
+
+  /*For the moment, don't do this as it makes the UI appear flickering when*/
+  /*the popover closes. Sadly, there seems to be no way to transition back on close. Reserve for later.*/
+  /*:popover-open::backdrop {*/
+  /*    background-color:           color-mix(in hsl, white, transparent 70%);*/
+  /*    transition:                 background-color 1s linear;*/
+  /*    @starting-style {*/
+  /*        background-color:       transparent;*/
+  /*    }*/
+  /*}*/
 
   .popover_anchor {
       /* anchor-name will be set on the element */
       position:           relative;
+      display:            inline-flex;  /* for FF and Safari or it does not always work */
   }
   .popover_tooltip {
       /* position-anchor will be set on the element */
-      position:           absolute;   /* override the popover-hidden default */
+      position:           absolute;     /* override the popover-hidden default */
       inset:              unset;
-      top:                anchor(bottom);
+      top:                anchor(top);  /* dirty trick for FF and Safari (anchor(bottom) does not work) */
       left:               anchor(left);
+      translate:          0 1.2lh;      /* dirty trick for FF and Safari */
 
       transform-origin:   top center; /* makes expandY a drop-down */
   }

diff --git a/docs/src/examples/workday/simpleDayProjector.js b/docs/src/examples/workday/simpleDayProjector.js
@@ -32,10 +32,10 @@ const projectDay = dayController => {
     /** @type {HTMLDivElement} */ const amDiv = elements[0];
     /** @type {HTMLDivElement} */ const pmDiv = elements[1];
 
-    amDiv.querySelector("#am_start").append(amStartViewLabel, amStartViewSpan);
-    amDiv.querySelector("#am_end")  .append(amEndViewLabel,   amEndViewSpan);
-    pmDiv.querySelector("#pm_start").append(pmStartViewLabel, pmStartViewSpan);
-    pmDiv.querySelector("#pm_end")  .append(pmEndViewLabel,   pmEndViewSpan);
+    amDiv.querySelector("#am_start").replaceWith(amStartViewLabel, amStartViewSpan);
+    amDiv.querySelector("#am_end")  .replaceWith(amEndViewLabel,   amEndViewSpan);
+    pmDiv.querySelector("#pm_start").replaceWith(pmStartViewLabel, pmStartViewSpan);
+    pmDiv.querySelector("#pm_end")  .replaceWith(pmEndViewLabel,   pmEndViewSpan);
 
     // no special view and data binding since that is all done by the simpleInputProjector