pinto/vfxreview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile client player layoout updates
Deploy / deploy (push) Successful in 2m45s
Details

Browse Source
This commit is contained in:
twotalesanimation
2026-06-12 11:01:00 +02:00
parent 80fcee7f0f
commit 5bfaf49fa1
2 changed files with 63 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/client/[token]/page.tsx
+1 -1
View File
@@ -378,7 +378,7 @@ export default function ClientPortalPage({
</div> </div>
{ver ? ( {ver ? (
<div className="flex items-center gap-3 shrink-0"> <div className="flex items-center gap-3 shrink-0">
<span className="text-xs font-mono text-zinc-500"> <span className="hidden sm:inline text-xs font-mono text-zinc-500">
v{String(ver.versionNumber).padStart(3, '0')} v{String(ver.versionNumber).padStart(3, '0')}
</span> </span>
<span <span
app/client/[token]/review/[versionId]/page.tsx
+16 -12
View File
@@ -2,6 +2,7 @@
import { useState, useEffect, useRef, useCallback } from "react"; import { useState, useEffect, useRef, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
import { ReviewPlayer, type ReviewPlayerRef } from "@/components/player/ReviewPlayer"; import { ReviewPlayer, type ReviewPlayerRef } from "@/components/player/ReviewPlayer";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
@@ -215,20 +216,22 @@ export default function ClientReviewPage({
return ( return (
<div className="flex flex-col h-screen bg-zinc-950 text-white overflow-hidden"> <div className="flex flex-col h-screen bg-zinc-950 text-white overflow-hidden">
{/* Header */} {/* Header */}
<header className="flex items-center gap-3 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0"> <header className="flex flex-col sm:flex-row sm:items-center gap-2 px-4 py-2.5 border-b border-zinc-800 bg-zinc-900 shrink-0">
{/* Row 1: back + shot info + status */}
<div className="flex items-center gap-3 flex-1 min-w-0">
<Link <Link
href={`/client/${token}`} href={`/client/${token}`}
className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm" className="text-zinc-400 hover:text-white transition-colors flex items-center gap-1.5 text-sm shrink-0"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
<span className="hidden sm:inline">All Shots</span> <span className="hidden sm:inline">All Shots</span>
</Link> </Link>
<div className="h-4 w-px bg-zinc-700" /> <div className="h-4 w-px bg-zinc-700 shrink-0" />
<div className="flex items-center gap-2 flex-1 min-w-0"> <div className="flex items-center gap-2 flex-1 min-w-0">
<div className="w-5 h-5 rounded bg-amber-500 flex items-center justify-center shrink-0"> <div className="w-5 h-5 rounded bg-black flex items-center justify-center shrink-0">
<Film className="h-3 w-3 text-black" /> <Image src="/logo.svg" alt="Logo" width={14} height={14} />
</div> </div>
{(() => { {(() => {
const project = version.shot?.project ?? version.task?.project; const project = version.shot?.project ?? version.task?.project;
@@ -248,7 +251,7 @@ export default function ClientReviewPage({
</> </>
)} )}
<span className="font-mono text-sm text-zinc-300"> <span className="font-mono text-sm text-zinc-300">
v{String(version.versionNumber).padStart(3, "0")} v{String(version.versionNumber).padStart(3, "000")}
</span> </span>
</> </>
); );
@@ -257,7 +260,7 @@ export default function ClientReviewPage({
<span <span
className={cn( className={cn(
"text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1", "text-xs px-2.5 py-1 rounded-full border hidden sm:inline-flex items-center gap-1 shrink-0",
approvalStyle approvalStyle
)} )}
> >
@@ -272,25 +275,26 @@ export default function ClientReviewPage({
)} )}
{currentApprovalStatus.replace(/_/g, " ")} {currentApprovalStatus.replace(/_/g, " ")}
</span> </span>
</div>
{/* Decision buttons */} {/* Row 2 on mobile / inline on desktop: decision buttons */}
<div className="flex items-center gap-2 shrink-0"> <div className="flex items-center gap-2 shrink-0">
<Button <Button
size="sm" size="sm"
variant="outline" variant="outline"
className="h-10 sm:h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10" className="flex-1 sm:flex-none h-9 sm:h-8 text-xs gap-1 text-orange-400 border-orange-500/30 hover:bg-orange-500/10"
onClick={() => setApprovalDialog({ open: true, status: "NEEDS_CHANGES" })} onClick={() => setApprovalDialog({ open: true, status: "NEEDS_CHANGES" })}
> >
<AlertCircle className="h-3.5 w-3.5" /> <AlertCircle className="h-3.5 w-3.5" />
<span className="hidden sm:inline">Needs Changes</span> Needs Changes
</Button> </Button>
<Button <Button
size="sm" size="sm"
className="h-10 sm:h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white" className="flex-1 sm:flex-none h-9 sm:h-8 text-xs gap-1 bg-emerald-600 hover:bg-emerald-500 text-white"
onClick={() => setApprovalDialog({ open: true, status: "APPROVED" })} onClick={() => setApprovalDialog({ open: true, status: "APPROVED" })}
> >
<CheckCircle2 className="h-3.5 w-3.5" /> <CheckCircle2 className="h-3.5 w-3.5" />
<span className="hidden sm:inline">Approve</span> Approve
</Button> </Button>
</div> </div>
</header> </header>