open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): improve responsive design on new request list UI (#1105)

Browse Source
pull/1036/head^2
TheCatLady 3 years ago committed by GitHub
parent e98f2b9605
commit 1f8b03ff6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 213 additions and 161 deletions
Show Stats Download Patch File Download Diff File

101
src/components/RequestCard/index.tsx
Unescape View File

@ -5,7 +5,10 @@ import type { TvDetails } from '../../../server/models/Tv';
import type { MovieDetails } from '../../../server/models/Movie';
import useSWR from 'swr';
import { LanguageContext } from '../../context/LanguageContext';
import { MediaRequestStatus } from '../../../server/constants/media';
import {
MediaRequestStatus,
MediaStatus,
} from '../../../server/constants/media';
import Badge from '../Common/Badge';
import { useUser, Permission } from '../../hooks/useUser';
import axios from 'axios';
@ -17,6 +20,7 @@ import globalMessages from '../../i18n/globalMessages';
import StatusBadge from '../StatusBadge';
const messages = defineMessages({
status: 'Status',
seasons: 'Seasons',
all: 'All',
});
@ -100,39 +104,48 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
}}
>
<div className="flex flex-col flex-1 min-w-0 pr-4">
<h2 className="overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
<Link
href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'}
as={
request.type === 'movie'
? `/movie/${request.media.tmdbId}`
: `/tv/${request.media.tmdbId}`
}
>
<Link
href={
request.type === 'movie'
? `/movie/${requestData.media.tmdbId}`
: `/tv/${requestData.media.tmdbId}`
}
>
<a className="overflow-hidden text-base text-white cursor-pointer sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
{isMovie(title) ? title.title : title.name}
</Link>
</h2>
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center group">
<img
src={requestData.requestedBy.avatar}
alt=""
className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5"
/>
<span className="text-xs truncate sm:text-sm group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
{requestData.media.status && (
<div className="mt-1 sm:mt-2">
<div className="card-field">
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center group">
<img
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm"
/>
<span className="truncate group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
</div>
<div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.status)}
</span>
{requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN ||
requestData.status === MediaRequestStatus.DECLINED ? (
<Badge badgeType="danger">
{requestData.status === MediaRequestStatus.DECLINED
? intl.formatMessage(globalMessages.declined)
: intl.formatMessage(globalMessages.failed)}
</Badge>
) : (
<StatusBadge
status={
requestData.is4k
? requestData.media.status4k
: requestData.media.status
requestData.media[requestData.is4k ? 'status4k' : 'status']
}
is4k={requestData.is4k}
inProgress={
(
requestData.media[
@ -140,12 +153,15 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
] ?? []
).length > 0
}
is4k={requestData.is4k}
/>
</div>
)}
)}
</div>
{request.seasons.length > 0 && (
<div className="items-center hidden mt-2 text-sm sm:flex">
<span className="mr-2">{intl.formatMessage(messages.seasons)}</span>
<div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.seasons)}
</span>
{!isMovie(title) &&
title.seasons.filter((season) => season.seasonNumber !== 0)
.length === request.seasons.length ? (
@ -215,15 +231,14 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
</div>
)}
</div>
<div className="flex-shrink-0 w-20 sm:w-28">
<Link
href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'}
as={
request.type === 'movie'
? `/movie/${request.media.tmdbId}`
: `/tv/${request.media.tmdbId}`
}
>
<Link
href={
request.type === 'movie'
? `/movie/${requestData.media.tmdbId}`
: `/tv/${requestData.media.tmdbId}`
}
>
<a className="flex-shrink-0 w-20 sm:w-28">
<img
src={
title.posterPath
@ -233,8 +248,8 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
alt=""
className="w-20 transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer sm:w-28 transform-gpu hover:scale-105 hover:shadow-md"
/>
</Link>
</div>
</a>
</Link>
</div>
);
};

241
src/components/RequestList/RequestItem/index.tsx
Unescape View File

