diff --git a/frontend/src/App/State/SeriesAppState.ts b/frontend/src/App/State/SeriesAppState.ts index f9c216bdc..8d13f0c0b 100644 --- a/frontend/src/App/State/SeriesAppState.ts +++ b/frontend/src/App/State/SeriesAppState.ts @@ -20,6 +20,7 @@ export interface SeriesIndexAppState { showTitle: boolean; showMonitored: boolean; showQualityProfile: boolean; + showTags: boolean; showSearchAction: boolean; }; @@ -34,6 +35,7 @@ export interface SeriesIndexAppState { showSeasonCount: boolean; showPath: boolean; showSizeOnDisk: boolean; + showTags: boolean; showSearchAction: boolean; }; diff --git a/frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx b/frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx index f9d17d222..731403829 100644 --- a/frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx +++ b/frontend/src/Series/Index/Overview/Options/SeriesIndexOverviewOptionsModalContent.tsx @@ -55,6 +55,7 @@ function SeriesIndexOverviewOptionsModalContent( showSeasonCount, showPath, showSizeOnDisk, + showTags, showSearchAction, } = useSelector(selectOverviewOptions); @@ -185,6 +186,17 @@ function SeriesIndexOverviewOptionsModalContent( /> + + {translate('ShowTags')} + + + + {translate('ShowSearch')} diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverview.css b/frontend/src/Series/Index/Overview/SeriesIndexOverview.css index 1f482a2d6..999f15a41 100644 --- a/frontend/src/Series/Index/Overview/SeriesIndexOverview.css +++ b/frontend/src/Series/Index/Overview/SeriesIndexOverview.css @@ -73,14 +73,26 @@ $hoverScale: 1.05; flex: 1 0 auto; } +.overviewContainer { + display: flex; + justify-content: space-between; + flex: 0 1 1000px; + flex-direction: column; +} + .overview { composes: link; - flex: 0 1 1000px; overflow: hidden; min-height: 0; } +.tags { + display: flex; + justify-content: space-around; + overflow: hidden; +} + @media only screen and (max-width: $breakpointSmall) { .overview { display: none; diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts b/frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts index de94277cc..5dfbab8ee 100644 --- a/frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts +++ b/frontend/src/Series/Index/Overview/SeriesIndexOverview.css.d.ts @@ -8,8 +8,10 @@ interface CssExports { 'info': string; 'link': string; 'overview': string; + 'overviewContainer': string; 'poster': string; 'posterContainer': string; + 'tags': string; 'title': string; 'titleRow': string; } diff --git a/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx b/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx index d38c787d3..f7d7c3b50 100644 --- a/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx +++ b/frontend/src/Series/Index/Overview/SeriesIndexOverview.tsx @@ -5,6 +5,7 @@ import { REFRESH_SERIES, SERIES_SEARCH } from 'Commands/commandNames'; import IconButton from 'Components/Link/IconButton'; import Link from 'Components/Link/Link'; import SpinnerIconButton from 'Components/Link/SpinnerIconButton'; +import TagListConnector from 'Components/TagListConnector'; import { icons } from 'Helpers/Props'; import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal'; import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector'; @@ -70,6 +71,7 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) { overview, statistics = {} as Statistics, images, + tags, network, } = series; @@ -205,15 +207,22 @@ function SeriesIndexOverview(props: SeriesIndexOverviewProps) {
- - - +
+ + + + {overviewOptions.showTags ? ( +
+ +
+ ) : null} +
+ + {translate('ShowTags')} + + + + {translate('ShowSearch')} diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.css b/frontend/src/Series/Index/Posters/SeriesIndexPoster.css index 83dda335a..bc708f6cd 100644 --- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.css +++ b/frontend/src/Series/Index/Posters/SeriesIndexPoster.css @@ -57,6 +57,20 @@ $hoverScale: 1.05; font-size: $smallFontSize; } +.tags { + display: flex; + align-items: center; + justify-content: space-around; + padding: 0 3px; + height: 21px; + background-color: var(--seriesBackgroundColor); +} + +.tagsList { + display: flex; + overflow: hidden; +} + .ended { position: absolute; top: 0; diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts b/frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts index a40dbcefd..ad1ccb597 100644 --- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts +++ b/frontend/src/Series/Index/Posters/SeriesIndexPoster.css.d.ts @@ -10,6 +10,8 @@ interface CssExports { 'nextAiring': string; 'overlayTitle': string; 'posterContainer': string; + 'tags': string; + 'tagsList': string; 'title': string; } export const cssExports: CssExports; diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx index b2015eaf5..474a226d9 100644 --- a/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx +++ b/frontend/src/Series/Index/Posters/SeriesIndexPoster.tsx @@ -5,6 +5,7 @@ import Label from 'Components/Label'; import IconButton from 'Components/Link/IconButton'; import Link from 'Components/Link/Link'; import SpinnerIconButton from 'Components/Link/SpinnerIconButton'; +import TagListConnector from 'Components/TagListConnector'; import { icons } from 'Helpers/Props'; import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal'; import EditSeriesModalConnector from 'Series/Edit/EditSeriesModalConnector'; @@ -41,6 +42,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) { showTitle, showMonitored, showQualityProfile, + showTags, showSearchAction, } = useSelector(selectPosterOptions); @@ -60,6 +62,7 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) { added, statistics = {} as Statistics, images, + tags, } = series; const { @@ -208,6 +211,14 @@ function SeriesIndexPoster(props: SeriesIndexPosterProps) {
) : null} + {showTags && tags.length ? ( +
+
+ +
+
+ ) : null} + {nextAiring ? (