mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

responsive mobile-voting btns

Browse Source
This commit is contained in:
Guus
2025-08-12 23:27:55 +02:00
parent 76b084b541
commit e0a03f00bf
1 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/mobile-voting/page.tsx
+9 -13
View File
@@ -15,42 +15,38 @@ export default function MobileVoting() {
const [yesHighlight, setYesHighlight] = useState(false); const [yesHighlight, setYesHighlight] = useState(false);
return ( return (
<main className="flex min-h-screen flex-col items-center justify-between p-24"> <main className="m-3 h-screen rounded bg-blue-950/80 p-8 sm:p-14 md:p-20">
<div></div> <div className="flex flex-row items-center justify-between gap-8 rounded-md">
<div className="mb-0 flex flex-row items-center justify-between gap-32 rounded-md bg-blue-950/80 p-16">
<button <button
className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-500" : "ring-0"}`} className={`flex aspect-square w-1/2 max-w-[200px] items-center rounded bg-black/20 p-0 text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-400" : "ring-0 ring-black/20"}`}
onClick={() => { onClick={() => {
setYesHighlight(false); setYesHighlight(false);
setNoHighlight(true); setNoHighlight(true);
setVote(0); setVote(0.0);
}} }}
> >
<img <img
src="https://media.tenor.com/HU0FukwCUH4AAAAm/nono.webp" src="https://media.tenor.com/HU0FukwCUH4AAAAm/nono.webp"
alt="icon" alt="icon"
className="h-45 w-45 object-contain" className="h-full w-full rounded object-contain"
/> />
{/*<span>MEH</span>*/}
</button> </button>
<button <button
className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${yesHighlight ? "ring-5 ring-amber-500" : "ring-0"}`} className={`flex aspect-square w-1/2 max-w-[200px] items-center rounded bg-black/20 p-0 text-center font-bold text-white ${yesHighlight ? "ring-5 ring-amber-400" : "ring-0 ring-black/20"}`}
onClick={() => { onClick={() => {
setYesHighlight(true); setYesHighlight(true);
setNoHighlight(false); setNoHighlight(false);
setVote(1); setVote(1.0);
}} }}
> >
<img <img
src="https://media.tenor.com/wtv7ADhTUD4AAAAm/dance-happy.webp" src="https://media.tenor.com/wtv7ADhTUD4AAAAm/dance-happy.webp"
alt="icon" alt="icon"
className="h-45 w-45 object-contain" className="h-full w-full rounded object-contain"
/> />
{/*<span>YEAH</span>*/}
</button> </button>
</div> </div>
<div></div>
</main> </main>
); );
} }