Style team pages

shiftregister/app/models.py

@@ -103,7 +103,9 @@ class Message(models.Model):
 
 
 def gen_token():
-    return secrets.token_urlsafe(15) # returns 15 bytes Base64-encoded (times 1.333...) = 20 characters
+    return secrets.token_urlsafe(
+        15
+    )  # returns 15 bytes Base64-encoded (times 1.333...) = 20 characters
 
 
 class LoginToken(models.Model):

shiftregister/app/templates/partials/shift_listitem.html

@@ -1,6 +1,9 @@
 <div class="column is-one-quarter">
     <div class="box">
         <div class="content">
+{% if shift.deleted %}
+            <em>gelöscht</em><br>
+{% endif %}
             <strong>Ort:</strong> {{ shift.room.name }}<br>
             <strong>Beginn:</strong> {{ shift.start_at }}<br>
             <strong>Dauer:</strong> {{ shift.duration }}

shiftregister/app/templates/shift.html

@@ -6,6 +6,9 @@
 <div class="box">
 {% if is_registered %}
     <div class="notification is-info">Du bist zu dieser Schicht angemeldet</div>
+{% endif %}
+{% if shift.deleted %}
+    <div class="notification">Diese Schicht wurde gelöscht.</div>
 {% endif %}
     <div class="content">
         <strong>Ort:</strong> {{ shift.room.name }}<br>

shiftregister/team/forms.py

@@ -7,4 +7,6 @@ class EmptyForm(forms.Form):
 
 
 class HelperShift(forms.Form):
-    helper = forms.ModelChoiceField(queryset=Helper.objects.order_by("name"))
+    helper = forms.ModelChoiceField(
+        label="Helfer*in", queryset=Helper.objects.order_by("name")
+    )

shiftregister/team/templates/helper_detail.html

@@ -1,13 +1,15 @@
 {% extends "team_base.html" %}
 
-{% block title %}Schichtdetails{% endblock %}
+{% block title %}Helferdetails{% endblock %}
 {% block content %}
-<h2>{{ helper.name }}</h2>
+<h3 class="title">{{ helper.name }}</h3>
+<div class="content">
     Telefon: <a href="tel:{{ helper.phone }}">{{ helper.phone }}</a>
-<h2>Schichten:</h2>
-<ul>
+</div>
+<h5 class="subtitle">Schichten</h5>
+<div class="columns is-multiline">
 {% for reg in helper.shiftregistration_set.all %}
-    <li>{{ reg.shift.room.name }} {{ reg.shift.start_at }}({{ reg.shift.shiftregistration_set.count }}/{{ reg.shift.room.required_helpers }})<a href="{% url 'team:shift' reg.shift.id %}">Details</a></li>
+    {% include 'partials/shift_list_item.html' with shift=reg.shift %}
 {% endfor %}
-</ul>
+</div>
 {% endblock %}

shiftregister/team/templates/partials/shift_box.html

@@ -0,0 +1,14 @@
+<div class="box">
+    <div class="content">
+{% if shift.deleted %}
+        <em>gelöscht</em><br>
+{% endif %}
+        <strong>Ort:</strong> {{ shift.room.name }}<br>
+        <strong>Beginn:</strong> {{ shift.start_at }}<br>
+        <strong>Dauer:</strong> {{ shift.duration }}<br>
+        <strong>Belegung:</strong> {{ shift.shiftregistration_set.count }}/{{ shift.room.required_helpers }}
+    </div>
+    <div class="is-flex is-justify-content-end">
+        <a class="button is-info is-small" href="{% url 'team:shift' shift.id %}">Details</a>
+    </div>
+</div>

shiftregister/team/templates/partials/shift_list_item.html

@@ -1,3 +1,3 @@
-<li class="box"><b>{{ shift.room.name }}</b> {{ shift.start_at }} ({{ shift.shiftregistration_set.count }}/{{ shift.room.required_helpers }})
-    <a class="button is-info is-small" href="{% url 'team:shift' shift.id %}">Details</a>
-</li>
+<div class="column is-one-quarter">
+    {% include 'partials/shift_box.html' %}
+</div>

