Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-07-02 10:28:42 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(responsive): make a application a bit more responsive

Browse source
This commit is contained in:
Kentai Radiquum 2024-05-16 04:00:20 +05:00
parent 0ba93f96bc
commit ec894ae9b1
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 132 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

71
frontend/app/components/ReleaseList/ReleaseList.jsx
View file

@ -5,29 +5,58 @@ export const ReleaseList = (props) => {
return (
<Link
href={`/release/${props.id}`}
className={
props.className
? props.className
: "s12 round fill row padding surface-container"
}
className={props.className ? props.className : "round padding fill"}
style={{ width: "100%", height: "100%", gridColumn: "1/-1" }}
>
<Image
className="round"
style={{ aspectRatio: "1/1" }}
width="128px"
height="128px"
src={props.poster}
alt=""
/>
<nav
className="m l"
style={{
alignItems: "center",
justifyContent: "space-between",
width: "100%",
}}
>
<Image
className="round"
style={{ aspectRatio: "1/1" }}
width="128px"
height="128px"
src={props.poster}
alt=""
/>
<div className="max">
<h5 className="small">{`${props.title.substring(0, 90)}${
[...props.title].length > 90 ? "..." : ""
}`}</h5>
<p>{`${props.description.substring(0, 170)}${
[...props.description].length > 170 ? "..." : ""
}`}</p>
</div>
<div style={{ width: "calc(100% - 10rem)" }}>
<h5 className="small">{`${props.title.substring(0, 90)}${
[...props.title].length > 90 ? "..." : ""
}`}</h5>
<p>{`${props.description.substring(0, 170)}${
[...props.description].length > 170 ? "..." : ""
}`}</p>
</div>
</nav>
<nav
className="s"
style={{
alignItems: "center",
maxWidth: "100%",
}}
>
<Image
className="round"
style={{ aspectRatio: "1/1" }}
width="128px"
height="128px"
src={props.poster}
alt=""
/>
<div style={{ width: "calc(20%)" }}>
<h5 className="small">{`${props.title.substring(0, 90)}${
[...props.title].length > 90 ? "..." : ""
}`}</h5>
</div>
</nav>
</Link>
);
};