Skip to content

Commit a0d03b6

Browse files
yoanbernabeuyoanbernabeu
authored
Merge pull request #21 from yoanbernabeu/20-improve-the-voting-screen
👌 IMPROVE: Refactor poll show template for enhanced styling and user …
2 parents 2d0ea73 + aa021e3 commit a0d03b6

File tree

1 file changed

+63
-30
lines changed

1 file changed

+63
-30
lines changed

‎templates/poll/show.html.twig‎

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,84 @@
33
{% block title %}{{ poll.title }}{% endblock %}
44

55
{% block body %}
6-
<div class="min-h-screen bg-base-200 py-2">
7-
<div class="container mx-auto px-2">
8-
{# Header Card combiné #}
9-
<div class="card bg-base-100 shadow-xl mb-3">
10-
<div class="card-body p-3">
11-
<div class="flex flex-col sm:flex-row items-center gap-2 justify-between">
12-
<h1 class="text-lg font-bold text-center sm:text-left">{{ poll.title }}</h1>
6+
<div class="min-h-screen bg-gradient-to-b from-base-200 to-base-300 py-4">
7+
<div class="container mx-auto px-4 max-w-3xl">
8+
{# Header Card #}
9+
<div class="card bg-base-100 shadow-xl mb-6 border border-base-300">
10+
<div class="card-body p-4">
11+
<div class="flex flex-col sm:flex-row items-center gap-3 justify-between">
12+
<h1 class="text-2xl font-bold text-center sm:text-left">{{ poll.title }}</h1>
1313
<div x-data="timer('{{ poll.endAt|date('Y-m-d\\TH:i:s\\Z') }}')"
14-
class="flex items-center gap-2">
15-
<div class="font-mono text-xl">
14+
class="flex items-center gap-2 bg-base-200 px-4 py-2 rounded-full"
15+
:class="{'ring ring-error ring-opacity-50': minutes === '00' && parseInt(seconds) <= 30}">
16+
<div class="font-mono text-xl"
17+
:class="{
18+
'animate-[pulse_1s_ease-in-out_infinite] text-error font-bold': minutes === '00' && parseInt(seconds) <= 30,
19+
'text-warning': minutes === '00' && parseInt(seconds) <= 60
20+
}">
1621
<span x-text="minutes">00</span>:<span x-text="seconds">00</span>
1722
</div>
18-
<span class="text-xs opacity-75">remaining</span>
23+
<span class="text-xs opacity-75"
24+
:class="{'text-error': minutes === '00' && parseInt(seconds) <= 30}">remaining</span>
1925
</div>
2026
</div>
2127
</div>
2228
</div>
2329

24-
{# Options Card #}
25-
<div class="card bg-base-100 shadow-xl">
26-
<div class="card-body p-3">
27-
{{ form_start(form) }}
28-
<div class="flex flex-col gap-2">
29-
{% for child in form.choice %}
30-
<label class="flex items-start btn btn-outline h-auto py-4 px-6 cursor-pointer hover:scale-[1.01] transition-transform">
31-
<div class="flex items-start gap-4 w-full">
32-
{{ form_widget(child, {'attr': {'class': 'radio radio-primary mt-1.5'}}) }}
33-
<span class="text-lg text-left flex-1">{{ child.vars.label }}</span>
30+
{# Options Card - Single Form #}
31+
{{ form_start(form) }}
32+
<div class="card bg-base-100 shadow-xl border border-base-300">
33+
<div class="card-body p-4">
34+
<div class="flex flex-col gap-3" x-data="{ selected: null }">
35+
{% for choice in form.choice %}
36+
<label class="relative transform transition-all duration-200 ease-in-out"
37+
x-data="{ id: {{ loop.index }} }"
38+
:class="{ 'scale-[0.98] opacity-60': selected !== null && selected !== id }">
39+
{{ form_widget(choice, {
40+
'attr': {
41+
'class': 'peer hidden',
42+
'@click': 'selected = id'
43+
}
44+
}) }}
45+
<div class="flex items-center gap-4 p-4 rounded-lg border-2 border-base-300
46+
hover:border-primary cursor-pointer
47+
peer-checked:border-primary peer-checked:bg-primary/10">
48+
<div class="w-5 h-5 rounded-full border-2 border-base-300
49+
peer-checked:border-primary flex items-center justify-center">
50+
<div class="w-3 h-3 rounded-full bg-primary opacity-0
51+
peer-checked:opacity-100 transition-opacity"></div>
3452
</div>
35-
</label>
36-
{% endfor %}
37-
</div>
53+
<span class="text-lg">{{ choice.vars.label }}</span>
54+
</div>
55+
</label>
56+
{% endfor %}
57+
</div>
3858

39-
<div class="mt-4 text-center">
40-
<button type="submit" class="btn btn-primary">
41-
Submit Vote
42-
</button>
43-
</div>
44-
{{ form_end(form) }}
59+
<div class="mt-6 text-center">
60+
<button type="submit"
61+
class="btn btn-primary btn-lg w-full sm:w-auto min-w-[200px]
62+
shadow-lg shadow-primary/30 relative overflow-hidden
63+
transition-all duration-300 ease-out
64+
hover:shadow-primary/50 hover:scale-105
65+
active:scale-95 active:shadow-inner
66+
disabled:opacity-50 disabled:cursor-not-allowed
67+
group">
68+
<span class="relative z-10">Submit Vote</span>
69+
<span class="absolute inset-0 bg-gradient-to-r from-primary/0 via-white/25 to-primary/0
70+
translate-x-[-100%] group-hover:translate-x-[100%]
71+
transition-transform duration-1000"></span>
72+
</button>
73+
</div>
74+
75+
{# Add CSRF token field explicitly #}
76+
{{ form_rest(form) }}
4577
</div>
4678
</div>
79+
{{ form_end(form, {'render_rest': false}) }}
4780

4881
{# Visitor ID #}
4982
<div class="mt-4 text-center">
50-
<p class="text-xs opacity-50">Visitor ID: {{ voterId }}</p>
83+
<p class="text-xs opacity-50 hover:opacity-100 transition-opacity">Visitor ID: {{ voterId }}</p>
5184
</div>
5285
</div>
5386
</div>

0 commit comments

Comments
 (0)