Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 00:25:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix some hover states and rounding in edit mode

Browse Source
This commit is contained in:
Max Ward 2023-02-19 18:18:34 -08:00
parent bfbb4c6b11
commit 25ccd941ca
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/layout/SectionHeading.tsx
View File

@ -11,7 +11,7 @@ interface SectionHeadingProps {
export function SectionHeading(props: SectionHeadingProps) { export function SectionHeading(props: SectionHeadingProps) {
return ( return (
<div className={`${props.className}`}> <div className={`${props.className}`}>
<div className="mb-3 flex items-center"> <div className="mb-5 flex items-center">
<p className="flex flex-1 items-center font-bold uppercase text-denim-700"> <p className="flex flex-1 items-center font-bold uppercase text-denim-700">
{props.icon ? ( {props.icon ? (
<span className="mr-2 text-xl"> <span className="mr-2 text-xl">

22
src/components/media/MediaCard.tsx
View File

@ -45,14 +45,24 @@ function MediaCardContent({
}`} }`}
> >
<div <div
className="relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 group-hover:rounded-lg" className={`relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 ${
closable ? "" : "group-hover:rounded-lg"
}`}
style={{ style={{
backgroundImage: media.poster ? `url(${media.poster})` : undefined, backgroundImage: media.poster ? `url(${media.poster})` : undefined,
}} }}
> >
{series ? ( {series ? (
<div className="absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors group-hover:bg-denim-500"> <div
<p className="text-center text-xs font-bold text-slate-400 transition-colors group-hover:text-white"> className={`absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors ${
closable ? "" : "group-hover:bg-denim-500"
}`}
>
<p
className={`text-center text-xs font-bold text-slate-400 transition-colors ${
closable ? "" : "group-hover:text-white"
}`}
>
{t("seasons.seasonAndEpisode", { {t("seasons.seasonAndEpisode", {
season: series.season, season: series.season,
episode: series.episode, episode: series.episode,
@ -125,5 +135,9 @@ export function MediaCard(props: MediaCardProps) {
)}`; )}`;
if (!props.linkable) return <span>{content}</span>; if (!props.linkable) return <span>{content}</span>;
return <Link to={link}>{content}</Link>; return (
<Link to={link} className={props.closable ? "hover:cursor-default" : ""}>
{content}
</Link>
);
} }