From 692b370e531033ba6df56e81f2e733cccf041dcd Mon Sep 17 00:00:00 2001
From: Luca Tassinari <luca.tassinari.2000@gmail.com>
Date: Wed, 31 Jan 2024 01:15:13 +0100
Subject: [PATCH] style: replace awful tables with boostrap cols + css
 improvements

---
 frontend/src/components/ElectionComponent.vue | 106 +++++++++---------
 frontend/src/views/ElectionsView.vue          |   5 +-
 2 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/ElectionComponent.vue b/frontend/src/components/ElectionComponent.vue
index 5997db72..89fad887 100644
--- a/frontend/src/components/ElectionComponent.vue
+++ b/frontend/src/components/ElectionComponent.vue
@@ -1,41 +1,38 @@
 <template>
-  <table>
-    <tr>
-      <td>
-        <div class="msg text-center">
-          <div class="row">
-            <p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
-          </div>
-          <div class="row">
-            <p class="links-container">
-              <a :href="`/elections/${election.id}`" class="useful-link">Details</a>
-              <a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
-            </p>
-          </div>
-        </div>
-      </td>
-      <td>
-        <div class="date" aria-label="start date">
-          <span class="first"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
-            <path d="M2 14.5a.5.5 0 0 0 .5.5h11a.5.5 0 1 0 0-1h-1v-1a4.5 4.5 0 0 0-2.557-4.06c-.29-.139-.443-.377-.443-.59v-.7c0-.213.154-.451.443-.59A4.5 4.5 0 0 0 12.5 3V2h1a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1h1v1a4.5 4.5 0 0 0 2.557 4.06c.29.139.443.377.443.59v.7c0 .213-.154.451-.443.59A4.5 4.5 0 0 0 3.5 13v1h-1a.5.5 0 0 0-.5.5m2.5-.5v-1a3.5 3.5 0 0 1 1.989-3.158c.533-.256 1.011-.79 1.011-1.491v-.702s.18.101.5.101.5-.1.5-.1v.7c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13v1z"/>
-            </svg> {{formatDate(election.start).substring(0, 2)}}
-          </span><br/>
-          <span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span><br/>
-          <span>{{formatTime(election.start)}}</span>
-        </div>
-      </td>
-      <td>
-        <div class="date" aria-label="end date">
-          <span class="first date"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-bottom" viewBox="0 0 16 16">
-            <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.149.5.149.5-.15.5-.15v-.7c0-.701.478-1.236 1.011-1.492A3.5 3.5 0 0 0 11.5 3V2z"/>
-            </svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
-          </span><br/>
-          <span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span><br/>
-          <span>{{formatTime(election.end)}}</span>
-        </div>
-      </td>
-    </tr>
-  </table>
+  <div class="row">
+    <div class="col msg text-center">
+      <div class="row">
+        <p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
+      </div>
+      <div class="d-flex justify-content-center flex-wrap">
+        <a :href="`/elections/${election.id}`" class="useful-link">Details</a>
+        <a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
+      </div>
+    </div>
+    <div class="col date my-auto" aria-label="start date">
+      <span class="first">
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
+          <path d="M2 14.5a.5.5 0 0 0 .5.5h11a.5.5 0 1 0 0-1h-1v-1a4.5 4.5 0 0 0-2.557-4.06c-.29-.139-.443-.377-.443-.59v-.7c0-.213.154-.451.443-.59A4.5 4.5 0 0 0 12.5 3V2h1a.5.5 0 0 0 0-1h-11a.5.5 0 0 0 0 1h1v1a4.5 4.5 0 0 0 2.557 4.06c.29.139.443.377.443.59v.7c0 .213-.154.451-.443.59A4.5 4.5 0 0 0 3.5 13v1h-1a.5.5 0 0 0-.5.5m2.5-.5v-1a3.5 3.5 0 0 1 1.989-3.158c.533-.256 1.011-.79 1.011-1.491v-.702s.18.101.5.101.5-.1.5-.1v.7c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13v1z"/>
+        </svg> 
+        {{formatDate(election.start).substring(0, 2)}}
+      </span>
+      <br/>
+      <span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span>
+      <br/>
+      <span>{{formatTime(election.start)}}</span>
+    </div>
+    <div class="col date my-auto" aria-label="end date">
+      <span class="first date">
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-bottom" viewBox="0 0 16 16">
+          <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158c.533.256 1.011.791 1.011 1.491v.702s.18.149.5.149.5-.15.5-.15v-.7c0-.701.478-1.236 1.011-1.492A3.5 3.5 0 0 0 11.5 3V2z"/>
+        </svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
+      </span>
+      <br/>
+      <span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span>
+      <br/>
+      <span>{{formatTime(election.end)}}</span>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -65,13 +62,9 @@ defineProps<{
 </script>
 
 <style scoped>
-
-table td + td {
-  border-left: 2px solid red;
-}
-
 div.date {
   color: #0d6efd;
+  border-left: 2px solid #e6308a;
   span.first {
     font-weight: bold;
     font-size: 2em;
@@ -84,15 +77,9 @@ div.date {
 
 p.name {
   font-weight: bold;
-  font-size: 1.1em;
-  color: #e6308a;
+  font-size: 1.2em;
   margin: 4% 0;
-}
-
-p.links-container {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 15%;
+  text-transform: uppercase;
 }
 
 a {
@@ -100,12 +87,21 @@ a {
   text-decoration: none;
 }
 
-a.useful-link {
-  margin: 0 10px;
-}
-
 a:hover {
   text-decoration: underline;
 }
 
-</style>
\ No newline at end of file
+a.useful-link {
+  padding: 6px 10px;
+  margin: 6px;
+  border-radius: 15px;
+  border: 1px solid #0d6efd;
+  text-decoration: none;
+  color: #0d6efd;
+}
+
+a.useful-link:hover {
+  font-weight: bold;
+  box-shadow: 1px 2px 5px rgba(200, 200, 200, 0.82);
+}
+</style>
diff --git a/frontend/src/views/ElectionsView.vue b/frontend/src/views/ElectionsView.vue
index 47b60535..d9cb4f4d 100644
--- a/frontend/src/views/ElectionsView.vue
+++ b/frontend/src/views/ElectionsView.vue
@@ -144,7 +144,7 @@ function resetPage() {
       </li>
     </ul>
   </div>
-  <div class="container-sm col-10 col-md-8 text-center">
+  <div class="container-sm col-12 col-md-8 text-center">
     <div v-if="displayedElections.length > 0">
       <div v-for="election in displayedElections" :key="String(election.id)" class="row election">
         <ElectionComponent :election="election"/>
@@ -173,4 +173,7 @@ div.radio-button {
 .no-election {
   font-weight: bold;
 }
+.election {
+  background-color: #f8f9fa;
+}
 </style>
\ No newline at end of file