@ -23,12 +23,14 @@ import ConfirmButton from '../../Common/ConfirmButton';
const messages = defineMessages({
seasons: 'Seasons',
all: 'All',
notavailable: 'N/A',
failedretry: 'Something went wrong while retrying the request.',
areyousure: 'Are you sure?',
status: 'Status',
requested: 'Requested',
modifiedby: 'Modified By',
modified: 'Modified',
modifieduserdate: '{date} by {user}',
});
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@ -130,114 +132,122 @@ const RequestItem: React.FC<RequestItemProps> = ({
setShowEditModal(false);
}}
/>
<div className="relative flex flex-col justify-between w-full p-4 overflow-hidden text-white bg-gray-800 rounded-md shadow-md lg:h-32 lg:flex-row">
<div className="relative flex flex-col justify-between w-full p-4 overflow-hidden text-gray-400 bg-gray-800 rounded-md shadow-md lg:h-32 lg:flex-row">
<div
className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
style={{
backgroundImage: `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
}}
/>
<div className="relative z-10 flex w-full lg:w-60 xl:w-80 2xl:w-96">
<img
src={
title.posterPath
? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
: '/images/overseerr_poster_not_found.png'
}
alt=""
className="h-full transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer w-14 lg:w-auto lg:h-full transform-gpu hover:scale-105 hover:shadow-md"
/>
<div className="flex flex-col justify-start ml-2 overflow-hidden lg:justify-center lg:ml-4">
<Link
href={
requestData.type === 'movie'
? `/movie/${requestData.media.tmdbId}`
: `/tv/${requestData.media.tmdbId}`
<div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
<div className="relative z-10 flex w-full overflow-hidden lg:w-1/2 xl:w-7/12 2xl:w-2/3">
<img
src={
title.posterPath
? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
: '/images/overseerr_poster_not_found.png'
}
>
<a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
{isMovie(title) ? title.title : title.name}
</a>
</Link>
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center mt-2">
<img
src={requestData.requestedBy.avatar}
alt=""
className="w-5 mr-2 rounded-full"
/>
<span className="text-sm hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
{requestData.seasons.length > 0 && (
<div className="flex items-center mt-2 text-sm">
<span className="mr-2">
{intl.formatMessage(messages.seasons)}
</span>
{requestData.seasons.map((season) => (
<span key={`season-${season.id}`} className="mr-2">
<Badge>{season.seasonNumber}</Badge>
</span>
))}
</div>
)}
</div>
</div>
<div className="z-10 flex flex-col justify-between w-full mt-4 text-sm lg:mt-0 lg:flex-1 lg:ml-4">
<div className="flex items-center my-1">
<span className="mr-2">{intl.formatMessage(messages.status)}</span>
{requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN ||
requestData.status === MediaRequestStatus.DECLINED ? (
<Badge badgeType="danger">
{requestData.status === MediaRequestStatus.DECLINED
? intl.formatMessage(globalMessages.declined)
: intl.formatMessage(globalMessages.failed)}
</Badge>
) : (
<StatusBadge
status={
requestData.media[requestData.is4k ? 'status4k' : 'status']
}
inProgress={
(
requestData.media[
requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
] ?? []
).length > 0
alt=""
className="h-full transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer w-14 lg:w-auto lg:h-full transform-gpu hover:scale-105 hover:shadow-md"
/>
<div className="flex flex-col justify-center ml-2 overflow-hidden lg:ml-4">
<Link
href={
requestData.type === 'movie'
? `/movie/${requestData.media.tmdbId}`
: `/tv/${requestData.media.tmdbId}`
}
is4k={requestData.is4k}
plexUrl={requestData.media.plexUrl}
plexUrl4k={requestData.media.plexUrl4k}
/>
)}
</div>
<div className="flex items-center my-1">
<span className="mr-2">
{intl.formatMessage(messages.requested)}
</span>
<span className="text-gray-300">
{intl.formatDate(requestData.createdAt)}
</span>
>
<a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
{isMovie(title) ? title.title : title.name}
</a>
</Link>
<div className="card-field">
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center group">
<img
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm"
/>
<span className="text-sm text-gray-300 truncate group-hover:underline">
{requestData.requestedBy.displayName}
</span>
</a>
</Link>
</div>
{request.seasons.length > 0 && (
<div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.seasons)}
</span>
{!isMovie(title) &&
title.seasons.filter((season) => season.seasonNumber !== 0)
.length === request.seasons.length ? (
<span className="mr-2 uppercase">
<Badge>{intl.formatMessage(messages.all)}</Badge>
</span>
) : (
<div className="flex overflow-x-scroll hide-scrollbar flex-nowrap">
{request.seasons.map((season) => (
<span key={`season-${season.id}`} className="mr-2">
<Badge>{season.seasonNumber}</Badge>
</span>
))}
</div>
)}
</div>
)}
</div>
</div>
<div className="flex items-center my-1">
<span className="mr-2">
{intl.formatMessage(messages.modifiedby)}
</span>
<span>
{requestData.modifiedBy ? (
<span className="text-sm text-gray-300">
<Link href={`/users/${requestData.modifiedBy.id}`}>
<a className="flex items-center">
<img
src={requestData.modifiedBy.avatar}
alt=""
className="w-5 mr-2 rounded-full"
/>
<span className="text-sm">
{requestData.modifiedBy.displayName} (
<div className="z-10 flex flex-col justify-between w-full mt-4 text-sm sm:mt-0 lg:flex-1 sm:ml-2">
<div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.status)}
</span>
{requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN ||
requestData.status === MediaRequestStatus.DECLINED ? (
<Badge badgeType="danger">
{requestData.status === MediaRequestStatus.DECLINED
? intl.formatMessage(globalMessages.declined)
: intl.formatMessage(globalMessages.failed)}
</Badge>
) : (
<StatusBadge
status={
requestData.media[requestData.is4k ? 'status4k' : 'status']
}
inProgress={
(
requestData.media[
requestData.is4k ? 'downloadStatus4k' : 'downloadStatus'
] ?? []
).length > 0
}
is4k={requestData.is4k}
plexUrl={requestData.media.plexUrl}
plexUrl4k={requestData.media.plexUrl4k}
/>
)}
</div>
<div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.requested)}
</span>
<span className="text-gray-300">
{intl.formatDate(requestData.createdAt)}
</span>
</div>
<div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.modified)}
</span>
<span className="truncate">
{requestData.modifiedBy ? (
<span className="flex text-sm text-gray-300">
{intl.formatMessage(messages.modifieduserdate, {
date: (
<FormattedRelativeTime
value={Math.floor(
(new Date(requestData.updatedAt).getTime() -
@ -246,15 +256,28 @@ const RequestItem: React.FC<RequestItemProps> = ({
)}
updateIntervalInSeconds={1}
/>
)
</span>
</a>
</Link>
</span>
) : (
<span className="text-sm text-gray-300">N/A</span>
)}
</span>
),
user: (
<Link href={`/users/${requestData.modifiedBy.id}`}>
<a className="flex items-center group">
<img
src={requestData.modifiedBy.avatar}
alt=""
className="ml-1 pl-0.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
{requestData.modifiedBy.displayName}
</span>
</a>
</Link>
),
})}
</span>
) : (
<span className="text-sm text-gray-300">N/A</span>
)}
</span>
</div>
</div>
</div>
<div className="z-10 flex flex-row justify-between w-full mt-4 flex-nowrap lg:flex-col lg:mt-0 lg:items-end lg:justify-around lg:w-64">

11
src/components/RequestList/index.tsx
Unescape View File

@ -173,14 +173,13 @@ const RequestList: React.FC = () => {
})}
{data.results.length === 0 && (
<div className="flex flex-col items-center justify-center w-screen p-6 text-white lg:w-full">
<span className="text-base">
<div className="flex flex-col items-center justify-center w-full py-24 text-white">
<span className="text-2xl text-gray-400">
{intl.formatMessage(messages.noresults)}
</span>
{currentFilter !== 'all' && (
<div className="mt-4">
<Button
buttonSize="sm"
buttonType="primary"
onClick={() => setCurrentFilter('all')}
>
@ -190,9 +189,9 @@ const RequestList: React.FC = () => {
)}
</div>
)}
<div className="mt-6 text-white">
<div className="actions">
<nav
className="flex flex-col items-center py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
className="flex flex-col items-center mb-3 space-y-3 sm:space-y-0 sm:flex-row"
aria-label="Pagination"
>
<div className="hidden lg:flex lg:flex-1">
@ -212,7 +211,7 @@ const RequestList: React.FC = () => {
</p>
</div>
<div className="flex justify-center sm:flex-1 sm:justify-start lg:justify-center">
<span className="items-center -mt-3 text-sm sm:-ml-4 lg:ml-0 sm:mt-0">
<span className="items-center -mt-3 text-sm truncate sm:mt-0">
{intl.formatMessage(messages.resultsperpage, {
pageSize: (
<select

5
src/i18n/locale/en.json
Unescape View File

@ -165,9 +165,12 @@
"components.RequestButton.viewrequest4k": "View 4K Request",
"components.RequestCard.all": "All",
"components.RequestCard.seasons": "Seasons",
"components.RequestCard.status": "Status",
"components.RequestList.RequestItem.all": "All",
"components.RequestList.RequestItem.areyousure": "Are you sure?",
"components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
"components.RequestList.RequestItem.modifiedby": "Modified By",
"components.RequestList.RequestItem.modified": "Modified",
"components.RequestList.RequestItem.modifieduserdate": "{date} by {user}",
"components.RequestList.RequestItem.notavailable": "N/A",
"components.RequestList.RequestItem.requested": "Requested",
"components.RequestList.RequestItem.seasons": "Seasons",

16
src/styles/globals.css
Unescape View File

@ -54,6 +54,18 @@ ul.cardList > li {
@apply max-w-2xl mt-1 text-sm leading-5 text-gray-500;
}
img.avatar-sm {
@apply w-5 mr-1 pr-0.5 rounded-full;
}
.card-field {
@apply flex items-center my-0.5 sm:my-1 text-sm;
}
.card-field-name {
@apply mr-2 font-medium;
}
.section {
@apply mt-6 mb-10 text-white;
}
@ -75,7 +87,7 @@ ul.cardList > li {
}
.actions {
@apply pt-5 mt-8 border-t border-gray-700;
@apply pt-5 mt-8 text-white border-t border-gray-700;
}
input[type='checkbox'] {
@ -104,7 +116,7 @@ select.rounded-r-only {
input.short,
select.short {
@apply w-20;
width: 4.875rem;
}
.protocol {

Write Preview
Loading…
Cancel
Save