Horizontal stickiness: adjust the border of the first column

v6ak · Oct 22, 2023 · 5f12d26 · 5f12d26
1 parent 3f479fd
commit 5f12d26
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/client/src/main/scala/com/v6ak/zbdb/HorizontalStickiness.scala b/client/src/main/scala/com/v6ak/zbdb/HorizontalStickiness.scala
@@ -1,6 +1,7 @@
 package com.v6ak.zbdb
 
 import org.scalajs.dom
+import org.scalajs.dom.window.setTimeout
 import org.scalajs.dom.{Event, HTMLElement, HTMLTableElement}
 
 import scala.scalajs.js
@@ -12,7 +13,8 @@ object HorizontalStickiness {
     for(h <- participantHeaders){
       h.style.position = "relative"
     }
-    val horizontalScrollClassGuard = ValueGuard(false){ (_, scrolledHorizontally) =>
+    val horizontalScrollClassGuard = ValueGuard(false){ (_, scrolledHorizontally) => setTimeout(() =>
+      // setTimeout seems to make it smoother in Firefox, as it delays the change of the style
       if(scrolledHorizontally){
         for(t <- participantHeaders){
           t.classList.add("scrolled-horizontally")
@@ -21,8 +23,9 @@ object HorizontalStickiness {
         for(t <- participantHeaders){
           t.classList.remove("scrolled-horizontally")
         }
-      }
-    }
+      },
+      0
+    )}
     val horizontalScrollPositionGuard = ValueGuard(0.0){(_, scrollLeft) =>
       val left = s"${scrollLeft}px"
       for(t <- participantHeaders){

diff --git a/client/src/main/scala/com/v6ak/zbdb/Renderer.scala b/client/src/main/scala/com/v6ak/zbdb/Renderer.scala
@@ -366,6 +366,7 @@ final class Renderer private(
     )
     content.appendChild(tableElement)
     content.appendChild(barElement)
+    HorizontalStickiness.addHorizontalStickiness(tableElement)
   }
 
 }
diff --git a/server/app/assets/main.scss b/server/app/assets/main.scss
@@ -35,7 +35,7 @@
         }
     }
     th.participant-header {
-        border-right-width: 0;
+        border-right-style: none;
     }
     .participant-header {
         z-index: 100;
@@ -89,12 +89,12 @@ td.col-end{
     border-right-style: solid;
 }
 
-.participant-header{
+.participants-table .participant-header{
     background-color: white;
     background-clip: padding-box;
     padding-right: 0;
     &.scrolled-horizontally{
-        box-shadow: 3px 0 1.5px -1px rgb(0,0,0);
+        border-right: 1px solid lightgray;
     }
     label{
         font-weight: normal !important;