diff --git a/frontend/src/Author/Details/AuthorDetails.css b/frontend/src/Author/Details/AuthorDetails.css index 242c52535..37cce9537 100644 --- a/frontend/src/Author/Details/AuthorDetails.css +++ b/frontend/src/Author/Details/AuthorDetails.css @@ -2,55 +2,12 @@ padding: 0; } -.header { - position: relative; - width: 100%; - height: 310px; -} - .errorMessage { margin-top: 20px; text-align: center; 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 { color: $helpTextColor; text-align: center; @@ -58,99 +15,6 @@ font-size: 20px; } -.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; -} - -.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; } @@ -180,13 +44,35 @@ margin-top: 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; + } +} + @media only screen and (max-width: $breakpointSmall) { .contentContainer { padding: 20px 0; } - .authorNavigationButtons, - .headerContent { + .authorNavigationButtons { padding: 15px; } @@ -197,15 +83,4 @@ .authorNavigationButton { display: none; } - - .title { - font-size: 30px; - line-height: 50px; - } -} - -@media only screen and (max-width: $breakpointLarge) { - .poster { - display: none; - } } diff --git a/frontend/src/Author/Details/AuthorDetailsHeader.css b/frontend/src/Author/Details/AuthorDetailsHeader.css new file mode 100644 index 000000000..c4458fbcd --- /dev/null +++ b/frontend/src/Author/Details/AuthorDetailsHeader.css @@ -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; + } +} diff --git a/frontend/src/Author/Details/AuthorDetailsHeader.js b/frontend/src/Author/Details/AuthorDetailsHeader.js index dc9ab2d0d..cc5d1d42e 100644 --- a/frontend/src/Author/Details/AuthorDetailsHeader.js +++ b/frontend/src/Author/Details/AuthorDetailsHeader.js @@ -18,7 +18,7 @@ import stripHtml from 'Utilities/String/stripHtml'; import AuthorAlternateTitles from './AuthorAlternateTitles'; import AuthorDetailsLinks from './AuthorDetailsLinks'; import AuthorTagsConnector from './AuthorTagsConnector'; -import styles from './AuthorDetails.css'; +import styles from './AuthorDetailsHeader.css'; const defaultFontSize = parseInt(fonts.defaultFontSize); const lineHeight = parseFloat(fonts.lineHeight); @@ -41,7 +41,8 @@ class AuthorDetailsHeader extends Component { super(props); this.state = { - overviewHeight: 0 + overviewHeight: 0, + titleWidth: 0 }; } @@ -49,9 +50,13 @@ class AuthorDetailsHeader extends Component { // Listeners onOverviewMeasure = ({ height }) => { - console.log(`overview measure ${height}`); this.setState({ overviewHeight: height }); } + + onTitleMeasure = ({ width }) => { + this.setState({ titleWidth: width }); + } + // // Render @@ -82,10 +87,11 @@ class AuthorDetailsHeader extends Component { } = statistics; const { - overviewHeight + overviewHeight, + titleWidth } = this.state; - const marqueeWidth = width - (isSmallScreen ? 115 : 225); + const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160); const continuing = status === 'continuing'; @@ -98,7 +104,7 @@ class AuthorDetailsHeader extends Component { } return ( -
+
-
+
}
-
+
diff --git a/frontend/src/Book/Details/BookDetails.css b/frontend/src/Book/Details/BookDetails.css index fb16a8426..1d057b1d9 100644 --- a/frontend/src/Book/Details/BookDetails.css +++ b/frontend/src/Book/Details/BookDetails.css @@ -2,141 +2,6 @@ padding: 0; } -.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; -} - -.bookNavigationButtons { - position: absolute; - right: 0; - z-index: 1; - margin-top: 10px; - padding: 30px; - white-space: nowrap; -} - -.bookUpButton, -.bookNavigationButton { - 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; -} - -.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; } @@ -170,13 +35,35 @@ float: right; } +.bookNavigationButtons { + position: absolute; + right: 0; + z-index: 1; + margin-top: 10px; + padding: 30px; + white-space: nowrap; +} + +.bookUpButton, +.bookNavigationButton { + composes: button from '~Components/Link/IconButton.css'; + + margin-left: 5px; + width: 30px; + color: #e1e2e3; + white-space: nowrap; + + &:hover { + color: $iconButtonHoverLightColor; + } +} + @media only screen and (max-width: $breakpointSmall) { .contentContainer { padding: 20px 0; } - .bookNavigationButtons, - .headerContent { + .bookNavigationButtons { padding: 15px; } @@ -187,15 +74,4 @@ .bookNavigationButton { display: none; } - - .title { - font-size: 30px; - line-height: 50px; - } -} - -@media only screen and (max-width: $breakpointLarge) { - .cover { - display: none; - } } diff --git a/frontend/src/Book/Details/BookDetailsHeader.css b/frontend/src/Book/Details/BookDetailsHeader.css new file mode 100644 index 000000000..f2db3cbcc --- /dev/null +++ b/frontend/src/Book/Details/BookDetailsHeader.css @@ -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; + } +} diff --git a/frontend/src/Book/Details/BookDetailsHeader.js b/frontend/src/Book/Details/BookDetailsHeader.js index e12bcb329..c41d67fb1 100644 --- a/frontend/src/Book/Details/BookDetailsHeader.js +++ b/frontend/src/Book/Details/BookDetailsHeader.js @@ -15,7 +15,7 @@ import fonts from 'Styles/Variables/fonts'; import formatBytes from 'Utilities/Number/formatBytes'; import stripHtml from 'Utilities/String/stripHtml'; import BookDetailsLinks from './BookDetailsLinks'; -import styles from './BookDetails.css'; +import styles from './BookDetailsHeader.css'; const defaultFontSize = parseInt(fonts.defaultFontSize); const lineHeight = parseFloat(fonts.lineHeight); @@ -38,7 +38,8 @@ class BookDetailsHeader extends Component { super(props); this.state = { - overviewHeight: 0 + overviewHeight: 0, + titleWidth: 0 }; } @@ -49,6 +50,10 @@ class BookDetailsHeader extends Component { this.setState({ overviewHeight: height }); } + onTitleMeasure = ({ width }) => { + this.setState({ titleWidth: width }); + } + // // Render @@ -74,13 +79,14 @@ class BookDetailsHeader extends Component { } = this.props; const { - overviewHeight + overviewHeight, + titleWidth } = this.state; - const marqueeWidth = width - (isSmallScreen ? 115 : 225); + const marqueeWidth = titleWidth - (isSmallScreen ? 85 : 160); return ( -
+
-
+
-
+
diff --git a/frontend/src/Components/Measure.js b/frontend/src/Components/Measure.js index 8a8cc54ab..52b0fa429 100644 --- a/frontend/src/Components/Measure.js +++ b/frontend/src/Components/Measure.js @@ -1,23 +1,15 @@ -import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import ReactMeasure from 'react-measure'; class Measure extends Component { - // - // Lifecycle - - componentWillUnmount() { - this.onMeasure.cancel(); - } - // // Listeners - onMeasure = _.debounce((payload) => { + onMeasure = (payload) => { this.props.onMeasure(payload.bounds); - }, 250, { leading: true, trailing: true }) + } // // Render diff --git a/frontend/src/Components/Swipe/SwipeHeader.js b/frontend/src/Components/Swipe/SwipeHeader.js index b168ec286..b68b61595 100644 --- a/frontend/src/Components/Swipe/SwipeHeader.js +++ b/frontend/src/Components/Swipe/SwipeHeader.js @@ -194,9 +194,6 @@ class SwipeHeader extends Component { '--transition': useTransition ? `transform ${transitionDuration}ms ease-out` : undefined }; - console.log(`stage: ${stage} translate: ${translate} width: ${containerWidth}`); - console.log(style); - return (