From 9aa43df9115fe947d8ee35eb03e2e7e8c31e5cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 5 Apr 2022 16:32:28 +0200
Subject: Made sidebar date headings sticky.

---
 module/calp/html/view/calendar.scm |  2 +-
 static/_global.scss                |  1 +
 static/style.scss                  | 16 ++++++++++++----
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index 5a8e977e..cfbb1865 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -122,7 +122,7 @@ window.default_calendar='~a';"
     ,(calendar-styles calendars)
 
     ,@(when (debug)
-        '((style ".root { background-color: pink; }"))))
+        '((style ":root { --background-color: pink; }"))))
 
    (body
     (div (@ (class "root"))
diff --git a/static/_global.scss b/static/_global.scss
index 41f426f9..58e05155 100644
--- a/static/_global.scss
+++ b/static/_global.scss
@@ -13,4 +13,5 @@ $popup-style: "left";
     /* Each popup can have a different amoutn of tabs.
     Override this as appropriate */
     --tabcount: 4;
+    --background-color: white;
 }
diff --git a/static/style.scss b/static/style.scss
index efe8291d..c5705e24 100644
--- a/static/style.scss
+++ b/static/style.scss
@@ -11,6 +11,8 @@ html, body {
     max-width: 100%;
     height: 100%;
 
+    background-color: var(--background-color);
+
     grid-template-columns: auto auto 20em;
     grid-template-rows: auto;
 
@@ -227,10 +229,16 @@ Each event within the eventlist
     padding-left: 2px;
     margin-top: 1em;
 
-    header h2 {
-        width: 100%;
-        text-align: center;
-        font-size: 14pt;
+    header {
+        position: sticky;
+        top: 0;
+        background-color: var(--background-color);
+
+        h2 {
+            width: 100%;
+            text-align: center;
+            font-size: 14pt;
+        }
     }
 }
 
-- 
cgit v1.2.3