keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-14 10:31:07 +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

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