mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-01 12:18:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): when PersonCard has no profilePath, correctly position name/role content

Browse Source
This commit is contained in:
sct
2021-02-03 07:56:26 +00:00
parent f54df214af
commit 3ffd5ab0ee
1 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/PersonCard/index.tsx
View File

@@ -38,34 +38,33 @@ const PersonCard: React.FC<PersonCardProps> = ({
className={`relative ${ className={`relative ${
canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44' canExpand ? 'w-full' : 'w-36 sm:w-36 md:w-44'
} rounded-lg text-white shadow-lg transition ease-in-out duration-150 cursor-pointer transform-gpu ${ } rounded-lg text-white shadow-lg transition ease-in-out duration-150 cursor-pointer transform-gpu ${
isHovered ? 'bg-gray-500 scale-105' : 'bg-gray-600 scale-100' isHovered ? 'bg-gray-600 scale-105' : 'bg-gray-700 scale-100'
}`} }`}
> >
<div style={{ paddingBottom: '150%' }}> <div style={{ paddingBottom: '150%' }}>
<div className="absolute inset-0 flex flex-col items-center w-full h-full p-2"> <div className="absolute inset-0 flex flex-col items-center w-full h-full p-2">
{profilePath && ( <div className="relative flex justify-center w-full mt-2 mb-4 h-1/2">
<div className="relative flex justify-center w-full mt-2 mb-4 h-1/2"> {profilePath ? (
<img <img
src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`} src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
className="object-cover w-3/4 h-full bg-center bg-cover rounded-full" className="object-cover w-3/4 h-full bg-center bg-cover rounded-full"
alt="" alt=""
/> />
</div> ) : (
)} <svg
{!profilePath && ( className="h-full"
<svg fill="currentColor"
className="mb-6 w-28 h-28 md:w-32 md:h-32" viewBox="0 0 20 20"
fill="currentColor" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" >
xmlns="http://www.w3.org/2000/svg" <path
> fillRule="evenodd"
<path d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
fillRule="evenodd" clipRule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" />
clipRule="evenodd" </svg>
/> )}
</svg> </div>
)}
<div className="w-full text-center truncate">{name}</div> <div className="w-full text-center truncate">{name}</div>
{subName && ( {subName && (
<div <div
@@ -80,7 +79,7 @@ const PersonCard: React.FC<PersonCardProps> = ({
{subName} {subName}
</div> </div>
)} )}
<div className="absolute bottom-0 left-0 right-0 h-12 rounded-b-lg bg-gradient-to-t from-gray-600" /> <div className="absolute bottom-0 left-0 right-0 h-12 rounded-b-lg bg-gradient-to-t from-gray-700" />
</div> </div>
</div> </div>
</div> </div>