From c8b4ad9c879602bfd9d5b496dc6d826dc6bca0bf Mon Sep 17 00:00:00 2001
From: Dominik Natter <dominik.natter@nattergroup.com>
Date: Thu, 27 Mar 2025 23:14:48 +0100
Subject: [PATCH] change: layout and make responsive

---
 .../_components/DiplomarbeitSearch.tsx        | 10 +--
 src/app/(frontend)/_components/Footer.tsx     |  4 +-
 src/app/(frontend)/_components/Header.tsx     |  8 +-
 src/app/(frontend)/diplomarbeit/[id]/page.tsx | 89 ++++++++++++++-----
 src/app/(payload)/api/diplomarbeiten/route.ts | 19 ++--
 src/collections/Media.ts                      |  1 +
 src/collections/Papers.ts                     |  6 +-
 7 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/src/app/(frontend)/_components/DiplomarbeitSearch.tsx b/src/app/(frontend)/_components/DiplomarbeitSearch.tsx
index b5bdf6b..8d2af94 100644
--- a/src/app/(frontend)/_components/DiplomarbeitSearch.tsx
+++ b/src/app/(frontend)/_components/DiplomarbeitSearch.tsx
@@ -20,17 +20,17 @@ export default function DiplomarbeitSearch() {
 
   return (
     <div className="w-full flex flex-col gap-16">
-      <div className="w-1/3 flex flex-col items-center mx-auto">
-        <h2 className="text-5xl w-auto pb-2">Diplomarbeitensuche</h2>
+      <div className="w-3/4 md:w-1/3 flex flex-col items-center mx-auto">
+        <h2 className="text-4xl md:text-5xl w-auto pb-2">Diplomarbeitensuche</h2>
         <Input type="text" value={search} placeholder="Suche" onChange={(e) => setSearch(e.target.value)} className="w-full" />
       </div>
 
-      <div className="flex flex-col justify-center mx-auto w-2/3">
+      <div className="flex flex-col justify-center mx-auto w-4/5 lg:w-2/3">
         {results.map((result, index) => (
           <Link key={index} href={"/diplomarbeit/" + result.id}>
           <div key={index}>
-            <h2 className="text-3xl">{result.title}</h2>
-            <h3 className="text-xl">{result.year}</h3>
+            <h2 className="text-2xl md:text-3xl">{result.title}</h2>
+            <h3 className="text-lg md:text-xl">{result.year}</h3>
           </div>
           </Link>
         ))}
diff --git a/src/app/(frontend)/_components/Footer.tsx b/src/app/(frontend)/_components/Footer.tsx
index c3734dc..16bcd77 100644
--- a/src/app/(frontend)/_components/Footer.tsx
+++ b/src/app/(frontend)/_components/Footer.tsx
@@ -10,10 +10,10 @@ export default function Footer() {
   return (
     <footer className="w-full h-20 bg-htl-red flex flex-row  items-center p-2 gap-4 shadow-lg justify-between">
       <div className="w-auto flex items-center flex-row gap-4">
-        <p className="text-xl text-white">Made with {"<3"} by</p>
+        <p className="text-sm md:text-xl text-white">Made with {"<3"} by</p>
         <a href="https://natter.li" target="_blank">
           <Image
-            className="h-6 w-auto"
+            className="h-4 md:h-6 w-auto"
             src={natterLogoWhite}
             alt={"Natter Logo"}
           />
diff --git a/src/app/(frontend)/_components/Header.tsx b/src/app/(frontend)/_components/Header.tsx
index 34fd805..aff34eb 100644
--- a/src/app/(frontend)/_components/Header.tsx
+++ b/src/app/(frontend)/_components/Header.tsx
@@ -11,16 +11,16 @@ import { Button } from '@/components/ui/button'
 export default async function Header(){
   const session = await getPayloadSession();
   return (
-    <header className="w-full h-20 flex flex-row  items-center  shadow-md justify-between pr-2">
-      <div className="w-auto flex h-full bg-htl-red items-center flex-row gap-4 px-2">
+    <header className="w-full h-20 flex flex-row  items-center  shadow-md justify-between">
+      <div className="w-full lg:w-auto flex h-full bg-htl-red items-center flex-row gap-4 px-2">
         <Image
           className="h-16 w-auto rounded"
           src={HTLDLogo}
           alt={"HTL Dornbirn Logo"}
         />
-        <p className="text-6xl text-white">Diplom- und Abschlussarbeiten</p>
+        <p className="text-2xl md:text-6xl text-white">Diplom- und Abschlussarbeiten</p>
       </div>
-      <div className="w-auto">
+      <div className="hidden lg:block w-auto pr-2">
         <Link href="/admin" className="text-sm/6 font-semibold text-gray-900">
          Administration <span aria-hidden="true">&rarr;</span>
         </Link>
diff --git a/src/app/(frontend)/diplomarbeit/[id]/page.tsx b/src/app/(frontend)/diplomarbeit/[id]/page.tsx
index 3aeec15..b777673 100644
--- a/src/app/(frontend)/diplomarbeit/[id]/page.tsx
+++ b/src/app/(frontend)/diplomarbeit/[id]/page.tsx
@@ -1,33 +1,33 @@
-import { getPayload } from 'payload';
-import config from '@payload-config';
-import Link from "next/link"
-import React from 'react'
+import { getPayload } from "payload";
+import config from "@payload-config";
+import Link from "next/link";
+import React from "react";
 
 const team = [
   {
-    name: 'Emma Dorsey',
-    role: 'Senior Developer',
+    name: "Emma Dorsey",
+    role: "Senior Developer",
     imageUrl:
-      'https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80',
-    bio: 'Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus.',
-    xUrl: '#',
-    linkedinUrl: '#',
+      "https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+    bio: "Praesentium iure error aliquam voluptas ut libero. Commodi placeat sit iure nulla officiis. Ut ex sit repellat tempora. Qui est accusamus exercitationem natus ut voluptas. Officiis velit eos ducimus.",
+    xUrl: "#",
+    linkedinUrl: "#",
   },
   // More people...
-]
+];
 
 function Team({ people }) {
   return (
-    <div className="bg-white py-24 md:py-32 lg:py-40">
-      <div className="mx-auto grid  grid-cols-1 gap-20 px-6 lg:px-8 xl:grid-cols-3">
-        <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+    <div className="py-24 md:py-32 lg:py-40">
+      <div className="mx-auto grid  grid-cols-1 gap-5 xl:grid-cols-3">
+        <div className="max-w-2xl">
+          <h2 className="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
             Projektteam
           </h2>
         </div>
         <ul
           role="list"
-          className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:gap-x-8 xl:col-span-2"
+          className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-20 sm:grid-cols-3 lg:mx-0  lg:gap-x-8 xl:col-span-2"
         >
           {people.map((person) => (
             <li key={person.id}>
@@ -70,7 +70,7 @@ export default async function Page({
   });
 
   return (
-    <div className="w-2/3 mx-auto pt-4">
+    <div className="w-4/5 md:w-2/3 mx-auto pt-4 pb-16">
       <Link href="/">
         <span aria-hidden="true">&larr;</span> Zurück
       </Link>
@@ -78,14 +78,55 @@ export default async function Page({
       <h4 className="text-lg text-gray-600 pt-8">
         Diplom- und Abschlussarbeiten ({result.year})
       </h4>
-      <h1 className="text-4xl font-semibold">{result.title}</h1>
+      <h1 className="text-2xl md:text-4xl font-semibold">{result.title}</h1>
       <Team people={result.authors} />
-      <h2 className="text-3xl">Zielsetzung</h2>
-      <p className="text-lg">{result.goal}</p>
-      <h2 className="text-3xl">Problemstellung</h2>
-      <p className="text-lg">{result.issue}</p>
-      <h2 className="text-3xl">Ergebnisse</h2>
-      <p className="text-lg">{result.result}</p>
+
+      <section className="py-4">
+        <h2 className="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl pb-4">
+          Zielsetzung
+        </h2>
+        <p className="text-lg text-justify">{result.goal}</p>
+      </section>
+
+      <section className="py-4">
+        <h2 className="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl pb-4">
+          Problemstellung
+        </h2>
+        <p className="text-lg text-justify">{result.issue}</p>
+      </section>
+
+      <section className="py-4">
+        <h2 className="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl pb-4">
+          Ergebnisse
+        </h2>
+        <p className="text-lg text-justify">{result.result}</p>
+      </section>
+
+      <section className="py-4">
+        <h2 className="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl pb-4">
+          Technologien
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {result.technologies.map((technology) => (
+            <div
+              key={technology.id}
+              className="w-full rounded-lg border border-gray-200 shadow-sm p-4 flex flex-col lg:flex-row gap-4"
+            >
+              <img
+                alt={technology.name + " Logo"}
+                src={technology.technology.url}
+                className="object-fill h-16 h-16"
+              />
+              <div className="flex flex-col">
+                <h3 className="text-2xl">{technology.technology.name}</h3>
+                <p>{technology.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+
     </div>
   );
 }
diff --git a/src/app/(payload)/api/diplomarbeiten/route.ts b/src/app/(payload)/api/diplomarbeiten/route.ts
index 9ff9779..3ed9fcd 100644
--- a/src/app/(payload)/api/diplomarbeiten/route.ts
+++ b/src/app/(payload)/api/diplomarbeiten/route.ts
@@ -15,13 +15,18 @@ export async function GET(req: NextRequest) {
   const response = await payload.find({
     collection: 'papers',
     where: {
-      or: [
-        { title: { contains: search } },
-        { issue: { contains: search } },
-        { goal: { contains: search } },
-        { 'technologies.description': { contains: search } },
-        { 'prototype.description': { contains: search } },
-        { 'authors.description': { contains: search } },
+      and: [
+        { published: { equals: true } },
+        {
+          or: [
+            { title: { contains: search } },
+            { issue: { contains: search } },
+            { goal: { contains: search } },
+            { 'technologies.description': { contains: search } },
+            { 'prototype.description': { contains: search } },
+            { 'authors.description': { contains: search } },
+          ],
+        },
       ],
     },
   });
diff --git a/src/collections/Media.ts b/src/collections/Media.ts
index 5de7722..7e0942c 100644
--- a/src/collections/Media.ts
+++ b/src/collections/Media.ts
@@ -18,6 +18,7 @@ export const Media: CollectionConfig = {
     create: ({ req: { user } }) => Boolean(user),
     update: ({ req: { user } }) => Boolean(user && user.role === 'admin'),
     delete: ({ req: { user } }) => Boolean(user && user.role === 'admin'),
+    read: () => true,
   },
   fields: [
     {
diff --git a/src/collections/Papers.ts b/src/collections/Papers.ts
index 5de19a5..77a937e 100644
--- a/src/collections/Papers.ts
+++ b/src/collections/Papers.ts
@@ -11,9 +11,10 @@ export const Papers: CollectionConfig = {
     delete: ({ req: { user } }) => Boolean(user?.type === "admin"),
     read: () => true,
     update: async ({ req: { user, payload }, id }) => {
+      if (!user || !id) return false; // Explicitly handle missing ID
+
       if (user?.type === "admin") return true;
 
-      if (!user || !id) return false; // Explicitly handle missing ID
 
       const paper = await payload.findByID({
         collection: "papers",
@@ -22,6 +23,7 @@ export const Papers: CollectionConfig = {
       });
 
       if (!paper) return false;
+      if(paper.published) return false;
 
       return paper.authors.some((author: any) => author.name === user.name);
     },
@@ -34,7 +36,7 @@ export const Papers: CollectionConfig = {
       name: "published",
       type: "checkbox",
       defaultValue: false,
-      label: "Veröffentlicht",
+      label: "Veröffentlicht (Auf der Website sichtbar)",
       access: {
         update: ({ req: { user } }) => Boolean(user?.type === "admin"),
       }