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 %}
+{% if shift.room.description %}
         <strong>Beschreibung:</strong>
         <p>{{ shift.room.description|linebreaksbr }}</p>
-        {% endif %}
+{% endif %}
-        {% if shift.description %}
+{% if shift.description %}
-            <strong>Zusatzinfo:</strong><br>
+        <strong>Zusatzinfo:</strong>
         <p>{{ shift.description|linebreaksbr }}</p>
-        {% endif %}
+{% 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>
+{% if shift.teambackup_set.all.count %}
-        <strong>Backup Teammitglied(er): {%for member in shift.teambackup_set.all%}{{member.name}}, {%endfor%}</strong>
+        <br>
-        {% endif %}
+        <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,16 +14,18 @@
 <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="box">
-            <div class="content">
+            <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>
-            {% if not reg.is_checked_in %}
+            </div>
-            <a class="button is-warning is-small" href="{%url 'team:checkin' reg.pk%}">als angekommen markieren</a><br>
+            <div class="buttons">
-            {% else %}
+{% if not reg.is_checked_in %}
-            <div class="button is-success"> ✓</div>
+                <a class="button is-warning is-small" href="{% url 'team:checkin' reg.pk %}">Als angekommen markieren</a><br>
-            {% endif %}
+{% else %}
-            <a class="button is-danger is-small" href="{%url 'team:unregister' reg.pk%}">helfer abmelden</a>
+                <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>
@@ -58,37 +61,42 @@
     <button class="button is-link" type="submit">Hinzufügen</button>
 </form>
 <hr>
-        {% if shift.teambackup_set.all.count %}<br>
+{% if shift.teambackup_set.all.count %}
-        <strong>Backup Teammitglied(er):</strong>
+<h5 class="subtitle">Backup-Teammitglied(er)</h5>
-        <ul>
+<div class="columns">
-            {%for member in shift.teambackup_set.all%}
+{% 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>
+    <div class="column is-one-quarter">
-            {%endfor%}
+        <div class="box is-flex is-align-items-center is-justify-content-space-between">
-        </ul>
+            <span class="is-size-4">{{ member.name }}</span>
-        {% endif %}
+            <a class="button is-danger is-small" href="{% url 'signage:work_remove' member.pk %}">entfernen</a>
-        <form action="{%url 'signage:work_add' shift.pk%}?redir={{request.path}}" method="post">
+        </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%}
+{% for field in backup_form %}
     <div class="field">
-        {% if field.widget_type == 'checkbox' %}
+{% if field.widget_type == 'checkbox' %}
         <div class="control">
             <label class="checkbox" for="{{ field.id_for_label }}">{{ field }} {{ field.label }}</label>
         </div>
-        {% else %}
+{% else %}
         <label class="label" for="{{ field.id_for_label }}">{{ field.label }}</label>
         <div class="control">
             {{ field }}
         </div>
-        {% endif %}
+{% endif %}
-        {% for error in field.errors %}
+{% for error in field.errors %}
         <p class="help is-danger">{{ error }}</p>
-        {% endfor %}
+{% endfor %}
-        {% if field.help_text %}
+{% if field.help_text %}
         <p class="help">{{ field.help_text }}</p>
-        {% endif %}
+{% endif %}
-            </div>
-        {% endfor %}
-            <button class="button is-link" type="submit">Team hinzufuegen</button>
-        </form>
     </div>
+{% endfor %}
+    <button class="button is-link" type="submit">Team hinzufügen</button>
+</form>
 {% endblock %}