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): tweak request list design (#1201)

Browse Source
This commit is contained in:
TheCatLady
2021-03-17 07:55:16 -04:00
committed by GitHub
parent 4a6151873a
commit d226fc79b8
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -103,7 +103,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
if (!title && !error) { if (!title && !error) {
return ( return (
<div <div
className="w-full h-64 bg-gray-800 rounded-xl lg:h-32 animate-pulse" className="w-full h-64 bg-gray-800 rounded-xl xl:h-32 animate-pulse"
ref={ref} ref={ref}
/> />
); );
@@ -112,7 +112,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
if (!title || !requestData) { if (!title || !requestData) {
return ( return (
<div <div
className="w-full h-64 bg-gray-800 rounded-xl lg:h-32 animate-pulse" className="w-full h-64 bg-gray-800 rounded-xl xl:h-32 animate-pulse"
ref={ref} ref={ref}
/> />
); );
@@ -132,9 +132,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
setShowEditModal(false); setShowEditModal(false);
}} }}
/> />
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl lg:h-32 lg:flex-row"> <div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-32 xl: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 xl:w-2/3"
style={{ style={{
backgroundImage: title.backdropPath backgroundImage: title.backdropPath
? `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})` ? `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})`
@@ -142,7 +142,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
}} }}
/> />
<div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row"> <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
<div className="relative z-10 flex items-center w-full pl-4 pr-4 overflow-hidden lg:w-1/2 xl:w-7/12 2xl:w-2/3 sm:pr-0"> <div className="relative z-10 flex items-center w-full pl-4 pr-4 overflow-hidden xl:w-7/12 2xl:w-2/3 sm:pr-0">
<Link <Link
href={ href={
requestData.type === 'movie' requestData.type === 'movie'
@@ -150,7 +150,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
: `/tv/${requestData.media.tmdbId}` : `/tv/${requestData.media.tmdbId}`
} }
> >
<a className="flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md lg:w-14 transform-gpu hover:scale-105"> <a className="flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md sm:w-14 transform-gpu hover:scale-105">
<img <img
src={ src={
title.posterPath title.posterPath
@@ -162,7 +162,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
/> />
</a> </a>
</Link> </Link>
<div className="flex flex-col justify-center pl-2 overflow-hidden lg:pl-4"> <div className="flex flex-col justify-center pl-2 overflow-hidden xl:pl-4">
<div className="card-field"> <div className="card-field">
<Link <Link
href={ href={
@@ -171,7 +171,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
: `/tv/${requestData.media.tmdbId}` : `/tv/${requestData.media.tmdbId}`
} }
> >
<a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline"> <a className="min-w-0 mr-2 text-lg text-white truncate xl:text-xl hover:underline">
{isMovie(title) ? title.title : title.name} {isMovie(title) ? title.title : title.name}
</a> </a>
</Link> </Link>
@@ -220,7 +220,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
)} )}
</div> </div>
</div> </div>
<div className="z-10 flex flex-col justify-between w-full pr-4 mt-4 ml-4 text-sm sm:ml-2 sm:mt-0 lg:flex-1 lg:pr-0"> <div className="z-10 flex flex-col justify-center w-full pr-4 mt-4 ml-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
<div className="card-field"> <div className="card-field">
<span className="card-field-name"> <span className="card-field-name">
{intl.formatMessage(messages.status)} {intl.formatMessage(messages.status)}
@@ -304,7 +304,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
</div> </div>
</div> </div>
</div> </div>
<div className="z-10 flex flex-col justify-between w-full pl-4 pr-4 mt-4 space-y-2 lg:mt-0 lg:items-end lg:justify-around lg:w-96 lg:pl-0"> <div className="z-10 flex flex-col justify-center w-full pl-4 pr-4 mt-4 space-y-2 xl:mt-0 xl:items-end xl:w-96 xl:pl-0">
{requestData.media[requestData.is4k ? 'status4k' : 'status'] === {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
MediaStatus.UNKNOWN && MediaStatus.UNKNOWN &&
requestData.status !== MediaRequestStatus.DECLINED && requestData.status !== MediaRequestStatus.DECLINED &&