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

Overhauled Dashboard flex layout to be cleaner

Browse source
This commit is contained in:
keannu125 2023-02-21 14:04:36 +08:00
parent 412382303d
commit b275c2a9f0
2 changed files with 68 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,70 +12,62 @@ import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/Recently
export default function Dashboard() { export default function Dashboard() {
return ( return (
<div style={styles.container}> <div style={{ margin: 32, height: "100%" }}>
<div style={styles.wrapper_row}> <div style={styles.flex_row}>
<HomeIcon size={8} color="white" /> <HomeIcon size={8} color="white" />
<h1 style={styles.text_large}>Dashboard</h1> <h1 style={styles.text_large}>Dashboard</h1>
</div> </div>
<div style={styles.DashboardWidget_WrapperRow}> <div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ flex: 8 }}> <div style={{ flex: 8 }}>
<div style={styles.DashboardWidget_WrapperColumn}> <div style={styles.flex_column}>
<div style={{ display: "flex", flex: 5, flexDirection: "row" }}> <div style={{ ...styles.widget, ...{ flex: 5 } }}>
<div style={{ flex: 1 }}> <div style={styles.content_row}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={8} color="white" /> <TotalProductsIcon size={8} color="white" />
<h1 style={styles.text_extra_large}>Total Products</h1> <h1 style={styles.text_extra_large}>Total Products</h1>
</div> </div>
<h1 style={styles.text_large}>2546 Unique Items</h1> <h1 style={styles.text_large}>2546 Unique Items</h1>
<h1 style={styles.text_large}>In inventory</h1> <h1 style={styles.text_large}>In inventory</h1>
</DashboardContainer>
</div> </div>
</div> <div style={styles.flex_row}>
<div style={{ display: "flex", flex: 5, flexDirection: "row" }}> <div style={{ ...styles.widget, ...{ flex: 6 } }}>
<div style={{ flex: 7 }}> <div style={styles.content_row}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<StatsIcon size={8} color="white" /> <StatsIcon size={8} color="white" />
<h1 style={styles.text_large}>Current Session</h1> <h1 style={styles.text_large}>Current Session</h1>
</div> </div>
<div style={styles.wrapper_row}> <div style={styles.content_row}>
<ColoredCube size={4} color="#a48e41" /> <ColoredCube size={3} color="#a48e41" />
<h1 style={styles.text_large}>Added</h1> <h1 style={styles.text_large}>Added</h1>
</div> </div>
<h1 style={styles.text_medium}>254</h1> <h1 style={styles.text_large}>254</h1>
<div style={styles.wrapper_row}> <div style={styles.content_row}>
<ColoredCube size={4} color="#a44141" /> <ColoredCube size={3} color="#a44141" />
<h1 style={styles.text_large}>Removed</h1> <h1 style={styles.text_large}>Removed</h1>{" "}
</div> </div>
<h1 style={styles.text_medium}>64</h1>
</DashboardContainer>
</div> </div>
<div style={{ flex: 3 }}> <div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
<DashboardContainer> <div style={{ ...styles.widget, ...{ flex: 1 } }}>
<div style={styles.wrapper_row}> <div style={styles.content_row}>
<LowStockIcon size={8} color="white" /> <LowStockIcon size={8} color="white" />
<h1 style={styles.text_medium}>Low Stock</h1> <h1 style={styles.text_medium}>Low Stock</h1>
</div> </div>
<h1 style={styles.text_medium}>Canned Pagmamahal</h1> <h1 style={styles.text_medium}>Canned Pagmamahal</h1>
<h1 style={styles.text_tiny}>In Stock: 3</h1> <h1 style={styles.text_tiny}>In Stock: 3</h1>
</DashboardContainer> </div>
<div style={{ padding: "1.5vh" }} /> <div style={{ ...styles.widget, ...{ flex: 1 } }}>
<DashboardContainer> <div style={styles.content_row}>
<div style={styles.wrapper_row}>
<RecentlyAddedIcon size={8} color="white" /> <RecentlyAddedIcon size={8} color="white" />
<h1 style={styles.text_medium}>Recently Added</h1> <h1 style={styles.text_medium}>Recently Added</h1>
</div> </div>
<h1 style={styles.text_medium}>Zidane's Water</h1> <h1 style={styles.text_medium}>Zidane's Water</h1>
<h1 style={styles.text_tiny}>Added 02/17/2023</h1> <h1 style={styles.text_tiny}>Added 02/17/2023</h1>
</DashboardContainer> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style={{ flex: 2 }}> <div style={{ flex: 2 }}>
<DashboardContainer> <div style={styles.widget}>
<div style={styles.wrapper_row}> <div style={styles.content_row}>
<LogsIcon size={8} color="white" /> <LogsIcon size={8} color="white" />
<div style={styles.wrapper_column}> <div style={styles.wrapper_column}>
<h1 style={styles.text_medium}>Recent</h1> <h1 style={styles.text_medium}>Recent</h1>
@ -98,14 +90,14 @@ export default function Dashboard() {
<h1 style={styles.text_small}>Removed: 64</h1> <h1 style={styles.text_small}>Removed: 64</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1> <h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} /> <div style={{ marginBottom: "2vh" }} />
<div style={styles.wrapper_column}> <div style={styles.content_column}>
<h1 style={styles.text}>Canned</h1> <h1 style={styles.text}>Canned</h1>
<h1 style={styles.text}>Pagmamahal</h1> <h1 style={styles.text}>Pagmamahal</h1>
</div> </div>
<h1 style={styles.text_small}>Added: 0</h1> <h1 style={styles.text_small}>Added: 0</h1>
<h1 style={styles.text_small}>Removed: 60</h1> <h1 style={styles.text_small}>Removed: 60</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1> <h1 style={styles.text_tiny}>02/17/2023</h1>
</DashboardContainer> </div>
</div> </div>
</div> </div>
</div> </div>

60
src/styles.tsx
View file

@ -109,39 +109,43 @@ const styles: { [key: string]: React.CSSProperties } = {
borderBottomRightRadius: 0, borderBottomRightRadius: 0,
justifyContent: "left", justifyContent: "left",
}, },
widget: {
display: "flex",
flexDirection: "column",
backgroundColor: "#1d3b33",
borderRadius: 8,
paddingLeft: 16,
paddingRight: 16,
paddingBottom: 32,
margin: 8,
lineHeight: 0.5,
},
content_row: {
display: "flex",
flexDirection: "row",
alignItems: "center",
},
content_column: {
display: "flex",
flexDirection: "column",
lineHeight: 0,
},
flex_row: {
display: "flex",
flexDirection: "row",
alignItems: "stretch",
},
flex_column: {
display: "flex",
flexDirection: "column",
},
sidebar_wrapper: { sidebar_wrapper: {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100vh", height: "100vh",
width: "110%",
backgroundColor: "#3d4848",
alignItems: "flex-end",
},
wrapper_row: {
display: "flex",
flexDirection: "row",
alignItems: "center",
alignSelf: "flex-start",
},
wrapper_column: {
display: "flex",
flexDirection: "column",
alignSelf: "flex-start",
justifyContent: "left",
lineHeight: 0,
},
DashboardWidget_WrapperColumn: {
justifyContent: "center",
display: "flex",
flexDirection: "column",
width: "100%", width: "100%",
height: "100vh", paddingLeft: "2vh",
}, backgroundColor: "#3d4848",
DashboardWidget_WrapperRow: {
justifyContent: "center",
display: "flex",
flexDirection: "row",
width: "95%",
}, },
}; };