Refactor music management UI: separate group musics into its own template, enhance form structure, and improve responsiveness
Fix #5
This commit is contained in:
parent
b30ee77132
commit
c7b907f115
5 changed files with 113 additions and 76 deletions
|
@ -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
66
game/templates/game/include/group_musics.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue