New album.html

partitioncloud/modules/albums.py

@@ -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é.")

partitioncloud/static/style.css

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

partitioncloud/templates/albums/album.html

@@ -1,22 +1,47 @@
 {% extends 'base.html' %}
 
-{% block header %}
+{% block title %}{{ album.name }}{% endblock %}
-<h1>{% block title %}{{ album.name }}{% endblock %}</h1>
+
+
+{% 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 %}
+{% block content %}
-<div id="users-list">
+<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>
+    </section>
-<div class="dropdown">
+    <div class="dropdown dp1">
-  <button class="dropbtn"></button>
+      +
-  <div class="dropdown-content">
+      <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>
+    </div>
-
+  </div>
-{% endblock %}
+</header>
-
+<hr/>
-{% block content %}
 {% if partitions|length != 0 %}
-<br/><br/>
+<section id="partitions-grid">
-<div 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>

partitioncloud/templates/base.html

@@ -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>
+          <a href="{{ url_for('auth.register') }}"><button>Créer un compte</button></a>
-          <button href="{{ url_for('auth.login') }}">Se connecter</button>
+          <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>