status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change from flex to grid

This commit is contained in:
Hristo Nedelkov 2023-11-01 19:35:46 +02:00
parent 71eddf8034
commit e1c7599dd4
1 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,36 +66,43 @@ const DashboardContent = () => {
</Stack>
<BasicInfoCards />
{/* SECOND ROW ENDS HERE! */}
<Stack
style={{
display: 'grid',
gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '3fr 1fr 1fr 1fr',
gap: '8px',
{windowWidth < 1375 ? windowWidth < 850 ? DashboardContentLayoutPhone(windowWidth) : DashboardContentLayout(windowWidth) : (
<Stack
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
width: '100%',
}}
>
<YStack >
width: '101%',
}}
>
<YStack>
<XStack >
<XStack>
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<YStack space={'$4'} >
<XStack space={'$4'} >
<DeviceUptime />
</YStack>
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
</XStack>
<XStack space='$4'>
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />
<MemoryCard currentMemory={[21, 33, 3, 42, 35]} maxMemory={50} />
<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>
<NetworkCard
downloadRate={[12, 31, 22, 12, 23, 23, 90]}
uploadRate={[31, 22, 32, 132, 32, 45, 65]}
/>
</XStack>
</YStack>
</Stack>
)}
</YStack>
)
}
@ -103,7 +110,7 @@ const DashboardContentLayout = (windowWidth: number) => {
return (<Stack
style={{
display: 'grid',
gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '3fr 1fr 1fr 1fr',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
width: '101%',
@ -143,16 +150,13 @@ const DashboardContentLayoutPhone = (windowWidth: number) => {
width: '101%',
}}
>
<YStack>
<XStack>
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<ConsensusUptimeCard />
<ExecutionUptime />
<DeviceUptime />
<DeviceUptime />
</YStack>
<StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} />