fix: reduce to 3 columns in add log when on mobile

dinkelspiel · May 6, 2024 · c7dd44d · c7dd44d
1 parent 5123766
commit c7dd44d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 39 deletions.
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
@@ -19,7 +19,16 @@ const Layout = async ({ children }: { children: ReactNode }) => {
   return (
     <SidebarLayout>
       <Sidebar
-        header={<UserDisplay user={user} />}
+        header={
+          <div className="flex w-full justify-between">
+            <UserDisplay user={user} />
+            <AddLog>
+              <Button className="flex min-w-[40px] justify-center px-0 lg:hidden">
+                <Plus />
+              </Button>
+            </AddLog>
+          </div>
+        }
         headerProps={{ className: '[&>svg]:size-7 p-0' }}
       >
         <SidebarButton href="/dashboard">
@@ -32,7 +41,7 @@ const Layout = async ({ children }: { children: ReactNode }) => {
         </SidebarButton>
         <SidebarFooter>
           <AddLog>
-            <Button>
+            <Button className="hidden lg:flex">
               <Plus />
               Log Media
             </Button>

diff --git a/app/api/import/search/route.ts b/app/api/import/search/route.ts
@@ -6,9 +6,7 @@ export const dynamic = 'force-dynamic';
 
 export const GET = async (request: NextRequest) => {
   const search = request.nextUrl.searchParams.get('q');
-  const excludeExisting = !!Boolean(
-    request.nextUrl.searchParams.get('excludeExisting')
-  ); // Exclude media already in the local database
+  const excludeExisting = !!request.nextUrl.searchParams.get('excludeExisting'); // Exclude media already in the local database
   const take = request.nextUrl.searchParams.get('take')
     ? Number(request.nextUrl.searchParams.get('take'))
     : 10;

diff --git a/components/addLog.tsx b/components/addLog.tsx
@@ -1,10 +1,9 @@
 'use client';
 
-import React, { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import {
   Dialog,
   DialogContent,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -44,34 +43,30 @@ const AddLog = ({ children }: { children: ReactNode }) => {
     return q;
   };
 
-  const {
-    data: queryResults,
-    error: queryError,
-    isLoading: queryIsLoading,
-  } = useSWR<Entry[], { error: string }>(
-    `/api/entries?q=${queryTitle}&take=8&categories=${generateQueryCategories()}`,
-    fetcher
-  );
-
-  const {
-    data: externalQueryResults,
-    error: externalQueryError,
-    isLoading: externalQueryIsLoading,
-  } = useSWR<
-    {
-      title: string;
-      category: Category;
-      releaseDate: Date;
-      author: string;
-      foreignId: number;
-      posterPath: string;
-    }[],
+  const { data: queryResults, isLoading: queryIsLoading } = useSWR<
+    Entry[],
     { error: string }
   >(
-    `/api/import/search?q=${queryTitle}&categories=${generateQueryCategories()}&take=4&excludeExisting=true`,
+    `/api/entries?q=${queryTitle}&take=8&categories=${generateQueryCategories()}`,
     fetcher
   );
 
+  const { data: externalQueryResults, isLoading: externalQueryIsLoading } =
+    useSWR<
+      {
+        title: string;
+        category: Category;
+        releaseDate: Date;
+        author: string;
+        foreignId: number;
+        posterPath: string;
+      }[],
+      { error: string }
+    >(
+      `/api/import/search?q=${queryTitle}&categories=${generateQueryCategories()}&take=4&excludeExisting=true`,
+      fetcher
+    );
+
   return (
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
@@ -137,7 +132,7 @@ const AddLog = ({ children }: { children: ReactNode }) => {
               </span>
             </div>
           )}
-        <div className="grid grid-cols-4 gap-4">
+        <div className="grid grid-cols-3 gap-4 min-[600px]:grid-cols-4">
           {queryResults &&
             queryResults.map(e => (
               <UserEntryCard
@@ -150,11 +145,12 @@ const AddLog = ({ children }: { children: ReactNode }) => {
               />
             ))}
         </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          {(externalQueryIsLoading || queryIsLoading) && (
+        {(externalQueryIsLoading || queryIsLoading) && (
+          <div className="relative flex justify-center text-xs uppercase">
             <Loader2 className="animate-spin" />
-          )}
-        </div>
+          </div>
+        )}
+
         {externalQueryResults && externalQueryResults.length > 0 && (
           <>
             {!(
@@ -173,7 +169,7 @@ const AddLog = ({ children }: { children: ReactNode }) => {
                 </div>
               </div>
             )}
-            <div className="grid grid-cols-4 gap-4">
+            <div className="grid grid-cols-3 gap-4 min-[600px]:grid-cols-4">
               {externalQueryResults.map(e => (
                 <UserEntryCard
                   key={e.posterPath}

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
@@ -33,7 +33,7 @@ export const Sidebar = ({
       <div className="flex h-[75px] flex-col justify-center overflow-y-auto border-b border-slate-200 bg-neutral-100 px-3 py-4 shadow-[inset_0_0px_8px_0_rgb(0_0_0_/_0.02)] dark:border-slate-700 dark:bg-slate-900 lg:h-full lg:justify-start lg:border-b-0">
         <SidebarHeader {...headerProps}>
           {header}
-          <button className="flex w-full justify-end lg:hidden">
+          <button className="flex justify-end lg:hidden">
             <div className="sr-only">Öppna meny</div>
             <Menu onClick={() => setSheetOpen(true)} className="h-5 w-5" />
           </button>

diff --git a/components/userEntryCard.tsx b/components/userEntryCard.tsx
@@ -1,8 +1,7 @@
 import { Book, Film, Tv } from 'lucide-react';
 import SmallRating from './smallRating';
-import { Category, Entry, User, UserEntry } from '@prisma/client';
+import { Category } from '@prisma/client';
 import { HTMLProps } from 'react';
-import { title } from 'process';
 import Image from 'next/image';
 
 const UserEntryCard = ({