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

fix(ui): fix request list UI behavior when season list is too long (#1106)

Browse Source 
* fix(ui): fix request list UI behavior when season list is too long

* fix: add default variants to Tailwind scale
pull/1110/head
TheCatLady 4 years ago committed by GitHub
parent 9d0b52a242
commit 85076919c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File

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

@ -111,7 +111,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
: `/tv/${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"> <a className="pb-0.5 sm:pb-1 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> </a>
</Link> </Link>

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

@ -132,7 +132,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
setShowEditModal(false); setShowEditModal(false);
}} }}
/> />
<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="relative flex flex-col justify-between w-full py-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={{
@ -141,8 +141,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
: undefined, : undefined,
}} }}
/> />
<div className="relative flex flex-col justify-between w-full 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 lg:w-1/2 xl:w-7/12 2xl:w-2/3"> <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">
<Link <Link
href={ href={
requestData.type === 'movie' requestData.type === 'movie'
@ -162,18 +162,20 @@ const RequestItem: React.FC<RequestItemProps> = ({
/> />
</a> </a>
</Link> </Link>
<div className="flex flex-col justify-center ml-2 overflow-hidden lg:ml-4"> <div className="flex flex-col justify-center pl-2 overflow-hidden lg:pl-4">
<Link <div className="card-field">
href={ <Link
requestData.type === 'movie' href={
? `/movie/${requestData.media.tmdbId}` requestData.type === 'movie'
: `/tv/${requestData.media.tmdbId}` ? `/movie/${requestData.media.tmdbId}`
} : `/tv/${requestData.media.tmdbId}`
> }
<a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline"> >
{isMovie(title) ? title.title : title.name} <a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
</a> {isMovie(title) ? title.title : title.name}
</Link> </a>
</Link>
</div>
<div className="card-field"> <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">
@ -212,7 +214,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
)} )}
</div> </div>
</div> </div>
<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="z-10 flex flex-col justify-between w-full pr-4 mt-4 ml-2 text-sm sm:mt-0 lg:flex-1 lg: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)}
@ -275,7 +277,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
<img <img
src={requestData.modifiedBy.avatar} src={requestData.modifiedBy.avatar}
alt="" alt=""
className="ml-1 pl-0.5 avatar-sm" className="ml-1.5 avatar-sm"
/> />
<span className="text-sm truncate group-hover:underline"> <span className="text-sm truncate group-hover:underline">
{requestData.modifiedBy.displayName} {requestData.modifiedBy.displayName}
@ -292,7 +294,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
</div> </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 pl-4 pr-4 mt-4 flex-nowrap lg:flex-col lg:mt-0 lg:items-end lg:justify-around lg:w-64 lg: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 &&

4
src/styles/globals.css
Unescape View File

@ -55,11 +55,11 @@ ul.cardList > li {
} }
img.avatar-sm { img.avatar-sm {
@apply w-5 mr-1 pr-0.5 rounded-full; @apply w-5 h-5 mr-1.5 rounded-full transition duration-300 scale-100 transform-gpu group-hover:scale-105;
} }
.card-field { .card-field {
@apply flex items-center my-0.5 sm:my-1 text-sm; @apply flex items-center py-0.5 sm:py-1 text-sm;
} }
.card-field-name { .card-field-name {

1
tailwind.config.js
Unescape View File

@ -63,6 +63,7 @@ module.exports = {
margin: ['first', 'last', 'responsive'], margin: ['first', 'last', 'responsive'],
boxShadow: ['group-focus'], boxShadow: ['group-focus'],
opacity: ['disabled', 'hover', 'group-hover'], opacity: ['disabled', 'hover', 'group-hover'],
scale: ['hover', 'focus', 'group-hover'],
zIndex: ['hover', 'responsive'], zIndex: ['hover', 'responsive'],
}, },
plugins: [ plugins: [

Write Preview
Loading…
Cancel
Save