feat: Styling

simonknittel · Mar 23, 2024 · 58513c3 · 58513c3
1 parent d77e503
commit 58513c3
Show file tree

Hide file tree

Showing 13 changed files with 85 additions and 124 deletions.
diff --git a/app/package.json b/app/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "next build",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
     "start": "next start",

diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/Overview.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/Overview.tsx
@@ -1,24 +1,23 @@
 import { type Entity } from "@prisma/client";
+import clsx from "clsx";
 import { Suspense } from "react";
 import { FaDiscord, FaTeamspeak } from "react-icons/fa";
 import { RiTimeLine } from "react-icons/ri";
 import { requireAuthentication } from "~/_lib/auth/authenticateAndAuthorize";
 import { LastSeenAt } from "../../../citizen/_components/LastSeenAt";
 import { OverviewSection } from "./generic-log-type/OverviewSection";
 
-interface Props {
+type Props = Readonly<{
+  className?: string;
   entity: Entity;
-}
+}>;
 
-const Overview = async ({ entity }: Readonly<Props>) => {
+export const Overview = async ({ className, entity }: Props) => {
   const authentication = await requireAuthentication();
 
   return (
     <section
-      className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50 "
-      style={{
-        gridArea: "overview",
-      }}
+      className={clsx(className, "rounded-2xl p-4 lg:p-8 bg-neutral-800/50")}
     >
       <h2 className="font-bold">Übersicht</h2>
 
@@ -95,5 +94,3 @@ const Overview = async ({ entity }: Readonly<Props>) => {
     </section>
   );
 };
-
-export default Overview;
diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/OverviewSkeleton.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/OverviewSkeleton.tsx
@@ -1,14 +1,18 @@
-const OverviewSkeleton = () => {
+import clsx from "clsx";
+
+type Props = Readonly<{
+  className?: string;
+}>;
+
+export const OverviewSkeleton = ({ className }: Props) => {
   return (
     <section
-      className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50  flex flex-col animate-pulse min-h-[22.5rem]"
-      style={{
-        gridArea: "overview",
-      }}
+      className={clsx(
+        className,
+        "rounded-2xl p-4 lg:p-8 bg-neutral-800/50  flex flex-col animate-pulse min-h-[22.5rem]",
+      )}
     >
       <h2 className="font-bold">Übersicht</h2>
     </section>
   );
 };
-
-export default OverviewSkeleton;
diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/generic-log-type/HistoryEntry.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/generic-log-type/HistoryEntry.tsx
@@ -46,9 +46,7 @@ export const HistoryEntry = ({ type, log }: Readonly<Props>) => {
         <div className="px-4 pt-4 flex items-start gap-2 relative z-10">
           <FaInfoCircle className="text-blue-500 grow-1 shrink-0 mt-1" />
           <div className="flex gap-4">
-            <p className="font-bold">
-              Dieser Eintrag ist noch nicht bestätigt.
-            </p>
+            <p className="font-bold">Unbestätigt</p>
 
             {authentication &&
               authentication.authorize([

diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/generic-log-type/OverviewSection.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/generic-log-type/OverviewSection.tsx
@@ -27,7 +27,9 @@ export const OverviewSection = async ({
       </dt>
 
       <dd className="flex gap-4 items-center">
-        {entity[camelCase(type)] || <span className="italic">Unbekannt</span>}
+        <span className="whitespace-nowrap overflow-hidden text-ellipsis">
+          {entity[camelCase(type)] || <span className="italic">Unbekannt</span>}
+        </span>
 
         <HistoryModal type={type} entity={entity} />
       </dd>

diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/handle/SingleHandle.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/handle/SingleHandle.tsx
@@ -44,9 +44,7 @@ const SingleHandle = ({ log }: Readonly<Props>) => {
         <div className="px-4 pt-4 flex items-start gap-2 relative z-10">
           <FaInfoCircle className="text-blue-500 grow-1 shrink-0 mt-1" />
           <div className="flex gap-4">
-            <p className="font-bold">
-              Dieser Eintrag ist noch nicht bestätigt.
-            </p>
+            <p className="font-bold">Unbestätigt</p>
 
             {authentication &&
               authentication.authorize([

diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/notes/Notes.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/notes/Notes.tsx
@@ -4,6 +4,7 @@ import {
   type EntityLogAttribute,
   type NoteType,
 } from "@prisma/client";
+import clsx from "clsx";
 import { FaListAlt } from "react-icons/fa";
 import { requireAuthentication } from "~/_lib/auth/authenticateAndAuthorize";
 import Tab from "~/app/_components/tabs/Tab";
@@ -15,11 +16,12 @@ import NoteTypeTab from "./Tab";
 import isAllowedToRead from "./lib/isAllowedToRead";
 import isAllowedToReadRedacted from "./lib/isAllowedToReadRedacted";
 
-interface Props {
+type Props = Readonly<{
+  className?: string;
   entity: Entity;
-}
+}>;
 
-const Notes = async ({ entity }: Readonly<Props>) => {
+export const Notes = async ({ className, entity }: Props) => {
   const authentication = await requireAuthentication();
 
   const [notes, allNoteTypes] = await prisma.$transaction([
@@ -128,10 +130,7 @@ const Notes = async ({ entity }: Readonly<Props>) => {
 
   return (
     <section
-      className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50  col-span-2 w-full place-self-start"
-      style={{
-        gridArea: "notes",
-      }}
+      className={clsx(className, "rounded-2xl p-4 lg:p-8 bg-neutral-800/50")}
     >
       <h2 className="font-bold flex gap-2 items-center mb-2">
         <FaListAlt /> Notizen
@@ -158,5 +157,3 @@ const Notes = async ({ entity }: Readonly<Props>) => {
     </section>
   );
 };
-
-export default Notes;
diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/notes/NotesSkeleton.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/notes/NotesSkeleton.tsx
@@ -1,18 +1,21 @@
+import clsx from "clsx";
 import { FaListAlt } from "react-icons/fa";
 
-const NotesSkeleton = () => {
+type Props = Readonly<{
+  className?: string;
+}>;
+
+export const NotesSkeleton = ({ className }: Props) => {
   return (
     <section
-      className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50  col-span-2 animate-pulse min-h-[22.5rem] w-full place-self-start"
-      style={{
-        gridArea: "notes",
-      }}
+      className={clsx(
+        className,
+        "rounded-2xl p-4 lg:p-8 bg-neutral-800/50 col-span-2 animate-pulse min-h-[22.5rem]",
+      )}
     >
       <h2 className="font-bold flex gap-2 items-center">
         <FaListAlt /> Notizen
       </h2>
     </section>
   );
 };
-
-export default NotesSkeleton;
diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/notes/SingleNote.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/notes/SingleNote.tsx
@@ -69,9 +69,7 @@ const SingleNote = async ({ note }: Props) => {
         <div className="px-4 pt-4 flex gap-2 relative z-10 items-start">
           <FaInfoCircle className="text-blue-500 grow-1 shrink-0 mt-[2px]" />
           <div className="flex gap-2 lg:gap-4 flex-wrap">
-            <p className="font-bold text-sm">
-              Diese Notiz ist noch nicht bestätigt.
-            </p>
+            <p className="font-bold text-sm">Unbestätigt</p>
 
             {authentication.authorize([
               {

diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/roles/Roles.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/roles/Roles.tsx
@@ -1,16 +1,18 @@
 import { type Entity } from "@prisma/client";
+import clsx from "clsx";
 import { FaLock } from "react-icons/fa";
 import { requireAuthentication } from "~/_lib/auth/authenticateAndAuthorize";
 import { getAssignableRoles } from "~/app/_lib/getAssignableRoles";
 import { getAssignedAndVisibleRoles } from "~/app/_lib/getAssignedAndVisibleRoles";
 import AddRoles from "./AddRoles";
 import SingleRole from "./SingleRole";
 
-interface Props {
+type Props = Readonly<{
+  className?: string;
   entity: Entity;
-}
+}>;
 
-const Roles = async ({ entity }: Readonly<Props>) => {
+export const Roles = async ({ className, entity }: Props) => {
   const authentication = await requireAuthentication();
 
   const assignedAndVisibleRoles = await getAssignedAndVisibleRoles(entity);
@@ -22,10 +24,7 @@ const Roles = async ({ entity }: Readonly<Props>) => {
 
   return (
     <section
-      className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50 "
-      style={{
-        gridArea: "roles",
-      }}
+      className={clsx(className, "rounded-2xl p-4 lg:p-8 bg-neutral-800/50")}
     >
       <h2 className="font-bold flex gap-2 items-center">
         <FaLock /> Rollen
@@ -66,5 +65,3 @@ const Roles = async ({ entity }: Readonly<Props>) => {
     </section>
   );
 };
-
-export default Roles;
diff --git a/app/src/app/(app)/spynet/entity/[id]/_components/roles/RolesSkeleton.tsx b/app/src/app/(app)/spynet/entity/[id]/_components/roles/RolesSkeleton.tsx
@@ -1,18 +1,21 @@
+import clsx from "clsx";
 import { FaLock } from "react-icons/fa";
 
-const RolesSkeleton = () => {
+type Props = Readonly<{
+  className?: string;
+}>;
+
+export const RolesSkeleton = ({ className }: Props) => {
   return (
     <section
-      className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50  flex flex-col animate-pulse min-h-[22.5rem]"
-      style={{
-        gridArea: "roles",
-      }}
+      className={clsx(
+        className,
+        "rounded-2xl p-4 lg:p-8 bg-neutral-800/50  flex flex-col animate-pulse min-h-[22.5rem]",
+      )}
     >
       <h2 className="font-bold flex gap-2 items-center">
         <FaLock /> Rollen
       </h2>
     </section>
   );
 };
-
-export default RolesSkeleton;
diff --git a/app/src/app/(app)/spynet/entity/[id]/page.module.css b/app/src/app/(app)/spynet/entity/[id]/page.module.css
diff --git a/app/src/app/(app)/spynet/entity/[id]/page.tsx b/app/src/app/(app)/spynet/entity/[id]/page.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { type Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
@@ -10,13 +9,12 @@ import { log } from "~/_lib/logging";
 import { prisma } from "~/server/db";
 import { Wip } from "../../../../_components/Wip";
 import DeleteEntity from "./_components/DeleteEntity";
-import Overview from "./_components/Overview";
-import OverviewSkeleton from "./_components/OverviewSkeleton";
-import Notes from "./_components/notes/Notes";
-import NotesSkeleton from "./_components/notes/NotesSkeleton";
-import Roles from "./_components/roles/Roles";
-import RolesSkeleton from "./_components/roles/RolesSkeleton";
-import styles from "./page.module.css";
+import { Overview } from "./_components/Overview";
+import { OverviewSkeleton } from "./_components/OverviewSkeleton";
+import { Notes } from "./_components/notes/Notes";
+import { NotesSkeleton } from "./_components/notes/NotesSkeleton";
+import { Roles } from "./_components/roles/Roles";
+import { RolesSkeleton } from "./_components/roles/RolesSkeleton";
 
 const getEntity = cache(async (id: string) => {
   return prisma.entity.findUnique({
@@ -26,9 +24,9 @@ const getEntity = cache(async (id: string) => {
   });
 });
 
-interface Params {
+type Params = Readonly<{
   id: string;
-}
+}>;
 
 export async function generateMetadata({
   params,
@@ -56,11 +54,11 @@ export async function generateMetadata({
   }
 }
 
-interface Props {
+type Props = Readonly<{
   params: Params;
-}
+}>;
 
-export default async function Page({ params }: Readonly<Props>) {
+export default async function Page({ params }: Props) {
   const authentication = await authenticatePage();
   authentication.authorizePage([
     {
@@ -97,30 +95,29 @@ export default async function Page({ params }: Readonly<Props>) {
         ]) && <DeleteEntity entity={entity} />}
       </div>
 
-      <div className={clsx("mt-4", styles.pageGrid)}>
-        <Suspense fallback={<OverviewSkeleton />}>
-          <Overview entity={entity} />
-        </Suspense>
+      <div className="mt-4 flex flex-col xl:flex-row-reverse gap-8">
+        <div className="flex flex-col gap-4 md:flex-row xl:w-[720px]">
+          <Suspense fallback={<OverviewSkeleton className="md:w-1/2" />}>
+            <Overview entity={entity} className="md:w-1/2" />
+          </Suspense>
 
-        <Suspense fallback={<RolesSkeleton />}>
-          <Roles entity={entity} />
-        </Suspense>
+          <div className="flex flex-col gap-4 md:w-1/2">
+            <Suspense fallback={<RolesSkeleton />}>
+              <Roles entity={entity} />
+            </Suspense>
 
-        <section
-          className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50  flex flex-col"
-          style={{
-            gridArea: "organizations",
-          }}
-        >
-          <h2 className="font-bold flex gap-2 items-center mb-8">
-            <FaSitemap /> Organisationen
-          </h2>
+            <section className="rounded-2xl p-4 lg:p-8 bg-neutral-800/50 flex flex-col">
+              <h2 className="font-bold flex gap-2 items-center mb-8">
+                <FaSitemap /> Organisationen
+              </h2>
 
-          <Wip />
-        </section>
+              <Wip />
+            </section>
+          </div>
+        </div>
 
         <Suspense fallback={<NotesSkeleton />}>
-          <Notes entity={entity} />
+          <Notes entity={entity} className="flex-1 self-start" />
         </Suspense>
       </div>
     </main>