Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-29 01:19:41 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add Show Releases Pages. fix: hover handling on touchscreens

Browse source
This commit is contained in:
Kentai Radiquum 2024-07-13 05:21:06 +05:00
parent b0246aa4e5
commit 7f2b4f17a4
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
9 changed files with 168 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/components/ReleaseCourusel/ReleaseCourusel.jsx
View file

@ -1,5 +1,5 @@
"use client";
import { useEffect, useRef } from "react";
import { useEffect } from "react";
import { ReleaseLink } from "../ReleaseLink/ReleaseLink";
import Link from "next/link";
@ -36,7 +36,9 @@ export const ReleaseCourusel = (props) => {
return (
<section className={`${Styles.section}`}>
<div className="flex justify-between px-4 border-b-2 border-black">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">{props.sectionTitle}</h1>
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.sectionTitle}
</h1>
<Link href={props.showAllLink}>
<div className="flex items-center">
<p className="hidden text-xl font-bold sm:block">Показать все</p>
@ -54,13 +56,21 @@ export const ReleaseCourusel = (props) => {
key={release.id}
style={{ width: "fit-content" }}
>
<ReleaseLink {...release} />
<div className="xl:w-[600px] sm:w-[400px] w-[90vw] aspect-video">
<ReleaseLink {...release} />
</div>
</div>
);
})}
</div>
<div className={`swiper-button-prev ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-left aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`} style={{"--swiper-navigation-size": "64px"}}></div>
<div className={`swiper-button-next ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-right aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`} style={{"--swiper-navigation-size": "64px"}}></div>
<div
className={`swiper-button-prev ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-left aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}
style={{ "--swiper-navigation-size": "64px" }}
></div>
<div
className={`swiper-button-next ${Styles["swiper-button"]} after:iconify after:material-symbols--chevron-right aspect-square bg-black bg-opacity-25 backdrop-blur rounded-full after:bg-white`}
style={{ "--swiper-navigation-size": "64px" }}
></div>
</div>
</div>
</section>

16
app/components/ReleaseCourusel/ReleaseCourusel.module.css
View file

@ -1,11 +1,13 @@
.swiper-button:global(.swiper-button-disabled) {
opacity: 0 !important;
}
.section .swiper-button {
display: none !important;
opacity: 0 !important;
}
.section:hover .swiper-button {
.section .swiper-button {
display: none !important;
}
@media (hover: hover) {
.section:hover .swiper-button {
display: flex !important;
}
}
}