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: update StatusBadgeMini to shrink on title cards (and remove ring) (#3210)

Browse Source
This commit is contained in:
Ryan Cohen
2023-01-05 12:09:08 +09:00
committed by GitHub
parent 421029ebab
commit 042a1a950f
2 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Common/StatusBadgeMini/index.tsx
View File

@@ -7,31 +7,47 @@ interface StatusBadgeMiniProps {
status: MediaStatus;
is4k?: boolean;
inProgress?: boolean;
// Should the badge shrink on mobile to a smaller size? (TitleCard)
shrink?: boolean;
}
const StatusBadgeMini = ({
status,
is4k = false,
inProgress = false,
shrink = false,
}: StatusBadgeMiniProps) => {
const badgeStyle = ['w-5 rounded-full p-0.5 ring-1 bg-opacity-80'];
const badgeStyle = [
`rounded-full bg-opacity-80 shadow-md ${
shrink ? 'w-4 sm:w-5 border p-0' : 'w-5 ring-1 p-0.5'
}`,
];
let indicatorIcon: React.ReactNode;
switch (status) {
case MediaStatus.PROCESSING:
badgeStyle.push('bg-indigo-500 ring-indigo-400 text-indigo-100');
badgeStyle.push(
'bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100'
);
indicatorIcon = <ClockIcon />;
break;
case MediaStatus.AVAILABLE:
badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
badgeStyle.push(
'bg-green-500 border-green-400 ring-green-400 text-green-100'
);
indicatorIcon = <CheckCircleIcon />;
break;
case MediaStatus.PENDING:
badgeStyle.push('bg-yellow-500 ring-yellow-400 text-yellow-100');
badgeStyle.push(
'bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100'
);
indicatorIcon = <BellIcon />;
break;
case MediaStatus.PARTIALLY_AVAILABLE:
badgeStyle.push('bg-green-500 ring-green-400 text-green-100');
badgeStyle.push(
'bg-green-500 border-green-400 ring-green-400 text-green-100'
);
indicatorIcon = <MinusSmallIcon />;
break;
}
@@ -41,7 +57,11 @@ const StatusBadgeMini = ({
}
return (
<div className="inline-flex whitespace-nowrap rounded-full text-xs font-semibold leading-5 ring-1 ring-gray-700">
<div
className={`relative inline-flex whitespace-nowrap rounded-full border-gray-700 text-xs font-semibold leading-5 ring-gray-700 ${
shrink ? '' : 'ring-1'
}`}
>
<div className={badgeStyle.join(' ')}>{indicatorIcon}</div>
{is4k && <span className="pl-1 pr-2 text-gray-200">4K</span>}
</div>

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

@@ -129,7 +129,7 @@ const TitleCard = ({
/>
<div className="absolute left-0 right-0 flex items-center justify-between p-2">
<div
className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow ${
className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
mediaType === 'movie'
? 'border-blue-500 bg-blue-600'
: 'border-purple-600 bg-purple-600'
@@ -142,10 +142,11 @@ const TitleCard = ({
</div>
</div>
{currentStatus && (
<div className="pointer-events-none z-40">
<div className="pointer-events-none z-40 flex items-center">
<StatusBadgeMini
status={currentStatus}
inProgress={inProgress}
shrink
/>
</div>
)}