diff --git a/css/common.scss b/css/common.scss index f1f4e63a7..4df1c75ba 100644 --- a/css/common.scss +++ b/css/common.scss @@ -18,7 +18,7 @@ $button-unselected: #8F9290; $background-color-1: #1F2531; -$background-color-2: #282C38; +$background-color-2: #171C28; $background-color-3: #151B29; $background-color-4: #1B202B; diff --git a/postcss.config.js b/postcss.config.js index 46628577d..8ec418c6e 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -35,7 +35,7 @@ module.exports = { extend: { spacing: { '15': '3.75rem', - '65.5':'15.625rem', + '62.5':'15.625rem', }, }, }, diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 000000000..4b4fbb67d --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Layout/Sidebar.tsx b/src/components/Layout/Sidebar.tsx index 474a36745..72bc1318b 100644 --- a/src/components/Layout/Sidebar.tsx +++ b/src/components/Layout/Sidebar.tsx @@ -48,9 +48,9 @@ function Sidebar() { ); return ( -
+
- logo + logo
dispatch(setStatus(true))}> diff --git a/src/components/Panels/ShokoPanel.tsx b/src/components/Panels/ShokoPanel.tsx new file mode 100644 index 000000000..5cb93b17a --- /dev/null +++ b/src/components/Panels/ShokoPanel.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +type Props = { + title: string; + children: any; + options?: any; + className?: string; + isFetching?: boolean; +}; + +const ShokoPanel = ({ className, title, options, children }: Props) => ( +
+
+ {title} +
event.stopPropagation()} + onTouchStart={event => event.stopPropagation()} + > + {options} +
+
+ +
+ {children} +
+
+); + +export default ShokoPanel; \ No newline at end of file diff --git a/src/core/slices/webuiSettings.ts b/src/core/slices/webuiSettings.ts index 665c30500..1260e2851 100644 --- a/src/core/slices/webuiSettings.ts +++ b/src/core/slices/webuiSettings.ts @@ -36,7 +36,9 @@ type State = { export const defaultLayout = { dashboard: { lg: [{ - i: 'collectionBreakdown', x: 0, y: 0, w: 6, h: 9, minW: 5, minH: 6, maxH: 9, moved: false, static: false, + i: 'collectionBreakdown', x: 0, y: 0, w: 2, h: 15, minW: 2, minH: 15, maxH: 15, moved: false, static: false, + }, { + i: 'collectionTypeBreakdown', x: 2, y: 0, w: 2, h: 15, moved: false, static: false, }, { i: 'seriesBreakdown', x: 6, y: 0, w: 6, h: 9, minW: 5, minH: 6, maxH: 9, moved: false, static: false, }, { @@ -49,8 +51,6 @@ export const defaultLayout = { i: 'actionItems', x: 3, y: 26, w: 3, h: 14, moved: false, static: false, }, { i: 'actionItems2', x: 6, y: 26, w: 3, h: 14, moved: false, static: false, - }, { - i: 'collectionTypeBreakdown', x: 9, y: 26, w: 3, h: 14, moved: false, static: false, }], } as LayoutType, importFolders: { diff --git a/src/pages/dashboard/DashboardPage.tsx b/src/pages/dashboard/DashboardPage.tsx index 966c98932..1ca92f665 100644 --- a/src/pages/dashboard/DashboardPage.tsx +++ b/src/pages/dashboard/DashboardPage.tsx @@ -52,6 +52,9 @@ function DashboardPage() {
+
+ +
@@ -70,9 +73,6 @@ function DashboardPage() {
-
- -
); } diff --git a/src/pages/dashboard/panels/CollectionBreakdown.tsx b/src/pages/dashboard/panels/CollectionBreakdown.tsx index c2a4173ff..50952624b 100644 --- a/src/pages/dashboard/panels/CollectionBreakdown.tsx +++ b/src/pages/dashboard/panels/CollectionBreakdown.tsx @@ -3,45 +3,53 @@ import { useSelector } from 'react-redux'; import prettyBytes from 'pretty-bytes'; import { RootState } from '../../../core/store'; -import FixedPanel from '../../../components/Panels/FixedPanel'; +import ShokoPanel from '../../../components/Panels/ShokoPanel'; function CollectionBreakdown() { const hasFetched = useSelector((state: RootState) => state.mainpage.fetched.stats); const stats = useSelector((state: RootState) => state.mainpage.stats); const renderItem = (key: string, title: string, value: string | number = 0) => ( -
+
{title}
-
- {value} -
+
{value}
); - const childrenLeft = [ + const childrenFirst = [ renderItem('series', 'Series', stats.SeriesCount), - renderItem('files', 'Files', stats.FileCount), - renderItem('collection-size', 'Collection Size', `${prettyBytes(stats.FileSize || 0, { binary: true })}`), - ]; - const childrenRight = [ renderItem('series-completed', 'Series Completed', stats.FinishedSeries), renderItem('episodes-watched', 'Episodes Watched', stats.WatchedEpisodes), renderItem('hours-watched', 'Hours Watched', `${stats.WatchedHours || 0} H`), ]; + const childrenSecond = [ + renderItem('collection-size', 'Collection Size', `${prettyBytes(stats.FileSize || 0, { binary: true })}`), + renderItem('files', 'Files', stats.FileCount), + renderItem('unrecognized-files', 'Unrecognized Files', stats.UnrecognizedFiles), + renderItem('multiple-files', 'Multiple Files', stats.EpisodesWithMultipleFiles), + renderItem('duplicate-files', 'Duplicate Files', stats.FilesWithDuplicateLocations), + ]; + + const childrenThird = [ + renderItem('missing-links', 'Missing TvDB/TMDB Links', stats.SeriesWithMissingLinks), + renderItem('missing-episodes-collecting', 'Missing Episodes (Collecting)', stats.MissingEpisodesCollecting), + renderItem('missing-episodes', 'Missing Episodes (Total)', stats.MissingEpisodes), + ]; return ( - -
-
- {childrenLeft} -
-
- {childrenRight} -
+ +
+ {childrenFirst} +
+
+ {childrenSecond} +
+
+ {childrenThird}
- + ); } diff --git a/src/pages/dashboard/panels/CollectionTypeBreakdown.tsx b/src/pages/dashboard/panels/CollectionTypeBreakdown.tsx index 0bdc44b0e..9f2acce59 100644 --- a/src/pages/dashboard/panels/CollectionTypeBreakdown.tsx +++ b/src/pages/dashboard/panels/CollectionTypeBreakdown.tsx @@ -3,7 +3,7 @@ import { useSelector } from 'react-redux'; import { forEach } from 'lodash'; import { RootState } from '../../../core/store'; -import FixedPanel from '../../../components/Panels/FixedPanel'; +import ShokoPanel from '../../../components/Panels/ShokoPanel'; const colors = { Series: '#FF3F57', @@ -51,9 +51,9 @@ function CollectionTypeBreakdown() { }); return ( - + {items} - + ); }