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

fix: improve small screen layout for discover editing (#3221)

Browse Source
pull/3224/head
Ryan Cohen 2 years ago committed by GitHub
parent 8bd10b5bf3
commit d23b2132de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 81 additions and 89 deletions
Show Stats Download Patch File Download Diff File

104
src/components/Discover/DiscoverSliderEdit/index.tsx
Unescape View File

@ -183,10 +183,12 @@ const DiscoverSliderEdit = ({
className={`absolute -bottom-2 left-0 w-full border-t-4 border-indigo-500`} className={`absolute -bottom-2 left-0 w-full border-t-4 border-indigo-500`}
/> />
)} )}
<div className="flex w-full items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-gray-400"> <div className="flex w-full flex-col rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-gray-400 md:flex-row md:items-center md:space-x-2">
<Bars3Icon className="h-6 w-6" /> <div className="mb-4 flex space-x-2 md:mb-0">
<div>{getSliderTitle(slider)}</div> <Bars3Icon className="h-6 w-6" />
<div className="flex-1 pl-2"> <div>{getSliderTitle(slider)}</div>
</div>
<div className="pointer-events-none mb-4 flex-1 md:mb-0">
{(slider.type === DiscoverSliderType.TMDB_MOVIE_KEYWORD || {(slider.type === DiscoverSliderType.TMDB_MOVIE_KEYWORD ||
slider.type === DiscoverSliderType.TMDB_TV_KEYWORD) && ( slider.type === DiscoverSliderType.TMDB_TV_KEYWORD) && (
<div className="flex space-x-2"> <div className="flex space-x-2">
@ -224,55 +226,57 @@ const DiscoverSliderEdit = ({
<Tag iconSvg={<MagnifyingGlassIcon />}>{slider.data}</Tag> <Tag iconSvg={<MagnifyingGlassIcon />}>{slider.data}</Tag>
)} )}
</div> </div>
{!slider.isBuiltIn && ( <div className="flex items-center space-x-2">
<> {!slider.isBuiltIn && (
{!isEditing ? ( <>
<Button {!isEditing ? (
buttonType="warning" <Button
buttonSize="sm" buttonType="warning"
onClick={() => { buttonSize="sm"
setIsEditing(true); onClick={() => {
}} setIsEditing(true);
> }}
<PencilIcon /> >
<span>{intl.formatMessage(globalMessages.edit)}</span> <PencilIcon />
</Button> <span>{intl.formatMessage(globalMessages.edit)}</span>
) : ( </Button>
) : (
<Button
buttonType="default"
buttonSize="sm"
onClick={() => {
setIsEditing(false);
}}
>
<ArrowUturnLeftIcon />
<span>{intl.formatMessage(globalMessages.cancel)}</span>
</Button>
)}
<Button <Button
buttonType="default" data-testid="discover-slider-remove-button"
buttonType="danger"
buttonSize="sm" buttonSize="sm"
onClick={() => { onClick={() => {
setIsEditing(false); deleteSlider();
}} }}
> >
<ArrowUturnLeftIcon /> <XMarkIcon />
<span>{intl.formatMessage(globalMessages.cancel)}</span> <span>{intl.formatMessage(messages.remove)}</span>
</Button> </Button>
)} </>
<Button )}
data-testid="discover-slider-remove-button" <div className="flex-1 pl-4 text-right">
buttonType="danger" <Tooltip content={intl.formatMessage(messages.enable)}>
buttonSize="sm" <div>
onClick={() => { <SlideCheckbox
deleteSlider(); onClick={() => {
}} onEnable();
> }}
<XMarkIcon /> checked={slider.enabled}
<span>{intl.formatMessage(messages.remove)}</span> />
</Button> </div>
</> </Tooltip>
)} </div>
<div className="pl-4">
<Tooltip content={intl.formatMessage(messages.enable)}>
<div>
<SlideCheckbox
onClick={() => {
onEnable();
}}
checked={slider.enabled}
/>
</div>
</Tooltip>
</div> </div>
</div> </div>
{isEditing ? ( {isEditing ? (
@ -286,11 +290,7 @@ const DiscoverSliderEdit = ({
/> />
</div> </div>
) : ( ) : (
<div <div className={`p-4 ${!slider.enabled ? 'opacity-50' : ''}`}>
className={`pointer-events-none p-4 ${
!slider.enabled ? 'opacity-50' : ''
}`}
>
{children} {children}
</div> </div>
)} )}

62
src/components/Discover/index.tsx
Unescape View File

@ -119,44 +119,36 @@ const Discover = () => {
<> <>
{isEditing ? ( {isEditing ? (
<> <>
<div className="my-6 flex justify-end"> <div className="my-6 flex flex-col justify-end space-y-2 md:flex-row md:space-y-0 md:space-x-3">
<span className="ml-3 inline-flex rounded-md shadow-sm"> <Button
<Button buttonType="default"
buttonType="default" onClick={() => setIsEditing(false)}
onClick={() => setIsEditing(false)} >
> <ArrowUturnLeftIcon />
<ArrowUturnLeftIcon /> <span>{intl.formatMessage(messages.stopediting)}</span>
<span>{intl.formatMessage(messages.stopediting)}</span> </Button>
</Button> <Tooltip content={intl.formatMessage(messages.resetwarning)}>
</span> <ConfirmButton
<span className="ml-3 inline-flex rounded-md shadow-sm"> onClick={() => resetSliders()}
<Tooltip content={intl.formatMessage(messages.resetwarning)}> confirmText={intl.formatMessage(globalMessages.areyousure)}
<ConfirmButton
onClick={() => resetSliders()}
confirmText={intl.formatMessage(
globalMessages.areyousure
)}
>
<ArrowPathIcon />
<span>{intl.formatMessage(messages.resettodefault)}</span>
</ConfirmButton>
</Tooltip>
</span>
<span className="ml-3 inline-flex rounded-md shadow-sm">
<Button
buttonType="primary"
type="submit"
disabled={!hasChanged()}
onClick={() => updateSliders()}
data-testid="discover-customize-submit"
> >
<ArrowDownOnSquareIcon /> <ArrowPathIcon />
<span>{intl.formatMessage(globalMessages.save)}</span> <span>{intl.formatMessage(messages.resettodefault)}</span>
</Button> </ConfirmButton>
</span> </Tooltip>
<Button
buttonType="primary"
type="submit"
disabled={!hasChanged()}
onClick={() => updateSliders()}
data-testid="discover-customize-submit"
>
<ArrowDownOnSquareIcon />
<span>{intl.formatMessage(globalMessages.save)}</span>
</Button>
</div> </div>
<div className="mb-6 rounded-lg bg-gray-800"> <div className="mb-6 rounded-lg bg-gray-800">
<div className="flex items-center space-x-2 border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400"> <div className="flex items-center space-x-2 rounded-t-lg border-t border-l border-r border-gray-800 bg-gray-900 p-4 text-lg font-semibold text-gray-400">
<PlusIcon className="w-6" /> <PlusIcon className="w-6" />
<span data-testid="create-slider-header"> <span data-testid="create-slider-header">
{intl.formatMessage(messages.createnewslider)} {intl.formatMessage(messages.createnewslider)}

4
src/components/MediaSlider/index.tsx
Unescape View File

@ -149,8 +149,8 @@ const MediaSlider = ({
<div className="slider-header"> <div className="slider-header">
{linkUrl ? ( {linkUrl ? (
<Link href={linkUrl}> <Link href={linkUrl}>
<a className="slider-title"> <a className="slider-title min-w-0 pr-16">
<span>{title}</span> <span className="truncate">{title}</span>
<ArrowRightCircleIcon /> <ArrowRightCircleIcon />
</a> </a>
</Link> </Link>

Write Preview
Loading…
Cancel
Save