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