Make day selector stick to the top

3 years ago · f70e94955d
parent eb56b658fa
commit f70e94955d
2 changed files with 16 additions and 5 deletions
--- a/shiftregister/app/templates/shiftlist.html
+++ b/shiftregister/app/templates/shiftlist.html
@ -18,16 +18,17 @@
 <hr>
 {% endif %}
 {% if free_shifts %}
-<h3 class="title">Freie Schichten</h3>
-<div class="breadcrumb has-bullet-separator">
-    <ul>
+<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;">
 {% for day in days %}
-        <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l, d.m.Y" }}</a></li>
+        <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l" }}</a></li>
 {% endfor %}
+        <li><a href="#">zurück nach oben</a></li>
    </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, d.m.Y" }}</h5>
+<h5 class="subtitle" id="{{ shifts.0.start_at|date:"Y-m-d" }}">{{ shifts.0.start_at|date:"l" }}</h5>
 <div class="columns is-multiline">
 {% for shift in shifts %}
    {% include "partials/shift_listitem.html" %}
--- a/templates/base.html
+++ b/templates/base.html
@ -17,6 +17,16 @@
    * {
        font-family: "Maven Pro", sans-serif !important;
    }
+
+    :root {
+        --background: #fff;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background: #17181c;
+        }
+    }
    </style>
 </head>
 <body>