Merge branch '70-capturer-selection-add-arrow-in-middle' into 'master'

Resolve "Capturer selection add arrow in middle"

Closes #70

See merge request apoyen/elections!67

web/components/management/candidate-lists.js

@@ -39,7 +39,7 @@ class CandidateList {
         </p>
         <a>
           <span class="icon is-large">
-            <i class="fas fa-caret-down"></i>
+            <i class="fas fa-2x fa-caret-down"></i>
           </span>
         </a>
       </header>

web/components/management/round-desks.js

@@ -36,7 +36,7 @@ class RoundDesk {
         </p>
         <a>
           <span class="icon is-large">
-            <i class="fas fa-caret-down"></i>
+            <i class="fas fa-2x fa-caret-down"></i>
           </span>
         </a>
       </header>
@@ -95,13 +95,22 @@ class RoundDesk {
                 Liste des saisisseurs actif
               </div>
             </div>
+            <div
+              class="column"
+              style="flex-grow : 0; display: flex;
+            justify-content: center;
+            align-items: center;"
+            >
+              <span class="icon is-large">
+                <i class="fas fa-2x fa-people-arrows"></i>
+              </span>
+            </div>
             <div class="column">
               <header class="card-header card-header-danger">
                 <p class="card-header-title">
                   Saisisseurs disponibles
                 </p>
               </header>
-
               <div id="available-capturers""> Liste des saisseurs disponibles
             </div>
           </div>
@@ -192,7 +201,10 @@ class RoundDesk {
 
   capturersTemplate(capturer) {
     return /* HTML */ `<div class="card card-list">
-      <div id="capturers-capturer-${capturer.ID}" class="card-content">
+      <div
+        id="capturers-capturer-${capturer.ID}"
+        class="card-content clickable"
+      >
         <div class="content">
           <nav class="level">
             <div class="level-left">${capturer.Name}</div>

web/components/visualization/results-zone.js

@@ -34,7 +34,7 @@ class ResultZoneComponent {
             </p>
             <button id="zoom-map" class="button is-success">
               <span class="icon is-small">
-                <i class="fa fa-expand"></i>
+                <i class="fa fa-expand-arrows-alt"></i>
               </span>
             </button>
           </header>
@@ -57,7 +57,7 @@ class ResultZoneComponent {
             </label>
             <button id="zoom-news-flow" class="button is-success">
               <span class="icon is-small">
-                <i class="fa fa-expand"></i>
+                <i class="fa fa-expand-arrows-alt"></i>
               </span>
             </button>
           </header>
@@ -74,7 +74,7 @@ class ResultZoneComponent {
           </p>
           <button id="zoom-results" class="button is-success">
             <span class="icon is-small">
-              <i class="fa fa-expand"></i>
+              <i class="fa fa-expand-arrows-alt"></i>
             </span>
           </button>
         </header>
@@ -185,6 +185,11 @@ class ResultZoneComponent {
     document.getElementById("zoom-map").addEventListener("click", function () {
       resultHandler.unZoom();
     });
+    document.getElementById("zoom-map").innerHTML = /* HTML */ `<span
+      class="icon is-small"
+    >
+      <i class="fa fa-compress-arrows-alt"></i>
+    </span>`;
   }
 
   zoomNewsFlow() {
@@ -200,6 +205,11 @@ class ResultZoneComponent {
       .addEventListener("click", function () {
         resultHandler.unZoom();
       });
+    document.getElementById("zoom-news-flow").innerHTML = /* HTML */ `<span
+      class="icon is-small"
+    >
+      <i class="fa fa-compress-arrows-alt"></i>
+    </span>`;
   }
 
   zoomResults() {
@@ -215,6 +225,11 @@ class ResultZoneComponent {
       .addEventListener("click", function () {
         resultHandler.unZoom();
       });
+    document.getElementById("zoom-results").innerHTML = /* HTML */ `<span
+      class="icon is-small"
+    >
+      <i class="fa fa-compress-arrows-alt"></i>
+    </span>`;
     document.getElementById("zone-detaileds-results").style.display = "block";
   }
 
@@ -230,6 +245,21 @@ class ResultZoneComponent {
     document.getElementById("results-section").style.display = "block";
     document.getElementById("news-flow-section").style.display = "block";
     document.getElementById("zone-detaileds-results").style.display = "none";
+    document.getElementById("zoom-map").innerHTML = /* HTML */ `<span
+      class="icon is-small"
+    >
+      <i class="fa fa-expand-arrows-alt"></i>
+    </span>`;
+    document.getElementById("zoom-news-flow").innerHTML = /* HTML */ `<span
+      class="icon is-small"
+    >
+      <i class="fa fa-expand-arrows-alt"></i>
+    </span>`;
+    document.getElementById("zoom-results").innerHTML = /* HTML */ `<span
+      class="icon is-small"
+    >
+      <i class="fa fa-expand-arrows-alt"></i>
+    </span>`;
 
     this.handleDom();
   }