style: optimize table list style

TinsFox · Dec 3, 2024 · 13407ce · 13407ce
1 parent 6abde0d
commit 13407ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/apps/admin/src/pages/(admin)/(with-layout)/list/card-list.tsx b/apps/admin/src/pages/(admin)/(with-layout)/list/card-list.tsx
@@ -8,10 +8,12 @@ export function Component() {
 
   return (
     <div>
-      <div className="grid flex-1 scroll-mt-20 grid-cols-2 items-start gap-10 md:grid-cols-3 md:gap-6 lg:grid-cols-4 lg:gap-5 xl:grid-cols-4 xl:gap-10 2xl:grid-cols-5 2xl:gap-5">
-        {data?.list?.map((album: IAlbum) => (
-          <AlbumCard key={album.id} album={album} />
-        ))}
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5">
+          {data?.list?.map((album: IAlbum) => (
+            <AlbumCard key={album.id} album={album} />
+          ))}
+        </div>
       </div>
     </div>
   )

diff --git a/apps/admin/src/pages/(admin)/(with-layout)/list/table-list/components/album-card.tsx b/apps/admin/src/pages/(admin)/(with-layout)/list/table-list/components/album-card.tsx
@@ -26,16 +26,16 @@ export function AlbumCard(props: AlbumCardProps) {
   return (
     <div
       className={cn(
-        "group relative flex max-w-xs flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out",
+        "group relative flex h-full flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:shadow-lg",
         className,
       )}
       {...prop}
     >
-      <div className={cn("relative flex items-center  justify-end gap-2 border-b bg-card px-3 py-2.5 text-card-foreground")}>
-        <div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:size-[0.9rem]">
+      <div className={cn("relative flex items-center justify-between gap-2 border-b bg-card p-3 text-card-foreground")}>
+        <div className="flex items-center gap-1.5 text-sm text-muted-foreground truncate">
           {album.title}
         </div>
-        <div className="invisible ml-auto flex items-center gap-2 transition-all duration-300 group-hover:visible">
+        <div className="flex items-center gap-2 sm:invisible sm:group-hover:visible">
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
@@ -83,18 +83,22 @@ export function AlbumCard(props: AlbumCardProps) {
           </Tooltip>
         </div>
       </div>
-      <div className="relative  [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
-        <Card>
-          <CardHeader>
-            <CardTitle>{album.title}</CardTitle>
-            <CardDescription>
+      <div className="flex-grow [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+        <Card className="h-full">
+          <CardHeader className="space-y-2 p-4 py-2">
+            <CardTitle className="line-clamp-1 text-base sm:text-lg">{album.title}</CardTitle>
+            <CardDescription className="line-clamp-2 text-sm">
               {album.slogan}
             </CardDescription>
           </CardHeader>
-          <CardContent>
-            <img className="h-48 w-full rounded-md object-cover transition-all" src={album.coverUrl} />
+          <CardContent className="p-4 pt-0">
+            <img
+              className="aspect-video w-full rounded-md object-cover transition-all hover:scale-[1.02]"
+              src={album.coverUrl}
+              alt={album.title}
+            />
           </CardContent>
-          <CardFooter>
+          <CardFooter className="p-4">
             <div className="flex w-full items-start gap-2 text-sm">
               <div className="grid gap-2">
                 <div className="flex items-center gap-2 font-medium leading-none">