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

refactor(ui): new menu design

Browse Source
This commit is contained in:
sct
2021-06-21 01:25:05 +09:00
committed by GitHub
parent db781bfc35
commit b71c07391a
6 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -65,7 +65,7 @@
"sqlite3": "^5.0.2", "sqlite3": "^5.0.2",
"swagger-ui-express": "^4.1.6", "swagger-ui-express": "^4.1.6",
"swr": "^0.5.6", "swr": "^0.5.6",
"typeorm": "0.2.34", "typeorm": "0.2.32",
"web-push": "^3.4.4", "web-push": "^3.4.4",
"winston": "^3.3.3", "winston": "^3.3.3",
"winston-daily-rotate-file": "^4.5.5", "winston-daily-rotate-file": "^4.5.5",

2
src/components/Layout/SearchInput/index.tsx
View File

@@ -24,7 +24,7 @@ const SearchInput: React.FC = () => {
<input <input
id="search_field" id="search_field"
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }} style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base" className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full bg-opacity-80 focus:bg-opacity-100 focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
placeholder={intl.formatMessage(messages.searchPlaceholder)} placeholder={intl.formatMessage(messages.searchPlaceholder)}
type="search" type="search"
inputMode="search" inputMode="search"

52
src/components/Layout/Sidebar/index.tsx
View File

@@ -2,9 +2,9 @@ import {
ClockIcon, ClockIcon,
CogIcon, CogIcon,
SparklesIcon, SparklesIcon,
UsersIcon,
XIcon, XIcon,
} from '@heroicons/react/outline'; } from '@heroicons/react/outline';
import { UsersIcon } from '@heroicons/react/solid';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import React, { ReactNode, useRef } from 'react'; import React, { ReactNode, useRef } from 'react';
@@ -39,34 +39,26 @@ const SidebarLinks: SidebarLinkProps[] = [
{ {
href: '/', href: '/',
messagesKey: 'dashboard', messagesKey: 'dashboard',
svgIcon: ( svgIcon: <SparklesIcon className="w-6 h-6 mr-3" />,
<SparklesIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
activeRegExp: /^\/(discover\/?(movies|tv)?)?$/, activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
}, },
{ {
href: '/requests', href: '/requests',
messagesKey: 'requests', messagesKey: 'requests',
svgIcon: ( svgIcon: <ClockIcon className="w-6 h-6 mr-3" />,
<ClockIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
activeRegExp: /^\/requests/, activeRegExp: /^\/requests/,
}, },
{ {
href: '/users', href: '/users',
messagesKey: 'users', messagesKey: 'users',
svgIcon: ( svgIcon: <UsersIcon className="w-6 h-6 mr-3" />,
<UsersIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
activeRegExp: /^\/users/, activeRegExp: /^\/users/,
requiredPermission: Permission.MANAGE_USERS, requiredPermission: Permission.MANAGE_USERS,
}, },
{ {
href: '/settings', href: '/settings',
messagesKey: 'settings', messagesKey: 'settings',
svgIcon: ( svgIcon: <CogIcon className="w-6 h-6 mr-3" />,
<CogIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
activeRegExp: /^\/settings/, activeRegExp: /^\/settings/,
requiredPermission: Permission.MANAGE_SETTINGS, requiredPermission: Permission.MANAGE_SETTINGS,
}, },
@@ -93,7 +85,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0"> <div className="fixed inset-0">
<div className="absolute inset-0 bg-gray-600 opacity-75"></div> <div className="absolute inset-0 bg-gray-900 opacity-90"></div>
</div> </div>
</Transition> </Transition>
<Transition <Transition
@@ -117,16 +109,16 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
</div> </div>
<div <div
ref={navRef} ref={navRef}
className="flex flex-col flex-1 h-0 pt-5 pb-8 overflow-y-auto sm:pb-4" className="flex flex-col flex-1 h-0 pt-8 pb-8 overflow-y-auto sm:pb-4"
> >
<div className="flex items-center flex-shrink-0 px-4"> <div className="flex items-center flex-shrink-0 px-2">
<span className="text-xl text-gray-50"> <span className="px-4 text-xl text-gray-50">
<a href="/"> <a href="/">
<img src="/logo_full.svg" alt="Logo" /> <img src="/logo_full.svg" alt="Logo" />
</a> </a>
</span> </span>
</div> </div>
<nav className="flex-1 px-2 mt-5 space-y-1"> <nav className="flex-1 px-4 mt-16 space-y-4">
{SidebarLinks.filter((link) => {SidebarLinks.filter((link) =>
link.requiredPermission link.requiredPermission
? hasPermission(link.requiredPermission) ? hasPermission(link.requiredPermission)
@@ -152,7 +144,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
router.pathname.match( router.pathname.match(
sidebarLink.activeRegExp sidebarLink.activeRegExp
) )
? 'bg-gray-900' ? 'bg-gradient-to-br from-indigo-600 to-purple-600'
: '' : ''
} }
`} `}
@@ -167,7 +159,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
})} })}
</nav> </nav>
{hasPermission(Permission.ADMIN) && ( {hasPermission(Permission.ADMIN) && (
<div className="px-2">
<VersionStatus onClick={() => setClosed()} /> <VersionStatus onClick={() => setClosed()} />
</div>
)} )}
</div> </div>
</div> </div>
@@ -182,16 +176,16 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
<div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0"> <div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-64 sidebar"> <div className="flex flex-col w-64 sidebar">
<div className="flex flex-col flex-1 h-0 bg-gray-800"> <div className="flex flex-col flex-1 h-0">
<div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto"> <div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4"> <div className="flex items-center flex-shrink-0">
<span className="text-2xl text-gray-50"> <span className="px-4 text-2xl text-gray-50">
<a href="/"> <a href="/">
<img src="/logo_full.svg" alt="Logo" /> <img src="/logo_full.svg" alt="Logo" />
</a> </a>
</span> </span>
</div> </div>
<nav className="flex-1 px-2 mt-5 space-y-1 bg-gray-800"> <nav className="flex-1 px-4 mt-16 space-y-4">
{SidebarLinks.filter((link) => {SidebarLinks.filter((link) =>
link.requiredPermission link.requiredPermission
? hasPermission(link.requiredPermission) ? hasPermission(link.requiredPermission)
@@ -204,12 +198,12 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
as={sidebarLink.as} as={sidebarLink.as}
> >
<a <a
className={`flex group items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-gray-100 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150 className={`flex group items-center px-2 py-2 text-lg leading-6 rounded-md text-white hover:text-white focus:outline-none transition ease-in-out duration-150
${ ${
router.pathname.match( router.pathname.match(
sidebarLink.activeRegExp sidebarLink.activeRegExp
) )
? 'bg-gray-900' ? 'bg-gradient-to-br from-indigo-600 to-purple-600'
: '' : ''
} }
`} `}
@@ -221,7 +215,11 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
); );
})} })}
</nav> </nav>
{hasPermission(Permission.ADMIN) && <VersionStatus />} {hasPermission(Permission.ADMIN) && (
<div className="px-2">
<VersionStatus />
</div>
)}
</div> </div>
</div> </div>
</div> </div>

