gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed cv page layout when one column is missing

Browse Source
This commit is contained in:
Gregor Lohaus
2025-06-14 18:32:44 +02:00
parent 2c1be1429d
commit d176f66865
2 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/cv/_components/CvCategory.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { trpc } from "~/app/_trpc/Client"
import CvEntry, { type CvEntryProps } from "./CvEntry"
import CvEntry from "./CvEntry"
import type { servTrpc } from "~/app/_trpc/ServerClient"
import type { inferProcedureOutput } from "@trpc/server"
import type { RouterOutputs } from "~/server/routers/_app"
@@ -9,13 +9,13 @@ import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
type CvCategoryProps = {
initialData: RouterOutputs['cv']['category']['get'],
layout: "row"|"col",
children?: React.ReactElement<CvEntryProps>
children?: React.ReactElement<Parameters<typeof CvEntry>>
}
export default function CvCategory(props:CvCategoryProps) {
const query = trpc.cv.category.get.useQuery({id: props.initialData? props.initialData.id : ""});
if (query.data !== undefined) {
return (
<Card className={props.layout == "row" ? "w-full" : ""}>
<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan")}>
<CardHeader>
<CardTitle>
{query.data?.name}

47
src/app/cv/page.tsx
View File

@@ -2,15 +2,25 @@
import { useGSAP } from "@gsap/react";
import { useGsapContext } from "../_providers/GsapProvicer";
import { trpc } from "../_trpc/Client";
import { useRef } from "react";
import { useEffect, useRef, useState } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
import type { CategoryRouterOutputs } from "~/server/routers/cv/category";
export default function CvPage() {
//TODO fix display when one column is empty
// useState to store filtered categories
// should make this easier
const [sidebarCategories,setSidebarCategories] = useState<CategoryRouterOutputs['list']>([]);
const [headerCategories,setHeaderCategories] = useState<CategoryRouterOutputs['list']>([]);
const [col1Categories,setCol1Categories] = useState<CategoryRouterOutputs['list']>([]);
const [col2Categories,setCol2Categories] = useState<CategoryRouterOutputs['list']>([]);
const categories = trpc.cv.category.list.useQuery();
useEffect(() => {
if (categories.data !== undefined) {
setSidebarCategories(categories.data.filter((cat) => cat.layoutPosition == "sidebar"))
setHeaderCategories(categories.data.filter((cat) => cat.layoutPosition == "header"))
setCol1Categories(categories.data.filter((cat) => cat.layoutPosition == "col1"))
setCol2Categories(categories.data.filter((cat) => cat.layoutPosition == "col2"))
}
},[categories.data])
const gsap = useGsapContext()
const container = useRef<HTMLDivElement>(null)
enum Direction {
@@ -43,7 +53,7 @@ export default function CvPage() {
dir = dir + 1
}
})
}, { scope: container, dependencies: [categories.isFetched], revertOnUpdate: true })
}, { scope: container, dependencies: [col1Categories,col2Categories,headerCategories,sidebarCategories], revertOnUpdate: true })
if (categories.data !== undefined) {
return (
<>
@@ -53,7 +63,7 @@ export default function CvPage() {
<SidebarTriggerDisappearsOnMobile />
<Sidebar className="z-[51] gsapan">
<SidebarContent className="p-2">
{categories.data.filter((cat) => cat.layoutPosition == 'sidebar').map((cat) => {
{sidebarCategories.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
@@ -66,23 +76,26 @@ export default function CvPage() {
<div className="h-full w-full flex flex-wrap flex-row p-[1rem] pt-[2rem] ">
<div id="mainwrap" className="flex w-full flex-col gap-[1rem]">
<div id="header" className="flex w-full h-fit flex-row gap-[1rem]">
{categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
{headerCategories.map((cat) => {
return (
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
</div>
<div id="colwrapper" className="flex flex-col md:flex-row w-full h-3/4 gap-[1rem]">
<div id="col1" className="flex flex-col w-full md:w-1/2 h-full gap-[1rem]">
{categories.data.filter((cat) => cat.layoutPosition == 'col1').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div>
{categories.data.filter((cat) => cat.layoutPosition == 'col2').length > 0 ?
<div id="col2" className="flex flex-col w-full md:w-1/2 h-full gap-[1rem]">
{categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
{col1Categories.length > 0 ?
<div id="col1" className={`flex flex-col w-full ${col2Categories.length > 0 ? "md:w-1/2" : ""} h-full gap-[1rem]`}>
{col1Categories.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div> :
<></>
}
{col2Categories.length > 0 ?
<div id="col2" className={`flex flex-col w-full ${col1Categories.length > 0 ? "md:w-1/2" : ""} h-full gap-[1rem]`}>
{col2Categories.map((cat) => {
return (
<CvCategory layout="col" initialData={cat} key={cat.id} />
)