Merge pull request 'ui-improvements' (#751) from ui-improvements into staging

Reviewed-on: #751

seeds.sql

@@ -12,6 +12,7 @@ INSERT INTO "role" (name) VALUES ('schnupperant');
 INSERT INTO "role" (name) VALUES ('kassier');
 INSERT INTO "role" (name) VALUES ('schriftfuehrer');
 INSERT INTO "role" (name) VALUES ('no-einschreibgebuehr');
+INSERT INTO "role" (name) VALUES ('schnupper-betreuer');
 INSERT INTO "user" (name, pw) VALUES('admin', '$argon2id$v=19$m=19456,t=2,p=1$dS/X5/sPEKTj4Rzs/CuvzQ$4P4NCw4Ukhv80/eQYTsarHhnw61JuL1KMx/L9dm82YM');
 INSERT INTO "user_role" (user_id, role_id) VALUES(1,1);
 INSERT INTO "user_role" (user_id, role_id) VALUES(1,2);

templates/admin/schnupper/index.html.tera

@@ -4,27 +4,33 @@
     <div class="max-w-screen-lg w-full">
         <h1 class="h1">Schnupper Verwaltung</h1>
         <div class="grid gap-3">
-            <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
-                 role="alert">
+            <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5">
                 <h2 class="h2">Angemeldete Personen: {{ schnupperanten | length }}</h2>
-                <div class="text-sm p-3">
-                    <ol class="list-decimal">
-                        {% for user in schnupperanten %}
-                            <li class="py-1 ml-4">
-                                <span class="flex items-center justify-between">
-                                    <span>
-                                      <span class="status-damage status-damage-{% if "paid" in user.roles %}none {% else %}locked {% endif %}"></span>&nbsp;{{ user.name }} ({{ user.mail }}
-                                      {%- if user.notes %} | {{ user.notes }}
-                                      {% endif -%}
-                                      )
-                                    </span>
-                                    <a class="btn btn-primary"
-                                      href="/admin/user/move/schnupperant/{{ user.id }}/to/scheckbuch"
-                                      onclick="return confirm('Willst du wirklich ein Scheckbuch erstellen? Die Person erhält ein Mail mit allen Infos.')">Zu Scheckbuch umwandeln</a>
+                <ol>
+                    {% for user in schnupperanten %}
+                        <li class="border-t border-gray-200 dark:border-primary-600 px-3 py-1">
+                            <span class="flex items-center justify-between">
+                                <span>
+                                    <span class="status-damage status-damage-{% if "paid" in user.roles %}none {% else %}locked {% endif %}"></span>&nbsp;{{ user.name }} ({{ user.mail }}
+                                    {%- if user.notes %} | {{ user.notes }}
+                                    {% endif -%}
+                                    )
                                 </span>
-                            </li>
-                        {% endfor %}
-                    </ol>
+                                <a class="btn btn-primary"
+                                   href="/admin/user/move/schnupperant/{{ user.id }}/to/scheckbuch"
+                                   onclick="return confirm('Willst du wirklich ein Scheckbuch erstellen? Die Person erhält ein Mail mit allen Infos.')">Zu Scheckbuch umwandeln</a>
+                            </span>
+                        </li>
+                    {% endfor %}
+                </ol>
+            </div>
+            <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5">
+                <h2 class="h2">Legende</h2>
+                <div class="px-3 py-1">
+                    <span class="status-damage status-damage-none"></span> Bezahlt - Juhuuu!
+                </div>
+                <div class="px-3 py-1">
+                    <span class="status-damage status-damage-locked"></span> Noch nicht bezahlt
                 </div>
             </div>
         </div>

templates/admin/user/fees.html.tera

@@ -2,9 +2,7 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full">
-        <h1 class="h1">
-            Gebühren
-        </h1>
+        <h1 class="h1">Gebühren</h1>
         <div class="search-wrapper">
             <label for="name" class="sr-only">Suche</label>
             <input type="search"
@@ -16,7 +14,7 @@
         <div id="filter-result-js" class="search-result"></div>
         <div class="border-r border-l border-gray-200 dark:border-primary-600">
             {% for fee in fees | sort(attribute="name") %}
-                <div class="border-t border-gray-200 dark:border-primary-600 {% if fee.paid %}bg-[#15803d] text-white {% else %} bg-white {% endif %} dark:bg-primary-900 text-black dark:text-white flex justify-between items-center px-3 py-1 " 
+                <div class="border-t border-gray-200 dark:border-primary-600 {% if fee.paid %}bg-[#15803d] text-white {% else %} bg-white dark:bg-primary-900 text-black dark:text-white {% endif %} flex justify-between items-center px-3 py-1 "
                      data-filterable="true"
                      data-filter="{{ fee.name }} {% if fee.paid %} has-already-paid {% else %} has-not-paid {% endif %}"
                      class="bg-white dark:bg-primary-900 p-3 rounded-md w-full">
@@ -32,13 +30,14 @@
                             {% endfor %}
                         </div>
                         {% if "admin" in loggedin_user.roles or "kassier" in loggedin_user.roles %}
-                            <div class="text-end"><a href="/admin/user/fees/paid?{{ fee.user_ids }}" class="btn btn-primary">Zahlungsstatus ändern</a></div>
+                            <div class="text-end">
+                                <a href="/admin/user/fees/paid?{{ fee.user_ids }}"
+                                   class="btn btn-primary">Zahlungsstatus ändern</a>
+                            </div>
                         {% endif %}
                     </div>
                 </div>
             {% endfor %}
-          </div>
         </div>
-
-
+    </div>
 {% endblock content %}