Skip to content

Commit de9553c

Browse files
dgonz10152dgonz10152
committed
fixed main page styling issues
1 parent 458f8df commit de9553c

File tree

3 files changed

+65
-41
lines changed

3 files changed

+65
-41
lines changed

‎frontend/app/components/ItemContainer.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@ interface ItemContainerProps {
99
export default function ItemContainer({ children, title }: ItemContainerProps) {
1010
return (
1111
<div className="bg-background-2 rounded-xl p-3 min-h-40 h-full w-full">
12-
{title && <h6 className="text-lg pl-2 font-semibold">{title}</h6>}
13-
{children ? (
14-
<div className="h-full w-full">{children}</div>
15-
) : (
16-
<>
17-
<br />
18-
<p className="text-center text-foreground-2">
19-
{title} is not currently available.
20-
</p>
21-
</>
22-
)}
12+
<div className="w-full h-full flex flex-col">
13+
{title && <h6 className="text-lg pl-2 font-semibold">{title}</h6>}
14+
{children ? (
15+
children
16+
) : (
17+
<>
18+
<br />
19+
<p className="text-center text-foreground-2">
20+
{title} is not currently available.
21+
</p>
22+
</>
23+
)}
24+
</div>
2325
</div>
2426
);
2527
}

‎frontend/app/components/SubsystemPicker.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
2-
import React from 'react';
1+
import React from "react";
32

43
interface SubsystemPickerProps {
54
subsystems: string[];
65
selectedSubsystem: number;
76
onSelectSubsystem: (index: number) => void;
87
}
9-
const SubsystemPicker = ({ subsystems, selectedSubsystem, onSelectSubsystem }: SubsystemPickerProps) => {
8+
const SubsystemPicker = ({
9+
subsystems,
10+
selectedSubsystem,
11+
onSelectSubsystem,
12+
}: SubsystemPickerProps) => {
1013
return (
11-
<div className={"flex flex-row"}>
14+
<div className={"flex flex-row justify-between w-3/4 md:w-[40%]"}>
1215
{subsystems.map((subsystem, index) => {
1316
return (
14-
<button key={index} onClick={() => onSelectSubsystem(index)} className={`py-2 px-4 ${selectedSubsystem === index ? 'bg-white' : 'bg-black'} ${selectedSubsystem === index ? 'text-black' : 'text-white'} rounded-full m-4 duration-300 hover:border-white border-2 border-gray-800`}>
17+
<button
18+
key={index}
19+
onClick={() => onSelectSubsystem(index)}
20+
className={`py-2 px-4 text-[1.5vmin] ${
21+
selectedSubsystem === index ? "bg-white" : "bg-black"
22+
} ${
23+
selectedSubsystem === index ? "text-black" : "text-white"
24+
} rounded-full duration-300 hover:border-white border-2 border-gray-800 flex justify-center`}
25+
>
1526
{subsystem}
1627
</button>
17-
)
18-
}
19-
)}
20-
28+
);
29+
})}
2130
</div>
2231
);
23-
}
32+
};
2433

25-
export default SubsystemPicker;
34+
export default SubsystemPicker;

