Skip to content
This repository was archived by the owner on May 10, 2024. It is now read-only.

Commit 692b370

Browse files
tassilucatassiluca
committed
style: replace awful tables with boostrap cols + css improvements
1 parent c699c38 commit 692b370

File tree

2 files changed

+55
-56
lines changed

2 files changed

+55
-56
lines changed

‎frontend/src/components/ElectionComponent.vue

Lines changed: 51 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,38 @@
11
<template>
2-
<table>
3-
<tr>
4-
<td>
5-
<div class="msg text-center">
6-
<div class="row">
7-
<p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
8-
</div>
9-
<div class="row">
10-
<p class="links-container">
11-
<a :href="`/elections/${election.id}`" class="useful-link">Details</a>
12-
<a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
13-
</p>
14-
</div>
15-
</div>
16-
</td>
17-
<td>
18-
<div class="date" aria-label="start date">
19-
<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">
20-
<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"/>
21-
</svg> {{formatDate(election.start).substring(0, 2)}}
22-
</span><br/>
23-
<span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span><br/>
24-
<span>{{formatTime(election.start)}}</span>
25-
</div>
26-
</td>
27-
<td>
28-
<div class="date" aria-label="end date">
29-
<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">
30-
<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"/>
31-
</svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
32-
</span><br/>
33-
<span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span><br/>
34-
<span>{{formatTime(election.end)}}</span>
35-
</div>
36-
</td>
37-
</tr>
38-
</table>
2+
<div class="row">
3+
<div class="col msg text-center">
4+
<div class="row">
5+
<p class="name"><a :href="`/elections/${election.id}`" class="name">{{ election.goal }}</a></p>
6+
</div>
7+
<div class="d-flex justify-content-center flex-wrap">
8+
<a :href="`/elections/${election.id}`" class="useful-link">Details</a>
9+
<a :href="`/vote/${election.id}`" class="useful-link" v-if="isOpen(election)">Vote</a>
10+
</div>
11+
</div>
12+
<div class="col date my-auto" aria-label="start date">
13+
<span class="first">
14+
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-top" viewBox="0 0 16 16">
15+
<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"/>
16+
</svg>
17+
{{formatDate(election.start).substring(0, 2)}}
18+
</span>
19+
<br/>
20+
<span>{{capitalizeFirstLetter(formatDate(election.start, 'numeric').substring(3, 11))}}</span>
21+
<br/>
22+
<span>{{formatTime(election.start)}}</span>
23+
</div>
24+
<div class="col date my-auto" aria-label="end date">
25+
<span class="first date">
26+
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-hourglass-bottom" viewBox="0 0 16 16">
27+
<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"/>
28+
</svg> {{ ("0" + election.end.getUTCDate()).slice(-2) }}
29+
</span>
30+
<br/>
31+
<span>{{capitalizeFirstLetter(formatDate(election.end, 'numeric').substring(3, 11))}}</span>
32+
<br/>
33+
<span>{{formatTime(election.end)}}</span>
34+
</div>
35+
</div>
3936
</template>
4037

4138
<script setup lang="ts">
@@ -65,13 +62,9 @@ defineProps<{
6562
</script>
6663

6764
<style scoped>
68-
69-
table td + td {
70-
border-left: 2px solid red;
71-
}
72-
7365
div.date {
7466
color: #0d6efd;
67+
border-left: 2px solid #e6308a;
7568
span.first {
7669
font-weight: bold;
7770
font-size: 2em;
@@ -84,28 +77,31 @@ div.date {
8477
8578
p.name {
8679
font-weight: bold;
87-
font-size: 1.1em;
88-
color: #e6308a;
80+
font-size: 1.2em;
8981
margin: 4% 0;
90-
}
91-
92-
p.links-container {
93-
display: flex;
94-
justify-content: space-between;
95-
padding: 0 15%;
82+
text-transform: uppercase;
9683
}
9784
9885
a {
9986
color: #e6308a;
10087
text-decoration: none;
10188
}
10289
103-
a.useful-link {
104-
margin: 0 10px;
105-
}
106-
10790
a:hover {
10891
text-decoration: underline;
10992
}
11093
111-
</style>
94+
a.useful-link {
95+
padding: 6px 10px;
96+
margin: 6px;
97+
border-radius: 15px;
98+
border: 1px solid #0d6efd;
99+
text-decoration: none;
100+
color: #0d6efd;
101+
}
102+
103+
a.useful-link:hover {
104+
font-weight: bold;
105+
box-shadow: 1px 2px 5px rgba(200, 200, 200, 0.82);
106+
}
107+
</style>

‎frontend/src/views/ElectionsView.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ function resetPage() {
144144
</li>
145145
</ul>
146146
</div>
147-
<div class="container-sm col-10 col-md-8 text-center">
147+
<div class="container-sm col-12 col-md-8 text-center">
148148
<div v-if="displayedElections.length > 0">
149149
<div v-for="election in displayedElections" :key="String(election.id)" class="row election">
150150
<ElectionComponent :election="election"/>
@@ -173,4 +173,7 @@ div.radio-button {
173173
.no-election {
174174
font-weight: bold;
175175
}
176+
.election {
177+
background-color: #f8f9fa;
178+
}
176179
</style>

0 commit comments

Comments
 (0)