Add bulma-prefers-dark, improve style

3 years ago · 2a20e6249b
parent 171cf5bf1f
commit 2a20e6249b
5 changed files with 37 additions and 23 deletions
--- a/assets/bulma-prefers-dark.min.css
+++ b/assets/bulma-prefers-dark.min.css
--- a/shiftregister/app/templates/helper_base.html
+++ b/shiftregister/app/templates/helper_base.html
@ -27,7 +27,7 @@
    <div class="container">
 {% include 'notifications.html' %}
 {% if helper %}
-        <h1 class="title">Hallo {{ helper.name }}!</h1>
+        <h1 class="title is-1">Hallo {{ helper.name }}!</h1>
 {% endif %}
 {% block content %}{% endblock %}
    </div>
--- a/shiftregister/app/templates/partials/shift_listitem.html
+++ b/shiftregister/app/templates/partials/shift_listitem.html
@ -1,7 +1,15 @@
-<li class="box">{{ shift.room.name }} {{ shift.start_at }}
-    {% if registered %}
-    <a class="button is-info is-small" href="{% url 'shift' shift.id %}">Details</a>
-    {% else %}
-    <a class="button is-primary is-small" href="{% url 'shift' shift.id %}">Mithelfen</a>
-    {% endif %}
-</li>
+<div class="column is-one-quarter">
+    <div class="box">
+        <div class="content">
+            <strong>Ort:</strong> {{ shift.room.name }}<br>
+            <strong>Beginn:</strong> {{ shift.start_at }}
+        </div>
+        <div class="is-flex is-justify-content-end">
+{% if registered %}
+            <a class="button is-info is-small" href="{% url 'shift' shift.id %}">Details</a>
+{% else %}
+            <a class="button is-primary is-small" href="{% url 'shift' shift.id %}">Mithelfen</a>
+{% endif %}
+        </div>
+    </div>
+</div>
--- a/shiftregister/app/templates/shiftlist.html
+++ b/shiftregister/app/templates/shiftlist.html
@ -3,26 +3,30 @@
 {% block title %}Freie Schichten{% endblock %}
 {% block content %}
 {% if current_shift %}
-<h2>Aktuelle Schicht</h2>
-{{ current_shift.room.name }} {{ current_shift.start_at }}<a href="{% url 'shift' current_shift.id %}">Details</a>
+<h3 class="title">Aktuelle Schicht</h3>
+<div class="columns">
+{% include "partials/shift_listitem.html" with shift=current_shift registered=True %}
+</div>
 {% endif %}
 {% if my_shifts %}
-<h3 class="title is-3">Meine Schichten:</h3>
-<ul>
-    {% for shift in my_shifts %}
-        {% include "partials/shift_listitem.html" with registered=True%}
-    {% endfor %}
-    </ul>
+<h3 class="title">Meine Schichten</h3>
+<div class="columns is-multiline">
+{% for shift in my_shifts %}
+    {% include "partials/shift_listitem.html" with registered=True %}
+{% endfor %}
+</div>
 {% endif %}
 <hr/>
 {% if free_shifts %}
-<h3 class="title is-3">Freie Schichten:</h3>
-<ul>
-    {% for shift in free_shifts %}
-        {% include "partials/shift_listitem.html"%}
-    {% endfor %}
-</ul>
+<h3 class="title">Freie Schichten</h3>
+<div class="columns is-multiline">
+{% for shift in free_shifts %}
+    {% include "partials/shift_listitem.html" %}
+{% endfor %}
+</div>
 {% else %}
-Alle Schichten sind voll. Schau später noch mal vorbei.
+<div class="notification">
+    Alle Schichten sind voll. Schau später noch mal vorbei.
+</div>
 {% endif %}
 {% endblock %}
--- a/templates/base.html
+++ b/templates/base.html
@ -7,6 +7,7 @@
    <title>{% block title %}Help!{% endblock %}</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <link rel="stylesheet" href="{% static 'bulma.min.css' %}">
+    <link rel="stylesheet" href="{% static 'bulma-prefers-dark.min.css' %}">
 </head>
 <body>
    <nav class="navbar">