Skip to content

redo some ui oops #71

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aamoghS merged 1 commit into from
Feb 7, 2026
Merged

redo some ui oops #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 7 additions & 29 deletions sites/mainweb/app/(portal)/judge/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
'use client';

import { useState, useEffect } from 'react';
import { useSession, signOut } from 'next-auth/react';
import { useSession } from 'next-auth/react';
import { trpc } from '@/lib/trpc';
import { useRouter } from 'next/navigation';
import { LiquidGlass } from '@/components/portal/LiquidGlass';
import { LoadingScreen } from '@/components/portal/LoadingScreen';
import { StatusScreen } from '@/components/portal/StatusScreen';
import { RubricSlider } from '@/components/portal/judge/RubricSlider';
import { RubricSlider, RubricSliderStyles } from '@/components/portal/judge/RubricSlider';

// Rubric criteria definitions
const RUBRIC_CRITERIA = [
Expand Down Expand Up @@ -130,9 +129,6 @@ export default function JudgePage() {
variant="denied"
title="Not a Judge"
message="You're not registered as a judge."
onAction={() => signOut({ callbackUrl: '/login' })}
actionLabel="Sign Out"
actionVariant="danger"
/>
);
}
Expand All @@ -143,9 +139,6 @@ export default function JudgePage() {
variant="waiting"
title="No Assignment"
message="Please wait for event assignment."
onAction={() => signOut({ callbackUrl: '/login' })}
actionLabel="Sign Out"
actionVariant="default"
/>
);
}
Expand All @@ -159,9 +152,6 @@ export default function JudgePage() {
variant="success"
title="All Done!"
message="You've judged all projects. Thank you!"
onAction={() => signOut({ callbackUrl: '/login' })}
actionLabel="Sign Out"
actionVariant="primary"
/>
);
}
Expand All @@ -182,7 +172,7 @@ export default function JudgePage() {
/>
</div>

<main className="flex-1 flex flex-col items-center justify-center px-6 py-8 safe-area-inset">
<main className="flex-1 flex flex-col items-center justify-center px-6 py-8">
{/* Progress text */}
<p className="text-gray-500 text-sm font-mono mb-6">
{((progress?.completed || 0) + 1)} of {progress?.total}
Expand Down Expand Up @@ -211,13 +201,6 @@ export default function JudgePage() {
>
Start Judging
</button>

<button
onClick={() => signOut({ callbackUrl: '/login' })}
className="mt-8 text-gray-600 text-xs font-mono py-3 uppercase tracking-widest"
>
Sign Out
</button>
</main>
</div>
);
Expand Down Expand Up @@ -270,7 +253,7 @@ export default function JudgePage() {
)}
</div>

{/* Rubric Scoring */}
{/* Rubric Scoring - Sliders */}
<div className="space-y-6 mb-6">
{RUBRIC_CRITERIA.map((criterion) => (
<RubricSlider
Expand All @@ -295,18 +278,13 @@ export default function JudgePage() {
<button
onClick={handleSubmit}
disabled={submit.isPending}
className="w-full px-8 py-5 bg-[#00A8A8] text-black font-black text-lg uppercase tracking-wide rounded-2xl active:scale-[0.98] transition-transform disabled:opacity-50 mb-4"
className="w-full px-8 py-5 bg-[#00A8A8] text-black font-black text-lg uppercase tracking-wide rounded-2xl active:scale-[0.98] transition-transform disabled:opacity-50 mb-8"
>
{submit.isPending ? 'Submitting...' : 'Submit & Next'}
</button>

<button
onClick={() => signOut({ callbackUrl: '/login' })}
className="w-full text-gray-600 text-xs font-mono py-3 uppercase tracking-widest text-center"
>
Sign Out
</button>
</main>

<RubricSliderStyles />
</div>
);
}
77 changes: 55 additions & 22 deletions sites/mainweb/components/portal/judge/RubricSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ interface RubricSliderProps {
description: string;
value: number;
onChange: (value: number) => void;
isExpanded?: boolean;
onToggleExpand?: () => void;
}

export function RubricSlider({
Expand All @@ -18,7 +16,7 @@ export function RubricSlider({
onChange,
}: RubricSliderProps) {
return (
<div className="space-y-3">
<div className="space-y-2">
{/* Label and current score */}
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0 pr-3">
Expand All @@ -30,29 +28,64 @@ export function RubricSlider({
</span>
</div>

{/* Button-based scoring - much better for mobile */}
<div className="flex gap-1">
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((num) => (
<button
key={num}
onClick={() => onChange(num)}
className={`
flex-1 py-3 rounded-lg font-bold text-sm transition-all active:scale-95
${value === num
? 'bg-[#00A8A8] text-black shadow-[0_0_15px_rgba(0,168,168,0.4)]'
: 'bg-white/5 text-gray-400 hover:bg-white/10 active:bg-white/15'
}
`}
>
{num}
</button>
))}
{/* Slider - Large touch target */}
<div className="relative py-2">
<input
type="range"
min="1"
max="10"
value={value}
onChange={(e) => onChange(parseInt(e.target.value))}
className="w-full h-14 appearance-none bg-transparent cursor-pointer touch-pan-y rubric-slider"
style={{
background: `linear-gradient(to right, #00A8A8 0%, #00A8A8 ${(value - 1) * 11.11}%, rgba(255,255,255,0.1) ${(value - 1) * 11.11}%, rgba(255,255,255,0.1) 100%)`,
borderRadius: '12px',
}}
/>
<div className="flex justify-between text-xs text-gray-500 font-mono px-1 mt-1">
<span>1</span>
<span>5</span>
<span>10</span>
</div>
</div>
</div>
);
}

// Keep for backward compatibility but no longer needed
// Slider styles for the page
export function RubricSliderStyles() {
return null;
return (
<style jsx global>{`
.rubric-slider {
-webkit-appearance: none;
appearance: none;
}
.rubric-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 36px;
height: 36px;
background: white;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 4px 12px rgba(0,0,0,0.4);
border: 4px solid #00A8A8;
}
.rubric-slider::-moz-range-thumb {
width: 36px;
height: 36px;
background: white;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 20px rgba(0, 168, 168, 0.5), 0 4px 12px rgba(0,0,0,0.4);
border: 4px solid #00A8A8;
}
.rubric-slider:active::-webkit-slider-thumb {
transform: scale(1.15);
}
.rubric-slider:active::-moz-range-thumb {
transform: scale(1.15);
}
`}</style>
);
}
Loading