diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.css b/frontend/src/Series/Index/Posters/SeriesIndexPosters.css index d80f951a0..9c6520fb5 100644 --- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.css +++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.css @@ -1,7 +1,3 @@ .grid { flex: 1 0 auto; } - -.container { - padding: 10px; -} diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js index a25914743..44201f56c 100644 --- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js +++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js @@ -106,6 +106,7 @@ class SeriesIndexPosters extends Component { this._isInitialized = false; this._grid = null; + this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding; } componentDidUpdate(prevProps, prevState) { @@ -113,7 +114,8 @@ class SeriesIndexPosters extends Component { items, sortKey, posterOptions, - jumpToCharacter + jumpToCharacter, + isSmallScreen } = this.props; const { @@ -125,7 +127,7 @@ class SeriesIndexPosters extends Component { if (prevProps.sortKey !== sortKey || prevProps.posterOptions !== posterOptions) { - this.calculateGrid(); + this.calculateGrid(width, isSmallScreen); } if (this._grid && @@ -165,10 +167,9 @@ class SeriesIndexPosters extends Component { posterOptions } = this.props; - const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding; const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen); const columnCount = Math.max(Math.floor(width / columnWidth), 1); - const posterWidth = columnWidth - padding; + const posterWidth = columnWidth - this._padding * 2; const posterHeight = calculatePosterHeight(posterWidth); const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions); @@ -213,9 +214,11 @@ class SeriesIndexPosters extends Component { return (