Skip to content

Commit 20f83c9

Browse files
YnngYnng
committed
Quick patch up for the new design
- set different width for each tab - fixed some text wrapping
1 parent 3479f69 commit 20f83c9

File tree

8 files changed

+88
-42
lines changed

8 files changed

+88
-42
lines changed

‎src/components/DashboardCard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ReactNode } from 'react';
2+
import { cn } from 'utils/util';
23

34
export default function DashboardCard({
45
children,
@@ -9,7 +10,7 @@ export default function DashboardCard({
910
}) {
1011
return (
1112
<div
12-
className={`flex h-fit w-full flex-col justify-evenly gap-8 rounded-2xl bg-gray-850 p-4 ${className} border border-gray-faded/30`}
13+
className={cn(`flex h-fit w-full flex-col justify-evenly gap-8 rounded-2xl border border-gray-faded/30 bg-gray-850 p-4`, className)}
1314
>
1415
{children}
1516
</div>

‎src/components/DashboardLayout/LeftNav.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export default function LeftNav({ className }: { className?: string }) {
6363
icon={faSquarePlus}
6464
disabled={!canCreateInstance}
6565
onClick={() => setShowCreateInstance(true)}
66+
align="start"
6667
/>
6768
</div>
6869
</InstanceList>

‎src/components/Minecraft/MinecraftGeneralCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export default function MinecraftGeneralCard() {
133133

134134
return (
135135
<div className="flex flex-col gap-4 @4xl:flex-row">
136-
<div className="w-72 shrink-0">
136+
<div className="w-80 shrink-0">
137137
<h2 className="text-h2 font-bold tracking-medium"> Server Settings </h2>
138138
<h3 className="text-h3 font-medium italic tracking-medium text-white/50">
139139
Technical settings for the server

‎src/components/Minecraft/MinecraftSettingCard.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ export default function MinecraftSettingCard() {
224224
Please backup any important data before proceeding.
225225
</ConfirmDialog>
226226
<div className="flex flex-col gap-4 @4xl:flex-row">
227-
<div className="w-72 shrink-0">
227+
<div className="w-80 shrink-0">
228228
<h2 className="text-h2 font-bold tracking-medium">
229229
General Game Settings
230230
</h2>
@@ -261,12 +261,12 @@ export default function MinecraftSettingCard() {
261261
</div>
262262
</div>
263263
<div className="flex flex-col gap-4 @4xl:flex-row">
264-
<div className="w-72 shrink-0">
264+
<div className="w-80 shrink-0">
265265
<h2 className="text-h2 font-bold tracking-medium">
266266
Advanced Game Settings
267267
</h2>
268268
<h3 className="text-h3 font-medium italic tracking-medium text-white/50">
269-
Less commoningly used Minecraft world settings
269+
Less commonly used Minecraft world settings
270270
</h3>
271271
</div>
272272
<div className="w-full min-w-0 rounded-lg border border-gray-faded/30 child:w-full child:border-b child:border-gray-faded/30 first:child:rounded-t-lg last:child:rounded-b-lg last:child:border-b-0">
@@ -298,7 +298,7 @@ export default function MinecraftSettingCard() {
298298
</div>
299299
</div>
300300
<div className="mb-16 flex flex-col gap-4 @4xl:flex-row">
301-
<div className="w-72 shrink-0">
301+
<div className="w-80 shrink-0">
302302
<h2 className="text-h2 font-bold tracking-medium"> Danger Zone </h2>
303303
<h3 className="text-h3 font-medium italic tracking-medium text-white/50">
304304
These settings can cause irreversible damage to your server!

‎src/data/InstanceTabListMap.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,44 +20,54 @@ const InstanceTabListMap = {
2020
{
2121
title: 'Overview',
2222
path: 'overview',
23+
width: 'max-w-4xl',
2324
icon: <FontAwesomeIcon icon={faChartLine} />,
24-
content: <MinecraftPerformanceCard />,
25+
content: (
26+
<>
27+
<p>Work in Progress</p>
28+
<MinecraftPerformanceCard />
29+
</>
30+
),
2531
},
2632
{
2733
title: 'Settings',
2834
path: 'settings',
35+
width: 'max-w-2xl',
2936
icon: <FontAwesomeIcon icon={faCog} />,
3037
content: (
31-
<>
38+
<div className="flex flex-col gap-8">
3239
<MinecraftGeneralCard />
3340
<MinecraftSettingCard />
34-
</>
41+
</div>
3542
),
3643
},
3744
{
3845
title: 'Console',
3946
path: 'console',
47+
width: 'max-w-6xl',
4048
icon: <FontAwesomeIcon icon={faServer} />,
4149
content: <GameConsole />,
4250
},
4351
{
4452
title: 'Files',
4553
path: 'files',
54+
width: 'max-w-6xl',
4655
icon: <FontAwesomeIcon icon={faFolder} />,
4756
content: <FileViewer />,
4857
},
4958
{
5059
title: 'Tasks',
5160
path: 'tasks',
61+
width: 'max-w-4xl',
5262
icon: <FontAwesomeIcon icon={faCodeCompare} />,
5363
content: (
54-
<DashboardCard className="grow !justify-center !gap-4">
64+
<DashboardCard className="grow justify-center gap-4">
5565
<img
5666
src="/assets/placeholder-cube.png"
5767
alt="placeholder"
5868
className="mx-auto w-20"
5969
/>
60-
<p className="text-xl text-center font-medium text-white/50">
70+
<p className="text-center font-medium text-white/50">
6171
Coming soon to a dashboard near you!
6272
</p>
6373
</DashboardCard>
@@ -66,15 +76,16 @@ const InstanceTabListMap = {
6676
{
6777
title: 'Event Logs',
6878
path: 'logs',
79+
width: 'max-w-4xl',
6980
icon: <FontAwesomeIcon icon={faInbox} />,
7081
content: (
71-
<DashboardCard className="grow !justify-center !gap-4">
82+
<DashboardCard className="grow justify-center gap-4">
7283
<img
7384
src="/assets/placeholder-cube.png"
7485
alt="placeholder"
7586
className="mx-auto w-20"
7687
/>
77-
<p className="text-xl text-center font-medium text-white/50">
88+
<p className="text-center font-medium text-white/50">
7889
Coming soon to a dashboard near you!
7990
</p>
8091
</DashboardCard>

‎src/pages/InstanceTabs/InstanceTabs.tsx‎

Lines changed: 60 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useDocumentTitle } from 'usehooks-ts';
44
import { useLocation } from 'react-router-dom';
55
import InstanceTabListMap from '../../data/InstanceTabListMap';
66
import Label from 'components/Atoms/Label';
7-
import { stateToLabelColor } from 'utils/util';
7+
import { cn, stateToLabelColor } from 'utils/util';
88
import Spinner from 'components/DashboardLayout/Spinner';
99
const InstanceTabs = () => {
1010
useDocumentTitle('Dashboard - Lodestone');
@@ -44,36 +44,69 @@ const InstanceTabs = () => {
4444
);
4545
}
4646
}
47+
48+
const tabs = InstanceTabListMap[instance.game_type];
49+
if (!tabs) {
50+
return (
51+
<div
52+
className="relative flex h-full w-full flex-row justify-center overflow-y-auto px-4 pt-8 pb-10 @container"
53+
key={uuid}
54+
>
55+
<div className="flex h-fit min-h-full w-full grow flex-col items-start gap-2">
56+
<div className="flex min-w-0 flex-row items-center gap-4">
57+
<h1 className="dashboard-instance-heading truncate whitespace-pre">
58+
Unknown game type {instance.game_type}
59+
</h1>
60+
</div>
61+
</div>
62+
</div>
63+
);
64+
}
65+
66+
const tab = tabs.find((tab) => tab.path === path);
67+
68+
if (!tab) {
69+
return (
70+
<div
71+
className="relative flex h-full w-full flex-row justify-center overflow-y-auto px-4 pt-8 pb-10 @container"
72+
key={uuid}
73+
>
74+
<div className="flex h-fit min-h-full w-full grow flex-col items-start gap-2">
75+
<div className="flex min-w-0 flex-row items-center gap-4">
76+
<h1 className="dashboard-instance-heading truncate whitespace-pre">
77+
Unknown tab {path}
78+
</h1>
79+
</div>
80+
</div>
81+
</div>
82+
);
83+
}
84+
4785
return (
4886
<div
49-
className="relative mx-auto flex h-full w-full max-w-4xl flex-row justify-center @container"
87+
className={cn("relative mx-auto flex h-full w-full flex-row justify-center @container", tab.width)}
5088
key={uuid}
5189
>
52-
{InstanceTabListMap[instance.game_type].map(
53-
(tab) =>
54-
tab.path === path && (
55-
<div
56-
className="gutter-stable -mx-3 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
57-
key={`${instance.name}-${tab.title}`}
58-
>
59-
<div className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none">
60-
<div className="flex font-title text-h1 font-bold leading-tight text-gray-300">
61-
{tab.title}
62-
{tab.title === 'Console' && (
63-
<Label
64-
size="medium"
65-
className="ml-2 mt-[6px]"
66-
color={stateToLabelColor[instance.state]}
67-
>
68-
{instance.state}
69-
</Label>
70-
)}
71-
</div>
72-
{tab.content}
73-
</div>
74-
</div>
75-
)
76-
)}
90+
<div
91+
className="gutter-stable -mx-3 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2"
92+
key={`${instance.name}-${tab.title}`}
93+
>
94+
<div className="flex h-fit min-h-full w-full flex-col gap-8 pt-10 pb-8 focus:outline-none">
95+
<div className="flex font-title text-h1 font-bold leading-tight text-gray-300">
96+
{tab.title}
97+
{tab.title === 'Console' && (
98+
<Label
99+
size="medium"
100+
className="ml-2 mt-[6px]"
101+
color={stateToLabelColor[instance.state]}
102+
>
103+
{instance.state}
104+
</Label>
105+
)}
106+
</div>
107+
{tab.content}
108+
</div>
109+
</div>
77110
</div>
78111
);
79112
};

‎src/pages/dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ const Dashboard = () => {
200200
<Tab.Panels className="gutter-stable -mx-4 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2">
201201
{tabList[instance.game_type].map((tab) => (
202202
<Tab.Panel
203-
className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none"
203+
className="flex h-fit min-h-full w-full flex-col gap-8 pt-10 pb-8 focus:outline-none"
204204
key={tab.title}
205205
>
206206
{tab.content}

‎src/pages/settings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const SettingsPage = () => {
5656
<Tab.Panels className="gutter-stable -mx-4 flex grow flex-row items-stretch overflow-y-auto pl-4 pr-2">
5757
{tabList.map((tab) => (
5858
<Tab.Panel
59-
className="flex h-fit min-h-full w-full flex-col gap-16 pt-6 pb-10 focus:outline-none"
59+
className="flex h-fit min-h-full w-full flex-col gap-8 pt-10 pb-8 focus:outline-none"
6060
key={tab.title}
6161
>
6262
{tab.content}

0 commit comments

Comments
 (0)