keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +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 Bernasol 2023-02-17 20:33:45 +08:00
parent 2acfc48e1c
commit 810c805452
3 changed files with 102 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/DashboardContainer/DashboardContainer.tsx
View file

@ -2,28 +2,29 @@ import React from "react";
export interface props { export interface props {
children: React.ReactNode; children: React.ReactNode;
width: string;
height: string;
} }
export default function DashboardContainer(props: props) { export default function DashboardContainer(props: props) {
return ( return (
<div <div style={{ marginRight: 32, marginLeft: 32 }}>
style={{ <div
display: "flex", style={{
flexDirection: "column", display: "flex",
alignSelf: "flex-start", flexDirection: "column",
justifyContent: "left", alignSelf: "flex-start",
backgroundColor: "#1d3b33", justifyContent: "left",
borderRadius: 16, backgroundColor: "#1d3b33",
padding: 8, borderRadius: 16,
paddingLeft: 48, padding: 16,
width: props.width, width: "100%",
height: props.height, height: "100%",
lineHeight: 0.4, lineHeight: 0.4,
}} marginLeft: 8,
> marginRight: 8,
{props.children} }}
>
{props.children}
</div>
</div> </div>
); );
} }

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

@ -14,31 +14,71 @@ export default function Dashboard() {
<HomeIcon size={64} color="white" /> <HomeIcon size={64} color="white" />
<h1 style={styles.text_large}>Dashboard</h1> <h1 style={styles.text_large}>Dashboard</h1>
</div> </div>
<DashboardContainer width="70%" height="30%"> <div style={styles.DashboardWidget_WrapperRow}>
<div style={styles.wrapper_row}> <div style={{ flex: 8 }}>
<TotalProductsIcon size={64} color="white" /> <div style={styles.DashboardWidget_WrapperColumn}>
<h1 style={styles.text_dashboard_2}>Total Products</h1> <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> </div>
<h1 style={styles.text_dashboard_1}>2546 Unique Items</h1> <div style={{ flex: 2 }}>
<h1 style={styles.text_dashboard_1}>In inventory</h1> <DashboardContainer>
</DashboardContainer> <div style={styles.wrapper_row}>
<div style={{ padding: 16 }} /> <TotalProductsIcon size={64} color="white" />
<DashboardContainer width="50%" height="40%"> <h1 style={styles.text_large}>Widget 5</h1>
<div style={styles.wrapper_row}> </div>
<StatsIcon size={64} color="white" /> <h1 style={styles.text_medium}>Placeholder</h1>
<h1 style={styles.text_dashboard_1}>Current Session</h1> </DashboardContainer>
</div> </div>
<div style={styles.wrapper_row}> </div>
<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>
); );
} }

31
src/styles.tsx
View file

@ -17,26 +17,22 @@ const styles: { [key: string]: React.CSSProperties } = {
paddingLeft: 16, paddingLeft: 16,
}, },
text: { text: {
fontSize: 16, fontSize: "1.3vw",
color: "white", color: "white",
fontWeight: "bold", fontWeight: "bold",
}, },
text_medium: { text_medium: {
fontSize: 26, fontSize: "1.2vw",
color: "white", color: "white",
fontWeight: "bold", fontWeight: "bold",
}, },
text_large: { text_large: {
fontSize: 36, fontSize: "2.2vw",
color: "white", color: "white",
fontWeight: "bold", fontWeight: "bold",
}, },
text_dashboard_1: { text_extra_large: {
fontSize: 46, fontSize: "3.2vw",
color: "white",
},
text_dashboard_2: {
fontSize: 56,
color: "white", color: "white",
}, },
logo_title: { logo_title: {
@ -91,8 +87,8 @@ const styles: { [key: string]: React.CSSProperties } = {
}, },
sidebar_button: { sidebar_button: {
backgroundColor: "#0b2322", backgroundColor: "#0b2322",
width: 192, width: "30vh",
height: 64, height: "6vh",
border: "none", border: "none",
padding: 8, padding: 8,
borderTopLeftRadius: 32, borderTopLeftRadius: 32,
@ -121,6 +117,19 @@ const styles: { [key: string]: React.CSSProperties } = {
alignItems: "center", alignItems: "center",
alignSelf: "flex-start", alignSelf: "flex-start",
}, },
DashboardWidget_WrapperColumn: {
justifyContent: "center",
display: "flex",
flexDirection: "column",
width: "100%",
height: "100vh",
},
DashboardWidget_WrapperRow: {
justifyContent: "center",
display: "flex",
flexDirection: "row",
width: "95%",
},
}; };
export default styles; export default styles;