From 6d9974c70d37fd94ca5797887a0bb1e38f3cbc22 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 11:30:56 +0200 Subject: [PATCH 01/17] fix: :bug: hide navbar on desktop --- src/hooks/use-mobile.tsx | 19 ++++++ src/routes/_home.tsx | 128 ++++++++++++++++++++------------------- 2 files changed, 86 insertions(+), 61 deletions(-) create mode 100644 src/hooks/use-mobile.tsx diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx new file mode 100644 index 00000000..6c79753e --- /dev/null +++ b/src/hooks/use-mobile.tsx @@ -0,0 +1,19 @@ +import { useEffect, useState } from "react"; + +const MOBILE_BREAKPOINT = 768; + +export function useIsMobile() { + const [isMobile, setIsMobile] = useState(undefined); + + useEffect(() => { + const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); + const onChange = () => { + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + }; + mql.addEventListener("change", onChange); + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + return () => mql.removeEventListener("change", onChange); + }, []); + + return !!isMobile; +} diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 2cd09e41..6379d5df 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -15,6 +15,7 @@ import { DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; +import { useIsMobile } from "~/hooks/use-mobile"; import { navRoutes } from "~/routes"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module @@ -30,23 +31,30 @@ export default function Layout() { } function AppHeader() { + const isMobile = useIsMobile(); + return (
-
-
- vektorprogrammet logo - -
-
-
- -
- + {isMobile ? ( + + ) : ( + <> +
+
+ vektorprogrammet logo + +
+
+
+ +
+ + )}
); } @@ -109,53 +117,51 @@ const MobileMenu = ({ routes, }: { routes: Array<{ name: string; path: To }> }) => { return ( -
- - -
- -
- - - - -
-
    - {routes.map((route) => ( -
  • - - {route.name} - -
    • - ))} -
-
- -
+ + +
+ +
+ + + + +
+
    + {routes.map((route) => ( +
  • + + {route.name} + +
    • + ))} +
+
+
- - - - - - - - -
+
+ + + + + + + + ); }; From 6d33931e01d963d38065dacd4209383f5c411eab Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 13:46:24 +0200 Subject: [PATCH 02/17] fix: :bug: fix navbar flickering on mobile navigation --- src/hooks/use-mobile.tsx | 19 ------------------- src/lib/utils.ts | 13 +++++++++++++ src/routes/_home.tsx | 6 ++++-- 3 files changed, 17 insertions(+), 21 deletions(-) delete mode 100644 src/hooks/use-mobile.tsx diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx deleted file mode 100644 index 6c79753e..00000000 --- a/src/hooks/use-mobile.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { useEffect, useState } from "react"; - -const MOBILE_BREAKPOINT = 768; - -export function useIsMobile() { - const [isMobile, setIsMobile] = useState(undefined); - - useEffect(() => { - const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`); - const onChange = () => { - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); - }; - mql.addEventListener("change", onChange); - setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); - return () => mql.removeEventListener("change", onChange); - }, []); - - return !!isMobile; -} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index c2d8c5f2..c9473f6d 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -4,3 +4,16 @@ import { twMerge } from "tailwind-merge"; export function cn(...inputs: Array) { return twMerge(clsx(inputs)); } + +/** + * Size breakpoints in pixels based on Tailwind CSS defaults. + * + * https://tailwindcss.com/docs/responsive-design + */ +export const breakpointPixels = { + sm: 640, + md: 768, + lg: 1024, + xl: 1280, + "2xl": 1536, +} as const; diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 6379d5df..214db8ce 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -1,5 +1,6 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { SiFacebook } from "@icons-pack/react-simple-icons"; +import { useViewportSize } from "@mantine/hooks"; import { FolderOpen, Mail, MapPin } from "lucide-react"; import { motion } from "motion/react"; import { Link, NavLink, Outlet, type To } from "react-router"; @@ -15,7 +16,7 @@ import { DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; -import { useIsMobile } from "~/hooks/use-mobile"; +import { breakpointPixels } from "~/lib/utils"; import { navRoutes } from "~/routes"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module @@ -31,7 +32,8 @@ export default function Layout() { } function AppHeader() { - const isMobile = useIsMobile(); + const { width } = useViewportSize(); + const isMobile = width < breakpointPixels.sm; return (
From 93b7e6a911cf21211c841e8a43304bc93cb95df1 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 13:46:43 +0200 Subject: [PATCH 03/17] docs: :memo: add docstring for cn --- src/lib/utils.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/lib/utils.ts b/src/lib/utils.ts index c9473f6d..f7786b1d 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,12 @@ import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; +/** + * Merge and deduplicate Tailwind classes without style conflicts + * + * @param inputs - Class names to merge + * @returns A string of class names, merged and deduplicated + */ export function cn(...inputs: Array) { return twMerge(clsx(inputs)); } From a1339f9eeb3973f477f0acd4e9d64e4cf788c356 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 14:39:40 +0200 Subject: [PATCH 04/17] fix: :wheelchair: fix accessibility and html structure --- src/routes/_home.tsx | 75 +++++++++++++++++++++++++------------------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 214db8ce..cc215ca3 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -13,6 +13,7 @@ import { DrawerDescription, DrawerFooter, DrawerHeader, + DrawerTitle, DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; @@ -121,45 +122,53 @@ const MobileMenu = ({ return ( -
- + + {"Tor"} +
- - -
-
    - {routes.map((route) => ( -
  • - - {route.name} - -
    • - ))} -
-
- -
+ + {"Navigasjonsmeny"} + + + +
+
    + {routes.map((route) => ( +
  • + + {route.name} + +
    • + ))} +
+
+
- +
+ - - + + {"Close"} From 2a66b2f8564e657c3fc8a26025f28341739629e6 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 14:40:19 +0200 Subject: [PATCH 05/17] fix: :lipstick: fix breakpoint styling --- src/routes/_home.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index cc215ca3..ecc85828 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -5,7 +5,7 @@ import { FolderOpen, Mail, MapPin } from "lucide-react"; import { motion } from "motion/react"; import { Link, NavLink, Outlet, type To } from "react-router"; import { type Sponsor, getSponsors } from "~/api/sponsor"; -import { Button, buttonVariants } from "~/components/ui/button"; +import { buttonVariants } from "~/components/ui/button"; import { Drawer, DrawerClose, @@ -17,7 +17,7 @@ import { DrawerTrigger, } from "~/components/ui/drawer"; import "~/home.css"; -import { breakpointPixels } from "~/lib/utils"; +import { breakpointPixels, cn } from "~/lib/utils"; import { navRoutes } from "~/routes"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module @@ -34,7 +34,7 @@ export default function Layout() { function AppHeader() { const { width } = useViewportSize(); - const isMobile = width < breakpointPixels.sm; + const isMobile = width < breakpointPixels.md; return (
@@ -53,7 +53,7 @@ function AppHeader() {
-
+
From daaa6ac2c4149937ca2085267da072469ca21bfe Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 16:59:13 +0200 Subject: [PATCH 06/17] refactor: :truck: move mock data to api folder --- src/api/main.ts | 36 ++++++++++ src/api/sponsor.ts | 55 ++++++++++++-- src/routes/_home._index.tsx | 140 ++++++++---------------------------- src/routes/_home.tsx | 4 +- 4 files changed, 115 insertions(+), 120 deletions(-) create mode 100644 src/api/main.ts diff --git a/src/api/main.ts b/src/api/main.ts new file mode 100644 index 00000000..8821d9d7 --- /dev/null +++ b/src/api/main.ts @@ -0,0 +1,36 @@ +import { type To, href } from "react-router"; + +interface Metric { + number: number; + title: string; + description: string; + link: { + path: To; + text: string; + }; +} + +export function getMetrics(): Array { + return [ + { + number: 2218, + title: "Assistenter", + description: + "Over 2218 studenter har hatt et verv som vektorassistent i Vektorprogrammet", + link: { + path: href("/assistenter"), + text: "Les mer om assistenter", + }, + }, + { + number: 608, + title: "I team", + description: + "Over 608 studenter har hatt et verv i et av Vektorprogrammets mange team", + link: { + path: href("/team"), + text: "Les mer om verv i team", + }, + }, + ]; +} diff --git a/src/api/sponsor.ts b/src/api/sponsor.ts index 5c818934..55c5a9e3 100644 --- a/src/api/sponsor.ts +++ b/src/api/sponsor.ts @@ -1,29 +1,70 @@ +import Abelprisen from "/images/mainPage/sponsor/Abelprisen.png"; +import ksBergen from "/images/mainPage/sponsor/KSBergen.png"; +import Matematikksenteret from "/images/mainPage/sponsor/Matematikksenteret.png"; +import NTNUIE from "/images/mainPage/sponsor/NTNUIE.png"; +import NTNUIV from "/images/mainPage/sponsor/NTNUIV.png"; +import Samarbeidsforum from "/images/mainPage/sponsor/SamarbeidsForum.png"; +import sparebankstiftelsenDnb from "/images/mainPage/sponsor/SparebankstiftelsenDNB.png"; +import Tekna from "/images/mainPage/sponsor/Tekna.png"; +import UiB from "/images/mainPage/sponsor/UIB.png"; +import VisionTech from "/images/mainPage/sponsor/VisionTech.png"; + export interface Sponsor { name: string; url: URL; + image?: string; +} + +export function getMainSponsors(): Array { + return [ + { + name: "Abelprisen", + url: new URL("https://www.abelprisen.no/"), + image: Abelprisen, + }, + { + name: "Sparebankstiftelsen DNB", + url: new URL("https://www.sparebankstiftelsendnb.no/"), + image: sparebankstiftelsenDnb, + }, + ]; } -// TODO: This data should be fetched from backend later export function getSponsors(): Array { return [ - { name: "Tekna", url: new URL("https://www.tekna.no/") }, + { name: "Tekna", url: new URL("https://www.tekna.no/"), image: Tekna }, { name: "Nasjonalt senter for realfagsrekruttering", url: new URL("https://www.realfagsrekruttering.no/"), + image: Matematikksenteret, }, - { name: "NTNU IV", url: new URL("https://www.ntnu.no/iv") }, - { name: "NTNU IE", url: new URL("https://www.ntnu.no/ie") }, + { name: "NTNU IV", url: new URL("https://www.ntnu.no/iv"), image: NTNUIV }, + { name: "NTNU IE", url: new URL("https://www.ntnu.no/ie"), image: NTNUIE }, { name: "NTNU IMF", url: new URL("https://www.ntnu.no/imf") }, - { name: "Samarbeidsforum", url: new URL("https://www.ntnu.no/nv/sf") }, - { name: "Abelprisen", url: new URL("https://www.abelprisen.no/") }, - { name: "VisionTech", url: new URL("https://www.visiontech.no/") }, + { + name: "Samarbeidsforum", + url: new URL("https://www.ntnu.no/nv/sf"), + image: Samarbeidsforum, + }, + { + name: "VisionTech", + url: new URL("https://www.visiontech.no/"), + image: VisionTech, + }, { name: "Kulturstyret i Bergen", url: new URL("https://www.vtvest.no/kulturstyret/"), + image: ksBergen, }, { name: "MN-faktultetet ved UiB", url: new URL("https://www.uib.no/matnat"), + image: UiB, }, ]; } + +// TODO: This data should be fetched from backend later +export function getAllSponsors(): Array { + return [...getMainSponsors(), ...getSponsors()]; +} diff --git a/src/routes/_home._index.tsx b/src/routes/_home._index.tsx index 772f0ad3..b05388fe 100644 --- a/src/routes/_home._index.tsx +++ b/src/routes/_home._index.tsx @@ -1,99 +1,19 @@ import { buttonVariants } from "@/components/ui/button"; import { useInView, useMotionValue, useSpring } from "motion/react"; -import { useEffect, useRef } from "react"; -import { Link, type To, href } from "react-router"; +import { Fragment, useEffect, useRef } from "react"; +import { Link } from "react-router"; +import { getMetrics } from "~/api/main"; +import { getMainSponsors, getSponsors } from "~/api/sponsor"; import { Button } from "~/components/ui/button"; -import Abelprisen from "/images/mainPage/sponsor/Abelprisen.png"; -import ksBergen from "/images/mainPage/sponsor/KSBergen.png"; -import Matematikksenteret from "/images/mainPage/sponsor/Matematikksenteret.png"; -import NTNUIE from "/images/mainPage/sponsor/NTNUIE.png"; -import NTNUIV from "/images/mainPage/sponsor/NTNUIV.png"; -import Samarbeidsforum from "/images/mainPage/sponsor/SamarbeidsForum.png"; -import sparebankstiftelsenDnb from "/images/mainPage/sponsor/SparebankstiftelsenDNB.png"; -import Tekna from "/images/mainPage/sponsor/Tekna.png"; -import UiB from "/images/mainPage/sponsor/UIB.png"; -import VisionTech from "/images/mainPage/sponsor/VisionTech.png"; import vektorForsidebilde from "/images/mainPage/vektor-forsidebilde.png"; import vektorLogo from "/images/vektor-logo.svg"; -const hovedsponsor = [ - { - name: "Abelprisen", - image: Abelprisen, - }, - { - name: "Sparebankstiftelsen DNB", - image: sparebankstiftelsenDnb, - }, -]; - -const sponsorer = [ - { - name: "Tekna", - image: Tekna, - }, - { - name: "NTNU - Fakultet for ingeniørvitenskap", - image: NTNUIV, - }, - { - name: "NTNU - Fakultet for informasjonsteknologi og elektronikk", - image: NTNUIE, - }, - { - name: "Samarbeidsforum", - image: Samarbeidsforum, - }, - { - name: "Universitetet i Bergen - Det matematisk-naturvitenskapelige fakultet", - image: UiB, - }, - { - name: "Matematikksenteret", - image: Matematikksenteret, - }, - { - name: "VisionTech", - image: VisionTech, - }, - { - name: "Kulturstyret Bergen", - image: ksBergen, - }, -]; -interface MainPageProps { - number: number; - title: string; - text: string; - route: { - path: To; - text: string; - }; -} - -const cards: Array = [ - { - number: 2218, - title: "Assistenter", - text: "Over 2218 studenter har hatt et verv som vektorassistent i Vektorprogrammet", - route: { - path: href("/assistenter"), - text: "Les mer om assistenter", - }, - }, - { - number: 608, - title: "I team", - text: "Over 608 studenter har hatt et verv i et av Vektorprogrammets mange team", - route: { - path: href("/team"), - text: "Les mer om verv i team", - }, - }, -]; - // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module -export default function mainPage() { +export default function MainPage() { + const mainSponsors = getMainSponsors(); + const sponsors = getSponsors(); + const metrics = getMetrics(); + return (
{/* Use component when the rendered component needs no props */} @@ -128,7 +48,7 @@ export default function mainPage() { {/*Upper end*/}
{/*Middle start*/} - {cards.map(({ number, title, text, route }) => ( + {metrics.map(({ number, title, description, link }) => (

{title}

-

{text}

+

+ {description} +

- {route.text} + {link.text}
@@ -156,31 +78,27 @@ export default function mainPage() {
- {hovedsponsor.map((sponsor) => ( + {mainSponsors.map(({ name, image }) => (
- {sponsor.name} + {name}
))}
- {sponsorer.map((sponsor) => ( -
- {sponsor.name} -
+ {sponsors.map(({ name, image }) => ( + + {image ?? ( +
+ {name} +
+ )} + ))}
diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index ecc85828..d06dd5bf 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -4,7 +4,7 @@ import { useViewportSize } from "@mantine/hooks"; import { FolderOpen, Mail, MapPin } from "lucide-react"; import { motion } from "motion/react"; import { Link, NavLink, Outlet, type To } from "react-router"; -import { type Sponsor, getSponsors } from "~/api/sponsor"; +import { type Sponsor, getAllSponsors } from "~/api/sponsor"; import { buttonVariants } from "~/components/ui/button"; import { Drawer, @@ -193,7 +193,7 @@ function AppFooter() { } function FooterSponsors() { - const sponsors = getSponsors(); + const sponsors = getAllSponsors(); return (
    From 2e04d61e8b46fac7394136fe2d58a6428b7ccfd6 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 17:00:52 +0200 Subject: [PATCH 07/17] fix: :art: fix html and styling refactor header styling to grid and flex --- src/routes/_home._index.tsx | 52 +++++++++++++++++-------------------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/src/routes/_home._index.tsx b/src/routes/_home._index.tsx index b05388fe..56b3f8b5 100644 --- a/src/routes/_home._index.tsx +++ b/src/routes/_home._index.tsx @@ -15,36 +15,32 @@ export default function MainPage() { const metrics = getMetrics(); return ( -
    - {/* Use component when the rendered component needs no props */} - {/* Getting the routes from the defined route file in pages */} -
    - {/*Upper start*/} -
    - Vektorprogrammet - Vektorprogrammet bildet -
    -
    -

    - {"Vektorprogrammet"} -

    -
    -

    - {`- sender studenter til ungdomsskoler for å hjelpe til som lærerens +

    +
    + {"Logo + Illustrasjon av assistenter fra Vektorprogrammet foran en tavle med matteformler +
    +

    {"Vektorprogrammet"}

    +

    + {`- sender studenter til ungdomsskoler for å hjelpe til som lærerens assistent i matematikkundervisningen`} -

    -
    - +

    +
    -
    + + {/*Upper end*/}
    {/*Middle start*/} From 72469af2c0d8cf87277d26bee4438a9ac0289e89 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 17:10:55 +0200 Subject: [PATCH 08/17] fix: :bug: fix typo --- src/routes/_home._index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/_home._index.tsx b/src/routes/_home._index.tsx index 56b3f8b5..0aae89a4 100644 --- a/src/routes/_home._index.tsx +++ b/src/routes/_home._index.tsx @@ -86,7 +86,7 @@ export default function MainPage() {
    {sponsors.map(({ name, image }) => ( - {image ?? ( + {image && (
    Date: Thu, 10 Apr 2025 18:27:51 +0200 Subject: [PATCH 09/17] refactor: :recycle: use imports for file paths --- src/routes/_home.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index d06dd5bf..1d9f44c9 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -19,6 +19,8 @@ import { import "~/home.css"; import { breakpointPixels, cn } from "~/lib/utils"; import { navRoutes } from "~/routes"; +import icon from "/images/vektor-logo-circle.svg"; +import logoWhite from "/images/vektor-logo-white.svg"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function Layout() { @@ -45,7 +47,7 @@ function AppHeader() {
    vektorprogrammet logo
    vektorprogrammet logo hvit From e533632740673ae58a052770b66f5e82f363c359 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 22:13:29 +0200 Subject: [PATCH 10/17] refactor: :art: use import for img --- src/routes/_home.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 1d9f44c9..e833f77d 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -19,6 +19,7 @@ import { import "~/home.css"; import { breakpointPixels, cn } from "~/lib/utils"; import { navRoutes } from "~/routes"; +import itTor from "/images/team/IT-Tor.png"; import icon from "/images/vektor-logo-circle.svg"; import logoWhite from "/images/vektor-logo-white.svg"; @@ -135,7 +136,7 @@ const MobileMenu = ({ }), )} > - + {"Tor"}
    From 379c5ea424435393c89e2da3d301e6f0de80925a Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 22:14:33 +0200 Subject: [PATCH 11/17] refactor: :recycle: remove unnecessary classes for login button --- src/routes/_home.tsx | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index e833f77d..4153b33d 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -107,15 +107,18 @@ function NavTabs({ function LoginButtons() { return ( -
    - - {"Logg inn"} - -
    + + {"Logg inn"} + ); } From 04c3822b2b582cdd32088bc4e1c2428c97b67566 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 22:45:37 +0200 Subject: [PATCH 12/17] feat: :lipstick: rewrite index layout with grid The grid is divided into 9 cells. The columns have 10%, 80%, 10% width respectively. The top and bottom rows fit their content, while the middle takes the rest of the space. The header and footer occupy their whole row by spanning across all columns, so for the pages to fully occupy the middle they also get the col-span-full class --- src/routes/_home._index.tsx | 8 +++++++- src/routes/_home.assistenter.tsx | 11 +++++++++- src/routes/_home.foreldre.tsx | 11 +++++++++- src/routes/_home.kontakt.tsx | 11 +++++++++- src/routes/_home.om-oss.tsx | 11 +++++++++- src/routes/_home.skoler.tsx | 8 +++++++- ...as.evaluering-rekruttering-profilering.tsx | 11 +++++++++- .../_home.team.aas.skolekoordinering.tsx | 11 +++++++++- src/routes/_home.team.aas.sosialt.tsx | 11 +++++++++- src/routes/_home.team.aas.sponsor-okonomi.tsx | 11 +++++++++- src/routes/_home.team.aas.styret.tsx | 11 +++++++++- src/routes/_home.team.bergen.rekruttering.tsx | 11 +++++++++- .../_home.team.bergen.skolekoordinering.tsx | 11 +++++++++- src/routes/_home.team.bergen.styret.tsx | 11 +++++++++- src/routes/_home.team.hovedstyret.tsx | 11 +++++++++- .../_home.team.trondheim.evaluering.tsx | 11 +++++++++- src/routes/_home.team.trondheim.it.tsx | 11 +++++++++- src/routes/_home.team.trondheim.okonomi.tsx | 11 +++++++++- .../_home.team.trondheim.profilering.tsx | 11 +++++++++- .../_home.team.trondheim.rekruttering.tsx | 11 +++++++++- ..._home.team.trondheim.skolekoordinering.tsx | 11 +++++++++- src/routes/_home.team.trondheim.sponsor.tsx | 11 +++++++++- src/routes/_home.team.trondheim.styret.tsx | 11 +++++++++- src/routes/_home.team.tsx | 11 +++++++++- src/routes/_home.tsx | 20 +++++++++++++++---- 25 files changed, 250 insertions(+), 28 deletions(-) diff --git a/src/routes/_home._index.tsx b/src/routes/_home._index.tsx index 0aae89a4..91c47375 100644 --- a/src/routes/_home._index.tsx +++ b/src/routes/_home._index.tsx @@ -5,6 +5,7 @@ import { Link } from "react-router"; import { getMetrics } from "~/api/main"; import { getMainSponsors, getSponsors } from "~/api/sponsor"; import { Button } from "~/components/ui/button"; +import { cn } from "~/lib/utils"; import vektorForsidebilde from "/images/mainPage/vektor-forsidebilde.png"; import vektorLogo from "/images/vektor-logo.svg"; @@ -15,7 +16,12 @@ export default function MainPage() { const metrics = getMetrics(); return ( -
    +
    +

    {title} diff --git a/src/routes/_home.foreldre.tsx b/src/routes/_home.foreldre.tsx index 4e4434b6..0e7fa744 100644 --- a/src/routes/_home.foreldre.tsx +++ b/src/routes/_home.foreldre.tsx @@ -1,12 +1,21 @@ import { getForeldre } from "@/api/foreldre"; import { Divider } from "~/components/divider"; import { TextPictureParagraph } from "~/components/text-picture-paragraph"; +import { cn } from "~/lib/utils"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function ForForeldre() { const { title, ingress, cards, bottomText } = getForeldre(); return ( -
    +

    {title} diff --git a/src/routes/_home.kontakt.tsx b/src/routes/_home.kontakt.tsx index 296c237a..1d0cfdd0 100644 --- a/src/routes/_home.kontakt.tsx +++ b/src/routes/_home.kontakt.tsx @@ -1,11 +1,20 @@ import { Outlet } from "react-router"; import { getKontakt } from "~/api/kontakt"; +import { cn } from "~/lib/utils"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function KontaktLayout() { const kontaktInfo = getKontakt(); return ( -
    +

    diff --git a/src/routes/_home.om-oss.tsx b/src/routes/_home.om-oss.tsx index fbb9f715..51092ac3 100644 --- a/src/routes/_home.om-oss.tsx +++ b/src/routes/_home.om-oss.tsx @@ -1,6 +1,7 @@ import { getOmOss } from "@/api/om-oss"; import { Divider } from "~/components/divider"; import { TextPictureParagraph } from "~/components/text-picture-paragraph"; +import { cn } from "~/lib/utils"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function OmOss() { @@ -8,7 +9,15 @@ export default function OmOss() { getOmOss(); return ( -
    +

    {title} diff --git a/src/routes/_home.skoler.tsx b/src/routes/_home.skoler.tsx index 2603f475..2569f2a4 100644 --- a/src/routes/_home.skoler.tsx +++ b/src/routes/_home.skoler.tsx @@ -2,11 +2,17 @@ import { Link, href } from "react-router"; import { Divider } from "~/components/divider"; import { Button } from "~/components/ui/button"; import { cities } from "~/lib/types"; +import { cn } from "~/lib/utils"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function ForSkoler() { return ( -
    +

    diff --git a/src/routes/_home.team.aas.evaluering-rekruttering-profilering.tsx b/src/routes/_home.team.aas.evaluering-rekruttering-profilering.tsx index e96468d9..e59f3791 100644 --- a/src/routes/_home.team.aas.evaluering-rekruttering-profilering.tsx +++ b/src/routes/_home.team.aas.evaluering-rekruttering-profilering.tsx @@ -1,9 +1,18 @@ import { TeamTemplate } from "@/components/team-template"; +import { cn } from "~/lib/utils"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function EvalueringRekrutteringProfilering() { return ( -
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    , +
    +
    +
    +
    +
    +

    diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 4153b33d..da17e09b 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -26,11 +26,23 @@ import logoWhite from "/images/vektor-logo-white.svg"; // biome-ignore lint/style/noDefaultExport: Route Modules require default export https://reactrouter.com/start/framework/route-module export default function Layout() { return ( -
    - - {/* Banner */} +
    + + - + +
    ); } From 555174c41d5d9eb08fefe5ce5ad31026163a39e1 Mon Sep 17 00:00:00 2001 From: phibkro <71797726+phibkro@users.noreply.github.com> Date: Thu, 10 Apr 2025 22:47:53 +0200 Subject: [PATCH 13/17] feat: :lipstick: rewrite NavBar styling for index grid layout --- src/routes/_home.tsx | 66 +++++++++++++++++++++++++++++--------------- 1 file changed, 44 insertions(+), 22 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index da17e09b..18fe7114 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -33,7 +33,7 @@ export default function Layout() { "grid grid-cols-[10%_80%_10%] grid-rows-[auto_1fr_auto]", )} > - + @@ -47,33 +47,49 @@ export default function Layout() { ); } -function AppHeader() { +function NavBar({ className }: { className?: string }) { const { width } = useViewportSize(); const isMobile = width < breakpointPixels.md; return ( -
    + ); } @@ -83,14 +99,19 @@ function NavTabs({ routes: Array<{ name: string; path: To }>; }) { return ( -
    +
    {routes.map((route) => { return ( - `${isActive ? "text-black" : "text-neutral-700 hover:text-black"} relative my-1.5 place-content-center px-4 py-auto text-center font-medium text-sm` + cn( + isActive ? "text-black" : "text-neutral-700 hover:text-black", + "my-1.5 px-4 font-medium text-sm", + // Affects children + "relative place-content-center text-nowrap text-center", + ) } prefetch="intent" > @@ -136,14 +157,15 @@ function LoginButtons() { const MobileMenu = ({ routes, -}: { routes: Array<{ name: string; path: To }> }) => { + className, +}: { routes: Array<{ name: string; path: To }>; className?: string }) => { return ( - -
    + +
    Date: Thu, 10 Apr 2025 22:48:03 +0200 Subject: [PATCH 14/17] feat: :lipstick: rewrite Footer styling for index grid layout --- src/routes/_home.tsx | 44 +++++++++++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/src/routes/_home.tsx b/src/routes/_home.tsx index 18fe7114..9e9f9b17 100644 --- a/src/routes/_home.tsx +++ b/src/routes/_home.tsx @@ -37,10 +37,12 @@ export default function Layout() { -
    @@ -216,23 +218,35 @@ const MobileMenu = ({ ); }; -function AppFooter() { +function Footer({ className }: { className?: string }) { return ( -