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

refactor: slideover redesign (#2973)

Browse Source
pull/2976/head
Ryan Cohen 2 years ago committed by GitHub
parent 815d709bcf
commit 22360f3b87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File

26
src/components/Common/SlideOver/index.tsx
Unescape View File

@ -1,8 +1,8 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import Transition from '@app/components/Transition';
import { useLockBodyScroll } from '@app/hooks/useLockBodyScroll';
import { Transition } from '@headlessui/react';
import { XIcon } from '@heroicons/react/outline';
import { useEffect, useRef, useState } from 'react';
import { Fragment, useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
interface SlideOverProps {
@ -34,6 +34,7 @@ const SlideOver = ({
return ReactDOM.createPortal(
<Transition
as={Fragment}
show={show}
appear
enter="opacity-0 transition ease-in-out duration-300"
@ -54,9 +55,8 @@ const SlideOver = ({
}}
>
<div className="absolute inset-0 overflow-hidden">
<section className="absolute inset-y-0 right-0 flex max-w-full pl-10">
<Transition
show={show}
<section className="absolute inset-y-0 right-0 flex max-w-full">
<Transition.Child
appear
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
@ -67,20 +67,20 @@ const SlideOver = ({
>
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div
className="w-screen max-w-md"
className="h-full w-screen max-w-md p-2 sm:p-4"
ref={slideoverRef}
onClick={(e) => e.stopPropagation()}
>
<div className="flex h-full flex-col overflow-y-scroll bg-gray-700 shadow-xl">
<header className="slideover space-y-1 bg-indigo-600 px-4">
<div className="hide-scrollbar flex h-full flex-col overflow-y-scroll rounded-lg bg-gray-800 bg-opacity-80 shadow-xl ring-1 ring-gray-700 backdrop-blur">
<header className="slideover space-y-1 border-b border-gray-700 px-4">
<div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-bold leading-7 text-white">
<h2 className="bg-gradient-to-br from-indigo-400 to-purple-400 bg-clip-text text-2xl font-bold leading-7 text-transparent">
{title}
</h2>
<div className="flex h-7 items-center">
<button
aria-label="Close panel"
className="text-indigo-200 transition duration-150 ease-in-out hover:text-white"
className="text-gray-200 transition duration-150 ease-in-out hover:text-white"
onClick={() => onClose()}
>
<XIcon className="h-6 w-6" />
@ -89,9 +89,7 @@ const SlideOver = ({
</div>
{subText && (
<div>
<p className="text-sm leading-5 text-indigo-300">
{subText}
</p>
<p className="leading-5 text-gray-300">{subText}</p>
</div>
)}
</header>
@ -100,7 +98,7 @@ const SlideOver = ({
</div>
</div>
</div>
</Transition>
</Transition.Child>
</section>
</div>
</div>

28
src/components/ManageSlideOver/index.tsx
Unescape View File

@ -137,11 +137,11 @@ const ManageSlideOver = ({
<div className="space-y-6">
{((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
(data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
<div>
<>
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.downloadstatus)}
</h3>
<div className="overflow-hidden rounded-md bg-gray-600 shadow">
<div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul>
{data.mediaInfo?.downloadStatus?.map((status, index) => (
<li
@ -161,7 +161,7 @@ const ManageSlideOver = ({
))}
</ul>
</div>
</div>
</>
)}
{hasPermission([Permission.MANAGE_ISSUES, Permission.VIEW_ISSUES], {
type: 'or',
@ -171,7 +171,7 @@ const ManageSlideOver = ({
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalIssues)}
</h3>
<div className="overflow-hidden rounded-md bg-gray-600 shadow">
<div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul>
{openIssues.map((issue) => (
<li
@ -186,11 +186,11 @@ const ManageSlideOver = ({
</>
)}
{requests.length > 0 && (
<div>
<>
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalRequests)}
</h3>
<div className="overflow-hidden rounded-md bg-gray-600 shadow">
<div className="overflow-hidden rounded-md border border-gray-700 shadow">
<ul>
{requests.map((request) => (
<li
@ -205,13 +205,13 @@ const ManageSlideOver = ({
))}
</ul>
</div>
</div>
</>
)}
{hasPermission(Permission.ADMIN) &&
(data.mediaInfo?.serviceUrl ||
data.mediaInfo?.tautulliUrl ||
!!watchData?.data?.playCount) && (
<div>
<>
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalMedia)}
</h3>
@ -219,13 +219,13 @@ const ManageSlideOver = ({
{!!watchData?.data && (
<div>
<div
className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${
className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
data.mediaInfo?.tautulliUrl
? 'rounded-t-md'
: 'rounded-md'
}`}
>
<div className="grid grid-cols-3 divide-x divide-gray-500">
<div className="grid grid-cols-3 divide-x divide-gray-700">
<div className="px-4 py-3">
<div className="font-bold">
{intl.formatMessage(messages.pastdays, { days: 7 })}
@ -320,7 +320,7 @@ const ManageSlideOver = ({
</a>
)}
</div>
</div>
</>
)}
{hasPermission(Permission.ADMIN) &&
(data.mediaInfo?.serviceUrl4k ||
@ -334,13 +334,13 @@ const ManageSlideOver = ({
{!!watchData?.data4k && (
<div>
<div
className={`grid grid-cols-1 divide-y divide-gray-500 overflow-hidden bg-gray-600 text-sm text-gray-300 shadow ${
className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
data.mediaInfo?.tautulliUrl4k
? 'rounded-t-md'
: 'rounded-md'
}`}
>
<div className="grid grid-cols-3 divide-x divide-gray-500">
<div className="grid grid-cols-3 divide-x divide-gray-700">
<div className="px-4 py-3">
<div className="font-bold">
{intl.formatMessage(messages.pastdays, { days: 7 })}
@ -487,7 +487,7 @@ const ManageSlideOver = ({
{intl.formatMessage(messages.manageModalClearMedia)}
</span>
</ConfirmButton>
<div className="mt-1 text-xs text-gray-400">
<div className="mt-2 text-xs text-gray-400">
{intl.formatMessage(messages.manageModalClearMediaWarning, {
mediaType: intl.formatMessage(
mediaType === 'movie' ? messages.movie : messages.tvshow

Write Preview
Loading…
Cancel
Save