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,41 +15,33 @@ font-size: 20px; } -.titleRow { - position: relative; - display: flex; - justify-content: space-between; - flex: 0 0 auto; -} - -.titleContainer { - display: flex; - margin-top: -5px; +.contentContainer { + padding: 20px; } -.title { - font-weight: 300; - font-size: 50px; - line-height: 60px; +.tabList { + margin: 0; + padding: 0; + border-bottom: 1px solid $lightGray; } -.toggleMonitoredContainer { - align-self: center; +.tab { + position: relative; + bottom: -1px; + display: inline-block; + padding: 6px 12px; + border: 1px solid transparent; + border-top: none; + list-style: none; + cursor: pointer; } -.monitorToggleButton { - composes: toggleButton from '~Components/MonitorToggleButton.css'; - - width: 40px; - - &:hover { - color: $iconButtonHoverLightColor; - } +.selectedTab { + border-bottom: 4px solid $linkColor; } -.alternateTitlesIconContainer { - align-self: flex-end; - margin-left: 20px; +.tabContent { + margin-top: 20px; } .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) { .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,84 +2,37 @@ 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; +.contentContainer { + padding: 20px; } -.info { - display: flex; - flex-direction: column; - flex-grow: 1; - overflow: hidden; +.tabList { + margin: 0; + padding: 0; + border-bottom: 1px solid $lightGray; } -.titleRow { +.tab { 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; + bottom: -1px; + display: inline-block; + padding: 6px 12px; + border: 1px solid transparent; + border-top: none; + list-style: none; + cursor: pointer; } -.toggleMonitoredContainer { - align-self: center; +.selectedTab { + border-bottom: 4px solid $linkColor; } -.monitorToggleButton { - composes: toggleButton from '~Components/MonitorToggleButton.css'; - - width: 40px; - - &:hover { - color: $iconButtonHoverLightColor; - } +.tabContent { + margin-top: 20px; } -.alternateTitlesIconContainer { - align-self: flex-end; - margin-left: 20px; +.filterIcon { + float: right; } .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) { .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 (