mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-30 16:17:41 +01:00
fix some hover states and rounding in edit mode
This commit is contained in:
parent
bfbb4c6b11
commit
25ccd941ca
2 changed files with 19 additions and 5 deletions
|
@ -11,7 +11,7 @@ interface SectionHeadingProps {
|
|||
export function SectionHeading(props: SectionHeadingProps) {
|
||||
return (
|
||||
<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">
|
||||
{props.icon ? (
|
||||
<span className="mr-2 text-xl">
|
||||
|
|
|
@ -45,14 +45,24 @@ function MediaCardContent({
|
|||
}`}
|
||||
>
|
||||
<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={{
|
||||
backgroundImage: media.poster ? `url(${media.poster})` : undefined,
|
||||
}}
|
||||
>
|
||||
{series ? (
|
||||
<div className="absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors group-hover:bg-denim-500">
|
||||
<p className="text-center text-xs font-bold text-slate-400 transition-colors group-hover:text-white">
|
||||
<div
|
||||
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", {
|
||||
season: series.season,
|
||||
episode: series.episode,
|
||||
|
@ -125,5 +135,9 @@ export function MediaCard(props: MediaCardProps) {
|
|||
)}`;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue