Fixed: Misaligned Book/Author details on large screens

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;
-  }
 }

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;
+  }
+}

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 (
-      <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>