2
src/components/Layout/VersionStatus/index.tsx
View File

@@ -53,7 +53,7 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${ className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
data.updateAvailable data.updateAvailable
? 'bg-yellow-500 text-white hover:bg-yellow-400' ? 'bg-yellow-500 text-white hover:bg-yellow-400'
: 'bg-gray-800 text-gray-300 hover:bg-gray-700' : 'bg-gray-900 text-gray-300 hover:bg-gray-800'
}`} }`}
> >
{data.commitTag === 'local' ? ( {data.commitTag === 'local' ? (

2
src/styles/globals.css
View File

@@ -19,8 +19,10 @@ body {
} }
.sidebar { .sidebar {
@apply border-r border-gray-700;
padding-top: env(safe-area-inset-top); padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
background: linear-gradient(180deg, #232a36 0%, #131928 100%);
} }
.slideover { .slideover {

8
yarn.lock
View File

@@ -13792,10 +13792,10 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
typeorm@0.2.34: typeorm@0.2.32:
version "0.2.34" version "0.2.32"
resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.2.34.tgz#637b3cec2de54ee7f423012b813a2022c0aacc8b" resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.2.32.tgz#544dbfdfe0cd0887548d9bcbd28527ea4f4b3c9b"
integrity sha512-FZAeEGGdSGq7uTH3FWRQq67JjKu0mgANsSZ04j3kvDYNgy9KwBl/6RFgMVgiSgjf7Rqd7NrhC2KxVT7I80qf7w== integrity sha512-LOBZKZ9As3f8KRMPCUT2H0JZbZfWfkcUnO3w/1BFAbL/X9+cADTF6bczDGGaKVENJ3P8SaKheKmBgpt5h1x+EQ==
dependencies: dependencies:
"@sqltools/formatter" "^1.2.2" "@sqltools/formatter" "^1.2.2"
app-root-path "^3.0.0" app-root-path "^3.0.0"