Skip to content

Commit 5b74fc8

Browse files
JacobdeanrJacobdeanr
committed
Update modal
Modal now displays some details as a collapsible item. Moved the view detail under the preview image.
1 parent 46cf8ab commit 5b74fc8

File tree

2 files changed

+107
-59
lines changed

2 files changed

+107
-59
lines changed

‎app/ui/modal.tsx

Lines changed: 95 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,19 @@ import { Tabs } from './tabs';
44
import Meta from './meta';
55
import SunParams from './sunparameters';
66
import FogParams from './fogparameters';
7-
import MapList from './maplist';
7+
import MapList from './maplist';
88
import ViewDetailsButton from './view-details-button';
99

10+
// Simple chevron icon component
11+
const ChevronIcon = ({ isOpen }: { isOpen: boolean }) => (
12+
<img
13+
src="/Source_Skyboxes_NextJS/icons/right-thin-chevron.svg"
14+
alt=""
15+
className={`invert w-3 h-3 transition-transform ${isOpen ? 'rotate-90' : 'rotate-270'}`}
16+
/>
17+
);
18+
19+
1020
type MapLink = { name: string; url: string };
1121
type Meta = {
1222
author?: string; publishDate?: string; categories?: string[]; timeOfDay?: string; weatherCondition?: string; description?: string;
@@ -40,10 +50,18 @@ function useModalBehaviour(onClose: () => void) {
4050

4151
export default function Modal({ slug, onClose }: { slug: string; onClose: () => void }) {
4252
const [meta, setMeta] = useState<Meta | null>(null);
53+
const [isExpanded, setIsExpanded] = useState(false);
4354
const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
4455

45-
useEffect(() => { fetch(`/Source_Skyboxes_NextJS/data/${slug}.json`).then(r=>r.ok?r.json():null).then(setMeta); }, [slug]);
56+
useEffect(() => {
57+
fetch(`/Source_Skyboxes_NextJS/data/${slug}.json`)
58+
.then(r => r.ok ? r.json() : null)
59+
.then(setMeta);
60+
}, [slug]);
61+
4662
useModalBehaviour(onClose);
63+
64+
const toggleExpand = () => setIsExpanded(!isExpanded);
4765

4866
return (
4967
<div onClick={onClose} className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4">
@@ -52,70 +70,88 @@ export default function Modal({ slug, onClose }: { slug: string; onClose: () =>
5270
className="
5371
w-full
5472
max-w-[90vw] sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl
55-
max-h-[70vh]
56-
lg:max-h-[80vh]
57-
xl:max-h-[85vh]
58-
2xl:max-h-[90vh]
73+
max-h-[90vh]
5974
overflow-y-auto overscroll-contain
60-
bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60
75+
bg-neutral-900/95 rounded-xl shadow-2xl ring-1 ring-neutral-700/60
76+
backdrop-blur-sm
6177
">
62-
{/* Header */}
63-
<div
64-
className="
65-
flex flex-wrap
66-
gap-4
67-
sm:flex-nowrap
68-
items-start sm:items-center
69-
justify-between
70-
p-4
71-
"
72-
>
73-
{/* Title + author */}
74-
<div className="flex flex-col">
75-
<h2 className="text-2xl font-bold leading-tight">{slug}</h2>
76-
{meta?.author && (
77-
<span className="text-sm text-neutral-400">By {meta.author}</span>
78-
)}
79-
</div>
80-
81-
{/* View Details (never shrink) */}
82-
<ViewDetailsButton
83-
href={`/skybox/${slug}`}
84-
className="w-full sm:w-auto"
85-
/>
86-
</div>
87-
88-
{/* Preview */}
89-
<div className="p-4 relative w-full aspect-[16/9]">
90-
<img src={`${imgBase}/previews/1.webp`} alt={`${slug} preview`} className="w-full h-full object-cover rounded-md" />
78+
{/* Header */}
79+
<div className="p-6 pb-0">
80+
<div>
81+
<h2 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
82+
{slug}
83+
</h2>
84+
<div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1">
85+
{meta?.author && (
86+
<p className="text-neutral-300">
87+
By <span className="text-blue-400">{meta.author}</span>
88+
</p>
89+
)}
9190
</div>
91+
</div>
92+
</div>
9293

93-
{/* Tabs */}
94-
<div className="lg:grid lg:grid-cols-[1fr_auto] p-4">
95-
<Tabs items={[
96-
{
97-
value: 'environment',
98-
label: 'Environment Parameters',
99-
content: (
100-
<div
101-
className="
102-
grid gap-10
103-
lg:grid-cols-2 lg:gap-x-12
104-
items-start
105-
"
106-
>
107-
<SunParams {...meta?.sunParameters} />
108-
<FogParams {...meta?.fogParameters} />
109-
</div>
110-
),
111-
},
112-
{ value: 'community-maps',
113-
label: 'Community Maps',
114-
content: <MapList maps={meta?.steamMaps} /> },
115-
]}
94+
{/* Preview */}
95+
<div className="p-6 pt-4">
96+
<div className="relative w-full aspect-video bg-black/50 rounded-xl overflow-hidden mb-4">
97+
<img
98+
src={`${imgBase}/previews/1.webp`}
99+
alt={`${slug} preview`}
100+
className="w-full h-full object-cover"
101+
/>
102+
</div>
103+
104+
{/* Quick Actions */}
105+
<div className="flex items-stretch gap-3 mb-6 h-10">
106+
<ViewDetailsButton
107+
href={`/skybox/${slug}`}
108+
className="flex-1 flex items-center justify-center"
116109
/>
110+
<button
111+
onClick={toggleExpand}
112+
className="w-10 h-10 ring-1 ring-inset ring-neutral-700/50 flex-shrink-0 flex items-center justify-center rounded-lg bg-neutral-800 hover:bg-neutral-700 transition-colors"
113+
aria-expanded={isExpanded}
114+
aria-label={isExpanded ? 'Show less details' : 'Show more details'}
115+
>
116+
<ChevronIcon isOpen={isExpanded} />
117+
</button>
117118
</div>
118119

120+
{/* Expandable Section */}
121+
<div
122+
className={`overflow-hidden transition-all duration-300 ease-in-out ${
123+
isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
124+
}`}
125+
>
126+
<div className="pt-4 border-t border-neutral-800 space-y-6">
127+
{/* File Info */}
128+
{meta?.fileSize && (
129+
<div className="text-sm">
130+
<p className="text-neutral-400">File Size</p>
131+
<p className="text-neutral-200">{meta.fileSize}</p>
132+
</div>
133+
)}
134+
{/* Description */}
135+
{meta?.description && (
136+
<div>
137+
<h3 className="font-medium text-neutral-200 mb-2">Description</h3>
138+
<p className="text-sm text-neutral-300">{meta.description}</p>
139+
</div>
140+
)}
141+
142+
{/* Key Parameters */}
143+
{(meta?.sunParameters || meta?.fogParameters) && (
144+
<div className="space-y-6">
145+
<h3 className="font-medium text-neutral-200">Environment Parameters</h3>
146+
<div className="grid gap-6 lg:grid-cols-2 lg:gap-x-8 items-start">
147+
{meta?.sunParameters && <SunParams {...meta.sunParameters} />}
148+
{meta?.fogParameters && <FogParams {...meta.fogParameters} />}
149+
</div>
150+
</div>
151+
)}
152+
</div>
153+
</div>
154+
</div>
119155
</article>
120156
</div>
121157
);

‎public/icons/right-thin-chevron.svg

Lines changed: 12 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)