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 {
children: React.ReactNode;
width: string;
height: string;
}
export default function DashboardContainer(props: props) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
alignSelf: "flex-start",
justifyContent: "left",
backgroundColor: "#1d3b33",
borderRadius: 16,
padding: 8,
paddingLeft: 48,
width: props.width,
height: props.height,
lineHeight: 0.4,
}}
>
{props.children}
<div style={{ marginRight: 32, marginLeft: 32 }}>
<div
style={{
display: "flex",
flexDirection: "column",
alignSelf: "flex-start",
justifyContent: "left",
backgroundColor: "#1d3b33",
borderRadius: 16,
padding: 16,
width: "100%",
height: "100%",
lineHeight: 0.4,
marginLeft: 8,
marginRight: 8,
}}
>
{props.children}
</div>
</div>
);
}

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>
);
}

31
src/styles.tsx
View file

@ -17,26 +17,22 @@ const styles: { [key: string]: React.CSSProperties } = {
paddingLeft: 16,
},
text: {
fontSize: 16,
fontSize: "1.3vw",
color: "white",
fontWeight: "bold",
},
text_medium: {
fontSize: 26,
fontSize: "1.2vw",
color: "white",
fontWeight: "bold",
},
text_large: {
fontSize: 36,
fontSize: "2.2vw",
color: "white",
fontWeight: "bold",
},
text_dashboard_1: {
fontSize: 46,
color: "white",
},
text_dashboard_2: {
fontSize: 56,
text_extra_large: {
fontSize: "3.2vw",
color: "white",
},
logo_title: {
@ -91,8 +87,8 @@ const styles: { [key: string]: React.CSSProperties } = {
},
sidebar_button: {
backgroundColor: "#0b2322",
width: 192,
height: 64,
width: "30vh",
height: "6vh",
border: "none",
padding: 8,
borderTopLeftRadius: 32,
@ -121,6 +117,19 @@ const styles: { [key: string]: React.CSSProperties } = {
alignItems: "center",
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;