From 48629713a87dffb2858cf32337dae339cf364164 Mon Sep 17 00:00:00 2001
From: Alexis POYEN <punkylibre@localhost.localdomain>
Date: Mon, 6 Jul 2020 15:25:19 +0200
Subject: [PATCH] Feat : add dropdown for round management
---
web/components/management/candidate-lists.js | 10 +++--
web/components/management/round-desks.js | 7 +++-
web/components/management/round.js | 39 ++++++++++++++++++--
web/style.css | 2 +-
4 files changed, 50 insertions(+), 8 deletions(-)
diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
index 06f71fa..a157dfa 100644
--- a/web/components/management/candidate-lists.js
+++ b/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 = "";
}
diff --git a/web/components/management/round-desks.js b/web/components/management/round-desks.js
index aaabb5a..adae87d 100644
--- a/web/components/management/round-desks.js
+++ b/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>
diff --git a/web/components/management/round.js b/web/components/management/round.js
index d6941c2..14bd3f5 100644
--- a/web/components/management/round.js
+++ b/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";
+ });
}
}
diff --git a/web/style.css b/web/style.css
index 15fbb41..a89ab93 100644
--- a/web/style.css
+++ b/web/style.css
@@ -116,7 +116,7 @@ select {
#round-desks,
#candidate-lists {
- height: 35vh;
+ height: 70vh;
}
#round-desks .column,
--
GitLab