Merge branch '35-card-max-height-and-overflow-scroll' into 'master'

Feat : overflow for election and parties

Closes #35

See merge request !77

web/components/management/area.js

@@ -28,7 +28,7 @@ class Area {
         </p>
       </header>
       <div class="card-content">
-        <div id="area-list" class="content">
+        <div id="area-list" class="content auto-overflow-election-management">
           Sélectionner une élection.
         </div>
       </div>

web/components/management/desk.js

@@ -27,7 +27,7 @@ class Desk {
         </p>
       </header>
       <div class="card-content">
-        <div id="desk-list" class="content">
+        <div id="desk-list" class="content auto-overflow-election-management">
           Sélectionner une section.
         </div>
       </div>

web/components/management/election.js

@@ -27,7 +27,7 @@ class Election {
         </p>
       </header>
       <div class="card-content">
-        <div id="election-list" class="content">Liste des élections</div>
+        <div id="election-list" class="content auto-overflow-election-management">Liste des élections</div>
       </div>
     `;
     this.mountModal("election-modal");

web/components/management/party.js

@@ -37,7 +37,7 @@ class Party {
             </p>
           </header>
           <div class="card-content">
-            <div id="party-list" class="content">Liste des partis</div>
+            <div id="party-list" class="content auto-overflow-election-management">Liste des partis</div>
           </div>
         </div>
       </div>

web/components/management/round.js

@@ -78,13 +78,13 @@ class Round {
     document.getElementById("round-desks").style.height = "auto";
     document.getElementById("candidate-lists-dropdown-content").style.display =
       "flex";
-    document.getElementById("candidate-lists").style.height = "70vh";
+    document.getElementById("candidate-lists").style.height = "65vh";
   }
 
   hideCandidateLists() {
     document.getElementById("desk-rounds-dropdown-content").style.display =
       "flex";
-    document.getElementById("round-desks").style.height = "70vh";
+    document.getElementById("round-desks").style.height = "65vh";
     document.getElementById("candidate-lists-dropdown-content").style.display =
       "none";
     document.getElementById("candidate-lists").style.height = "auto";

web/components/management/section.js

@@ -29,7 +29,7 @@ class Section {
         </p>
       </header>
       <div class="card-content">
-        <div id="section-list" class="content">
+        <div id="section-list" class="content auto-overflow-election-management">
           Sélectionner une circonscription.
         </div>
       </div>

web/style.css

@@ -115,8 +115,10 @@ select {
 }
 
 #round-desks,
-#candidate-lists {
-  height: 70vh;
+#candidate-lists,
+#management-section,
+#parties-card {
+  height: 65vh;
 }
 
 #round-desks .column,
@@ -141,6 +143,11 @@ select {
   display: flex;
 }
 
+.auto-overflow-election-management {
+  overflow-y: auto;
+  height: 55vh;
+}
+
 .card-header-success {
   background-color: rgba(127, 186, 0, 0.95);
 }