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

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

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

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

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

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

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

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
};
console.log(`stage: ${stage} translate: ${translate} width: ${containerWidth}`);
console.log(style);
return (
<Measure
className={className}

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

@ -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);

Write Preview
Loading…
Cancel
Save