From 8d2800c2f211c7e122c56080f4713e58fd183d06 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Mon, 25 Aug 2025 05:20:03 +0500
Subject: [PATCH] anix/style: change sections columns from 1 to 2 on mobile

---
 .../CollectionLink/CollectionLink.tsx         | 83 ++++++++-----------
 .../CollectionsSection/CollectionsSection.tsx |  3 +-
 .../ReleasePoster/PosterWithStuff.tsx         |  8 +-
 .../ReleaseSection/ReleaseSection.tsx         |  2 +-
 app/components/UserSection/UserSection.tsx    |  4 +-
 5 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/app/components/CollectionLink/CollectionLink.tsx b/app/components/CollectionLink/CollectionLink.tsx
index aee2010..a7887d1 100644
--- a/app/components/CollectionLink/CollectionLink.tsx
+++ b/app/components/CollectionLink/CollectionLink.tsx
@@ -5,60 +5,43 @@ import Image from "next/image";
 export const CollectionLink = (props: any) => {
   return (
     <Link href={`/collection/${props.id}`}>
-      <div className="w-full aspect-video group">
-        <div
-          className="relative w-full h-full overflow-hidden bg-center bg-no-repeat bg-cover rounded-sm group-hover:animate-bg_zoom animate-bg_zoom_rev group-hover:[background-size:110%] "
-          style={{
-            backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 100%)`,
-          }}
-        >
-          <Image
-            src={props.image}
-            fill={true}
-            alt={props.title || ""}
-            className="-z-[1] object-cover"
-            sizes="
-                  (max-width: 768px) 300px,
-                  (max-width: 1024px) 600px,
-                  900px
-                  "
+      <div className="relative w-full overflow-hidden rounded-lg group aspect-video">
+        <Image
+          src={props.image}
+          fill={true}
+          alt={""}
+          className="-z-[1] object-cover inset-0 absolute w-full h-full group-hover:scale-110 transition-all duration-300 ease-in-out"
+        />
+        <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div>
+        <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
+          <Chip
+            icon_name="material-symbols--favorite"
+            name_2={props.favorites_count}
           />
-          <div className="absolute flex flex-wrap items-start justify-start gap-0.5 sm:gap-1 left-2 top-2">
+          {props.comment_count && (
             <Chip
-              icon_name="material-symbols--favorite"
-              name_2={props.favorites_count}
+              icon_name="material-symbols--comment"
+              name_2={props.comment_count}
             />
-            {props.comment_count && (
-              <Chip
-                icon_name="material-symbols--comment"
-                name_2={props.comment_count}
-              />
-            )}
-            {props.is_private && (
-              <div className="flex items-center justify-center bg-yellow-400 rounded-sm">
-                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--lock"></span>
-              </div>
-            )}
-            {props.is_favorite && (
-              <div className="flex items-center justify-center bg-pink-500 rounded-sm">
-                <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
-              </div>
-            )}
-          </div>
-          <div className="absolute bottom-0 left-0 p-2 lg:translate-y-[100%] group-hover:lg:translate-y-0 transition-transform">
-            <div className="transition-transform lg:-translate-y-[calc(100%_+_1rem)] group-hover:lg:translate-y-0">
-              <p className="text-sm font-bold text-white md:text-base lg:text-lg xl:text-xl">
-                {props.title}
-              </p>
+          )}
+          {props.is_private && (
+            <div className="flex items-center justify-center bg-yellow-400 rounded-sm">
+              <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--lock"></span>
             </div>
-            {props.description && (
-              <p className="text-xs font-light text-white md:text-sm lg:text-base xl:text-lg">
-                {`${props.description.slice(0, 125)}${
-                  props.description.length > 125 ? "..." : ""
-                }`}
-              </p>
-            )}
-          </div>
+          )}
+          {props.is_favorite && (
+            <div className="flex items-center justify-center bg-pink-500 rounded-sm">
+              <span className="w-3 px-4 py-2.5 text-white sm:px-4 sm:py-3 xl:px-6 xl:py-4 iconify mdi--heart"></span>
+            </div>
+          )}
+        </div>
+        <div className="absolute transition-transform bottom-2 left-2 lg:translate-y-full group-hover:lg:translate-y-0">
+          <p className="text-sm font-bold text-white transition-transform md:text-base lg:text-lg xl:text-xl line-clamp-2 lg:-translate-y-full group-hover:lg:translate-y-0">
+            {props.title}
+          </p>
+          <p className="mt-2 text-sm line-clamp-2 hidden sm:[display:-webkit-box]">
+            {props.description}
+          </p>
         </div>
       </div>
     </Link>
diff --git a/app/components/CollectionsSection/CollectionsSection.tsx b/app/components/CollectionsSection/CollectionsSection.tsx
index c7b0775..6e03911 100644
--- a/app/components/CollectionsSection/CollectionsSection.tsx
+++ b/app/components/CollectionsSection/CollectionsSection.tsx
@@ -16,7 +16,7 @@ export const CollectionsSection = (props: {
         </div>
       )}
       <div className="m-4">
-        <div className="grid justify-center sm:grid-cols-[repeat(auto-fit,minmax(400px,1fr))] grid-cols-[100%] gap-2">
+        <div className="grid justify-center grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-4">
           {props.isMyCollections && <AddCollectionLink />}
           {props.content.map((collection) => {
             return (
@@ -25,7 +25,6 @@ export const CollectionsSection = (props: {
               </div>
             );
           })}
-          {props.content.length == 1 && !props.isMyCollections && <div></div>}
         </div>
       </div>
     </section>
diff --git a/app/components/ReleasePoster/PosterWithStuff.tsx b/app/components/ReleasePoster/PosterWithStuff.tsx
index 7ffbee2..4482a5a 100644
--- a/app/components/ReleasePoster/PosterWithStuff.tsx
+++ b/app/components/ReleasePoster/PosterWithStuff.tsx
@@ -83,7 +83,7 @@ export const PosterWithStuff = (props: {
               return (
                 <span
                   key={`release_${props.id}_genre_${genre}_${index}`}
-                  className="font-light leading-none text-white md:text-sm lg:text-base xl:text-lg"
+                  className="hidden font-light leading-none text-white sm:inline md:text-sm lg:text-base xl:text-lg"
                 >
                   {index > 0 && ", "}
                   {genre}
@@ -91,18 +91,18 @@ export const PosterWithStuff = (props: {
               );
             })}
           {props.title_ru && (
-            <p className="py-1 text-xl font-bold leading-none text-white md:text-2xl md:py-0">
+            <p className="text-xl font-bold leading-none text-white md:text-2xl md:py-0 line-clamp-2 lg:line-clamp-3">
               {props.title_ru}
             </p>
           )}
           {props.title_original && (
-            <p className="text-sm leading-none text-gray-300 md:text-base">
+            <p className="hidden mt-2 text-sm leading-none text-gray-300 sm:block md:text-base line-clamp-2">
               {props.title_original}
             </p>
           )}
         </div>
         {settings.showDescription && props.description && (
-          <p className="mt-2 text-sm font-light leading-none text-white lg:text-base xl:text-lg line-clamp-4">
+          <p className="hidden mt-2 text-sm font-light leading-none text-white sm:block lg:text-base xl:text-lg line-clamp-4">
             {props.description}
           </p>
         )}
diff --git a/app/components/ReleaseSection/ReleaseSection.tsx b/app/components/ReleaseSection/ReleaseSection.tsx
index 1c23d9b..95c4763 100644
--- a/app/components/ReleaseSection/ReleaseSection.tsx
+++ b/app/components/ReleaseSection/ReleaseSection.tsx
@@ -14,7 +14,7 @@ export const ReleaseSection = (props: {
         </div>
       )}
       <div className="m-4">
-        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
+        <div className="grid grid-cols-2 gap-2 lg:grid-cols-3 2xl:grid-cols-4">
           {props.content.map((release) => {
             return (
               <div key={release.id} className="w-full h-full">
diff --git a/app/components/UserSection/UserSection.tsx b/app/components/UserSection/UserSection.tsx
index 896ebd2..ece64fc 100644
--- a/app/components/UserSection/UserSection.tsx
+++ b/app/components/UserSection/UserSection.tsx
@@ -18,8 +18,8 @@ export const UserSection = (props: { sectionTitle?: string; content: any }) => {
               <Link href={`/profile/${user.id}`} key={user.id}>
                 <Card>
                   <div className="flex items-center gap-4">
-                    <Avatar img={user.avatar} alt="" size="lg" rounded={true} />
-                    <p className="text-xl font-medium text-gray-900 dark:text-white">{user.login}</p>
+                    <Avatar img={user.avatar} alt="" size="lg" rounded={true} className="flex-shrink-0"/>
+                    <p className="text-xl font-medium text-gray-900 dark:text-white line-clamp-1">{user.login}</p>
                   </div>
                 </Card>
               </Link>