Merge branch '52-dropdown-for-round-management' into 'master'

Feat : add dropdown for round management

Closes #52

See merge request apoyen/elections!63

web/components/management/candidate-lists.js

@@ -37,13 +37,18 @@ class CandidateList {
         <p id="candidate-list-title" class="card-header-title">
           Liste des candidats par circonscription
         </p>
+        <button id="dropdown-candidate-lists" class="button">
+          <span class="icon is-small">
+            <i class="fas fa-caret-down"></i>
+          </span>
+        </button>
         <button id="candidate-list-new" class="button is-success" disabled>
           <span class="icon is-small">
             <i class="fas fa-plus"></i>
           </span>
         </button>
       </header>
-      <div class="columns card-content">
+      <div id="candidate-lists-dropdown-content" class="columns card-content">
         <div class="column">
           <div id="areas-round"></div>
         </div>
@@ -562,10 +567,9 @@ class CandidateList {
     this.area = null;
     document.getElementById("candidate-lists-list").innerHTML = "";
     this.emptyCandidate();
-    
   }
 
-  emptyCandidate(){
+  emptyCandidate() {
     this.candidateList = null;
     document.getElementById("candidate-list").innerHTML = "";
   }

web/components/management/round-desks.js

@@ -34,8 +34,13 @@ class RoundDesk {
         <p id="desk-round-title" class="card-header-title">
           Bureaux de votes
         </p>
+        <button id="dropdown-round-desks" class="button">
+          <span class="icon is-small">
+            <i class="fas fa-caret-down"></i>
+          </span>
+        </button>
       </header>
-      <div class="columns card-content">
+      <div id="desk-rounds-dropdown-content" class="columns card-content">
         <div class="column">
           <div id="desk-rounds"></div>
         </div>

web/components/management/round.js

@@ -37,8 +37,41 @@ class Round {
       <div class="modal" id="capturers-modal"></div>
       <div class="modal" id="candidateList-modal"></div>
     `;
-    this.roundsHandler = await RoundsCard.mount("rounds-list", this)
-    this.deskRoundsHandler = await RoundDesks.mount("round-desks", this)
-    this.candidateListHandler = await CandidateList.mount("candidate-lists", this)
+    this.roundsHandler = await RoundsCard.mount("rounds-list", this);
+    this.deskRoundsHandler = await RoundDesks.mount("round-desks", this);
+    this.candidateListHandler = await CandidateList.mount(
+      "candidate-lists",
+      this
+    );
+    document.getElementById("candidate-lists-dropdown-content").style.display =
+      "none";
+    document.getElementById("candidate-lists").style.height = "auto";
+    this.handleDOM();
+  }
+
+  handleDOM() {
+    let dropdownRoundDesks = document.getElementById("dropdown-round-desks");
+    let dropdownCandidateList = document.getElementById(
+      "dropdown-candidate-lists"
+    );
+    dropdownRoundDesks.addEventListener("click", function () {
+      document.getElementById("desk-rounds-dropdown-content").style.display =
+        "flex";
+      document.getElementById("round-desks").style.height = "70vh";
+      document.getElementById(
+        "candidate-lists-dropdown-content"
+      ).style.display = "none";
+      document.getElementById("candidate-lists").style.height = "auto";
+    });
+
+    dropdownCandidateList.addEventListener("click", function () {
+      document.getElementById("desk-rounds-dropdown-content").style.display =
+        "none";
+      document.getElementById("round-desks").style.height = "auto";
+      document.getElementById(
+        "candidate-lists-dropdown-content"
+      ).style.display = "flex";
+      document.getElementById("candidate-lists").style.height = "70vh";
+    });
   }
 }

web/style.css

@@ -116,7 +116,7 @@ select {
 
 #round-desks,
 #candidate-lists {
-  height: 35vh;
+  height: 70vh;
 }
 
 #round-desks .column,