Rewrite admin panel & partition edit HTML

partitioncloud/static/style.css

@@ -76,9 +76,33 @@
     --sidebar-size: 200px;
 }
 
+* {
+    font-family: var(--font-family);
+}
+
+
+/** Hide scrollbars (deeply needed on Chromium) */
+::-webkit-scrollbar {
+    display: none;
+}
+
+:root {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
 
 /** Generic things */
-h1, #sidebar>h2 {
+h1 {
+    font-size: 32px;
+}
+
+h2 {
+    font-size: 24px;
+}
+
+h1,
+#sidebar>h2 {
     margin-left: 30px;
 }
 
@@ -121,6 +145,7 @@ body {
     margin: 5px;
     border-radius: 3px;
     background-color: inherit;
+    overflow-x: hidden;
 }
 
 .album-cover:hover {
@@ -138,7 +163,6 @@ body {
     bottom: 0;
 }
 
-
 #slide {
     padding: 10px 6px 3px 10px;
     border-radius: 3px;
@@ -160,7 +184,6 @@ input:checked#slide-sidebar~#sidebar {
     transition: display 0s 0.5s;
 }
 
-
 input:checked#slide-sidebar~label {
     left: 10px;
 }
@@ -176,6 +199,7 @@ input:checked#slide-sidebar~label {
     transition: left 0.5s ease;
 }
 
+
 /** Albums: users */
 #album-header {
     display: flex;
@@ -209,6 +233,15 @@ section#users {
     color: var(--color-mantle);
 }
 
+.user-profile {
+    display: inline-flex;
+}
+
+.user-profile .user-profile-picture {
+    position: absolute;
+    left: 30px;
+}
+
 .dropdown {
     background-color: var(--color-surface1);
 }
@@ -271,7 +304,8 @@ img.partition-thumbnail {
     border-radius: 3px;
     box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
     background-color: var(--color-blue);
-  }
+}
+
 
 /** Sidebar content */
 #new-album-button {
@@ -314,8 +348,14 @@ img.partition-thumbnail {
     border-style: none;
     border-radius: 3px;
     font-size: .9rem;
+
+    width: 100%;
     width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
+
     padding: 5px;
+    padding-left: 20px; /* Prevent overlay with svg */
 }
 
 #settings-container button:hover {
@@ -327,20 +367,16 @@ img.partition-thumbnail {
     bottom: 0;
 
     background-color: var(--color-base);
-    width: 180px; /*TODO width: calc(var-(--sidebar-size) - 20px); ?*/
+    width: 180px;
+    /*TODO width: calc(var-(--sidebar-size) - 20px); ?*/
     padding: 5px;
     margin: 5px;
 
     border-radius: 3px;
 }
 
-/* Danger buttons */
+button#logout,
-button#logout:hover, a#delete-album:hover {
+a#delete-album {
-    background-color: var(--color-red);
-    color: var(--color-mantle);
-}
-
-button#logout, a#delete-album {
     color: var(--color-red);
 }
 
@@ -360,6 +396,7 @@ button#logout, a#delete-album {
     background-color: var(--color-mantle);
 }
 
