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

Create different layouts for second row cards

Browse Source
This commit is contained in:
Hristo Nedelkov 2023-11-01 19:01:28 +02:00
parent a88e13fcb4
commit bcf7d7e7fc
1 changed files with 79 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,17 +68,23 @@ const DashboardContent = () => {
{/* SECOND ROW ENDS HERE! */} {/* SECOND ROW ENDS HERE! */}
<Stack <Stack
style={{ style={{
display: 'flex', display: 'grid',
flexDirection: 'row', gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '3fr 1fr 1fr 1fr',
flexWrap: 'wrap', gap: '8px',
gap: '1vw',
width: '101%', width: '101%',
}} }}
> >
<ConsensusUptimeCard /> <YStack>
<ExecutionUptime />
<DeviceUptime /> <XStack>
<ConsensusUptimeCard />
<ExecutionUptime />
</XStack>
<DeviceUptime />
</YStack>
<StorageCard maxStorage={100} storage={82} /> <StorageCard maxStorage={100} storage={82} />
<CPUCard load={[12, 31, 3, 2, 24, 98]} /> <CPUCard load={[12, 31, 3, 2, 24, 98]} />
@ -93,5 +99,71 @@ const DashboardContent = () => {
</YStack> </YStack>
) )
} }
const DashboardContentLayout = (windowWidth: number) => {
return (<Stack
style={{
display: 'grid',
gridTemplateColumns: windowWidth < 1375 ? '1fr 1fr' : '3fr 1fr 1fr 1fr',
gap: '8px',
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%',
}}
>
<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>
)
}
export default DashboardContent export default DashboardContent