mirror
/
Lidarr
mirror of https://github.com/lidarr/Lidarr
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed: Ended overlay on artist posters 

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
Qstick 2020-10-02 22:37:15 -04:00
parent 4857828d80
commit 919d16607a
4 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/Artist/Index/Posters/ArtistIndexPoster.css
View File

@ -1,9 +1,5 @@
$hoverScale: 1.05; $hoverScale: 1.05;
.container {
padding: 10px;
}
.content { .content {
transition: all 200ms ease-in; transition: all 200ms ease-in;

2
frontend/src/Artist/Index/Posters/ArtistIndexPoster.js
View File

@ -115,7 +115,7 @@ class ArtistIndexPoster extends Component {
}; };
return ( return (
<div className={styles.container}> <div>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.posterContainer}> <div className={styles.posterContainer}>
<Label className={styles.controls}> <Label className={styles.controls}>

22
frontend/src/Artist/Index/Posters/ArtistIndexPosters.js
View File

@ -105,6 +105,7 @@ class ArtistIndexPosters extends Component {
this._isInitialized = false; this._isInitialized = false;
this._grid = null; this._grid = null;
this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding;
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
@ -113,7 +114,8 @@ class ArtistIndexPosters extends Component {
sortKey, sortKey,
posterOptions, posterOptions,
jumpToCharacter, jumpToCharacter,
scrollTop scrollTop,
isSmallScreen
} = this.props; } = this.props;
const { const {
@ -125,7 +127,7 @@ class ArtistIndexPosters extends Component {
if (prevProps.sortKey !== sortKey || if (prevProps.sortKey !== sortKey ||
prevProps.posterOptions !== posterOptions) { prevProps.posterOptions !== posterOptions) {
this.calculateGrid(); this.calculateGrid(width, isSmallScreen);
} }
if (this._grid && if (this._grid &&
@ -169,10 +171,9 @@ class ArtistIndexPosters extends Component {
posterOptions posterOptions
} = this.props; } = this.props;
const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen); const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
const columnCount = Math.max(Math.floor(width / columnWidth), 1); const columnCount = Math.max(Math.floor(width / columnWidth), 1);
const posterWidth = columnWidth - padding; const posterWidth = columnWidth - this._padding * 2;
const posterHeight = calculatePosterHeight(posterWidth); const posterHeight = calculatePosterHeight(posterWidth);
const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions); const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
@ -209,8 +210,7 @@ class ArtistIndexPosters extends Component {
showQualityProfile showQualityProfile
} = posterOptions; } = posterOptions;
const artistIdx = rowIndex * columnCount + columnIndex; const artist = items[rowIndex * columnCount + columnIndex];
const artist = items[artistIdx];
if (!artist) { if (!artist) {
return null; return null;
@ -219,7 +219,10 @@ class ArtistIndexPosters extends Component {
return ( return (
<div <div
key={key} key={key}
style={style} style={{
...style,
padding: this._padding
}}
> >
<ArtistIndexItemConnector <ArtistIndexItemConnector
key={artist.id} key={artist.id}
@ -234,6 +237,7 @@ class ArtistIndexPosters extends Component {
showRelativeDates={showRelativeDates} showRelativeDates={showRelativeDates}
shortDateFormat={shortDateFormat} shortDateFormat={shortDateFormat}
timeFormat={timeFormat} timeFormat={timeFormat}
style={style}
artistId={artist.id} artistId={artist.id}
qualityProfileId={artist.qualityProfileId} qualityProfileId={artist.qualityProfileId}
metadataProfileId={artist.metadataProfileId} metadataProfileId={artist.metadataProfileId}
@ -254,9 +258,9 @@ class ArtistIndexPosters extends Component {
render() { render() {
const { const {
scroller,
items, items,
isSmallScreen, isSmallScreen
scroller
} = this.props; } = this.props;
const { const {

4
frontend/src/Styles/Variables/dimensions.js
View File

@ -47,7 +47,7 @@ module.exports = {
modalBodyPadding: '30px', modalBodyPadding: '30px',
// Artist // Artist
artistIndexColumnPadding: '20px', artistIndexColumnPadding: '10px',
artistIndexColumnPaddingSmallScreen: '10px', artistIndexColumnPaddingSmallScreen: '5px',
artistIndexOverviewInfoRowHeight: '21px' artistIndexOverviewInfoRowHeight: '21px'
}; };