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

fix(frontend): adjust person card layout to deal with overflowing content

Browse Source 
fixes #416
This commit is contained in:
sct
2020-12-21 15:45:55 +09:00
parent ab9cef3624
commit 4891298891
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,18 +25,19 @@ const PersonCard: React.FC<PersonCardProps> = ({
} bg-gray-600 rounded-lg text-white shadow-lg hover:bg-gray-500 transition ease-in-out duration-150 cursor-pointer`}
>
<div style={{ paddingBottom: '150%' }}>
<div className="absolute inset-0 flex flex-col items-center justify-center">
<div className="absolute inset-0 flex flex-col items-center w-full h-full p-2">
{profilePath && (
<div
style={{
backgroundImage: `url(https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath})`,
}}
className="rounded-full w-28 h-28 md:w-32 md:h-32 bg-cover bg-center mb-6"
<div className="relative flex justify-center w-full mt-2 mb-4 h-1/2">
<img
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"
alt=""
/>
</div>
)}
{!profilePath && (
<svg
className="w-28 h-28 md:w-32 md:h-32 mb-6"
className="mb-6 w-28 h-28 md:w-32 md:h-32"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
@@ -48,12 +49,21 @@ const PersonCard: React.FC<PersonCardProps> = ({
/>
</svg>
)}
<div className="whitespace-normal text-center">{name}</div>
<div className="w-full text-center truncate">{name}</div>
{subName && (
<div className="whitespace-normal text-center text-sm text-gray-300">
<div
className="overflow-hidden text-sm text-center text-gray-300 whitespace-normal"
style={{
WebkitLineClamp: 2,
display: '-webkit-box',
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
}}
>
{subName}
</div>
)}
<div className="absolute bottom-0 left-0 right-0 h-12 rounded-b-lg bg-gradient-to-t from-gray-600" />
</div>
</div>
</div>