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
|
@ -179,9 +179,25 @@ table select {
|
||||||
color: var(--pico-color-red-500);}
|
color: var(--pico-color-red-500);}
|
||||||
}
|
}
|
||||||
|
|
||||||
table.results {
|
table.results, table.musics {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.sc i {
|
.sc i {
|
||||||
margin-right: .5em;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,6 +1,24 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% load form %}
|
{% load form %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>Créer un compte</h1>
|
<h1>Créer mon compte</h1>
|
||||||
{% form form submit="Créer mon compte" %}
|
{% for error in form.non_field_errors %}<article class="message error">{{ error }}</article>{% endfor %}
|
||||||
{% endblock content %}
|
<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 %}
|
||||||
|
|
|
@ -5,9 +5,9 @@
|
||||||
<form method="post" {% if action %}action="{% url action %}"{% endif %}>
|
<form method="post" {% if action %}action="{% url action %}"{% endif %}>
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{% for field in form %}
|
{% for field in form %}
|
||||||
<fieldset>
|
{% if field.id_for_label %}
|
||||||
{% if field.id_for_label %}
|
<label for="{{ field.id_for_label }}">
|
||||||
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
|
{{ field.label }}
|
||||||
{% else %}
|
{% else %}
|
||||||
<legend>{{ field.label }}</legend>
|
<legend>{{ field.label }}</legend>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -15,16 +15,16 @@
|
||||||
{% if field.errors %}
|
{% if field.errors %}
|
||||||
<small id="{{ field.errors.field_id }}_error" class="form-error">{{ field.errors|join:", " }}</small>
|
<small id="{{ field.errors.field_id }}_error" class="form-error">{{ field.errors|join:", " }}</small>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</fieldset>
|
</label>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<button type="submit">Me connecter</button>
|
<button type="submit">Me connecter</button>
|
||||||
<p>
|
<fieldset>
|
||||||
<a href="{% url "signup" %}" role="button" class="secondary">Créer mon compte</a>
|
<a href="{% url "signup" %}" role="button" class="secondary">Créer mon compte</a>
|
||||||
</p>
|
</fieldset>
|
||||||
<p>
|
<fieldset>
|
||||||
<a href="{% url "password_reset" %}"
|
<a href="{% url "password_reset" %}"
|
||||||
role="button"
|
role="button"
|
||||||
class="outline secondary">J'ai oublié mon mot de passe</a>
|
class="outline secondary">J'ai oublié mon mot de passe</a>
|
||||||
</p>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
@ -12,68 +12,5 @@
|
||||||
{% include "game/include/group_buttons.html" %}
|
{% include "game/include/group_buttons.html" %}
|
||||||
{% include "game/include/group_games.html" %}
|
{% include "game/include/group_games.html" %}
|
||||||
{% include "game/include/group_members.html" %}
|
{% include "game/include/group_members.html" %}
|
||||||
<h2>
|
{% include "game/include/group_musics.html" %}
|
||||||
<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>
|
|
||||||
{% endblock content %}
|
{% 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