keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-13 01:51:06 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polished design for dashboard and made elements size responsive to viewport

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-02-17 20:33:45 +08:00
parent 2acfc48e1c
commit 810c805452
3 changed files with 102 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/routes/Dashboard/Dashboard.tsx
View file

@ -14,31 +14,71 @@ export default function Dashboard() {
<HomeIcon size={64} color="white" />
<h1 style={styles.text_large}>Dashboard</h1>
</div>
<DashboardContainer width="70%" height="30%">
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_dashboard_2}>Total Products</h1>
<div style={styles.DashboardWidget_WrapperRow}>
<div style={{ flex: 8 }}>
<div style={styles.DashboardWidget_WrapperColumn}>
<div style={{ display: "flex", flex: 5, flexDirection: "row" }}>
<div style={{ flex: 7 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_extra_large}>Total Products</h1>
</div>
<h1 style={styles.text_large}>2546 Unique Items</h1>
<h1 style={styles.text_large}>In inventory</h1>
</DashboardContainer>
</div>
<div style={{ flex: 3 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_large}>Widget 2</h1>
</div>
<h1 style={styles.text_medium}>Placeholder</h1>
</DashboardContainer>
</div>
</div>
<div style={{ display: "flex", flex: 5, flexDirection: "row" }}>
<div style={{ flex: 7 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<StatsIcon size={64} color="white" />
<h1 style={styles.text_large}>Current Session</h1>
</div>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a48e41" />
<h1 style={styles.text_large}>Added</h1>
</div>
<h1 style={styles.text_medium}>254</h1>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a44141" />
<h1 style={styles.text_large}>Removed</h1>
</div>
<h1 style={styles.text_medium}>64</h1>
</DashboardContainer>
</div>
<div style={{ flex: 3 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_large}>Widget 4</h1>
</div>
<h1 style={styles.text_medium}>Placeholder</h1>
</DashboardContainer>
</div>
</div>
</div>
</div>
<h1 style={styles.text_dashboard_1}>2546 Unique Items</h1>
<h1 style={styles.text_dashboard_1}>In inventory</h1>
</DashboardContainer>
<div style={{ padding: 16 }} />
<DashboardContainer width="50%" height="40%">
<div style={styles.wrapper_row}>
<StatsIcon size={64} color="white" />
<h1 style={styles.text_dashboard_1}>Current Session</h1>
<div style={{ flex: 2 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_large}>Widget 5</h1>
</div>
<h1 style={styles.text_medium}>Placeholder</h1>
</DashboardContainer>
</div>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a48e41" />
<h1 style={styles.text_medium}>Added</h1>
</div>
<h1 style={styles.text_dashboard_1}>254</h1>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a44141" />
<h1 style={styles.text_medium}>Removed</h1>
</div>
<h1 style={styles.text_dashboard_1}>64</h1>
</DashboardContainer>
</div>
</div>
);
}