Enhance UI by updating header styles and improving group detail layout
This commit is contained in:
parent
5446175cad
commit
04b0a30e76
GPG key ID:
9833D3C5A25BD227
4 changed files with 48 additions and 16 deletions
|
|
@ -1,3 +1,8 @@
|
||||||
|
:root {
|
||||||
|
--pico-font-family-sans-serif: Exo, sans-serif;
|
||||||
|
--pico-font-weight: 450;
|
||||||
|
}
|
||||||
|
|
||||||
img.logo {
|
img.logo {
|
||||||
border-radius: var(--pico-border-radius);
|
border-radius: var(--pico-border-radius);
|
||||||
}
|
}
|
||||||
|
|
@ -92,8 +97,22 @@ article.message {
|
||||||
.big-logo {
|
.big-logo {
|
||||||
font-size: 8rem;
|
font-size: 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
font-weight: 900;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
.header-title {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
i.i {
|
||||||
|
margin-right: .5em;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,27 +12,29 @@
|
||||||
{% endblock title %}
|
{% endblock title %}
|
||||||
</title>
|
</title>
|
||||||
<link rel="icon" href="{% static "logo.svg" %}">
|
<link rel="icon" href="{% static "logo.svg" %}">
|
||||||
<link rel="stylesheet" href="{% static "css/main.css" %}">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap"
|
||||||
|
rel="stylesheet">
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css">
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css">
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.min.css">
|
href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.min.css">
|
||||||
<link rel="stylesheet"
|
<link rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">
|
||||||
|
<link rel="stylesheet" href="{% static "css/main.css" %}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<header>
|
<header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<a href="{% url 'index' %}">
|
|
||||||
<img class="logo"
|
|
||||||
src="{% static "logo.svg" %}"
|
|
||||||
height="64"
|
|
||||||
width="64"
|
|
||||||
alt="Musik">
|
|
||||||
</a>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="{% url 'index' %}">
|
||||||
|
<i class="ri-music-ai-fill"></i> <span class="header-title">Musik</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
{% if object.group %}
|
{% if object.group %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{% url 'group_detail' pk=object.group.pk %}">
|
<a href="{% url 'group_detail' pk=object.group.pk %}">
|
||||||
|
|
@ -40,6 +42,10 @@
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<li>{{ user.username }}</li>
|
<li>{{ user.username }}</li>
|
||||||
<li>
|
<li>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
</h2>
|
</h2>
|
||||||
<form method="post">
|
<form method="post">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<table class="striped">
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
{% if group.owner == user %}<th></th>{% endif %}
|
{% if group.owner == user %}<th></th>{% endif %}
|
||||||
<th>Date</th>
|
<th>Date</th>
|
||||||
|
|
@ -66,7 +66,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
{% if group.owner == user %}
|
{% if group.owner == user %}
|
||||||
<button type="submit" formaction="{% url "group_remove_game" pk=group.pk %}">
|
<button type="submit"
|
||||||
|
class="secondary"
|
||||||
|
formaction="{% url "group_remove_game" pk=group.pk %}">
|
||||||
<i class="ri-delete-bin-fill"></i> Supprimer les parties sélectionnées
|
<i class="ri-delete-bin-fill"></i> Supprimer les parties sélectionnées
|
||||||
</button>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
@ -115,6 +117,7 @@
|
||||||
</table>
|
</table>
|
||||||
{% if group.owner == user %}
|
{% if group.owner == user %}
|
||||||
<button type="submit"
|
<button type="submit"
|
||||||
|
class="secondary"
|
||||||
formaction="{% url "group_remove_member" pk=group.pk %}">
|
formaction="{% url "group_remove_member" pk=group.pk %}">
|
||||||
<i class="ri-delete-bin-fill"></i> Supprimer les membres sélectionnés
|
<i class="ri-delete-bin-fill"></i> Supprimer les membres sélectionnés
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -142,7 +145,7 @@
|
||||||
</summary>
|
</summary>
|
||||||
<form method="post">
|
<form method="post">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<table class="striped">
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th></th>
|
<th></th>
|
||||||
|
|
@ -176,7 +179,9 @@
|
||||||
</table>
|
</table>
|
||||||
{% if musics %}
|
{% if musics %}
|
||||||
<fieldset role="group">
|
<fieldset role="group">
|
||||||
<button type="submit" formaction="{% url "group_remove_music" pk=group.pk %}">
|
<button type="submit"
|
||||||
|
formaction="{% url "group_remove_music" pk=group.pk %}"
|
||||||
|
class="secondary">
|
||||||
<i class="ri-delete-bin-fill"></i> Supprimer
|
<i class="ri-delete-bin-fill"></i> Supprimer
|
||||||
</button>
|
</button>
|
||||||
<button type="submit"
|
<button type="submit"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
<p>Bienvenue {{ user.username }} !</p>
|
<p>Bienvenue {{ user.username }} !</p>
|
||||||
<h2>Mes groupes</h2>
|
<h2>
|
||||||
|
<i class="ri-group-2-fill"></i> Mes groupes
|
||||||
|
</h2>
|
||||||
<p>
|
<p>
|
||||||
<a href="{% url "group_create" %}" role="button"><i class="ri-add-box-fill"></i> Créer un groupe</a>
|
<a href="{% url "group_create" %}" role="button"><i class="ri-add-box-fill"></i> Créer un groupe</a>
|
||||||
{% if not user.youtubecredentials.credentials %}
|
{% if not user.youtubecredentials.credentials %}
|
||||||
|
|
@ -10,14 +12,14 @@
|
||||||
{% for group in user.owned_group_set.all %}
|
{% for group in user.owned_group_set.all %}
|
||||||
<a class="group" href="{{ group.get_absolute_url }}">
|
<a class="group" href="{{ group.get_absolute_url }}">
|
||||||
<article>
|
<article>
|
||||||
{{ group.name }} <i class="ri-vip-crown-fill owner"></i>
|
<i class="ri-vip-crown-fill owner i"></i> {{ group.name }}
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% for group in user.group_set.all %}
|
{% for group in user.group_set.all %}
|
||||||
<a class="group" href="{{ group.get_absolute_url }}">
|
<a class="group" href="{{ group.get_absolute_url }}">
|
||||||
<article>
|
<article>
|
||||||
{{ group.name }} <span class="group-owner">{{ group.owner }}</span>
|
<i class="ri-group-2-fill i"></i> {{ group.name }} <span class="group-owner">{{ group.owner }}</span>
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue