Skip to content

Commit cd9a950

Browse files
hazikchaudhryhazikchaudhry
authored
feat: scenario info bug fixes (#330)
* experimenting wiht the grid system * re wrote everything in tailwind * experimenting with some changes * make search inline, made thumbnail 16:9 * added username for display * code style changes * made some requested visual changes * added the desc and est time update system * added the title editbale changes * ran lint and prettier * made some requested backend changes * made some backend cahnges one how the items are being saved * ran lint and prettier * fixed play button moving bug * made some spacing changes * made play button scale with screen width, added some spacing changes * changed some spacing around for the info page * removed fixed sizing from playbutton
1 parent 82d1b56 commit cd9a950

File tree

2 files changed

+51
-46
lines changed

2 files changed

+51
-46
lines changed

‎frontend/src/features/scenarioInfo/ScenarioInfo.jsx‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -118,26 +118,26 @@ function ScenarioInfo() {
118118

119119
return (
120120
<div
121-
className="bg-base-100 text-base-content min-h-screen relative"
122-
data-theme="vps-dark"
121+
className="bg-base-100 text-base-content min-h-screen relative overflow-x-hidden"
122+
data-theme="vps-light"
123123
>
124124
{/* Back Button */}
125125
<button
126-
className="absolute z-50 bg-transparent border-none text-primary cursor-pointer hover:text-base-content transition-colors p-s top-l lg:left-16 xl:left-24 font-dm text-s"
126+
className="absolute z-50 bg-transparent border-none text-primary cursor-pointer hover:text-base-content transition-colors px-8 py-6 top-0 left-0 font-dm text-s"
127127
onClick={handleBackToPlay}
128128
>
129129
← Back
130130
</button>
131131
{/* Responsive Container optimised for 1024x768 min to 1600x900 max */}
132-
<div className="min-w-[1024px] max-w-[1600px] mx-auto px-8 lg:px-16 xl:px-24 h-screen flex relative">
132+
<div className="min-w-[1024px] max-w-[1600px] mx-auto px-8 lg:px-16 xl:px-24 h-screen flex relative overflow-hidden">
133133
{/* Sidebar */}
134-
<div className="w-[27%] bg-base-100 flex flex-col relative h-screen">
134+
<div className="w-[27%] bg-base-100 flex flex-col relative h-full overflow-hidden flex-shrink-0">
135135
{/* Spacer to push content down */}
136136
<div className="h-[35vh] flex-shrink-0"></div>
137137

138138
{/* Search Container - Positioned above the list */}
139-
<div className="bg-transparent p-[2vh_2.5%] absolute top-[20vh] left-0 right-0 z-10 flex-shrink-0">
140-
<label className="bg-transparent gap-[1vw] pl-[3vw] flex items-center flex-row-reverse mr-10">
139+
<div className="bg-transparent px-[5%] py-[2vh] absolute top-[20vh] left-0 right-0 z-10 flex-shrink-0">
140+
<label className="bg-transparent gap-[2vw] flex items-center flex-row-reverse">
141141
<svg
142142
className="h-m w-m opacity-50 flex-shrink-0 stroke-current"
143143
xmlns="http://www.w3.org/2000/svg"
@@ -163,12 +163,12 @@ function ScenarioInfo() {
163163
required
164164
/>
165165
</label>
166-
{/* Simple line under search bar - stops before search icon */}
167-
<div className="h-px bg-primary/20 mt-2 ml-[3vw] mr-[calc(theme(fontSize.m)+3vw)]"></div>
166+
{/* Simple line under search bar */}
167+
<div className="h-px bg-primary/20 mt-3"></div>
168168
</div>
169169

170170
{/* Scenario List */}
171-
<div className="overflow-y-auto pl-[3vw] absolute top-[26vh] left-0 right-0 bottom-0 pr-[1vw]">
171+
<div className="overflow-y-auto px-[5%] absolute top-[28vh] left-0 right-0 bottom-0">
172172
{filteredScenarios.map((scenario) => (
173173
<div
174174
key={scenario._id}
@@ -186,25 +186,27 @@ function ScenarioInfo() {
186186
</div>
187187

188188
{/* Main Content */}
189-
<div className="flex-1 flex items-center justify-center">
189+
<div className="flex-1 flex items-center justify-center overflow-hidden min-w-0">
190190
{selectedScenario ? (
191-
<div className="w-full h-full flex flex-col overflow-y-auto">
191+
<div className="w-full h-full flex flex-col overflow-y-auto overflow-x-hidden">
192192
{/* Scenario Header */}
193-
<div className="text-left pb-[4vh] pl-[8vw] pt-[8vh] pr-[4vw]">
194-
<div className="flex items-center justify-between mb-[4vh]">
195-
<h1 className="text-base-content font-light text-xl font-dm">
196-
{selectedScenario.name}
197-
</h1>
198-
<button
199-
onClick={openEditModal}
200-
className="btn btn-sm btn-ghost text-base-content border border-base-content/20 hover:bg-base-content/10 hover:border-base-content/40 font-dm"
201-
>
202-
Edit Details
203-
</button>
193+
<div className="text-left pb-[3vh] pl-[6vw] pt-[6vh] pr-[4vw] flex-shrink-0 max-w-full">
194+
<div className="mb-[3vh]">
195+
<div className="flex items-center gap-3 mb-[1vh]">
196+
<h1 className="text-base-content font-light text-xl font-dm">
197+
{selectedScenario.name}
198+
</h1>
199+
<button
200+
onClick={openEditModal}
201+
className="btn btn-sm btn-ghost text-base-content border border-base-content/20 hover:bg-base-content/10 hover:border-base-content/40 font-dm flex-shrink-0"
202+
>
203+
Edit Details
204+
</button>
205+
</div>
204206
</div>
205207

206208
{/* Scenario Meta */}
207-
<div className="flex justify-start gap-[4vw]">
209+
<div className="flex justify-start gap-[3vw] flex-wrap">
208210
<div className="flex flex-col items-start">
209211
<span className="text--1 text-base-content/60 mb-[1vh] font-ibm">
210212
Created By
@@ -235,9 +237,9 @@ function ScenarioInfo() {
235237
</div>
236238

237239
{/* Scenario Content */}
238-
<div className="flex-1 flex flex-col items-start p-[0_4vw_4vh_8vw]">
240+
<div className="flex-1 flex flex-col items-start p-[0_4vw_4vh_6vw] overflow-y-hidden overflow-x-hidden max-w-full">
239241
{/* Scenario Thumbnail */}
240-
<div className="w-full max-w-[45vw] mb-[4vh]">
242+
<div className="w-full max-w-[45vw] mb-[3vh] flex-shrink-0">
241243
<div className="w-full aspect-video bg-white border border-gray-600 rounded-lg overflow-hidden flex items-center justify-center">
242244
<Thumbnail
243245
components={selectedScenario.thumbnail?.components || []}
@@ -246,19 +248,18 @@ function ScenarioInfo() {
246248
</div>
247249

248250
{/* Scenario Description */}
249-
<div className="w-full max-w-[45vw] pt-[2vh]">
251+
<div className="w-full max-w-[50vw] pt-[2vh] relative flex-shrink-0 pb-[2vh]">
250252
<h3 className="text-text-m text-base-content text-left font-dm mb-[1vh]">
251253
Description
252254
</h3>
253-
<div className="flex items-start gap-[2vw] mt-[1vh]">
254-
<p className="text-s leading-relaxed text-base-content/80 text-left font-ibm min-h-[4em] break-words break-all max-w-[35vw]">
255+
<div className="mt-[1vh] flex items-start gap-6 flex-wrap">
256+
<p className="text-[clamp(0.875rem,1vw,1.125rem)] leading-relaxed text-base-content/80 text-left font-ibm min-h-[4em] break-words flex-1 max-w-[35vw] min-w-[200px]">
255257
{editableDescription ||
256258
"No description available. Click 'Edit Details' to add one."}
257259
</p>
258260

259261
{/* Play Button */}
260-
261-
<div className="flex-shrink-0 ml-[2vw]">
262+
<div className="flex-shrink-0 ml-8 -mt-4">
262263
<DiamondPlayButton
263264
size={100}
264265
onClick={() => handlePlayScenario(selectedScenario)}
@@ -327,11 +328,11 @@ function ScenarioInfo() {
327328
onChange={(e) => setEditableDescription(e.target.value)}
328329
placeholder="Enter scenario description..."
329330
className="textarea textarea-bordered border-primary/30 bg-base-100 text-base-content h-32 font-ibm text-base w-full focus:border-primary focus:outline-none placeholder:text-base-content/40"
330-
maxLength={250}
331+
maxLength={200}
331332
/>
332333
<label className="label">
333334
<span className="label-text-alt text-base-content/50 font-ibm">
334-
{editableDescription.length}/250 characters
335+
{editableDescription.length}/200 characters
335336
</span>
336337
</label>
337338
</div>

‎frontend/src/features/scenarioInfo/components/DiamondPlayButton.jsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
const DiamondPlayButton = ({ size = 100, onClick }) => {
2-
// Make size responsive to viewport
3-
const responsiveSize = `clamp(80px, ${size * 0.06}vw, ${size}px)`;
1+
const DiamondPlayButton = ({ onClick }) => {
2+
// Make size responsive to viewport - better scaling
3+
const responsiveSize = `clamp(70px, 5.5vw, 140px)`;
4+
const responsiveFontSize = `clamp(10px, 0.9vw, 18px)`;
45

56
return (
67
<>
@@ -16,25 +17,30 @@ const DiamondPlayButton = ({ size = 100, onClick }) => {
1617
left: 0;
1718
right: 0;
1819
bottom: 0;
19-
background-color: black;
20-
border: 1px solid #374151;
20+
background-color: var(--color-base-100);
21+
border: 1px solid var(--color-primary);
2122
transform: rotate(45deg);
2223
transition: all 0.3s ease-out;
2324
}
2425
2526
.diamond-play-button:hover .diamond-shape {
26-
box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.5);
27-
border-color: white;
28-
background-color: white;
27+
box-shadow: 0 10px 15px -3px rgba(var(--color-base-content-rgb), 0.3);
28+
border-color: var(--color-base-content);
29+
background-color: var(--color-base-content);
2930
}
3031
3132
.diamond-play-button:active .diamond-shape {
3233
transform: rotate(45deg) scale(0.95);
3334
}
3435
36+
.play-text {
37+
color: var(--color-base-content);
38+
transition: all 0.2s ease-out;
39+
}
40+
3541
.diamond-play-button:hover .play-text {
36-
color: black !important;
37-
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
42+
color: var(--color-base-100) !important;
43+
text-shadow: 0 0 8px rgba(var(--color-base-content-rgb), 0.3);
3844
}
3945
`}</style>
4046
<div
@@ -61,7 +67,7 @@ const DiamondPlayButton = ({ size = 100, onClick }) => {
6167
<div
6268
className="play-text"
6369
style={{
64-
fontSize: `clamp(12px, ${size * 0.012}vw, ${size * 0.2}px)`,
70+
fontSize: responsiveFontSize,
6571
position: "absolute",
6672
top: 0,
6773
left: 0,
@@ -70,10 +76,8 @@ const DiamondPlayButton = ({ size = 100, onClick }) => {
7076
display: "flex",
7177
alignItems: "center",
7278
justifyContent: "center",
73-
color: "white",
7479
fontWeight: "bold",
7580
letterSpacing: "0.05em",
76-
transition: "all 0.2s ease-out",
7781
pointerEvents: "none",
7882
fontFamily: "var(--font-dm)",
7983
}}

0 commit comments

Comments
 (0)