kontakt
/
shiftregister
2
0
Fork 0
Code

Improve shift list sticky nav style

This commit is contained in:
Luca 2023-05-06 00:12:11 +02:00
parent 4c0dc9e10e
commit 528f5d83e7
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
shiftregister/app/templates/shiftlist.html
View File

@ -20,8 +20,8 @@
{% endif %} {% endif %}
{% if free_shifts %} {% if free_shifts %}
<h3 class="title mb-0">Freie Schichten</h3> <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;"> <div class="breadcrumb has-bullet-separator mb-0 sticky-nav">
<ul style="flex-wrap:nowrap;"> <ul class="is-flex-wrap-nowrap">
{% for day in days %} {% for day in days %}
<li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l" }}</a></li> <li><a href="#{{ day|date:"Y-m-d" }}">{{ day|date:"l" }}</a></li>
{% endfor %} {% endfor %}
@ -29,7 +29,8 @@
</ul> </ul>
</div> </div>
{% for shifts in free_shifts %} {% 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"> <div class="columns is-multiline">
{% for shift in shifts %} {% for shift in shifts %}
{% include "partials/shift_listitem.html" %} {% include "partials/shift_listitem.html" %}

18
shiftregister/core/templates/base.html
View File

@ -27,6 +27,24 @@
--background: #fff; --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) { @media (prefers-color-scheme: dark) {
:root { :root {
--background: #17181c; --background: #17181c;