diff --git a/frontend/src/components/ElectionComponent.vue b/frontend/src/components/ElectionComponent.vue index 278da4c0..775faf25 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"> @@ -55,13 +52,9 @@ const now = ref(props.time); </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; @@ -74,15 +67,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 { @@ -90,12 +77,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 220c19fe..14ac6cf6 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" @@ -174,4 +174,7 @@ div.radio-button { .no-election { font-weight: bold; } +.election { + background-color: #f8f9fa; +} </style> \ No newline at end of file