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): 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
This commit is contained in:
TheCatLady
2021-03-06 20:40:47 -05:00
committed by GitHub
parent 9d0b52a242
commit 85076919c6
4 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -111,7 +111,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
: `/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}
</a>
</Link>

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

@@ -132,7 +132,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
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
className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
style={{
@@ -141,8 +141,8 @@ const RequestItem: React.FC<RequestItemProps> = ({
: undefined,
}}
/>
<div className="relative flex flex-col justify-between w-full 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 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">
<Link
href={
requestData.type === 'movie'
@@ -162,18 +162,20 @@ const RequestItem: React.FC<RequestItemProps> = ({
/>
</a>
</Link>
<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}`
}
>
<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="flex flex-col justify-center pl-2 overflow-hidden lg:pl-4">
<div className="card-field">
<Link
href={
requestData.type === 'movie'
? `/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>
</Link>
</div>
<div className="card-field">
<Link href={`/users/${requestData.requestedBy.id}`}>
<a className="flex items-center group">
@@ -212,7 +214,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
)}
</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">
<span className="card-field-name">
{intl.formatMessage(messages.status)}
@@ -275,7 +277,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
<img
src={requestData.modifiedBy.avatar}
alt=""
className="ml-1 pl-0.5 avatar-sm"
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
{requestData.modifiedBy.displayName}
@@ -292,7 +294,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
</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'] ===
MediaStatus.UNKNOWN &&
requestData.status !== MediaRequestStatus.DECLINED &&

4
src/styles/globals.css
View File

@@ -55,11 +55,11 @@ ul.cardList > li {
}
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 {
@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 {

1
tailwind.config.js
View File

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