From 528f5d83e74a0e38fdab638e6866fbafb7afd754 Mon Sep 17 00:00:00 2001
From: Luca <Luca@hackerspace-bamberg.de>
Date: Sat, 6 May 2023 00:12:11 +0200
Subject: [PATCH] Improve shift list sticky nav style

---
 shiftregister/app/templates/shiftlist.html |  7 ++++---
 shiftregister/core/templates/base.html     | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/shiftregister/app/templates/shiftlist.html b/shiftregister/app/templates/shiftlist.html
index 690269b..68457dc 100644
--- a/shiftregister/app/templates/shiftlist.html
+++ b/shiftregister/app/templates/shiftlist.html
@@ -20,8 +20,8 @@
 {% endif %}
 {% if free_shifts %}
 <h3 class="title mb-0">Freie Schichten</h3>
-<div class="breadcrumb has-bullet-separator mb-0" style="background-color:var(--background);overflow-x:auto;padding:1em 0;position:sticky;top:0;z-index:42;">
-    <ul style="flex-wrap:nowrap;">
+<div class="breadcrumb has-bullet-separator mb-0 sticky-nav">
+    <ul class="is-flex-wrap-nowrap">
 {% for day in days %}
         <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l" }}</a></li>
 {% endfor %}
@@ -29,7 +29,8 @@
     </ul>
 </div>
 {% for shifts in free_shifts %}
-<h5 class="subtitle" id="{{ shifts.0.start_at|date:"Y-m-d" }}">{{ shifts.0.start_at|date:"l" }}</h5>
+<span class="sticky-target" id="{{ shifts.0.start_at|date:"Y-m-d" }}"></span>
+<h5 class="subtitle">{{ shifts.0.start_at|date:"l" }}</h5>
 <div class="columns is-multiline">
 {% for shift in shifts %}
     {% include "partials/shift_listitem.html" %}
diff --git a/shiftregister/core/templates/base.html b/shiftregister/core/templates/base.html
index 5d78e72..e4237f1 100644
--- a/shiftregister/core/templates/base.html
+++ b/shiftregister/core/templates/base.html
@@ -27,6 +27,24 @@
         --background: #fff;
     }
 
+    .sticky-nav {
+        background-color: var(--background);
+        margin: 0 -0.75rem;
+        overflow-x: auto;
+        padding: 1em 0.75rem;
+        position: sticky;
+        top: 0;
+        z-index: 42;
+    }
+
+    .sticky-target {
+        display: block;
+        height: 0;
+        position: relative;
+        top: -3.5em;
+        width: 0;
+    }
+
     @media (prefers-color-scheme: dark) {
         :root {
             --background: #17181c;