From fe0c1a44e88579e651061d622372517c97f4577f Mon Sep 17 00:00:00 2001
From: Alexis POYEN <apoyen@grandlyon.com>
Date: Mon, 6 Jul 2020 17:11:27 +0200
Subject: [PATCH] Resolve "Card over effect"
---
web/components/management/area.js | 2 +-
web/components/management/candidate-lists.js | 39 +++++++++++--------
web/components/management/election.js | 2 +-
web/components/management/genericElection.js | 8 ++--
web/components/management/party.js | 2 +-
web/components/management/round-desks.js | 9 ++++-
web/components/management/round.js | 6 +--
web/components/management/rounds-card.js | 2 +-
web/components/management/section.js | 2 +-
web/components/visualization/results-zone.js | 2 +-
.../visualization/round-selection.js | 2 +-
web/components/vote/desk-round.js | 2 +-
web/style.css | 4 ++
13 files changed, 48 insertions(+), 34 deletions(-)
diff --git a/web/components/management/area.js b/web/components/management/area.js
index 6f1d647..220dcd3 100644
--- a/web/components/management/area.js
+++ b/web/components/management/area.js
@@ -175,7 +175,7 @@ class Area {
areaTemplate(area) {
return /* HTML */ `<div class="card card-list">
- <div id="areas-area-${area.ID}" class="card-content">
+ <div id="areas-area-${area.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div class="level-left">
diff --git a/web/components/management/candidate-lists.js b/web/components/management/candidate-lists.js
index 1998e25..4ab5d21 100644
--- a/web/components/management/candidate-lists.js
+++ b/web/components/management/candidate-lists.js
@@ -51,7 +51,7 @@ class CandidateList {
<div id="candidate-lists-list"></div>
</div>
<div class="column is-two-thirds">
- <div id="candidate-list" class="card"></div>
+ <div id="candidate-list" class="card-no-hover"></div>
</div>
</div>
`;
@@ -61,7 +61,7 @@ class CandidateList {
areaTemplate(area) {
return /* HTML */ `<div class="card card-list">
- <div id="areas-area-${area.ID}" class="card-content">
+ <div id="areas-area-${area.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div class="level-left">
@@ -77,7 +77,7 @@ class CandidateList {
return /* HTML */ `<div class="card card-list">
<div
id="candidateLists-candidateList-${candidateList.ID}"
- class="card-content"
+ class="card-content clickable"
>
<div class="content">
<nav class="level">
@@ -167,7 +167,7 @@ class CandidateList {
document.getElementById("candidate-list").innerHTML = /* HTML */ `<div
class="table-container"
>
- <table class="table is-bordered is-narrow is-hoverable is-fullwidth">
+ <table class="table is-bordered is-narrow is-fullwidth">
<thead>
<tr class="is-selected">
<th hidden>Id</th>
@@ -306,8 +306,8 @@ class CandidateList {
<a
id="candidates-candidate-edit-${candidate.ID}"
class="button is-success is-small"
+ title="Valider"
>
- <span>Valider</span>
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
@@ -315,8 +315,8 @@ class CandidateList {
<a
id="candidates-candidate-delete-${candidate.ID}"
class="button is-danger is-small"
+ title="Supprimer"
>
- <span>Supprimer</span>
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
@@ -353,10 +353,15 @@ class CandidateList {
}
async displayAreas() {
+ document.getElementById("areas-round").innerHTML = /* HTML */ `<h5
+ class="title is-5"
+ >
+ Circonscriptions
+ </h5>`;
let candidateListHandler = this;
let areas = await this.updateAreas();
const markup = areas.map((area) => this.areaTemplate(area)).join("");
- document.getElementById("areas-round").innerHTML = markup;
+ document.getElementById("areas-round").innerHTML += markup;
areas.map((area) => {
document
@@ -411,16 +416,16 @@ class CandidateList {
async displayCandidateLists() {
let candidateListHandler = this;
let candidateLists = await this.updateCandidateLists();
- document.getElementById(
- "candidate-lists-list"
- ).innerHTML = /* HTML */ `<button
- id="candidate-list-new"
- class="button large-button is-success"
- >
- <span class="icon is-small">
- <i class="fas fa-plus"></i>
- </span>
- </button>`;
+ 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">
+ <span class="icon is-small">
+ <i class="fas fa-plus"></i>
+ </span>
+ </button>`;
const markup = candidateLists
.map((candidateList) => this.candidateListTemplate(candidateList))
.join("");
diff --git a/web/components/management/election.js b/web/components/management/election.js
index 05b3d84..17b5a3b 100644
--- a/web/components/management/election.js
+++ b/web/components/management/election.js
@@ -243,7 +243,7 @@ class Election {
electionTemplate(election) {
return /* HTML */ `<div class="card card-list">
- <div id="elections-election-${election.ID}" class="card-content">
+ <div id="elections-election-${election.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div class="level-left">
diff --git a/web/components/management/genericElection.js b/web/components/management/genericElection.js
index 47b61d8..a15bd3f 100644
--- a/web/components/management/genericElection.js
+++ b/web/components/management/genericElection.js
@@ -20,16 +20,16 @@ class GenericElection {
document.getElementById(mountpoint).innerHTML = /* HTML */ `
<div class="columns">
<div class="column">
- <div id="election" class="card"></div>
+ <div id="election" class="card-no-hover"></div>
</div>
<div class="column">
- <div id="areas" class="card"></div>
+ <div id="areas" class="card-no-hover"></div>
</div>
<div class="column">
- <div id="sections" class="card"></div>
+ <div id="sections" class="card-no-hover"></div>
</div>
<div class="column">
- <div id="desks" class="card"></div>
+ <div id="desks" class="card-no-hover"></div>
</div>
</div>
diff --git a/web/components/management/party.js b/web/components/management/party.js
index c02f7c2..b366615 100644
--- a/web/components/management/party.js
+++ b/web/components/management/party.js
@@ -30,7 +30,7 @@ class Party {
document.getElementById(mountpoint).innerHTML = /* HTML */ ` <div
class="container"
>
- <div id="parties-card" class="card">
+ <div id="parties-card" class="card-no-hover">
<header class="card-header">
<p class="card-header-title">
Partis
diff --git a/web/components/management/round-desks.js b/web/components/management/round-desks.js
index adae87d..d32c75b 100644
--- a/web/components/management/round-desks.js
+++ b/web/components/management/round-desks.js
@@ -112,7 +112,7 @@ class RoundDesk {
deskRoundTemplate(deskRound) {
return /* HTML */ `<div class="card card-list">
- <div id="deskrounds-deskround-${deskRound.ID}" class="card-content">
+ <div id="deskrounds-deskround-${deskRound.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div
@@ -201,11 +201,16 @@ class RoundDesk {
}
async displayDesks() {
+ document.getElementById("desk-rounds").innerHTML = /* HTML */ `<h5
+ class="title is-5"
+ >
+ Bureaux de votes
+ </h5>`;
let deskRounds = await this.updateDeskRounds();
const markup = deskRounds
.map((deskRound) => this.deskRoundTemplate(deskRound))
.join("");
- document.getElementById("desk-rounds").innerHTML = markup;
+ document.getElementById("desk-rounds").innerHTML += markup;
let deskRoundHandler = this;
deskRoundHandler.emptyDesksDetails();
diff --git a/web/components/management/round.js b/web/components/management/round.js
index 14bd3f5..2b6f7a5 100644
--- a/web/components/management/round.js
+++ b/web/components/management/round.js
@@ -19,15 +19,15 @@ class Round {
document.getElementById(mountpoint).innerHTML = /* HTML */ `
<div class="columns">
<div class="column is-full">
- <div id="rounds-list" class="card">
+ <div id="rounds-list" class="card-no-hover">
Liste des tours
</div>
</div>
<div class="column" style="padding-right:40px;">
- <div id="round-desks" class="card card-list">
+ <div id="round-desks" class="card-no-hover card-list">
Liste des bureaux d'un tour
</div>
- <div id="candidate-lists" class="card card-list" ">
+ <div id="candidate-lists" class="card-no-hover card-list" ">
Liste des listes de candidats d'un tour
</div>
</div>
diff --git a/web/components/management/rounds-card.js b/web/components/management/rounds-card.js
index 8c9862a..b58847a 100644
--- a/web/components/management/rounds-card.js
+++ b/web/components/management/rounds-card.js
@@ -179,7 +179,7 @@ class Round {
roundTemplate(round) {
return /* HTML */ `<div class="card card-list">
- <div id="rounds-round-${round.ID}" class="card-content">
+ <div id="rounds-round-${round.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div id="rounds-round-desc-${round.ID}" class="level-left">
diff --git a/web/components/management/section.js b/web/components/management/section.js
index 3ea21be..653664c 100644
--- a/web/components/management/section.js
+++ b/web/components/management/section.js
@@ -182,7 +182,7 @@ class Section {
sectionTemplate(section) {
return /* HTML */ `<div class="card card-list">
- <div id="sections-section-${section.ID}" class="card-content">
+ <div id="sections-section-${section.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div class="level-left">
diff --git a/web/components/visualization/results-zone.js b/web/components/visualization/results-zone.js
index 6bed9bb..2d7f536 100644
--- a/web/components/visualization/results-zone.js
+++ b/web/components/visualization/results-zone.js
@@ -100,7 +100,7 @@ class ResultZoneComponent {
let html = document.createElement("div");
html.classList = "card-list card-no-hover";
html.innerHTML = /* HTML */ `
- <div class="card-content">
+ <div class="card-content clickable">
<div id="flow-content-${zone.ID}" class="content">
<h5 class="title is-5">${zone.Name}</h5>
</div>
diff --git a/web/components/visualization/round-selection.js b/web/components/visualization/round-selection.js
index ee42f0e..75bc488 100644
--- a/web/components/visualization/round-selection.js
+++ b/web/components/visualization/round-selection.js
@@ -38,7 +38,7 @@ class RoundSelectionComponent {
roundTemplate(round) {
return /* HTML */ `<div class="card card-list">
- <div id="rounds-round-${round.ID}" class="card-content">
+ <div id="rounds-round-${round.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div id="rounds-round-desc-${round.ID}" class="level-left">
diff --git a/web/components/vote/desk-round.js b/web/components/vote/desk-round.js
index 1c4fd0a..dab0469 100644
--- a/web/components/vote/desk-round.js
+++ b/web/components/vote/desk-round.js
@@ -92,7 +92,7 @@ class DeskRoundSelector {
deskRoundTemplate(deskRound) {
return /* HTML */ `<div class="card card-list">
- <div id="deskrounds-deskround-${deskRound.ID}" class="card-content">
+ <div id="deskrounds-deskround-${deskRound.ID}" class="card-content clickable">
<div class="content">
<nav class="level">
<div
diff --git a/web/style.css b/web/style.css
index b564fd9..2a8b904 100644
--- a/web/style.css
+++ b/web/style.css
@@ -207,4 +207,8 @@ select {
.large-button {
width: 100%;
+}
+
+.clickable {
+ cursor: pointer;
}
\ No newline at end of file
--
GitLab