dev
/
sudo-archive
mirror of https://github.com/sussy-code/smov.git
2
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Polish discover page and navigation to it

This commit is contained in:
Cooper Ransom 2024-04-10 17:14:20 -04:00
parent ee6883d27b
commit bf09fcdce0
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/Discover.tsx
View File

@ -258,7 +258,7 @@ export function Discover() {
</h2> </h2>
<div <div
id={`carousel-${categorySlug}`} id={`carousel-${categorySlug}`}
className="flex whitespace-nowrap overflow-auto scrollbar pb-2 rounded-xl" className="flex whitespace-nowrap overflow-auto pb-2 scrollbar rounded-xl"
style={{ style={{
scrollbarWidth: "thin", scrollbarWidth: "thin",
scrollbarColor: `${bgColor} transparent`, scrollbarColor: `${bgColor} transparent`,
@ -284,7 +284,7 @@ export function Discover() {
style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
> >
<div className="relative transition-transform hover:scale-105 duration-[0.45s]"> <div className="relative transition-transform hover:scale-105 duration-[0.45s]">
<Flare.Base className="group cursor-pointer rounded-xl relative p-[0.6em] bg-background-main transition-colors duration-300"> <Flare.Base className="group cursor-pointer rounded-xl relative p-[0.65em] bg-background-main transition-colors duration-300">
<Flare.Light <Flare.Light
flareSize={225} flareSize={225}
cssColorVar="--colors-mediaCard-hoverAccent" cssColorVar="--colors-mediaCard-hoverAccent"
@ -298,7 +298,7 @@ export function Discover() {
className="rounded-xl relative" className="rounded-xl relative"
style={{ width: "200px", height: "auto" }} style={{ width: "200px", height: "auto" }}
/> />
<h1 className="relative pt-2 whitespace-normal break-words font-semibold text-white"> <h1 className="relative pt-2 text-[14.75px] whitespace-normal break-words font-semibold text-white">
{isTVShow ? media.name : media.title} {isTVShow ? media.name : media.title}
</h1> </h1>
</Flare.Base> </Flare.Base>
@ -307,26 +307,28 @@ export function Discover() {
))} ))}
</div> </div>
<button <div className="flex items-center justify-center">
type="button" <button
title="Back" type="button"
className="absolute top-1/2 pb-12 transform -translate-y-1/2 z-10 left-5" title="Back"
onClick={() => scrollCarousel(categorySlug, "left")} className="absolute top-1/2 transform -translate-y-1/2 z-10 left-5"
> onClick={() => scrollCarousel(categorySlug, "left")}
<div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200"> >
<Icon icon={Icons.ARROW_LEFT} /> <div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
</div> <Icon icon={Icons.ARROW_LEFT} />
</button> </div>
<button </button>
type="button" <button
title="Next" type="button"
className="absolute top-1/2 pb-12 right-5 transform -translate-y-1/2 z-10" title="Next"
onClick={() => scrollCarousel(categorySlug, "right")} className="absolute top-1/2 right-5 transform -translate-y-1/2 z-10"
> onClick={() => scrollCarousel(categorySlug, "right")}
<div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200"> >
<Icon icon={Icons.ARROW_RIGHT} /> <div className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200">
</div> <Icon icon={Icons.ARROW_RIGHT} />
</button> </div>
</button>
</div>
</div> </div>
); );
} }

2
src/pages/parts/search/SearchListPart.tsx
View File

@ -35,7 +35,7 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
<> <>
<p>{t("home.search.allResults")}</p> <p>{t("home.search.allResults")}</p>
<Button <Button
className="px-py p-[0.3em] mt-3 text-type-dimmed box-content text-[16px] bg-largeCard-background text-buttons-secondaryText justify-center items-center" className="px-py p-[0.3em] mt-3 text-type-dimmed box-content text-[17px] bg-largeCard-background text-buttons-secondaryText justify-center items-center"
onClick={() => navigate("/discover")} onClick={() => navigate("/discover")}
> >
Discover more Discover more