mirror of
https://github.com/Radiquum/AniX.git
synced 2025-09-04 13:35:36 +05:00
anix/style: change sections columns from 1 to 2 on mobile
This commit is contained in:
parent
6b84a312f7
commit
8d2800c2f2
GPG key ID:
858E8EE696525EED
5 changed files with 41 additions and 59 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue