keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-04-16 06:51:28 +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
src
components
ColoredCube
ColoredCube.tsx
Header
Header.tsx
Icons
AppLogo
AppLogo.tsx
HomeIcon
HomeIcon.tsx
InventoryIcon
InventoryIcon.tsx
LogoutIcon
LogoutIcon.tsx
LogsIcon
LogsIcon.tsx
NotFoundIcon
NotFoundIcon.tsx
ProductsIcon
ProductsIcon.tsx
StatsIcon
StatsIcon.tsx
TotalProductsIcon
TotalProductsIcon.tsx
Logout
Logout.tsx
Sidebar
Sidebar.tsx
routes
Dashboard
Dashboard.tsx
Products
Products.tsx
styles.tsx

4
src/components/ColoredCube/ColoredCube.tsx
View file

@ -11,8 +11,8 @@ export default function ColoredCube(props: props) {
<div
style={{
backgroundColor: props.color,
width: props.size,
height: props.size,
width: props.size + "vh",
height: props.size + "vh",
}}
/>
</div>

2
src/components/Header/Header.tsx
View file

@ -7,7 +7,7 @@ export default function Header() {
return (
<div style={styles.header_wrapper}>
<div style={styles.header_left}>
<AppLogo size={64} color="#6f9b78" />
<AppLogo size={8} color="#6f9b78" />
<p style={styles.logo_title}>Ivy</p>
</div>
<div style={styles.header_right}>

4
src/components/Icons/AppLogo/AppLogo.tsx
View file

@ -10,8 +10,8 @@ export default function AppLogo(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/components/Icons/HomeIcon/HomeIcon.tsx
View file

@ -10,8 +10,8 @@ export default function HomeIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-home-2"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}

4
src/components/Icons/InventoryIcon/InventoryIcon.tsx
View file

@ -10,8 +10,8 @@ export default function InventoryIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-box-seam"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/components/Icons/LogoutIcon/LogoutIcon.tsx
View file

@ -10,8 +10,8 @@ export default function LogoutIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/components/Icons/LogsIcon/LogsIcon.tsx
View file

@ -10,8 +10,8 @@ export default function LogsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-clipboard-data"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
View file

@ -10,8 +10,8 @@ export default function NotFoundIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-error-404"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/components/Icons/ProductsIcon/ProductsIcon.tsx
View file

@ -10,8 +10,8 @@ export default function ProductsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-list-numbers"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/components/Icons/StatsIcon/StatsIcon.tsx
View file

@ -10,8 +10,8 @@ export default function StatsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

4
src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
View file

@ -10,8 +10,8 @@ export default function TotalProductsIcon(props: props) {
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size}
height={props.size}
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}

2
src/components/Logout/Logout.tsx
View file

@ -23,7 +23,7 @@ export default function Logout(props: props) {
}
return (
<div style={{ paddingTop: "90%" }}>
<div style={{ paddingTop: "40vh" }}>
<Button
onClick={login}
value="Log out"

16
src/components/Sidebar/Sidebar.tsx
View file

@ -29,16 +29,16 @@ export default function Sidebar() {
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={48} color="white" />
<HomeIcon size={4} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Products")} name="Products">
<ProductsIcon size={48} color="white" />
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={48} color="white" />
<InventoryIcon size={4} color="white" />
</SidebarButton>
</div>
</div>
@ -54,24 +54,24 @@ export default function Sidebar() {
}}
>
<SidebarButton onClick={() => navigate("/")} name="Dashboard">
<HomeIcon size={48} color="white" />
<HomeIcon size={4} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Products")} name="Products">
<ProductsIcon size={48} color="white" />
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"
>
<InventoryIcon size={48} color="white" />
<InventoryIcon size={4} color="white" />
</SidebarButton>
<SidebarButton onClick={() => navigate("/Logs")} name="Logs">
<LogsIcon size={48} color="white" />
<LogsIcon size={4} color="white" />
</SidebarButton>
</div>
<Logout>
<LogoutIcon size={48} color="white" />
<LogoutIcon size={4} color="white" />
</Logout>
</div>
);

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>

18
src/styles.tsx
View file

@ -16,6 +16,16 @@ const styles: { [key: string]: React.CSSProperties } = {
paddingTop: 0,
paddingLeft: 16,
},
text_tiny: {
fontSize: "0.6vw",
color: "white",
fontWeight: "bold",
},
text_small: {
fontSize: "0.8vw",
color: "white",
fontWeight: "bold",
},
text: {
fontSize: "1.3vw",
color: "white",
@ -34,6 +44,7 @@ const styles: { [key: string]: React.CSSProperties } = {
text_extra_large: {
fontSize: "3.2vw",
color: "white",
fontWeight: "bold",
},
logo_title: {
color: "#6c9575",
@ -74,8 +85,8 @@ const styles: { [key: string]: React.CSSProperties } = {
},
logout_button: {
backgroundColor: "#0b2322",
height: 64,
width: 192,
width: "30vh",
height: "6vh",
border: "none",
padding: 8,
borderRadius: 16,
@ -114,8 +125,9 @@ const styles: { [key: string]: React.CSSProperties } = {
wrapper_column: {
display: "flex",
flexDirection: "column",
alignItems: "center",
alignSelf: "flex-start",
justifyContent: "left",
lineHeight: 0,
},
DashboardWidget_WrapperColumn: {
justifyContent: "center",