From c7b907f1151925047d34f9e93a544e5a3cc4fd97 Mon Sep 17 00:00:00 2001
From: "Edgar P. Burkhart" <git@edgarpierre.fr>
Date: Sun, 15 Jun 2025 16:37:09 +0200
Subject: [PATCH] Refactor music management UI: separate group musics into its
 own template, enhance form structure, and improve responsiveness Fix #5

---
 base/static/css/main.css                      | 18 ++++-
 base/templates/auth/user_form.html            | 24 ++++++-
 base/templates/registration/login.html        | 16 ++---
 game/templates/game/group_detail.html         | 65 +-----------------
 game/templates/game/include/group_musics.html | 66 +++++++++++++++++++
 5 files changed, 113 insertions(+), 76 deletions(-)
 create mode 100644 game/templates/game/include/group_musics.html

diff --git a/base/static/css/main.css b/base/static/css/main.css
index 23dffab..8120679 100644
--- a/base/static/css/main.css
+++ b/base/static/css/main.css
@@ -179,9 +179,25 @@ table select {
     color: var(--pico-color-red-500);}
 }
 
-table.results {
+table.results, table.musics {
     white-space: nowrap;
 }
 .sc i {
     margin-right: .5em;
 }
+
+@media (width < 576px) {
+    [role="group"] {
+        display: grid;
+        & > :first-child {
+            border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0 !important;
+        }
+        & > :not(:first-child) {
+            margin-left: 0 !important;
+            margin-top: calc(var(--pico-border-width) * -1);
+        }
+        & > :last-child {
+            border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius) !important;
+        }
+    }
+}
diff --git a/base/templates/auth/user_form.html b/base/templates/auth/user_form.html
index 20c40a8..c895f16 100644
--- a/base/templates/auth/user_form.html
+++ b/base/templates/auth/user_form.html
@@ -1,6 +1,24 @@
 {% extends "base.html" %}
 {% load form %}
 {% block content %}
-    <h1>Créer un compte</h1>
-    {% form form submit="Créer mon compte" %}
-    {% endblock content %}
+    <h1>Créer mon compte</h1>
+    {% for error in form.non_field_errors %}<article class="message error">{{ error }}</article>{% endfor %}
+    <form method="post" {% if action %}action="{% url action %}"{% endif %}>
+        {% csrf_token %}
+        <fieldset>
+            {% for field in form %}
+                <label for="{{ field.id_for_label }}">
+                    {{ field.label }}
+                    {{ field }}
+                    {% if field.errors %}
+                        <small id="{{ field.errors.field_id }}_error" class="form-error">{{ field.errors|join:", " }}</small>
+                    {% endif %}
+                </label>
+            {% endfor %}
+        </fieldset>
+        <button type="submit">Créer mon compte</button>
+        <fieldset>
+            <a href="{% url "login" %}" role="button" class="secondary">J'ai déjà un compte</a>
+        </fieldset>
+    </form>
+{% endblock content %}
diff --git a/base/templates/registration/login.html b/base/templates/registration/login.html
index 8bbb8fd..4e0394e 100644
--- a/base/templates/registration/login.html
+++ b/base/templates/registration/login.html
@@ -5,9 +5,9 @@
     <form method="post" {% if action %}action="{% url action %}"{% endif %}>
         {% csrf_token %}
         {% for field in form %}
-            <fieldset>
-                {% if field.id_for_label %}
-                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+            {% if field.id_for_label %}
+                <label for="{{ field.id_for_label }}">
+                    {{ field.label }}
                 {% else %}
                     <legend>{{ field.label }}</legend>
                 {% endif %}
@@ -15,16 +15,16 @@
                 {% if field.errors %}
                     <small id="{{ field.errors.field_id }}_error" class="form-error">{{ field.errors|join:", " }}</small>
                 {% endif %}
-            </fieldset>
+            </label>
         {% endfor %}
         <button type="submit">Me connecter</button>
-        <p>
+        <fieldset>
             <a href="{% url "signup" %}" role="button" class="secondary">Créer mon compte</a>
-        </p>
-        <p>
+        </fieldset>
+        <fieldset>
             <a href="{% url "password_reset" %}"
                role="button"
                class="outline secondary">J'ai oublié mon mot de passe</a>
-        </p>
+        </fieldset>
     </form>
 {% endblock content %}
diff --git a/game/templates/game/group_detail.html b/game/templates/game/group_detail.html
index c5165f0..90e9901 100644
--- a/game/templates/game/group_detail.html
+++ b/game/templates/game/group_detail.html
@@ -12,68 +12,5 @@
     {% include "game/include/group_buttons.html" %}
     {% include "game/include/group_games.html" %}
     {% include "game/include/group_members.html" %}
-    <h2>
-        <i class="ri-music-2-fill"></i> Mes musiques <span class="music-count">{{ musics.count }}</span>
-    </h2>
-    <details>
-        <summary role="button">
-            <i class="ri-music-2-fill"></i> Liste des musiques
-        </summary>
-        <form method="post">
-            {% csrf_token %}
-            <table>
-                <thead>
-                    <tr>
-                        <th></th>
-                        <th>Musique</th>
-                        <th>ID</th>
-                        <th>
-                            <i class="ri-history-fill"></i>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for music in musics %}
-                        <tr>
-                            <td>
-                                <input type="checkbox" name="musics" value="{{ music.pk }}">
-                            </td>
-                            <th>{{ music.title }}</th>
-                            <td>
-                                <a href="https://youtu.be/{{ music.yt_id }}">{{ music.yt_id }}</a>
-                            </td>
-                            <td>
-                                <input type="checkbox" disabled {% if music.blacklisted %}checked{% endif %}>
-                            </td>
-                        </tr>
-                    {% empty %}
-                        <tr>
-                            <td colspan="4">Aucune musique.</td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% if musics %}
-                <fieldset role="group">
-                    <button type="submit"
-                            formaction="{% url "group_remove_music" pk=group.pk %}"
-                            class="secondary">
-                        <i class="ri-delete-bin-fill"></i> Supprimer
-                    </button>
-                    <button type="submit"
-                            class="secondary"
-                            formaction="{% url "group_unblacklist_music" pk=group.pk %}">
-                        <i class="ri-history-fill"></i> Retirer de la blacklist
-                    </button>
-                </fieldset>
-            {% endif %}
-        </form>
-    </details>
-    <form method="post" action="{% url "group_add_music" pk=group.pk %}">
-        {% csrf_token %}
-        <fieldset>
-            <textarea name="yt_id" id="yt_id" placeholder="Musiques" required></textarea>
-            <button type="submit">Ajouter</button>
-        </fieldset>
-    </form>
+    {% include "game/include/group_musics.html" %}
 {% endblock content %}
diff --git a/game/templates/game/include/group_musics.html b/game/templates/game/include/group_musics.html
new file mode 100644
index 0000000..56117cf
--- /dev/null
+++ b/game/templates/game/include/group_musics.html
@@ -0,0 +1,66 @@
+<h2>
+    <i class="ri-music-2-fill"></i> Mes musiques <span class="music-count">{{ musics.count }}</span>
+</h2>
+<details>
+    <summary role="button">
+        <i class="ri-music-2-fill"></i> Liste des musiques
+    </summary>
+    <form method="post">
+        {% csrf_token %}
+        <div class="overflow-auto">
+            <table class="musics">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th>Musique</th>
+                        <th>ID</th>
+                        <th>
+                            <i class="ri-history-fill"></i>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for music in musics %}
+                        <tr>
+                            <td>
+                                <input type="checkbox" name="musics" value="{{ music.pk }}">
+                            </td>
+                            <th>{{ music.title }}</th>
+                            <td>
+                                <a href="https://youtu.be/{{ music.yt_id }}">{{ music.yt_id }}</a>
+                            </td>
+                            <td>
+                                <input type="checkbox" disabled {% if music.blacklisted %}checked{% endif %}>
+                            </td>
+                        </tr>
+                    {% empty %}
+                        <tr>
+                            <td colspan="4">Aucune musique.</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% if musics %}
+            <fieldset role="group">
+                <button type="submit"
+                        formaction="{% url "group_remove_music" pk=group.pk %}"
+                        class="secondary">
+                    <i class="ri-delete-bin-fill"></i> Supprimer
+                </button>
+                <button type="submit"
+                        class="secondary"
+                        formaction="{% url "group_unblacklist_music" pk=group.pk %}">
+                    <i class="ri-history-fill"></i> Retirer de la blacklist
+                </button>
+            </fieldset>
+        {% endif %}
+    </form>
+</details>
+<form method="post" action="{% url "group_add_music" pk=group.pk %}">
+    {% csrf_token %}
+    <fieldset>
+        <textarea name="yt_id" id="yt_id" placeholder="Musiques" required></textarea>
+        <button type="submit">Ajouter</button>
+    </fieldset>
+</form>