edpibu/musik
edpibu/musik
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Refactor music management UI: separate group musics into its own template, enhance form structure, and improve responsiveness

Browse source 
Fix #5
This commit is contained in:
Edgar P. Burkhart 2025-06-15 16:37:09 +02:00
parent b30ee77132
commit c7b907f115
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
5 changed files with 113 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

18
base/static/css/main.css
View file

@ -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;
}
}
}

24
base/templates/auth/user_form.html
View file

@ -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 %}

16
base/templates/registration/login.html
View file

@ -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 %}

65
game/templates/game/group_detail.html
View file

@ -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 %}

66
game/templates/game/include/group_musics.html Normal file
View file

@ -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>