open-source-mirrors
/
Readarr
mirror of https://github.com/Readarr/Readarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed: Misaligned Book/Author details on large screens

Browse Source
pull/965/head
ta264 4 years ago
parent 9d77337726
commit 2691cb3fce
9 changed files with 353 additions and 320 deletions
Show Stats Download Patch File Download Diff File

165
frontend/src/Author/Details/AuthorDetails.css
Unescape View File

@ -2,55 +2,12 @@
padding: 0; padding: 0;
} }
.header {
position: relative;
width: 100%;
height: 310px;
}
.errorMessage { .errorMessage {
margin-top: 20px; margin-top: 20px;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
.backdrop {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-size: cover;
}
.backdropOverlay {
position: absolute;
width: 100%;
height: 100%;
background: $black;
opacity: 0.7;
}
.headerContent {
display: flex;
padding: 30px;
width: 100%;
height: 100%;
color: $white;
}
.poster {
flex-shrink: 0;
margin-right: 35px;
height: 250px;
}
.info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.metadataMessage { .metadataMessage {
color: $helpTextColor; color: $helpTextColor;
text-align: center; text-align: center;
@ -58,41 +15,33 @@
font-size: 20px; font-size: 20px;
} }
.titleRow { .contentContainer {
position: relative; padding: 20px;
display: flex;
justify-content: space-between;
flex: 0 0 auto;
}
.titleContainer {
display: flex;
margin-top: -5px;
} }
.title { .tabList {
font-weight: 300; margin: 0;
font-size: 50px; padding: 0;
line-height: 60px; border-bottom: 1px solid $lightGray;
} }
.toggleMonitoredContainer { .tab {
align-self: center; position: relative;
bottom: -1px;
display: inline-block;
padding: 6px 12px;
border: 1px solid transparent;
border-top: none;
list-style: none;
cursor: pointer;
} }
.monitorToggleButton { .selectedTab {
composes: toggleButton from '~Components/MonitorToggleButton.css'; border-bottom: 4px solid $linkColor;
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
}
} }
.alternateTitlesIconContainer { .tabContent {
align-self: flex-end; margin-top: 20px;
margin-left: 20px;
} }
.authorNavigationButtons { .authorNavigationButtons {
@ -118,75 +67,12 @@
} }
} }
.details {
margin-bottom: 8px;
font-weight: 300;
font-size: 20px;
}
.runtime {
margin-right: 15px;
}
.detailsLabel {
composes: label from '~Components/Label.css';
margin: 5px 10px 5px 0;
}
.path,
.sizeOnDisk,
.qualityProfileName,
.links,
.tags {
margin-left: 8px;
font-weight: 300;
font-size: 17px;
}
.overview {
flex: 1 1 auto;
margin-top: 8px;
min-height: 0;
font-size: $intermediateFontSize;
}
.contentContainer {
padding: 20px;
}
.tabList {
margin: 0;
padding: 0;
border-bottom: 1px solid $lightGray;
}
.tab {
position: relative;
bottom: -1px;
display: inline-block;
padding: 6px 12px;
border: 1px solid transparent;
border-top: none;
list-style: none;
cursor: pointer;
}
.selectedTab {
border-bottom: 4px solid $linkColor;
}
.tabContent {
margin-top: 20px;
}
@media only screen and (max-width: $breakpointSmall) { @media only screen and (max-width: $breakpointSmall) {
.contentContainer { .contentContainer {
padding: 20px 0; padding: 20px 0;
} }
.authorNavigationButtons, .authorNavigationButtons {
.headerContent {
padding: 15px; padding: 15px;
} }
@ -197,15 +83,4 @@
.authorNavigationButton { .authorNavigationButton {
display: none; display: none;
} }
.title {
font-size: 30px;
line-height: 50px;
}
}
@media only screen and (max-width: $breakpointLarge) {
.poster {
display: none;
}
} }

148
frontend/src/Author/Details/AuthorDetailsHeader.css
Unescape View File

