New album.html

This commit is contained in:
augustin64 2023-06-11 21:33:54 +02:00
parent ea04e8271e
commit 7369e6f8d3
4 changed files with 115 additions and 64 deletions

View File

@ -192,7 +192,7 @@ def quit_album(uuid):
if len(users) == 1:
flash("Vous êtes seul dans cet album, le quitter entraînera sa suppression.")
return redirect(f"/albums/{uuid}/delete")
return redirect(f"/albums/{uuid}#delete")
user.quit_album(uuid)
flash("Album quitté.")

View File

@ -260,6 +260,15 @@ img.partition-thumbnail {
min-height: 50px;
}
.edit-button {
float: right;
transform: translateX(-96%) translateY(-162%);
padding: 2%;
border-radius: 3px;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
background-color: var(--color-blue);
}
/** Sidebar: "settings" */
#albums {
overflow: scroll;
@ -275,9 +284,9 @@ img.partition-thumbnail {
margin-left: 5px;
}
#settings-container>button {
#settings-container button {
background-color: inherit;
color: inherit;
color: var(--color-text);
border-style: none;
border-radius: 3px;
font-size: .9rem;
@ -285,7 +294,7 @@ img.partition-thumbnail {
padding: 5px;
}
#settings-container>button:hover {
#settings-container button:hover {
background-color: var(--color-crust);
}
@ -301,12 +310,13 @@ img.partition-thumbnail {
border-radius: 3px;
}
button#logout:hover {
/* Danger buttons */
button#logout:hover, a#delete-album:hover {
background-color: var(--color-red);
color: var(--color-mantle);
}
button#logout {
button#logout, a#delete-album {
color: var(--color-red);
}
@ -338,7 +348,7 @@ button#logout>svg {
min-width: 160px;
border-radius: 3px;
box-shadow: 0 4px 10px var(--color-surface1); /* Little shadow to add some depth */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
@ -347,12 +357,15 @@ button#logout>svg {
width: unset;
}
.dropdown-content > a > div:hover {
.dropdown-content > a:hover {
background-color: var(--color-surface0);
}
.dropdown-content > a {
color: var(--color-text);
padding: 3px 0;
display: block;
border-radius: inherit;
}
@ -452,3 +465,13 @@ input[type="file"] {
#search-submit {
padding: 5px 5px;
}
/** Flashed messages */
.flash {
margin: 1em;
padding: 1em;
background: var(--color-mantle);
border: 2px solid var(--color-lavender);
border-radius: 3px;
}

View File

@ -1,22 +1,47 @@
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}{{ album.name }}{% endblock %}</h1>
{% block title %}{{ album.name }}{% endblock %}
{% block dialogs %}
<dialog id="add-partition">
<h2>Ajouter une partition à {{ album.name }}</h2>
<form action="/albums/{{ album.uuid }}/add-partition" method="post" enctype="multipart/form-data">
<input name="name" type="text" required="" placeholder="Titre"><br/>
<input name="author" type="text" placeholder="Auteur"><br/>
<textarea id="paroles" name="body" type="text" placeholder="Paroles"></textarea><br/>
<input name="file" type="file" required=""><br/>
<input type="submit" value="Ajouter">
</form>
<a href="#!" class="close-dialog">Close</a>
</dialog>
<dialog id="delete">
<h2>Supprimer l'album</h2>
Êtes vous sûr de vouloir supprimer cet album ?
<br/><br/>
<form method="post" action="/albums/{{ album.uuid }}/delete">
<input type="submit" style="background-color: var(--color-red);" value="Supprimer">
</form>
<a href="#!" class="close-dialog">Close</a>
</dialog>
{% endblock %}
{% block header_actions %}
<div id="users-list">
{% block content %}
<header id="album-header">
<h2 id="album-title">{{ album.name }}</h2>
<div id="header-actions">
<section id="users">
{% for album_user in album.users %}
<div class="user-profile-picture" style="background-color:{{ album_user.color }};" title="{{ album_user.username }}">
{{ album_user.username[0] | upper }}
</div>
{% endfor %}
</div>
<div class="dropdown">
<button class="dropbtn"></button>
<div class="dropdown-content">
</section>
<div class="dropdown dp1">
+
<div class="dropdown-content dp1">
{% if g.user %}
<a href="/albums/{{ album.uuid }}/add-partition">Ajouter une partition</a>
<a href="#add-partition">Ajouter une partition</a>
{% endif %}
{% if not_participant %}
<a href="/albums/{{ album.uuid }}/join">Rejoindre</a>
@ -24,17 +49,15 @@
<a href="/albums/{{ album.uuid }}/quit">Quitter</a>
{% endif %}
{% if g.user.access_level == 1 %}
<a id="delete-album" href="/albums/{{ album.uuid }}/delete">Supprimer</a>
<a id="delete-album" href="#delete">Supprimer</a>
{% endif %}
</div>
</div>
{% endblock %}
{% block content %}
</div>
</div>
</header>
<hr/>
{% if partitions|length != 0 %}
<br/><br/>
<div id="partitions-grid">
<section id="partitions-grid">
{% for partition in partitions | reverse %}
<div>
<a href="/albums/{{ album.uuid }}/{{ partition['uuid'] }}">
@ -51,7 +74,7 @@
{% endif %}
</div>
{% endfor %}
</div>
</section>
{% else %}
<br/>
<div id="partitions-grid" style="display: inline;">Aucune partition disponible</div>

View File

@ -65,7 +65,8 @@
<div id="settings-container">
{% if g.user %}
<button href="{{ url_for('auth.logout') }}" id="logout">
<a href="{{ url_for('auth.logout') }}">
<button id="logout">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-logout" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
@ -73,9 +74,10 @@
<path d="M18 15l3 -3"></path>
</svg>
Déconnexion
</button><br/>
</button>
</a><br/>
{% if g.user.access_level == 1 %}
<button href="/admin">Panneau admin</button><br/>
<a href="/admin"><button>Panneau admin</button></a><br/>
{% endif %}
<div class="user">
<div class="user-profile-picture" style="background-color:{{ user.color }};"
@ -85,15 +87,18 @@
<div class="username">{{ user.username }}</div>
</div>
{% else %}
<button href="{{ url_for('auth.register') }}">Créer un compte</button>
<button href="{{ url_for('auth.login') }}">Se connecter</button>
<a href="{{ url_for('auth.register') }}"><button>Créer un compte</button></a>
<a href="{{ url_for('auth.login') }}"><button>Se connecter</button></a>
{% endif %}
</div>
</div>
<div id="content-container">
<header id="page-header">
{% block header %}{% endblock %}
<h1>PartitionCloud</h1>
</header>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
<section id="content">
{% block content %}{% endblock %}
</section>