status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-10 18:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix second width layout with grid

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-11-03 10:54:19 +02:00
parent 1135b90171
commit db5c9d2a79
1 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/Dashboard/DashboardContent.tsx
View File

@ -68,9 +68,9 @@ const DashboardContent = () => {
{windowWidth < 1375 ? (
windowWidth < 850 ? (
DashboardContentLayoutPhone(windowWidth)
DashboardContentLayoutPhone()
) : (
DashboardContentLayout(windowWidth)
DashboardContentLayout()
)
) : (
<Stack
@ -91,7 +91,7 @@ const DashboardContent = () => {
>
<ConsensusUptimeCard />
<ExecutionUptime />
</Stack>xx
</Stack>
<DeviceUptime />
</YStack>
<YStack space={'$4'}>
@ -113,7 +113,55 @@ const DashboardContent = () => {
</YStack>
)
}
const DashboardContentLayout = (windowWidth: number) => {
const DashboardContentLayout = () => {
return (
<Stack
style={{
display: 'grid',
gridTemplateColumns: '1fr',
gap: '8px',
width: '100%',
}}
>
<YStack>
<Stack
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
}}
>
<ConsensusUptimeCard />
<ExecutionUptime />
</Stack>
<DeviceUptime />
</YStack>
<Stack style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr 1fr',
gap: '8px',
}}>
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</Stack>
</Stack>
)
}
const DashboardContentLayoutPhone = () => {
return (
<Stack
style={{
@ -124,39 +172,6 @@ const DashboardContentLayout = (windowWidth: number) => {
width: '101%',
}}
>
<YStack>
<XStack>
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</Stack>
)
}
const DashboardContentLayoutPhone = (windowWidth: number) => {
return (
<Stack
style={{
display: 'grid',
gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '3fr 1fr 1fr 1fr',
gap: '8px',
width: '101%',
}}
>
<ConsensusUptimeCard />
<ExecutionUptime />