shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): invalid dom-nesting title card fix (#482)

Browse Source 
fix #476
This commit is contained in:
Alex Zoitos
2020-12-23 21:37:11 -05:00
committed by GitHub
parent 17518dbe7f
commit f2ebba7b1d
1 changed files with 145 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
src/components/TitleCard/index.tsx
View File

@@ -159,155 +159,155 @@ const TitleCard: React.FC<TitleCardProps> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}> <div>
<a <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer" <a
style={{ className="absolute w-full h-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
background: style={{
'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)', background:
}} 'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
> }}
<div className="absolute bottom-0 w-full left-0 right-0"> >
<div className="px-2 text-white"> <div className="flex items-end h-full w-full">
{year && <div className="text-sm">{year}</div>} <div className="px-2 pb-11 text-white">
{year && <div className="text-sm">{year}</div>}
<h1 className="text-xl leading-tight whitespace-normal"> <h1 className="text-xl leading-tight whitespace-normal">
{title} {title}
</h1> </h1>
<div <div
className="text-xs whitespace-normal" className="text-xs whitespace-normal"
style={{ style={{
WebkitLineClamp: 3, WebkitLineClamp: 3,
display: '-webkit-box', display: '-webkit-box',
overflow: 'hidden', overflow: 'hidden',
WebkitBoxOrient: 'vertical', WebkitBoxOrient: 'vertical',
}} }}
> >
{summary} {summary}
</div>
</div> </div>
</div> </div>
<div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2"> </a>
<Link </Link>
href={
mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}` <div className="absolute flex justify-between left-0 bottom-0 right-0 px-2 py-2">
} <Link
href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
>
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
<svg
className="w-4 mx-auto"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
> >
<a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"> <path
<svg strokeLinecap="round"
className="w-4 mx-auto" strokeLinejoin="round"
fill="none" strokeWidth={2}
stroke="currentColor" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
viewBox="0 0 24 24" />
xmlns="http://www.w3.org/2000/svg" <path
> strokeLinecap="round"
<path strokeLinejoin="round"
strokeLinecap="round" strokeWidth={2}
strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
strokeWidth={2} />
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" </svg>
/> </a>
<path </Link>
strokeLinecap="round" {(!currentStatus || currentStatus === MediaStatus.UNKNOWN) && (
strokeLinejoin="round" <button
strokeWidth={2} onClick={(e) => {
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" e.preventDefault();
/> setShowRequestModal(true);
</svg> }}
</a> className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150"
</Link> >
{(!currentStatus || <svg
currentStatus === MediaStatus.UNKNOWN) && ( className="w-4 mx-auto"
<button fill="none"
onClick={(e) => { stroke="currentColor"
e.preventDefault(); viewBox="0 0 24 24"
setShowRequestModal(true); xmlns="http://www.w3.org/2000/svg"
}} >
className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150" <path
> strokeLinecap="round"
<svg strokeLinejoin="round"
className="w-4 mx-auto" strokeWidth={2}
fill="none" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
stroke="currentColor" />
viewBox="0 0 24 24" </svg>
xmlns="http://www.w3.org/2000/svg" </button>
> )}
<path {currentStatus === MediaStatus.PENDING && (
strokeLinecap="round" <button
strokeLinejoin="round" className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
strokeWidth={2} disabled
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" >
/> <svg
</svg> className="w-4 mx-auto"
</button> fill="none"
)} stroke="currentColor"
{currentStatus === MediaStatus.PENDING && ( viewBox="0 0 24 24"
<button xmlns="http://www.w3.org/2000/svg"
className="w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default" >
disabled <path
> strokeLinecap="round"
<svg strokeLinejoin="round"
className="w-4 mx-auto" strokeWidth={2}
fill="none" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
stroke="currentColor" />
viewBox="0 0 24 24" </svg>
xmlns="http://www.w3.org/2000/svg" </button>
> )}
<path {currentStatus === MediaStatus.PROCESSING && (
strokeLinecap="round" <button
strokeLinejoin="round" className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
strokeWidth={2} disabled
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" >
/> <svg
</svg> className="w-4 mx-auto"
</button> fill="none"
)} stroke="currentColor"
{currentStatus === MediaStatus.PROCESSING && ( viewBox="0 0 24 24"
<button xmlns="http://www.w3.org/2000/svg"
className="w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default" >
disabled <path
> strokeLinecap="round"
<svg strokeLinejoin="round"
className="w-4 mx-auto" strokeWidth={2}
fill="none" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
stroke="currentColor" />
viewBox="0 0 24 24" </svg>
xmlns="http://www.w3.org/2000/svg" </button>
> )}
<path {(currentStatus === MediaStatus.AVAILABLE ||
strokeLinecap="round" currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && (
strokeLinejoin="round" <button
strokeWidth={2} className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" disabled
/> >
</svg> <svg
</button> className="w-4 mx-auto"
)} fill="none"
{(currentStatus === MediaStatus.AVAILABLE || stroke="currentColor"
currentStatus === MediaStatus.PARTIALLY_AVAILABLE) && ( viewBox="0 0 24 24"
<button xmlns="http://www.w3.org/2000/svg"
className="w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default" >
disabled <path
> strokeLinecap="round"
<svg strokeLinejoin="round"
className="w-4 mx-auto" strokeWidth={2}
fill="none" d="M5 13l4 4L19 7"
stroke="currentColor" />
viewBox="0 0 24 24" </svg>
xmlns="http://www.w3.org/2000/svg" </button>
> )}
<path </div>
strokeLinecap="round" </div>
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
</button>
)}
</div>
</div>
</a>
</Link>
</Transition> </Transition>
</div> </div>
</div> </div>