@ -0,0 +1,148 @@
.header {
position: relative;
width: 100%;
height: 310px;
}
.backdrop {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-size: cover;
}
.backdropOverlay {
position: absolute;
width: 100%;
height: 100%;
background: $black;
opacity: 0.7;
}
.headerContent {
display: flex;
padding: 30px;
width: 100%;
height: 100%;
color: $white;
}
.poster {
flex-shrink: 0;
margin-right: 35px;
height: 250px;
}
.info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.titleRow {
position: relative;
display: flex;
justify-content: space-between;
flex: 0 0 auto;
}
.titleContainer {
display: flex;
margin-top: -5px;
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 60px;
}
.toggleMonitoredContainer {
align-self: center;
}
.monitorToggleButton {
composes: toggleButton from '~Components/MonitorToggleButton.css';
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
}
}
.alternateTitlesIconContainer {
align-self: flex-end;
margin-left: 20px;
}
.authorNavigationButtons {
position: absolute;
right: 0;
z-index: 1;
margin-top: 10px;
padding: 30px;
white-space: nowrap;
}
.authorUpButton,
.authorNavigationButton {
composes: button from '~Components/Link/IconButton.css';
margin-left: 5px;
width: 30px;
color: #e1e2e3;
white-space: nowrap;
&:hover {
color: $iconButtonHoverLightColor;
}
}
.details {
margin-bottom: 8px;
font-weight: 300;
font-size: 20px;
}
.detailsLabel {
composes: label from '~Components/Label.css';
margin: 5px 10px 5px 0;
}
.path,
.sizeOnDisk,
.qualityProfileName,
.links,
.tags {
margin-left: 8px;
font-weight: 300;
font-size: 17px;
}
.overview {
flex: 1 1 auto;
margin-top: 8px;
min-height: 0;
font-size: $intermediateFontSize;
}
@media only screen and (max-width: $breakpointSmall) {
.headerContent {
padding: 15px;
}
.title {
font-size: 30px;
line-height: 50px;
}
}
@media only screen and (max-width: $breakpointLarge) {
.poster {
display: none;
}
}

25
frontend/src/Author/Details/AuthorDetailsHeader.js
Unescape View File

@ -18,7 +18,7 @@ import stripHtml from 'Utilities/String/stripHtml';
import AuthorAlternateTitles from './AuthorAlternateTitles'; import AuthorAlternateTitles from './AuthorAlternateTitles';
import AuthorDetailsLinks from './AuthorDetailsLinks'; import AuthorDetailsLinks from './AuthorDetailsLinks';
import AuthorTagsConnector from './AuthorTagsConnector'; import AuthorTagsConnector from './AuthorTagsConnector';
import styles from './AuthorDetails.css'; import styles from './AuthorDetailsHeader.css';
const defaultFontSize = parseInt(fonts.defaultFontSize); const defaultFontSize = parseInt(fonts.defaultFontSize);
const lineHeight = parseFloat(fonts.lineHeight); const lineHeight = parseFloat(fonts.lineHeight);
@ -41,7 +41,8 @@ class AuthorDetailsHeader extends Component {
super(props); super(props);
this.state = { this.state = {
overviewHeight: 0 overviewHeight: 0,
titleWidth: 0
}; };
} }
@ -49,9 +50,13 @@ class AuthorDetailsHeader extends Component {
// Listeners // Listeners
onOverviewMeasure = ({ height }) => { onOverviewMeasure = ({ height }) => {
console.log(`overview measure ${height}`);
this.setState({ overviewHeight: height }); this.setState({ overviewHeight: height });
} }
onTitleMeasure = ({ width }) => {
this.setState({ titleWidth: width });
}
// //
// Render // Render
@ -82,10 +87,11 @@ class AuthorDetailsHeader extends Component {
} = statistics; } = statistics;
const { const {
overviewHeight overviewHeight,
titleWidth
} = this.state; } = this.state;
const marqueeWidth = width - (isSmallScreen ? 115 : 225); const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160);
const continuing = status === 'continuing'; const continuing = status === 'continuing';
@ -98,7 +104,7 @@ class AuthorDetailsHeader extends Component {
} }
return ( return (
<div className={styles.header}> <div className={styles.header} style={{ width }} >
<div <div
className={styles.backdrop} className={styles.backdrop}
style={{ style={{
@ -117,7 +123,10 @@ class AuthorDetailsHeader extends Component {
/> />
<div className={styles.info}> <div className={styles.info}>
<div className={styles.titleRow}> <Measure
className={styles.titleRow}
onMeasure={this.onTitleMeasure}
>
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<div className={styles.toggleMonitoredContainer}> <div className={styles.toggleMonitoredContainer}>
<MonitorToggleButton <MonitorToggleButton
@ -150,7 +159,7 @@ class AuthorDetailsHeader extends Component {
</div> </div>
} }
</div> </div>
</div> </Measure>
<div className={styles.details}> <div className={styles.details}>
<div> <div>

166
frontend/src/Book/Details/BookDetails.css
Unescape View File

@ -2,84 +2,37 @@
padding: 0; padding: 0;
} }
.header { .contentContainer {
position: relative; padding: 20px;
width: 100%;
height: 310px;
}
.backdrop {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-size: cover;
}
.backdropOverlay {
position: absolute;
width: 100%;
height: 100%;
background: $black;
opacity: 0.7;
}
.headerContent {
display: flex;
padding: 30px;
width: 100%;
height: 100%;
color: $white;
}
.cover {
flex-shrink: 0;
margin-right: 35px;
height: 250px;
} }
.info { .tabList {
display: flex; margin: 0;
flex-direction: column; padding: 0;
flex-grow: 1; border-bottom: 1px solid $lightGray;
overflow: hidden;
} }
.titleRow { .tab {
position: relative; position: relative;
display: flex; bottom: -1px;
justify-content: space-between; display: inline-block;
flex: 0 0 auto; padding: 6px 12px;
} border: 1px solid transparent;
border-top: none;
.titleContainer { list-style: none;
display: flex; cursor: pointer;
margin-top: -5px;
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 60px;
} }
.toggleMonitoredContainer { .selectedTab {
align-self: center; border-bottom: 4px solid $linkColor;
} }
.monitorToggleButton { .tabContent {
composes: toggleButton from '~Components/MonitorToggleButton.css'; margin-top: 20px;
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
}
} }
.alternateTitlesIconContainer { .filterIcon {
align-self: flex-end; float: right;
margin-left: 20px;
} }
.bookNavigationButtons { .bookNavigationButtons {
@ -105,78 +58,12 @@
} }
} }
.details {
margin-bottom: 8px;
font-weight: 300;
font-size: 20px;
}
.duration {
margin-right: 15px;
}
.detailsLabel {
composes: label from '~Components/Label.css';
margin: 5px 10px 5px 0;
}
.sizeOnDisk,
.qualityProfileName,
.links,
.tags {
margin-left: 8px;
font-weight: 300;
font-size: 17px;
}
.overview {
flex: 1 1 auto;
margin-top: 4px;
min-height: 0;
font-size: $intermediateFontSize;
}
.contentContainer {
padding: 20px;
}
.tabList {
margin: 0;
padding: 0;
border-bottom: 1px solid $lightGray;
}
.tab {
position: relative;
bottom: -1px;
display: inline-block;
padding: 6px 12px;
border: 1px solid transparent;
border-top: none;
list-style: none;
cursor: pointer;
}
.selectedTab {
border-bottom: 4px solid $linkColor;
}
.tabContent {
margin-top: 20px;
}
.filterIcon {
float: right;
}
@media only screen and (max-width: $breakpointSmall) { @media only screen and (max-width: $breakpointSmall) {
.contentContainer { .contentContainer {
padding: 20px 0; padding: 20px 0;
} }
.bookNavigationButtons, .bookNavigationButtons {
.headerContent {
padding: 15px; padding: 15px;
} }
@ -187,15 +74,4 @@
.bookNavigationButton { .bookNavigationButton {
display: none; display: none;
} }
.title {
font-size: 30px;
line-height: 50px;
}
}
@media only screen and (max-width: $breakpointLarge) {
.cover {
display: none;
}
} }

128
frontend/src/Book/Details/BookDetailsHeader.css
Unescape View File

@ -0,0 +1,128 @@
.header {
position: relative;
width: 100%;
height: 310px;
}
.backdrop {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-size: cover;
}
.backdropOverlay {
position: absolute;
width: 100%;
height: 100%;
background: $black;
opacity: 0.7;
}
.headerContent {
display: flex;
padding: 30px;
width: 100%;
height: 100%;
color: $white;
}
.cover {
flex-shrink: 0;
margin-right: 35px;
height: 250px;
}
.info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.titleRow {
position: relative;
display: flex;
justify-content: space-between;
flex: 0 0 auto;
}
.titleContainer {
display: flex;
margin-top: -5px;
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 60px;
}
.toggleMonitoredContainer {
align-self: center;
}
.monitorToggleButton {
composes: toggleButton from '~Components/MonitorToggleButton.css';
width: 40px;
&:hover {
color: $iconButtonHoverLightColor;
}
}
.alternateTitlesIconContainer {
align-self: flex-end;
margin-left: 20px;
}
.details {
margin-bottom: 8px;
font-weight: 300;
font-size: 20px;
}
.duration {
margin-right: 15px;
}
.detailsLabel {
composes: label from '~Components/Label.css';
margin: 5px 10px 5px 0;
}
.sizeOnDisk,
.qualityProfileName,
.links,
.tags {
margin-left: 8px;
font-weight: 300;
font-size: 17px;
}
.overview {
flex: 1 1 auto;
margin-top: 4px;
min-height: 0;
font-size: $intermediateFontSize;
}
@media only screen and (max-width: $breakpointSmall) {
.headerContent {
padding: 15px;
}
.title {
font-size: 30px;
line-height: 50px;
}
}
@media only screen and (max-width: $breakpointLarge) {
.cover {
display: none;
}
}

23
frontend/src/Book/Details/BookDetailsHeader.js
Unescape View File

@ -15,7 +15,7 @@ import fonts from 'Styles/Variables/fonts';
import formatBytes from 'Utilities/Number/formatBytes'; import formatBytes from 'Utilities/Number/formatBytes';
import stripHtml from 'Utilities/String/stripHtml'; import stripHtml from 'Utilities/String/stripHtml';
import BookDetailsLinks from './BookDetailsLinks'; import BookDetailsLinks from './BookDetailsLinks';
import styles from './BookDetails.css'; import styles from './BookDetailsHeader.css';
const defaultFontSize = parseInt(fonts.defaultFontSize); const defaultFontSize = parseInt(fonts.defaultFontSize);
const lineHeight = parseFloat(fonts.lineHeight); const lineHeight = parseFloat(fonts.lineHeight);
@ -38,7 +38,8 @@ class BookDetailsHeader extends Component {
super(props); super(props);
this.state = { this.state = {
overviewHeight: 0 overviewHeight: 0,
titleWidth: 0
}; };
} }
@ -49,6 +50,10 @@ class BookDetailsHeader extends Component {
this.setState({ overviewHeight: height }); this.setState({ overviewHeight: height });
} }
onTitleMeasure = ({ width }) => {
this.setState({ titleWidth: width });
}
// //
// Render // Render
@ -74,13 +79,14 @@ class BookDetailsHeader extends Component {
} = this.props; } = this.props;
const { const {
overviewHeight overviewHeight,
titleWidth
} = this.state; } = this.state;
const marqueeWidth = width - (isSmallScreen ? 115 : 225); const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160);
return ( return (
<div className={styles.header}> <div className={styles.header} style={{ width }}>
<div <div
className={styles.backdrop} className={styles.backdrop}
style={{ style={{
@ -99,7 +105,10 @@ class BookDetailsHeader extends Component {
/> />
<div className={styles.info}> <div className={styles.info}>
<div className={styles.titleRow}> <Measure
className={styles.titleRow}
onMeasure={this.onTitleMeasure}
>
<div className={styles.titleContainer}> <div className={styles.titleContainer}>
<div className={styles.toggleMonitoredContainer}> <div className={styles.toggleMonitoredContainer}>
<MonitorToggleButton <MonitorToggleButton
@ -116,7 +125,7 @@ class BookDetailsHeader extends Component {
</div> </div>
</div> </div>
</div> </Measure>
<div className={styles.details}> <div className={styles.details}>
<div> <div>

12
frontend/src/Components/Measure.js
Unescape View File

@ -1,23 +1,15 @@
import _ from 'lodash';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactMeasure from 'react-measure'; import ReactMeasure from 'react-measure';
class Measure extends Component { class Measure extends Component {
//
// Lifecycle
componentWillUnmount() {
this.onMeasure.cancel();
}
// //
// Listeners // Listeners
onMeasure = _.debounce((payload) => { onMeasure = (payload) => {
this.props.onMeasure(payload.bounds); this.props.onMeasure(payload.bounds);
}, 250, { leading: true, trailing: true }) }
// //
// Render // Render

3
frontend/src/Components/Swipe/SwipeHeader.js
Unescape View File

@ -194,9 +194,6 @@ class SwipeHeader extends Component {
'--transition': useTransition ? `transform ${transitionDuration}ms ease-out` : undefined '--transition': useTransition ? `transform ${transitionDuration}ms ease-out` : undefined
}; };
console.log(`stage: ${stage} translate: ${translate} width: ${containerWidth}`);
console.log(style);
return ( return (
<Measure <Measure
className={className} className={className}

3
frontend/src/Store/Actions/appActions.js
Unescape View File

@ -10,7 +10,7 @@ function getDimensions(width, height) {
height, height,
isExtraSmallScreen: width <= 480, isExtraSmallScreen: width <= 480,
isSmallScreen: width <= 768, isSmallScreen: width <= 768,
isMediumScreen: width <= 992, isMediumScreen: width <= 1310,
isLargeScreen: width <= 1200 isLargeScreen: width <= 1200
}; };
@ -132,4 +132,3 @@ export const reducers = createHandleActions({
} }
}, defaultState, section); }, defaultState, section);

Write Preview
Loading…
Cancel
Save