mirror of
https://github.com/Radarr/Radarr.git
synced 2024-10-03 22:57:18 +02:00
Small UI fixes to discover movies
This commit is contained in:
parent
6b9a378eaf
commit
0ba3c08ea6
@ -50,7 +50,7 @@ $hoverScale: 1.05;
|
|||||||
.title {
|
.title {
|
||||||
@add-mixin truncate;
|
@add-mixin truncate;
|
||||||
|
|
||||||
background-color: #fafbfc;
|
background-color: var(--movieBackgroundColor);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: $smallFontSize;
|
font-size: $smallFontSize;
|
||||||
}
|
}
|
||||||
|
@ -92,6 +92,7 @@ class DiscoverMoviePoster extends Component {
|
|||||||
showRelativeDates,
|
showRelativeDates,
|
||||||
shortDateFormat,
|
shortDateFormat,
|
||||||
timeFormat,
|
timeFormat,
|
||||||
|
movieRuntimeFormat,
|
||||||
...otherProps
|
...otherProps
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
@ -110,7 +111,7 @@ class DiscoverMoviePoster extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.content}>
|
<div className={styles.content}>
|
||||||
<div className={styles.posterContainer}>
|
<div className={styles.posterContainer} title={title}>
|
||||||
{
|
{
|
||||||
<div className={styles.editorSelect}>
|
<div className={styles.editorSelect}>
|
||||||
<CheckInput
|
<CheckInput
|
||||||
@ -185,7 +186,7 @@ class DiscoverMoviePoster extends Component {
|
|||||||
|
|
||||||
{
|
{
|
||||||
showTitle &&
|
showTitle &&
|
||||||
<div className={styles.title}>
|
<div className={styles.title} title={title}>
|
||||||
{title}
|
{title}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@ -194,6 +195,7 @@ class DiscoverMoviePoster extends Component {
|
|||||||
showRelativeDates={showRelativeDates}
|
showRelativeDates={showRelativeDates}
|
||||||
shortDateFormat={shortDateFormat}
|
shortDateFormat={shortDateFormat}
|
||||||
timeFormat={timeFormat}
|
timeFormat={timeFormat}
|
||||||
|
movieRuntimeFormat={movieRuntimeFormat}
|
||||||
{...otherProps}
|
{...otherProps}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -236,6 +238,7 @@ DiscoverMoviePoster.propTypes = {
|
|||||||
showRelativeDates: PropTypes.bool.isRequired,
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
shortDateFormat: PropTypes.string.isRequired,
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired,
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
movieRuntimeFormat: PropTypes.string.isRequired,
|
||||||
isExisting: PropTypes.bool.isRequired,
|
isExisting: PropTypes.bool.isRequired,
|
||||||
isExcluded: PropTypes.bool.isRequired,
|
isExcluded: PropTypes.bool.isRequired,
|
||||||
isSelected: PropTypes.bool,
|
isSelected: PropTypes.bool,
|
||||||
|
@ -5,9 +5,11 @@ import DiscoverMoviePoster from './DiscoverMoviePoster';
|
|||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
|
(state) => state.settings.ui.item.movieRuntimeFormat,
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
( dimensions) => {
|
(movieRuntimeFormat, dimensions) => {
|
||||||
return {
|
return {
|
||||||
|
movieRuntimeFormat,
|
||||||
isSmallScreen: dimensions.isSmallScreen
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.info {
|
.info {
|
||||||
background-color: #fafbfc;
|
background-color: var(--movieBackgroundColor);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: $smallFontSize;
|
font-size: $smallFontSize;
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,12 @@
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
import TmdbRating from 'Components/TmdbRating';
|
import TmdbRating from 'Components/TmdbRating';
|
||||||
|
import { icons } from 'Helpers/Props';
|
||||||
import { getMovieStatusDetails } from 'Movie/MovieStatus';
|
import { getMovieStatusDetails } from 'Movie/MovieStatus';
|
||||||
import formatRuntime from 'Utilities/Date/formatRuntime';
|
import formatRuntime from 'Utilities/Date/formatRuntime';
|
||||||
import getRelativeDate from 'Utilities/Date/getRelativeDate';
|
import getRelativeDate from 'Utilities/Date/getRelativeDate';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
import styles from './DiscoverMoviePosterInfo.css';
|
import styles from './DiscoverMoviePosterInfo.css';
|
||||||
|
|
||||||
function DiscoverMoviePosterInfo(props) {
|
function DiscoverMoviePosterInfo(props) {
|
||||||
@ -19,12 +22,13 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
sortKey,
|
sortKey,
|
||||||
showRelativeDates,
|
showRelativeDates,
|
||||||
shortDateFormat,
|
shortDateFormat,
|
||||||
timeFormat
|
timeFormat,
|
||||||
|
movieRuntimeFormat
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
if (sortKey === 'status' && status) {
|
if (sortKey === 'status' && status) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('Status')}>
|
||||||
{getMovieStatusDetails(status).title}
|
{getMovieStatusDetails(status).title}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -32,7 +36,7 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
|
|
||||||
if (sortKey === 'studio' && studio) {
|
if (sortKey === 'studio' && studio) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('Studio')}>
|
||||||
{studio}
|
{studio}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -50,8 +54,8 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('InCinemas')}>
|
||||||
{`In Cinemas ${inCinemasDate}`}
|
<Icon name={icons.IN_CINEMAS} /> {inCinemasDate}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -68,8 +72,8 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('DigitalRelease')}>
|
||||||
{`Digital ${digitalReleaseDate}`}
|
<Icon name={icons.MOVIE_FILE} /> {digitalReleaseDate}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -86,15 +90,15 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('PhysicalRelease')}>
|
||||||
{`Released ${physicalReleaseDate}`}
|
<Icon name={icons.DISC} /> {physicalReleaseDate}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (sortKey === 'certification' && certification) {
|
if (sortKey === 'certification' && certification) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('Certification')}>
|
||||||
{certification}
|
{certification}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -102,8 +106,8 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
|
|
||||||
if (sortKey === 'runtime' && runtime) {
|
if (sortKey === 'runtime' && runtime) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info} title={translate('Runtime')}>
|
||||||
{formatRuntime(runtime)}
|
{formatRuntime(runtime, movieRuntimeFormat)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -111,9 +115,7 @@ function DiscoverMoviePosterInfo(props) {
|
|||||||
if (sortKey === 'ratings' && ratings) {
|
if (sortKey === 'ratings' && ratings) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
<TmdbRating
|
<TmdbRating ratings={ratings} />
|
||||||
ratings={ratings}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -133,7 +135,8 @@ DiscoverMoviePosterInfo.propTypes = {
|
|||||||
sortKey: PropTypes.string.isRequired,
|
sortKey: PropTypes.string.isRequired,
|
||||||
showRelativeDates: PropTypes.bool.isRequired,
|
showRelativeDates: PropTypes.bool.isRequired,
|
||||||
shortDateFormat: PropTypes.string.isRequired,
|
shortDateFormat: PropTypes.string.isRequired,
|
||||||
timeFormat: PropTypes.string.isRequired
|
timeFormat: PropTypes.string.isRequired,
|
||||||
|
movieRuntimeFormat: PropTypes.string.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
export default DiscoverMoviePosterInfo;
|
export default DiscoverMoviePosterInfo;
|
||||||
|
@ -76,6 +76,7 @@ class DiscoverMovieRow extends Component {
|
|||||||
ratings,
|
ratings,
|
||||||
popularity,
|
popularity,
|
||||||
certification,
|
certification,
|
||||||
|
movieRuntimeFormat,
|
||||||
collection,
|
collection,
|
||||||
columns,
|
columns,
|
||||||
isExisting,
|
isExisting,
|
||||||
@ -230,7 +231,7 @@ class DiscoverMovieRow extends Component {
|
|||||||
key={name}
|
key={name}
|
||||||
className={styles[name]}
|
className={styles[name]}
|
||||||
>
|
>
|
||||||
{formatRuntime(runtime)}
|
{formatRuntime(runtime, movieRuntimeFormat)}
|
||||||
</VirtualTableRowCell>
|
</VirtualTableRowCell>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -397,6 +398,7 @@ DiscoverMovieRow.propTypes = {
|
|||||||
popularity: PropTypes.number.isRequired,
|
popularity: PropTypes.number.isRequired,
|
||||||
certification: PropTypes.string,
|
certification: PropTypes.string,
|
||||||
collection: PropTypes.object,
|
collection: PropTypes.object,
|
||||||
|
movieRuntimeFormat: PropTypes.string.isRequired,
|
||||||
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
columns: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||||
isExisting: PropTypes.bool.isRequired,
|
isExisting: PropTypes.bool.isRequired,
|
||||||
isExcluded: PropTypes.bool.isRequired,
|
isExcluded: PropTypes.bool.isRequired,
|
||||||
|
@ -5,9 +5,11 @@ import DiscoverMovieRow from './DiscoverMovieRow';
|
|||||||
|
|
||||||
function createMapStateToProps() {
|
function createMapStateToProps() {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
|
(state) => state.settings.ui.item.movieRuntimeFormat,
|
||||||
createDimensionsSelector(),
|
createDimensionsSelector(),
|
||||||
(dimensions) => {
|
(movieRuntimeFormat, dimensions) => {
|
||||||
return {
|
return {
|
||||||
|
movieRuntimeFormat,
|
||||||
isSmallScreen: dimensions.isSmallScreen
|
isSmallScreen: dimensions.isSmallScreen
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user