‎frontend/app/page.tsx‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,14 @@ export default function Home() {
185185

186186
return (
187187
<div className="pt-4 bg-background-1">
188-
<div className={"pl-6 flex justify-between flex-row items-center"}>
189-
<Image src="/fs_logo.png" alt="fs-logo" width={100} height={40} />
188+
<div className={"px-6 flex justify-between flex-row items-center"}>
189+
<Image
190+
className="py-4"
191+
src="/fs_logo.png"
192+
alt="fs-logo"
193+
width={100}
194+
height={40}
195+
/>
190196
{streamType == StreamType.LIVE && (
191197
<button
192198
onClick={() => setIsRecording(!isRecording)}
@@ -209,7 +215,7 @@ export default function Home() {
209215
}
210216
/>
211217
</div>
212-
<header className={"flex items-center justify-between"}>
218+
<header className={"flex items-center w-full"}>
213219
<SubsystemPicker
214220
subsystems={subsystems}
215221
selectedSubsystem={selectedSubsystem}
@@ -291,14 +297,15 @@ export default function Home() {
291297
{selectedSubsystem === 2 ? <p>imu data</p> : null}
292298
{selectedSubsystem === 3 ? (
293299
<div className="flex justify-evenly">
294-
<div className="grow m-4">
300+
<div className="grow m-4 ">
295301
<ItemContainer title="BMS_Fault">
296-
{dataTrimmed.current.BMS_Fault ? (
302+
{dataTrimmed.current.IMD_Fault ? (
297303
<div
298304
className={
299-
getMostRecent("BMS_Fault") != 0
305+
(getMostRecent("BMS_Fault") != 0
300306
? "bg-red-500"
301-
: "bg-green-500"
307+
: "bg-green-500") +
308+
" h-full rounded-lg flex justify-center items-center text-3xl"
302309
}
303310
>
304311
<p>
@@ -311,14 +318,15 @@ export default function Home() {
311318
</ItemContainer>
312319
</div>
313320

314-
<div className="grow m-4">
321+
<div className="grow m-4 ">
315322
<ItemContainer title="BSPD_Fault">
316323
{dataTrimmed.current.BSPD_Fault ? (
317324
<div
318325
className={
319-
getMostRecent("BSPD_Fault") != 0
326+
(getMostRecent("BSPD_Fault") != 0
320327
? "bg-red-500"
321-
: "bg-green-500"
328+
: "bg-green-500") +
329+
" h-full rounded-lg flex justify-center items-center text-3xl"
322330
}
323331
>
324332
<p>
@@ -330,14 +338,15 @@ export default function Home() {
330338
) : null}
331339
</ItemContainer>
332340
</div>
333-
<div className="grow m-4">
341+
<div className="grow m-4 ">
334342
<ItemContainer title="IMD_Fault">
335343
{dataTrimmed.current.IMD_Fault ? (
336344
<div
337345
className={
338-
getMostRecent("IMD_Fault") != 0
346+
(getMostRecent("IMD_Fault") != 0
339347
? "bg-red-500"
340-
: "bg-green-500"
348+
: "bg-green-500") +
349+
" h-full rounded-lg flex justify-center items-center text-3xl"
341350
}
342351
>
343352
<p>
@@ -352,8 +361,8 @@ export default function Home() {
352361
</div>
353362
) : null}
354363
{selectedSubsystem === 4 ? (
355-
<div className="grid grid-cols-4 grid-rows-2 gap-4 w-[100vw] h-[100vh] p-4">
356-
<div className="col-span-1 row-span-2">
364+
<div className="grid grid-cols-2 grid-rows-4 md:grid-cols-4 md:grid-rows-2 gap-4 w-[100vw] h-[100vh] p-4">
365+
<div className="col-span-1 row-span-1">
357366
<ItemContainer title="GPS Acceleration">
358367
{dataTrimmed.current.VDM_X_AXIS_ACCELERATION &&
359368
dataTrimmed.current.VDM_Y_AXIS_ACCELERATION &&
@@ -366,11 +375,15 @@ export default function Home() {
366375
) : null}
367376
</ItemContainer>
368377
</div>
369-
<div className="col-span-1 row-span-2">
378+
<div className="col-span-1 row-span-1">
370379
<ItemContainer title="GPS Course">
371-
{dataTrimmed.current.GPSi_Course ? (
372-
<CarWireframe x={0} y={getMostRecent("GPSi_Course")!} z={0} />
373-
) : null}
380+
{dataTrimmed.current.GPSi_Course ? (
381+
<CarWireframe
382+
x={0}
383+
y={getMostRecent("GPSi_Course")!}
384+
z={0}
385+
/>
386+
) : null}
374387
</ItemContainer>
375388
</div>
376389
</div>

0 commit comments

Comments
 (0)