New: Show genres on series details page

Closes #4734
This commit is contained in:
Mark McDowall 2021-11-28 16:25:56 -08:00
parent 2d0541c03b
commit 226d94b050
3 changed files with 61 additions and 0 deletions

View File

@ -31,6 +31,7 @@ import DeleteSeriesModal from 'Series/Delete/DeleteSeriesModal';
import SeriesHistoryModal from 'Series/History/SeriesHistoryModal';
import SeriesAlternateTitles from './SeriesAlternateTitles';
import SeriesDetailsSeasonConnector from './SeriesDetailsSeasonConnector';
import SeriesGenres from './SeriesGenres';
import SeriesTagsConnector from './SeriesTagsConnector';
import SeriesDetailsLinks from './SeriesDetailsLinks';
import MonitoringOptionsModal from 'Series/MonitoringOptions/MonitoringOptionsModal';
@ -186,6 +187,7 @@ class SeriesDetails extends Component {
images,
seasons,
alternateTitles,
genres,
tags,
year,
previousAiring,
@ -406,6 +408,8 @@ class SeriesDetails extends Component {
iconSize={20}
/>
<SeriesGenres genres={genres} />
<span>
{runningYears}
</span>
@ -699,6 +703,7 @@ SeriesDetails.propTypes = {
images: PropTypes.arrayOf(PropTypes.object).isRequired,
seasons: PropTypes.arrayOf(PropTypes.object).isRequired,
alternateTitles: PropTypes.arrayOf(PropTypes.object).isRequired,
genres: PropTypes.arrayOf(PropTypes.string).isRequired,
tags: PropTypes.arrayOf(PropTypes.number).isRequired,
year: PropTypes.number.isRequired,
previousAiring: PropTypes.string,

View File

@ -0,0 +1,3 @@
.genres {
margin-right: 15px;
}

View File

@ -0,0 +1,53 @@
import PropTypes from 'prop-types';
import React from 'react';
import { kinds, sizes, tooltipPositions } from 'Helpers/Props';
import Tooltip from 'Components/Tooltip/Tooltip';
import Label from 'Components/Label';
import styles from './SeriesGenres.css';
function SeriesGenres({ genres }) {
const [firstGenre, ...otherGenres] = genres;
if (otherGenres.length) {
return (
<Tooltip
anchor={
<span className={styles.genres}>
{firstGenre}
</span>
}
tooltip={
<div>
{
otherGenres.map((tag) => {
return (
<Label
key={tag}
kind={kinds.INFO}
size={sizes.LARGE}
>
{tag}
</Label>
);
})
}
</div>
}
kind={kinds.INVERSE}
position={tooltipPositions.TOP}
/>
);
}
return (
<span className={styles.genres}>
{firstGenre}
</span>
);
}
SeriesGenres.propTypes = {
genres: PropTypes.arrayOf(PropTypes.string).isRequired
};
export default SeriesGenres;