Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-04 23:34:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: set release poster to center on release page on mobile

Browse source 
BREAKING: disable all image rendering
This commit is contained in:
Kentai Radiquum 2025-03-25 20:39:25 +05:00
parent b79c07f4c2
commit d2b38dcbe2
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 36 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
View file

@ -2,6 +2,7 @@ import { Card, Button } from "flowbite-react";
import { useState } from "react";
import Image from "next/image";
import { ReleaseInfoStreaming } from "./ReleaseInfo.LicensedPlatforms";
import { Poster } from "../ReleasePoster/Poster";
export const ReleaseInfoBasics = (props: {
release_id: number;
@ -14,14 +15,11 @@ export const ReleaseInfoBasics = (props: {
return (
<Card className="h-full row-span-2">
<div className="flex flex-col w-full h-full gap-4 lg:flex-row">
<Image
className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
src={props.image}
alt=""
width={285}
height={385}
/>
<div className="flex flex-col w-full h-full gap-4 lg:grid lg:grid-cols-[1fr_2fr] items-center lg:items-start justify-center lg:justify-start">
<div className="relative flex items-center justify-center w-full overflow-hidden rounded-lg">
<Poster image={props.image} className="z-10 sm:scale-95 lg:scale-100" />
<Poster image={props.image} className="absolute top-0 left-0 w-full scale-125 opacity-75 blur-xl brightness-75" />
</div>
<div className="flex flex-col max-w-2xl gap-2 text-sm md:text-base">
<div className="flex flex-col gap-1">
<p className="text-xl font-bold text-black md:text-2xl dark:text-white">

13
app/components/ReleaseLink/ReleaseLink.tsx
View file

@ -2,18 +2,21 @@ import { ReleaseLink169 } from "./ReleaseLink.16_9FullImage";
import { ReleaseLink169Poster } from "./ReleaseLink.16_9Poster";
import { ReleaseLinkPoster } from "./ReleaseLink.Poster";
export const ReleaseLink = (props: {type?: "16_9"|"poster"}) => {
export const ReleaseLink = (props: { type?: "16_9" | "poster" }) => {
const type = props.type || "16_9";
if (type == "16_9") {
return (
<>
<div className="hidden lg:block"><ReleaseLink169 {...props} /></div>
<div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div>
<div>TYPE=16/9</div>
{/* <div className="hidden lg:block"><ReleaseLink169 {...props} /></div> */}
{/* <div className="block lg:hidden"><ReleaseLink169Poster {...props} /></div> */}
</>
)
);
}
if (type == "poster") {
return <ReleaseLinkPoster {...props} />;
return <div>TYPE=POSTER</div>;
// return <ReleaseLinkPoster {...props} />;
}
};

22
app/components/ReleasePoster/Poster.tsx Normal file
View file

@ -0,0 +1,22 @@
import Image from "next/image";
export const Poster = (props: {
image: string;
alt?: string;
// title: { ru: string; original: string };
// note: string | null;
// description: string;
type?: "image_only";
className?: string;
}) => {
return (
<Image
className={`object-cover rounded-lg shadow-md ${props.className}`}
// className="w-[285px] max-h-[385px] object-cover border border-gray-200 rounded-lg shadow-md dark:border-gray-700"
src={props.image}
alt={props.alt || ""}
width={285}
height={385}
/>
);
};