yannick.leduc/mes-budgets-participatifs
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fine tune la page de vote

Browse Source
This commit is contained in:
Yannick Le Duc
2025-08-25 16:44:29 +02:00
parent f6e8e4753f
commit 63db9983bc
2 changed files with 37 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/campaigns/[id]/vote/[participantId]/page.tsx
View File

@@ -1,7 +1,7 @@
'use client';
import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { Campaign, Proposition, Participant, Vote, PropositionWithVote } from '@/types';
import { campaignService, participantService, propositionService, voteService } from '@/lib/services';
@@ -11,6 +11,7 @@ export const dynamic = 'force-dynamic';
export default function PublicVotePage() {
const params = useParams();
const router = useRouter();
const campaignId = params.id as string;
const participantId = params.participantId as string;
@@ -210,12 +211,12 @@ export default function PublicVotePage() {
<p className="mt-2 text-sm text-gray-600">
Votre vote a été enregistré avec succès. Vous pouvez revenir modifier vos choix tant que la campagne est en cours.
</p>
<Link
href="/"
<button
onClick={() => window.location.reload()}
className="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
>
Retour à l'accueil
</Link>
Retour à mon vote
</button>
</div>
</div>
</div>
@@ -232,18 +233,9 @@ export default function PublicVotePage() {
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<Link
href="/"
className="inline-flex items-center text-sm text-indigo-600 hover:text-indigo-500"
>
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Retour
</Link>
<div>
<h1 className="text-lg font-semibold text-gray-900">Vote - {campaign?.title}</h1>
<p className="text-sm text-gray-600">
<p className="text-lg font-bold text-indigo-600">
{participant?.first_name} {participant?.last_name}
</p>
</div>
@@ -337,26 +329,41 @@ export default function PublicVotePage() {
/>
{/* Marqueurs des paliers */}
<div className="flex justify-between mt-3 px-2">
<div className="text-center">
<div className="relative mt-3 mb-16" style={{ marginLeft: '12px', marginRight: '12px' }}>
{/* Marqueur 0€ */}
<div className="absolute text-center" style={{ left: '0%', transform: 'translateX(-12px)' }}>
<div className="w-3 h-3 bg-gray-400 rounded-full mx-auto mb-2"></div>
<span className="text-xs text-gray-600 font-medium">0€</span>
</div>
{spendingTiers.map((tier, index) => (
<div key={tier} className="text-center">
<div className="w-3 h-3 bg-indigo-500 rounded-full mx-auto mb-2"></div>
<span className="text-xs text-gray-600 font-medium">{tier}€</span>
</div>
))}
{/* Marqueurs des paliers */}
{spendingTiers.map((tier, index) => {
const position = ((index + 1) / spendingTiers.length) * 100;
return (
<div
key={tier}
className="absolute text-center"
style={{
left: `${position}%`,
transform: 'translateX(-12px)'
}}
>
<div className="w-3 h-3 bg-indigo-500 rounded-full mx-auto mb-2"></div>
<span className="text-xs text-gray-600 font-medium">{tier}€</span>
</div>
);
})}
</div>
</div>
{/* Valeur sélectionnée */}
<div className="text-center">
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
Vote sélectionné : {localVotes[proposition.id] || 0}€
</span>
</div>
{(localVotes[proposition.id] && localVotes[proposition.id] > 0) && (
<div className="text-center mt-12">
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">
Vote sélectionné : {localVotes[proposition.id]}€
</span>
</div>
)}
</div>
</div>
</div>

2
src/app/globals.css
View File

@@ -74,6 +74,7 @@
border: 2px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease;
margin-top: -8px; /* Centre le thumb verticalement sur la track */
}
.slider::-webkit-slider-thumb:hover {
@@ -100,6 +101,7 @@
border: 2px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: all 0.2s ease;
margin-top: -8px; /* Centre le thumb verticalement sur la track */
}
.slider::-moz-range-thumb:hover {