Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-09-05 22:15:36 +05:00
Code Issues Projects Releases Packages Activity

anix/style: change sections columns from 1 to 2 on mobile

Browse source
This commit is contained in:
Kentai Radiquum 2025-08-25 05:20:03 +05:00
parent 6b84a312f7
commit 8d2800c2f2
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 41 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

83
app/components/CollectionLink/CollectionLink.tsx
View file

@ -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>