UI : get more place for CandidateLists

web/components/management/candidate-lists.js

@@ -51,9 +51,40 @@ class CandidateList {
       </header>
       <div id="candidate-lists-dropdown-content" class="columns card-content">
         <div class="column">
+          <h5 class="title is-5">
+            Circonscriptions
+          </h5>
           <div id="areas-round"></div>
         </div>
         <div class="column">
+          <nav class="level">
+            <div class="level-left">
+              <h5 class="title is-5">
+                Listes
+              </h5>
+            </div>
+            <div class="level-right">
+              <button
+                id="candidate-list-clone"
+                class="button large-button is-primary"
+                title="Importer une liste"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-download"></i>
+                </span>
+              </button>
+              <button
+                id="candidate-list-new"
+                class="button large-button is-success"
+                title="Ajouter une liste"
+              >
+                <span class="icon is-small">
+                  <i class="fas fa-plus"></i>
+                </span>
+              </button>
+            </div>
+          </nav>
+
           <div id="candidate-lists-list"></div>
         </div>
         <div class="column is-two-thirds">
@@ -405,11 +436,7 @@ class CandidateList {
   }
 
   async displayAreas() {
-    document.getElementById("areas-round").innerHTML = /* HTML */ `<h5
-      class="title is-5"
-    >
-      Circonscriptions
-    </h5>`;
+    document.getElementById("areas-round").innerHTML = /* HTML */ ``;
     let candidateListHandler = this;
     let areas = await this.updateAreas();
     const markup = areas.map((area) => this.areaTemplate(area)).join("");
@@ -468,29 +495,7 @@ class CandidateList {
   async displayCandidateLists() {
     let candidateListHandler = this;
     let candidateLists = await this.updateCandidateLists();
-    document.getElementById("candidate-lists-list").innerHTML = /* HTML */ `<h5
-        class="title is-5"
-      >
-        Listes
-      </h5>
-      <button
-        id="candidate-list-new"
-        class="button large-button is-success"
-        title="Ajouter une liste"
-      >
-        <span class="icon is-small">
-          <i class="fas fa-plus"></i>
-        </span>
-      </button>
-      <button
-        id="candidate-list-clone"
-        class="button large-button is-primary"
-        title="Importer une liste"
-      >
-        <span class="icon is-small">
-          <i class="fas fa-download"></i>
-        </span>
-      </button>`;
+    document.getElementById("candidate-lists-list").innerHTML = /* HTML */ ``;
     const markup = candidateLists
       .map((candidateList) => this.candidateListTemplate(candidateList))
       .join("");

web/style.css

@@ -107,7 +107,7 @@ select {
 }
 
 .card-content .level-left {
-  flex-basis: 70%;
+  flex-basis: 65%;
 }
 
 #vote-section .level-left {