+
 /** Dropdown */
 .dropdown-content {
     display: none;
@@ -375,17 +412,16 @@ button#logout, a#delete-album {
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
 
-
 .dropdown:hover .dropdown-content {
     display: block;
     width: unset;
 }
 
-.dropdown-content > a:hover {
+.dropdown-content>a:hover {
     background-color: var(--color-surface0);
 }
 
-.dropdown-content > a {
+.dropdown-content>a {
     color: var(--color-text);
     padding: 3px 0;
     display: block;
@@ -393,7 +429,6 @@ button#logout, a#delete-album {
 }
 
 
-
 /** Dialogs */
 dialog {
     display: none;
@@ -420,7 +455,7 @@ dialog:target {
     display: block;
 }
 
-dialog:target ~ .mask {
+dialog:target~.mask {
     display: block;
 }
 
@@ -437,38 +472,50 @@ dialog:target ~ .mask {
 }
 
 
-/** Forms */
+/** Different kinds of inputs */
 input[type="text"],
 input[type="search"],
 input[type="password"],
 select,
 textarea {
-  padding: 7px;
+    padding: 7px;
-  background-color: var(--color-surface1);
+    background-color: var(--color-surface1);
-  color: var(--color-text);
+    color: var(--color-text);
-  margin: 3px;
+    margin: 3px;
 
-  border-radius: 3px;
+    border-radius: 3px;
-  border-width: 0;
+    border-width: 0;
-  border-style: unset;
+    border-style: unset;
 }
 
 select {
-    max-width: 190px; /* We don't want loong album names to break the css */
+    max-width: 190px;
+    /* We don't want loong album names to break the css */
 }
 
 textarea {
-  resize: both;
+    resize: both;
+    min-width: 178px;
 }
 
-input[type="submit"] {
+input[type="submit"],
+button {
     padding: 10px 20px;
     border: none;
     border-radius: 3px;
     margin: 5px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+input[type="submit"] {
     background-color: var(--color-blue);
     color: var(--color-base);
-    cursor: pointer;
+}
+
+button {
+    background-color: var(--color-subtext0);
+    color: var(--color-base)
 }
 
 /* Styles for input[type="file"] */
@@ -482,19 +529,41 @@ input[type="file"] {
     cursor: pointer;
 }
 
+::placeholder {
+    color: var(--color-text);
+    opacity: 40%;
+}
+
+
+/** Dangerous buttons */
+button#logout:hover,
+a#delete-album:hover,
+button#delete-partition {
+    background-color: var(--color-red);
+    color: var(--color-mantle);
+}
+
+
 /** Search bar */
 #search-form {
     margin: 10px;
 }
 
 #search-bar {
+    width: 100%;
     width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
 }
 
 #search-submit {
-    padding: 5px 5px;
+    padding: 5px;
+    position: absolute;
+    right: 10px;
+    width: calc(100% - 90px);
 }
 
+
 /** Search results */
 .add-partition-form select {
     width: 178px;
@@ -511,6 +580,7 @@ input[type="file"] {
     width: 178px;
 }
 
+
 /** Flashed messages */
 .flash {
     margin: 1em;
@@ -519,3 +589,56 @@ input[type="file"] {
     border: 2px solid var(--color-lavender);
     border-radius: 3px;
 }
+
+
+/** Tableaux */
+table {
+    border: thin solid var(--color-surface0);
+    border-collapse: collapse;
+    margin: auto;
+    width: 100%;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: stretch;
+}
+
+td {
+    min-width: 178px;
+    border: thin solid var(--color-surface0);
+    text-align: center;
+}
+
+.table-username {
+    line-height: 37px;
+}
+
+
+/** Panneau admin */
+#actions-rapides .button {
+    background-color: var(--color-base);
+    color: var(--color-text);
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+#actions-rapides {
+    display: flex;
+    padding: 5px;
+    background-color: var(--color-crust);
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    margin: 5px;
+    border-radius: 5px;
+    margin-bottom: 20px;
+}
+
+#actions-rapides .button:hover {
+    background-color: var(--color-lavender);
+    color: var(--color-crust);
+}
+
+.liste {
+    text-align: left;
+}

partitioncloud/templates/admin/index.html

@@ -1,16 +1,16 @@
 {% extends 'base.html' %}
 
-{% block header %}
-<h1>Panneau d'administration</h1>
-{% endblock %}
-
-{% block header_actions %}
-{% endblock %}
 
 {% block content %}
+<h2>{% block title %}Panneau d'administration{% endblock %}</h2>
+
 <div id="actions-rapides">
-    <a href="/add-user"><div class="button">Ajouter un utilisateur</div></a>
+    <a href="/add-user">
-    <a href="/partition"><div class="button">Voir toutes les partitions</div></a>
+        <div class="button">Ajouter un utilisateur</div>
+    </a>
+    <a href="/partition">
+        <div class="button">Voir toutes les partitions</div>
+    </a>
 </div>
 <table>
     <thead>
@@ -26,7 +26,8 @@
         <tr>
             <td>
                 <div class="user-profile">
-                    <div class="user-profile-picture" style="background-color:{{ user.color }};" title="{{ user.username }}">
+                    <div class="user-profile-picture" style="background-color:{{ user.color }};"
+                        title="{{ user.username }}">
                         {{ user.username[0] | upper }}
                     </div>
                     <div class="table-username">{{ user.username }}</div>

partitioncloud/templates/partition/details.html

@@ -1,42 +1,63 @@
 {% extends 'base.html' %}
 
-{% block header %}
-<h1>{% block title %}Détails - {{ partition.name }}{% endblock %}</h1>
-{% endblock %}
-
 {% block content %}
+<h2>{% block title %}Détails "{{ partition.name }}"{% endblock %}</h2>
 <br />
-{% if user is not none %}
-Auteur: <div class="user-profile">
-  <div class="username" style="margin-top: 6px;">{{ user.username }}</div>
-  <div class="user-profile-picture" style="background-color:{{ user.color }};" title="{{ user.username }}">
-    {{ user.username[0] | upper }}
-  </div>
-</div>
-{% else %}
-Auteur: inconnu
-{% endif %}
-<div id="albums-list">
-  Albums:
-  <ul>
-    {% for album in albums %}
-    <li><a href="/albums/{{ album.uuid }}">{{ album.name }}</a></li>
-    {% endfor %}
-  </ul>
-</div>
-Fichier: <a href="/partition/{{ partition.uuid }}">voir le fichier ↗</a>
 
-<form action="/partition/{{ partition.uuid }}/edit" method="post" enctype="multipart/form-data" id="edit-form">
+<form action="/partition/{{ partition.uuid }}/edit" method="post" enctype="multipart/form-data">
-  Titre*
+  <table>
-  <input name="name" type="text" value="{{ partition.name }}" required />
+    <tbody>
-  Auteur
+      <tr>
-  <input name="author" type="text" value="{{ partition.author }}" />
+        <td>
-  Paroles
+          Responsable de l'ajout
-  <textarea id="paroles" name="body" type="text">{{ partition.body }}</textarea>
+        </td>
+        <td>
+          {% if user is not none %}
+          <div class="user-profile"><!-- Completely messy html for this -->
+            <div class="table-username">{{ user.username }}</div>
+            <div class="user-profile-picture" style="background-color:{{ user.color }};" title="{{ user.username }}">
+              {{ user.username[0] | upper }}
+            </div>
+          </div>
+          {% else %}
+            inconnu
+          {% endif %}
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Albums
+        </td>
+        <td class="liste">
+          <ul>
+            {% for album in albums %}
+            <li><a href="/albums/{{ album.uuid }}">{{ album.name }}</a></li>
+            {% endfor %}
+          </ul>
+        </td>
+      </tr>
+      <tr>
+        <td>Fichier</td>
+        <td><a href="/partition/{{ partition.uuid }}"><img class="partition-thumbnail" src="/static/thumbnails/{{ partition.uuid }}.jpg"></a></td>
+      </tr>
+      <tr>
+        <td>Titre</td>
+        <td><input name="name" type="text" value="{{ partition.name }}" placeholder="Titre" required /><br/></td>
+      </tr>
+      <tr>
+        <td>Auteur</td>
+        <td><input name="author" type="text" value="{{ partition.author }}" placeholder="Auteur" /><br/></td>
+      </tr>
+      <tr>
+        <td>Paroles</td>
+        <td><textarea id="paroles" name="body" type="text" placeholder="Paroles">{{ partition.body }}</textarea><br/></td>
+      </tr>
+    </tbody>
+  </table>
   <input type="submit" value="Mettre à jour" />
 </form>
 <a href="/partition/{{ partition.uuid }}/delete">
-  <button id="supprimer-partition" style="width: 132px;">Supprimer</button>
+  <button id="delete-partition">Supprimer</button>
 </a>
 
 {% endblock %}

partitioncloud/templates/partition/edit.html

@@ -1,24 +1,36 @@
 {% extends 'base.html' %}
 
-{% block header %}
+
-<h1>{% block title %}Edit - {{ partition.name }}{% endblock %}</h1>
-{% endblock %}
 
 {% block content %}
+<h2>{% block title %}Modifier "{{ partition.name }}"{% endblock %}</h2>
 <br/>
-<a href="/partition/{{ partition.uuid }}"><div>voir le fichier ↗</div></a>
 
 <form action="/partition/{{ partition.uuid }}/edit" method="post" enctype="multipart/form-data">
-  Titre*
+  <table>
-  <input name="name" type="text" value="{{ partition.name }}" required />
+    <tbody>
-  Auteur
+      <tr>
-  <input name="author" type="text" value="{{ partition.author }}" />
+        <td>Fichier</td>
-  Paroles
+        <td><a href="/partition/{{ partition.uuid }}"><img class="partition-thumbnail" src="/static/thumbnails/{{ partition.uuid }}.jpg"></a></td>
-  <textarea id="paroles" name="body" type="text">{{ partition.body }}</textarea>
+      </tr>
+      <tr>
+        <td>Titre</td>
+        <td><input name="name" type="text" value="{{ partition.name }}" placeholder="Titre" required /><br/></td>
+      </tr>
+      <tr>
+        <td>Auteur</td>
+        <td><input name="author" type="text" value="{{ partition.author }}" placeholder="Auteur" /><br/></td>
+      </tr>
+      <tr>
+        <td>Paroles</td>
+        <td><textarea id="paroles" name="body" type="text" placeholder="Paroles">{{ partition.body }}</textarea><br/></td>
+      </tr>
+    </tbody>
+  </table>
   <input type="submit" value="Mettre à jour" />
 </form>
 <a href="/partition/{{ partition.uuid }}/delete">
-  <button id="supprimer-partition" style="width: 132px;">Supprimer</button>
+  <button id="delete-partition">Supprimer</button>
 </a>
 
 {% endblock %}