change: layout and make responsive

2025-03-27 23:14:48 +01:00
parent 7efd0507bb
commit c8b4ad9c87
7 changed files with 93 additions and 44 deletions
--- 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>
        ))}
--- 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"}
          />
--- 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>
--- 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>
  );
 }
--- 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 } },
+          ],
+        },
      ],
    },
  });
--- 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: [
    {
--- 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"),
      }