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(ui): improve responsive design on new request list UI (#1105)

Browse Source
This commit is contained in:
TheCatLady
2021-03-05 20:54:31 -05:00
committed by GitHub
parent e98f2b9605
commit 1f8b03ff6f
5 changed files with 213 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/RequestCard/index.tsx
View File

@@ -5,7 +5,10 @@ import type { TvDetails } from '../../../server/models/Tv';
import type { MovieDetails } from '../../../server/models/Movie'; import type { MovieDetails } from '../../../server/models/Movie';
import useSWR from 'swr'; import useSWR from 'swr';
import { LanguageContext } from '../../context/LanguageContext'; import { LanguageContext } from '../../context/LanguageContext';
import { MediaRequestStatus } from '../../../server/constants/media'; import {
MediaRequestStatus,
MediaStatus,
} from '../../../server/constants/media';
import Badge from '../Common/Badge'; import Badge from '../Common/Badge';
import { useUser, Permission } from '../../hooks/useUser'; import { useUser, Permission } from '../../hooks/useUser';
import axios from 'axios'; import axios from 'axios';
@@ -17,6 +20,7 @@ import globalMessages from '../../i18n/globalMessages';
import StatusBadge from '../StatusBadge'; import StatusBadge from '../StatusBadge';
const messages = defineMessages({ const messages = defineMessages({
status: 'Status',
seasons: 'Seasons', seasons: 'Seasons',
all: 'All', 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"> <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 <Link
href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'} href={
as={
request.type === 'movie' request.type === 'movie'
? `/movie/${request.media.tmdbId}` ? `/movie/${requestData.media.tmdbId}`
: `/tv/${request.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} {isMovie(title) ? title.title : title.name}
</a>
</Link> </Link>
</h2> <div className="card-field">
<Link href={`/users/${requestData.requestedBy.id}`}> <Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center group"> <a className="flex items-center group">
<img <img
src={requestData.requestedBy.avatar} src={requestData.requestedBy.avatar}
alt="" alt=""
className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5" className="avatar-sm"
/> />
<span className="text-xs truncate sm:text-sm group-hover:underline"> <span className="truncate group-hover:underline">
{requestData.requestedBy.displayName} {requestData.requestedBy.displayName}
</span> </span>
</a> </a>
</Link> </Link>
{requestData.media.status && ( </div>
<div className="mt-1 sm:mt-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 <StatusBadge
status={ status={
requestData.is4k requestData.media[requestData.is4k ? 'status4k' : 'status']
? requestData.media.status4k
: requestData.media.status
} }
is4k={requestData.is4k}
inProgress={ inProgress={
( (
requestData.media[ requestData.media[
@@ -140,12 +153,15 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
] ?? [] ] ?? []
).length > 0 ).length > 0
} }
is4k={requestData.is4k}
/> />
</div>
)} )}
</div>
{request.seasons.length > 0 && ( {request.seasons.length > 0 && (
<div className="items-center hidden mt-2 text-sm sm:flex"> <div className="card-field">
<span className="mr-2">{intl.formatMessage(messages.seasons)}</span> <span className="card-field-name">
{intl.formatMessage(messages.seasons)}
</span>
{!isMovie(title) && {!isMovie(title) &&
title.seasons.filter((season) => season.seasonNumber !== 0) title.seasons.filter((season) => season.seasonNumber !== 0)
.length === request.seasons.length ? ( .length === request.seasons.length ? (
@@ -215,15 +231,14 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
</div> </div>
)} )}
</div> </div>
<div className="flex-shrink-0 w-20 sm:w-28">
<Link <Link
href={request.type === 'movie' ? '/movie/[movieId]' : '/tv/[tvId]'} href={
as={
request.type === 'movie' request.type === 'movie'
? `/movie/${request.media.tmdbId}` ? `/movie/${requestData.media.tmdbId}`
: `/tv/${request.media.tmdbId}` : `/tv/${requestData.media.tmdbId}`
} }
> >
<a className="flex-shrink-0 w-20 sm:w-28">
<img <img
src={ src={
title.posterPath title.posterPath
@@ -233,9 +248,9 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
alt="" 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" 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"
/> />
</a>
</Link> </Link>
</div> </div>
</div>
); );
}; };

85
src/components/RequestList/RequestItem/index.tsx
View File

@@ -23,12 +23,14 @@ import ConfirmButton from '../../Common/ConfirmButton';
const messages = defineMessages({ const messages = defineMessages({
seasons: 'Seasons', seasons: 'Seasons',
all: 'All',
notavailable: 'N/A', notavailable: 'N/A',
failedretry: 'Something went wrong while retrying the request.', failedretry: 'Something went wrong while retrying the request.',
areyousure: 'Are you sure?', areyousure: 'Are you sure?',
status: 'Status', status: 'Status',
requested: 'Requested', requested: 'Requested',
modifiedby: 'Modified By', modified: 'Modified',
modifieduserdate: '{date} by {user}',
}); });
const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -130,14 +132,15 @@ const RequestItem: React.FC<RequestItemProps> = ({
setShowEditModal(false); 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 <div
className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3" className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
style={{ 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})`, 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"> <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 <img
src={ src={
title.posterPath title.posterPath
@@ -147,7 +150,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
alt="" 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" 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"> <div className="flex flex-col justify-center ml-2 overflow-hidden lg:ml-4">
<Link <Link
href={ href={
requestData.type === 'movie' requestData.type === 'movie'
@@ -159,24 +162,34 @@ const RequestItem: React.FC<RequestItemProps> = ({
{isMovie(title) ? title.title : title.name} {isMovie(title) ? title.title : title.name}
</a> </a>
</Link> </Link>
<div className="card-field">
<Link href={`/users/${requestData.requestedBy.id}`}> <Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center mt-2"> <a className="flex items-center group">
<img <img
src={requestData.requestedBy.avatar} src={requestData.requestedBy.avatar}
alt="" alt=""
className="w-5 mr-2 rounded-full" className="avatar-sm"
/> />
<span className="text-sm hover:underline"> <span className="text-sm text-gray-300 truncate group-hover:underline">
{requestData.requestedBy.displayName} {requestData.requestedBy.displayName}
</span> </span>
</a> </a>
</Link> </Link>
{requestData.seasons.length > 0 && ( </div>
<div className="flex items-center mt-2 text-sm"> {request.seasons.length > 0 && (
<span className="mr-2"> <div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.seasons)} {intl.formatMessage(messages.seasons)}
</span> </span>
{requestData.seasons.map((season) => ( {!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"> <span key={`season-${season.id}`} className="mr-2">
<Badge>{season.seasonNumber}</Badge> <Badge>{season.seasonNumber}</Badge>
</span> </span>
@@ -184,10 +197,14 @@ const RequestItem: React.FC<RequestItemProps> = ({
</div> </div>
)} )}
</div> </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>
<div className="flex items-center my-1"> <div className="z-10 flex flex-col justify-between w-full mt-4 text-sm sm:mt-0 lg:flex-1 sm:ml-2">
<span className="mr-2">{intl.formatMessage(messages.status)}</span> <div className="card-field">
<span className="card-field-name">
{intl.formatMessage(messages.status)}
</span>
{requestData.media[requestData.is4k ? 'status4k' : 'status'] === {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN || MediaStatus.UNKNOWN ||
requestData.status === MediaRequestStatus.DECLINED ? ( requestData.status === MediaRequestStatus.DECLINED ? (
@@ -214,30 +231,23 @@ const RequestItem: React.FC<RequestItemProps> = ({
/> />
)} )}
</div> </div>
<div className="flex items-center my-1"> <div className="card-field">
<span className="mr-2"> <span className="card-field-name">
{intl.formatMessage(messages.requested)} {intl.formatMessage(messages.requested)}
</span> </span>
<span className="text-gray-300"> <span className="text-gray-300">
{intl.formatDate(requestData.createdAt)} {intl.formatDate(requestData.createdAt)}
</span> </span>
</div> </div>
<div className="flex items-center my-1"> <div className="card-field">
<span className="mr-2"> <span className="card-field-name">
{intl.formatMessage(messages.modifiedby)} {intl.formatMessage(messages.modified)}
</span> </span>
<span> <span className="truncate">
{requestData.modifiedBy ? ( {requestData.modifiedBy ? (
<span className="text-sm text-gray-300"> <span className="flex text-sm text-gray-300">
<Link href={`/users/${requestData.modifiedBy.id}`}> {intl.formatMessage(messages.modifieduserdate, {
<a className="flex items-center"> date: (
<img
src={requestData.modifiedBy.avatar}
alt=""
className="w-5 mr-2 rounded-full"
/>
<span className="text-sm">
{requestData.modifiedBy.displayName} (
<FormattedRelativeTime <FormattedRelativeTime
value={Math.floor( value={Math.floor(
(new Date(requestData.updatedAt).getTime() - (new Date(requestData.updatedAt).getTime() -
@@ -246,10 +256,22 @@ const RequestItem: React.FC<RequestItemProps> = ({
)} )}
updateIntervalInSeconds={1} updateIntervalInSeconds={1}
/> />
) ),
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> </span>
</a> </a>
</Link> </Link>
),
})}
</span> </span>
) : ( ) : (
<span className="text-sm text-gray-300">N/A</span> <span className="text-sm text-gray-300">N/A</span>
@@ -257,6 +279,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
</span> </span>
</div> </div>
</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"> <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">
{requestData.media[requestData.is4k ? 'status4k' : 'status'] === {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN && MediaStatus.UNKNOWN &&

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

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

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

@@ -165,9 +165,12 @@
"components.RequestButton.viewrequest4k": "View 4K Request", "components.RequestButton.viewrequest4k": "View 4K Request",
"components.RequestCard.all": "All", "components.RequestCard.all": "All",
"components.RequestCard.seasons": "Seasons", "components.RequestCard.seasons": "Seasons",
"components.RequestCard.status": "Status",
"components.RequestList.RequestItem.all": "All",
"components.RequestList.RequestItem.areyousure": "Are you sure?", "components.RequestList.RequestItem.areyousure": "Are you sure?",
"components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.", "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.notavailable": "N/A",
"components.RequestList.RequestItem.requested": "Requested", "components.RequestList.RequestItem.requested": "Requested",
"components.RequestList.RequestItem.seasons": "Seasons", "components.RequestList.RequestItem.seasons": "Seasons",

16
src/styles/globals.css
View File

@@ -54,6 +54,18 @@ ul.cardList > li {
@apply max-w-2xl mt-1 text-sm leading-5 text-gray-500; @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 { .section {
@apply mt-6 mb-10 text-white; @apply mt-6 mb-10 text-white;
} }
@@ -75,7 +87,7 @@ ul.cardList > li {
} }
.actions { .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'] { input[type='checkbox'] {
@@ -104,7 +116,7 @@ select.rounded-r-only {
input.short, input.short,
select.short { select.short {
@apply w-20; width: 4.875rem;
} }
.protocol { .protocol {