mirror of
https://github.com/Readarr/Readarr
synced 2025-12-31 20:52:35 +01:00
Fixed: Misaligned Book/Author details on large screens
This commit is contained in:
ta264
parent
9d77337726
commit
2691cb3fce
9 changed files with 360 additions and 327 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
148
frontend/src/Author/Details/AuthorDetailsHeader.css
Normal file
148
frontend/src/Author/Details/AuthorDetailsHeader.css
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className={styles.header}>
|
||||
<div className={styles.header} style={{ width }} >
|
||||
<div
|
||||
className={styles.backdrop}
|
||||
style={{
|
||||
|
|
@ -117,7 +123,10 @@ class AuthorDetailsHeader extends Component {
|
|||
/>
|
||||
|
||||
<div className={styles.info}>
|
||||
<div className={styles.titleRow}>
|
||||
<Measure
|
||||
className={styles.titleRow}
|
||||
onMeasure={this.onTitleMeasure}
|
||||
>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className={styles.toggleMonitoredContainer}>
|
||||
<MonitorToggleButton
|
||||
|
|
@ -150,7 +159,7 @@ class AuthorDetailsHeader extends Component {
|
|||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Measure>
|
||||
|
||||
<div className={styles.details}>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
128
frontend/src/Book/Details/BookDetailsHeader.css
Normal file
128
frontend/src/Book/Details/BookDetailsHeader.css
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div className={styles.header}>
|
||||
<div className={styles.header} style={{ width }}>
|
||||
<div
|
||||
className={styles.backdrop}
|
||||
style={{
|
||||
|
|
@ -99,7 +105,10 @@ class BookDetailsHeader extends Component {
|
|||
/>
|
||||
|
||||
<div className={styles.info}>
|
||||
<div className={styles.titleRow}>
|
||||
<Measure
|
||||
className={styles.titleRow}
|
||||
onMeasure={this.onTitleMeasure}
|
||||
>
|
||||
<div className={styles.titleContainer}>
|
||||
<div className={styles.toggleMonitoredContainer}>
|
||||
<MonitorToggleButton
|
||||
|
|
@ -116,7 +125,7 @@ class BookDetailsHeader extends Component {
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Measure>
|
||||
|
||||
<div className={styles.details}>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Measure
|
||||
className={className}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ function getDimensions(width, height) {
|
|||
height,
|
||||
isExtraSmallScreen: width <= 480,
|
||||
isSmallScreen: width <= 768,
|
||||
isMediumScreen: width <= 992,
|
||||
isMediumScreen: width <= 1310,
|
||||
isLargeScreen: width <= 1200
|
||||
};
|
||||
|
||||
|
|
@ -132,4 +132,3 @@ export const reducers = createHandleActions({
|
|||
}
|
||||
|
||||
}, defaultState, section);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue