Skip to content

Commit

Permalink
style: formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
JoaquinOlivero committed Jul 14, 2024
1 parent d7905dc commit a05e4aa
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 69 deletions.
112 changes: 60 additions & 52 deletions src/components/RequestModal/CollectionRequestModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const CollectionRequestModal = ({
(part.mediaInfo[is4k ? 'status4k' : 'status'] ===
MediaStatus.AVAILABLE ||
part.mediaInfo[is4k ? 'status4k' : 'status'] ===
MediaStatus.PROCESSING) &&
MediaStatus.PROCESSING) &&
!requestedParts.includes(part.id)
)
.map((part) => part.id);
Expand Down Expand Up @@ -271,8 +271,8 @@ const CollectionRequestModal = ({
isUpdating
? intl.formatMessage(globalMessages.requesting)
: selectedParts.length === 0
? intl.formatMessage(messages.selectmovies)
: intl.formatMessage(
? intl.formatMessage(messages.selectmovies)
: intl.formatMessage(
is4k ? messages.requestmovies4k : messages.requestmovies,
{
count: selectedParts.length,
Expand Down Expand Up @@ -321,21 +321,24 @@ const CollectionRequestModal = ({
toggleAllParts();
}
}}
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${quota?.movie.limit &&
(quota.movie.remaining ?? 0) < unrequestedParts.length
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
quota?.movie.limit &&
(quota.movie.remaining ?? 0) < unrequestedParts.length
? 'opacity-50'
: ''
}`}
}`}
>
<span
aria-hidden="true"
className={`${isAllParts() ? 'bg-indigo-500' : 'bg-gray-800'
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
className={`${
isAllParts() ? 'bg-indigo-500' : 'bg-gray-800'
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span
aria-hidden="true"
className={`${isAllParts() ? 'translate-x-5' : 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
className={`${
isAllParts() ? 'translate-x-5' : 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
></span>
</span>
</th>
Expand All @@ -360,25 +363,26 @@ const CollectionRequestModal = ({
const partRequest = getPartRequest(part.id);
const partMedia =
part.mediaInfo &&
part.mediaInfo[is4k ? 'status4k' : 'status'] !==
part.mediaInfo[is4k ? 'status4k' : 'status'] !==
MediaStatus.UNKNOWN
? part.mediaInfo
: undefined;

return (
<tr key={`part-${part.id}`}>
<td
className={`whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100 ${partMedia?.status === MediaStatus.BLACKLISTED &&
className={`whitespace-nowrap px-4 py-4 text-sm font-medium leading-5 text-gray-100 ${
partMedia?.status === MediaStatus.BLACKLISTED &&
'pointer-events-none opacity-50'
}`}
}`}
>
<span
role="checkbox"
tabIndex={0}
aria-checked={
(!!partMedia &&
partMedia.status !==
MediaStatus.BLACKLISTED) ||
MediaStatus.BLACKLISTED) ||
isSelectedPart(part.id)
}
onClick={() => togglePart(part.id)}
Expand All @@ -387,45 +391,49 @@ const CollectionRequestModal = ({
togglePart(part.id);
}
}}
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${(!!partMedia &&
className={`relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center pt-2 focus:outline-none ${
(!!partMedia &&
partMedia.status !==
MediaStatus.BLACKLISTED) ||
partRequest ||
(quota?.movie.limit &&
currentlyRemaining <= 0 &&
!isSelectedPart(part.id))
MediaStatus.BLACKLISTED) ||
partRequest ||
(quota?.movie.limit &&
currentlyRemaining <= 0 &&
!isSelectedPart(part.id))
? 'opacity-50'
: ''
}`}
}`}
>
<span
aria-hidden="true"
className={`${(!!partMedia &&
className={`${
(!!partMedia &&
partMedia.status !==
MediaStatus.BLACKLISTED) ||
partRequest ||
isSelectedPart(part.id)
MediaStatus.BLACKLISTED) ||
partRequest ||
isSelectedPart(part.id)
? 'bg-indigo-500'
: 'bg-gray-700'
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
} absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out`}
></span>
<span
aria-hidden="true"
className={`${(!!partMedia &&
className={`${
(!!partMedia &&
partMedia.status !==
MediaStatus.BLACKLISTED) ||
partRequest ||
isSelectedPart(part.id)
MediaStatus.BLACKLISTED) ||
partRequest ||
isSelectedPart(part.id)
? 'translate-x-5'
: 'translate-x-0'
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
} absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
></span>
</span>
</td>
<td
className={`flex items-center px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6 ${partMedia?.status === MediaStatus.BLACKLISTED &&
className={`flex items-center px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6 ${
partMedia?.status === MediaStatus.BLACKLISTED &&
'pointer-events-none opacity-50'
}`}
}`}
>
<div className="relative h-auto w-10 flex-shrink-0 overflow-hidden rounded-md">
<CachedImage
Expand Down Expand Up @@ -464,26 +472,26 @@ const CollectionRequestModal = ({
)}
{!partMedia &&
partRequest?.status ===
MediaRequestStatus.PENDING && (
MediaRequestStatus.PENDING && (
<Badge badgeType="warning">
{intl.formatMessage(globalMessages.pending)}
</Badge>
)}
{((!partMedia &&
partRequest?.status ===
MediaRequestStatus.APPROVED) ||
MediaRequestStatus.APPROVED) ||
partMedia?.[is4k ? 'status4k' : 'status'] ===
MediaStatus.PROCESSING) && (
<Badge badgeType="primary">
{intl.formatMessage(globalMessages.requested)}
</Badge>
)}
MediaStatus.PROCESSING) && (
<Badge badgeType="primary">
{intl.formatMessage(globalMessages.requested)}
</Badge>
)}
{partMedia?.[is4k ? 'status4k' : 'status'] ===
MediaStatus.AVAILABLE && (
<Badge badgeType="success">
{intl.formatMessage(globalMessages.available)}
</Badge>
)}
<Badge badgeType="success">
{intl.formatMessage(globalMessages.available)}
</Badge>
)}
{partMedia?.status === MediaStatus.BLACKLISTED && (
<Badge badgeType="danger">
{intl.formatMessage(globalMessages.blacklisted)}
Expand All @@ -501,14 +509,14 @@ const CollectionRequestModal = ({
</div>
{(hasPermission(Permission.REQUEST_ADVANCED) ||
hasPermission(Permission.MANAGE_REQUESTS)) && (
<AdvancedRequester
type="movie"
is4k={is4k}
onChange={(overrides) => {
setRequestOverrides(overrides);
}}
/>
)}
<AdvancedRequester
type="movie"
is4k={is4k}
onChange={(overrides) => {
setRequestOverrides(overrides);
}}
/>
)}
</Modal>
);
};
Expand Down
37 changes: 20 additions & 17 deletions src/components/TitleCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,8 +299,8 @@ const TitleCard = ({
mediaType === 'movie'
? 'movie'
: mediaType === 'collection'
? 'collection'
: 'tv'
? 'collection'
: 'tv'
}
onComplete={requestComplete}
onUpdating={requestUpdating}
Expand All @@ -313,19 +313,20 @@ const TitleCard = ({
mediaType === 'movie'
? 'movie'
: mediaType === 'collection'
? 'collection'
: 'tv'
? 'collection'
: 'tv'
}
onCancel={closeBlacklistModal}
onComplete={onClickHideItemBtn}
isUpdating={isUpdating}
/>
)}
<div
className={`relative transform-gpu cursor-default overflow-hidden rounded-xl bg-gray-800 bg-cover outline-none ring-1 transition duration-300 ${showDetail
className={`relative transform-gpu cursor-default overflow-hidden rounded-xl bg-gray-800 bg-cover outline-none ring-1 transition duration-300 ${
showDetail
? 'scale-105 shadow-lg ring-gray-500'
: 'scale-100 shadow ring-gray-700'
}`}
}`}
style={{
paddingBottom: '150%',
}}
Expand Down Expand Up @@ -358,17 +359,18 @@ const TitleCard = ({
/>
<div className="absolute left-0 right-0 flex items-center justify-between p-2">
<div
className={`pointer-events-none z-40 self-start rounded-full border bg-opacity-80 shadow-md ${mediaType === 'movie' || mediaType === 'collection'
className={`pointer-events-none z-40 self-start rounded-full border bg-opacity-80 shadow-md ${
mediaType === 'movie' || mediaType === 'collection'
? 'border-blue-500 bg-blue-600'
: 'border-purple-600 bg-purple-600'
}`}
}`}
>
<div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
{mediaType === 'movie'
? intl.formatMessage(globalMessages.movie)
: mediaType === 'collection'
? intl.formatMessage(globalMessages.collection)
: intl.formatMessage(globalMessages.tvshow)}
? intl.formatMessage(globalMessages.collection)
: intl.formatMessage(globalMessages.tvshow)}
</div>
</div>
{showDetail && currentStatus !== MediaStatus.BLACKLISTED && (
Expand Down Expand Up @@ -468,8 +470,8 @@ const TitleCard = ({
mediaType === 'movie'
? `/movie/${id}`
: mediaType === 'collection'
? `/collection/${id}`
: `/tv/${id}`
? `/collection/${id}`
: `/tv/${id}`
}
className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left"
style={{
Expand All @@ -479,11 +481,12 @@ const TitleCard = ({
>
<div className="flex h-full w-full items-end">
<div
className={`px-2 text-white ${!showRequestButton ||
(currentStatus && currentStatus !== MediaStatus.UNKNOWN)
className={`px-2 text-white ${
!showRequestButton ||
(currentStatus && currentStatus !== MediaStatus.UNKNOWN)
? 'pb-2'
: 'pb-11'
}`}
}`}
>
{year && <div className="text-sm font-medium">{year}</div>}

Expand All @@ -505,8 +508,8 @@ const TitleCard = ({
style={{
WebkitLineClamp:
!showRequestButton ||
(currentStatus &&
currentStatus !== MediaStatus.UNKNOWN)
(currentStatus &&
currentStatus !== MediaStatus.UNKNOWN)
? 5
: 3,
display: '-webkit-box',
Expand Down

0 comments on commit a05e4aa

Please sign in to comment.