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

Made more elements (mostly icons) viewport size responsive

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-02-17 21:15:53 +08:00
parent 810c805452
commit 65742e1a42
16 changed files with 98 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,47 +11,38 @@ export default function Dashboard() {
return (
<div style={styles.container}>
<div style={styles.wrapper_row}>
<HomeIcon size={64} color="white" />
<HomeIcon size={8} color="white" />
<h1 style={styles.text_large}>Dashboard</h1>
</div>
<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 }}>
<div style={{ flex: 1 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<TotalProductsIcon size={8} 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" />
<StatsIcon size={8} color="white" />
<h1 style={styles.text_large}>Current Session</h1>
</div>
<div style={styles.wrapper_row}>
<ColoredCube size={32} color="#a48e41" />
<ColoredCube size={4} 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" />
<ColoredCube size={4} color="#a44141" />
<h1 style={styles.text_large}>Removed</h1>
</div>
<h1 style={styles.text_medium}>64</h1>
@ -60,10 +51,20 @@ export default function Dashboard() {
<div style={{ flex: 3 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_large}>Widget 4</h1>
<TotalProductsIcon size={8} color="white" />
<h1 style={styles.text_medium}>Low Stock Items</h1>
</div>
<h1 style={styles.text_medium}>Placeholder</h1>
<h1 style={styles.text_medium}>Canned Pagmamahal</h1>
<h1 style={styles.text_tiny}>In Stock: 3</h1>
</DashboardContainer>
<div style={{ padding: "1.5vh" }} />
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={8} color="white" />
<h1 style={styles.text_medium}>Recently Added</h1>
</div>
<h1 style={styles.text_medium}>Zidane's Water</h1>
<h1 style={styles.text_tiny}>Added 02/17/2023</h1>
</DashboardContainer>
</div>
</div>
@ -72,10 +73,40 @@ export default function Dashboard() {
<div style={{ flex: 2 }}>
<DashboardContainer>
<div style={styles.wrapper_row}>
<TotalProductsIcon size={64} color="white" />
<h1 style={styles.text_large}>Widget 5</h1>
<TotalProductsIcon size={8} color="white" />
<div style={styles.wrapper_column}>
<h1 style={styles.text_medium}>Recent</h1>
<h1 style={styles.text_medium}>Transactions</h1>
</div>
</div>
<h1 style={styles.text_medium}>Placeholder</h1>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Kopiko Blanca (Sack)</h1>
<h1 style={styles.text_small}>Added: 96</h1>
<h1 style={styles.text_small}>Removed: 105</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Zidane's Water</h1>
<h1 style={styles.text_small}>Added: 49</h1>
<h1 style={styles.text_small}>Removed: 24</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Dan's Beefed Corn</h1>
<h1 style={styles.text_small}>Added: 32</h1>
<h1 style={styles.text_small}>Removed: 64</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<div style={styles.wrapper_column}>
<h1 style={styles.text}>Canned</h1>
<h1 style={styles.text}>Pagmamahal</h1>
</div>
<h1 style={styles.text_small}>Added: 0</h1>
<h1 style={styles.text_small}>Removed: 60</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
<div style={{ marginBottom: "2vh" }} />
<h1 style={styles.text}>Dan's Beefed Corn</h1>
<h1 style={styles.text_small}>Added: 32</h1>
<h1 style={styles.text_small}>Removed: 64</h1>
<h1 style={styles.text_tiny}>02/17/2023</h1>
</DashboardContainer>
</div>
</div>

2
src/routes/Products/Products.tsx
View file

@ -5,7 +5,7 @@ import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
export default function Products() {
return (
<div style={styles.container}>
<AppLogo size={64} color="#6f9b78" />
<AppLogo size={8} color="#6f9b78" />
<p style={styles.text}>Ivy - Inventory Manager</p>
<p style={styles.text}>Products Page</p>
</div>