mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-03 13:18:53 -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

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

@@ -38,23 +38,21 @@ 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> ) : (
)}
{!profilePath && (
<svg <svg
className="mb-6 w-28 h-28 md:w-32 md:h-32" className="h-full"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -66,6 +64,7 @@ const PersonCard: React.FC<PersonCardProps> = ({
/> />
</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>