Improve layout

shiftregister/app/templates/shift.html

@@ -20,14 +20,14 @@
             <strong>Dauer:</strong> {{ shift.duration }}<br>
             <strong>Treffpunkt:</strong> {{ shift.room.meeting_location|linebreaksbr }}
         </p>
-        {% if shift.room.description %}
-            <strong>Beschreibung:</strong>
-            <p>{{ shift.room.description|linebreaksbr }}</p>
-        {% endif %}
-        {% if shift.description %}
-            <strong>Zusatzinfo:</strong><br>
-            <p>{{ shift.description|linebreaksbr }}</p>
-        {% endif %}
+{% if shift.room.description %}
+        <strong>Beschreibung:</strong>
+        <p>{{ shift.room.description|linebreaksbr }}</p>
+{% endif %}
+{% if shift.description %}
+        <strong>Zusatzinfo:</strong>
+        <p>{{ shift.description|linebreaksbr }}</p>
+{% endif %}
     </div>
 {% if can_register and not shift.deleted %}
     <form action="" method="post">

shiftregister/signage/forms.py

@@ -2,4 +2,4 @@ from django import forms
 
 
 class TeamBackupForm(forms.Form):
-    name = forms.CharField(max_length=100)
+    name = forms.CharField(max_length=100, widget=forms.TextInput(attrs={"class": "input"}))

shiftregister/team/templates/partials/shift_box.html

@@ -7,9 +7,10 @@
         <strong>Beginn:</strong> {{ shift.start_at }}<br>
         <strong>Dauer:</strong> {{ shift.duration }}<br>
         <strong>Belegung:</strong> {{ shift.shiftregistration_set.count }}/{{ shift.required_helpers|default:shift.room.required_helpers }}
-        {% if shift.teambackup_set.all.count %}<br>
-        <strong>Backup Teammitglied(er): {%for member in shift.teambackup_set.all%}{{member.name}}, {%endfor%}</strong>
-        {% endif %}
+{% if shift.teambackup_set.all.count %}
+        <br>
+        <strong>Backup-Teammitglied(er):</strong> {% for member in shift.teambackup_set.all %}{{ member.name }}{% if not forloop.last %}, {% endif %}{% endfor %}
+{% endif %}
     </div>
     <div class="is-flex is-justify-content-end">
         <a class="button is-info is-small" href="{% url 'team:shift' shift.id %}">Details</a>

shiftregister/team/templates/shift_detail.html

@@ -1,8 +1,9 @@
 {% extends "team_base.html" %}
 
 {% block title %}Schichtdetails{% endblock %}
+
 {% block content %}
-<h3 class="title">{% if shift.deleted %}(gelöscht) {% endif %}{{ shift.room.name }} {{ shift.start_at }} ({{ shift.registration_count }}/{{ shift.required_helpers|default:shift.room.required_helpers }})</h3>
+<h3 class="title is-spaced">{% if shift.deleted %}(gelöscht) {% endif %}{{ shift.room.name }} {{ shift.start_at }} ({{ shift.registration_count }}/{{ shift.required_helpers|default:shift.room.required_helpers }})</h3>
 {% if shift.description %}
 <div class="content">
     <em>{{ shift.description|linebreaksbr }}</em>
@@ -13,17 +14,19 @@
 <div class="columns is-multiline">
 {% for reg in shift.shiftregistration_set.all %}
     <div class="column is-one-quarter">
-        <div class="box is-flex is-align-items-center is-justify-content-space-between">
-            <div class="content">
-            <a class="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>
-            {% if not reg.is_checked_in %}
-            <a class="button is-warning is-small" href="{%url 'team:checkin' reg.pk%}">als angekommen markieren</a><br>
-            {% else %}
-            <div class="button is-success"> ✓</div>
-            {% endif %}
-            <a class="button is-danger is-small" href="{%url 'team:unregister' reg.pk%}">helfer abmelden</a>
-        </div>
+        <div class="box">
+            <div class="is-flex is-align-items-center is-justify-content-space-between mb-2">
+                <a class="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 class="buttons">
+{% if not reg.is_checked_in %}
+                <a class="button is-warning is-small" href="{% url 'team:checkin' reg.pk %}">Als angekommen markieren</a><br>
+{% else %}
+                <button class="button is-success is-small" style="pointer-events:none;">✓</button>
+{% endif %}
+                <a class="button is-danger is-small" href="{% url 'team:unregister' reg.pk %}">Helfer*in abmelden</a>
+            </div>
         </div>
     </div>
 {% endfor %}
@@ -58,37 +61,42 @@
     <button class="button is-link" type="submit">Hinzufügen</button>
 </form>
 <hr>
-        {% if shift.teambackup_set.all.count %}<br>
-        <strong>Backup Teammitglied(er):</strong>
-        <ul>
-            {%for member in shift.teambackup_set.all%}
-                <li>{{member.name}} <a class="button is-danger is-small" href="{%url 'signage:work_remove' member.pk%}">entfernen</a></li>
-            {%endfor%}
-        </ul>
-        {% endif %}
-        <form action="{%url 'signage:work_add' shift.pk%}?redir={{request.path}}" method="post">
-            {% csrf_token %}
-        {% for field in backup_form%}
-            <div class="field">
-        {% if field.widget_type == 'checkbox' %}
-                <div class="control">
-                    <label class="checkbox" for="{{ field.id_for_label }}">{{ field }} {{ field.label }}</label>
-                </div>
-        {% else %}
-                <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
-                <div class="control">
-                    {{ field }}
-                </div>
-        {% endif %}
-        {% for error in field.errors %}
-                <p class="help is-danger">{{ error }}</p>
-        {% endfor %}
-        {% if field.help_text %}
-                <p class="help">{{ field.help_text }}</p>
-        {% endif %}
-            </div>
-        {% endfor %}
-            <button class="button is-link" type="submit">Team hinzufuegen</button>
-        </form>
+{% if shift.teambackup_set.all.count %}
+<h5 class="subtitle">Backup-Teammitglied(er)</h5>
+<div class="columns">
+{% for member in shift.teambackup_set.all %}
+    <div class="column is-one-quarter">
+        <div class="box is-flex is-align-items-center is-justify-content-space-between">
+            <span class="is-size-4">{{ member.name }}</span>
+            <a class="button is-danger is-small" href="{% url 'signage:work_remove' member.pk %}">entfernen</a>
+        </div>
+    </div>
+{% endfor %}
+</div>
+{% endif %}
+<h5 class="subtitle">Backup-Teammitglied eintragen</h5>
+<form action="{% url 'signage:work_add' shift.pk %}?redir={{ request.path }}" method="post">
+    {% csrf_token %}
+{% for field in backup_form %}
+    <div class="field">
+{% if field.widget_type == 'checkbox' %}
+        <div class="control">
+            <label class="checkbox" for="{{ field.id_for_label }}">{{ field }} {{ field.label }}</label>
+        </div>
+{% else %}
+        <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+        <div class="control">
+            {{ field }}
+        </div>
+{% endif %}
+{% for error in field.errors %}
+        <p class="help is-danger">{{ error }}</p>
+{% endfor %}
+{% if field.help_text %}
+        <p class="help">{{ field.help_text }}</p>
+{% endif %}
     </div>
+{% endfor %}
+    <button class="button is-link" type="submit">Team hinzufügen</button>
+</form>
 {% endblock %}