keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +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 Bernasol 2023-02-17 21:15:53 +08:00
parent 810c805452
commit 65742e1a42
16 changed files with 98 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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",