shiftregister/team/templates/shift_detail.html

@@ -2,13 +2,21 @@
 
 {% block title %}Schichtdetails{% endblock %}
 {% block content %}
-{{ shift.room.name }} {{ shift.start_at }}({{ shift.shiftregistration_set.count }}/{{ shift.room.required_helpers }})
-<h2>Helfer</h2>
-<ul>
+<h3 class="title is-spaced">{% if shift.deleted %}(gelöscht) {% endif %}{{ shift.room.name }} {{ shift.start_at }} ({{ shift.shiftregistration_set.count }}/{{ shift.room.required_helpers }})</h3>
+{% if shift.shiftregistration_set.all %}
+<h5 class="subtitle">Helfer*innen</h5>
+<div class="columns is-multiline">
 {% for reg in shift.shiftregistration_set.all %}
-    <li><a href="{% url 'team:helper' reg.helper.pk %}">{{ reg.helper.name }}</a> <a href="tel:{{ reg.helper.phone }}">📞</a></li>
+    <div class="column is-one-quarter">
+        <div class="box is-flex is-align-items-center is-justify-content-space-between">
+            <a class="is-block is-size-4" href="{% url 'team:helper' reg.helper.pk %}">{{ reg.helper.name }}</a>
+            <a class="button is-link is-small" href="tel:{{ reg.helper.phone }}">📞</a>
+        </div>
+    </div>
 {% endfor %}
-</ul>
+</div>
+{% endif %}
+<h5 class="subtitle">Helfer*in eintragen</h5>
 <form action="" method="post">
     {% csrf_token %}
 {% for field in add_helper_form %}
@@ -20,14 +28,20 @@
 {% else %}
         <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
         <div class="control">
+{% if field.widget_type == 'select' %}
+            <div class="select">
                 {{ field }}
             </div>
+{% else %}
+            {{ field }}
+{% endif %}
+        </div>
 {% endif %}
 {% if field.help_text %}
         <p class="is-size-7 mt-1">{{ field.help_text }}</p>
 {% endif %}
     </div>
 {% endfor %}
-    <button class="button is-link" type="submit">Hinzufuegen</button>
+    <button class="button is-link" type="submit">Hinzufügen</button>
 </form>
 {% endblock %}

shiftregister/team/templates/shift_list.html

@@ -1,11 +1,12 @@
 {% extends "team_base.html" %}
 
 {% block title %}{{ title }}{% endblock %}
+
 {% block content %}
-<h3 class="title is-3">{{title}}</h3>
-<ul>
+<h3 class="title">{{ title }}</h3>
+<div class="columns is-multiline">
 {% for shift in object_list %}
     {% include "partials/shift_list_item.html" %}
 {% endfor %}
-</ul>
+</div>
 {% endblock %}

shiftregister/team/templates/shift_overview.html

@@ -1,20 +1,24 @@
 {% extends "team_base.html" %}
 
 {% block title %}Schichtübersicht{% endblock %}
+
 {% block content %}
 {% if running_shifts %}
-<h3 class="title is-3">Laufende Schichten</h3>
-<ul>
+<h3 class="title">Laufende Schichten</h3>
+<div class="columns is-multiline">
 {% for shift in running_shifts %}
     {% include "partials/shift_list_item.html" %}
 {% endfor %}
-</ul>
+</div>
 {% endif %}
-<hr/>
-<h3 class="title is-3">Nächste Schichten pro Raum</h3>
-<ul>
+<hr>
+<h3 class="title is-spaced">Nächste Schichten pro Raum</h3>
+<div class="columns">
 {% for shift in next_shifts %}
-        {% include "partials/shift_list_item.html" %}
+    <div class="column is-one-quarter">
+        <h5 class="subtitle">{{ shift.room.name }}</h5>
+        {% include "partials/shift_box.html" %}
+    </div>
 {% endfor %}
-</ul>
+</div>
 {% endblock %}