fergalmoran/Readarr
1
0
Fork 0
mirror of https://github.com/fergalmoran/Readarr.git synced 2025-12-22 09:29:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed: Author/Book overview overflows

Browse Source 
Bump react-measure to v2.5.2
This commit is contained in:
ta264
2021-04-08 08:55:16 +01:00
parent 106a1c339b
commit a84725f867
15 changed files with 921 additions and 821 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/Author/Details/AuthorDetails.css
View File

@@ -67,13 +67,13 @@
.titleContainer {
display: flex;
margin-bottom: 5px;
margin-top: -5px;
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 50px;
line-height: 60px;
}
.toggleMonitoredContainer {
@@ -99,6 +99,7 @@
.authorNavigationButtons {
position: absolute;
right: 0;
margin-top: 10px;
white-space: nowrap;
}
@@ -142,7 +143,7 @@
}
.overview {
flex: 1 0 auto;
flex: 1 1 auto;
margin-top: 8px;
min-height: 0;
font-size: $intermediateFontSize;

40
frontend/src/Author/Details/AuthorDetails.js
View File

@@ -14,6 +14,8 @@ import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import Marquee from 'Components/Marquee';
import Measure from 'Components/Measure';
import MonitorToggleButton from 'Components/MonitorToggleButton';
import PageContent from 'Components/Page/PageContent';
import PageContentBody from 'Components/Page/PageContentBody';
@@ -78,7 +80,9 @@ class AuthorDetails extends Component {
allExpanded: false,
allCollapsed: false,
expandedState: {},
selectedTabIndex: 0
selectedTabIndex: 0,
titleWidth: 0,
overviewHeight: 0
};
}
@@ -155,6 +159,14 @@ class AuthorDetails extends Component {
this.setState({ selectedTabIndex: index });
}
onTitleMeasure = ({ width }) => {
this.setState({ titleWidth: width });
}
onOverviewMeasure = ({ height }) => {
this.setState({ overviewHeight: height });
}
//
// Render
@@ -206,9 +218,13 @@ class AuthorDetails extends Component {
allExpanded,
allCollapsed,
expandedState,
selectedTabIndex
selectedTabIndex,
titleWidth,
overviewHeight
} = this.state;
const marqueeWidth = (titleWidth - 170);
const continuing = status === 'continuing';
let bookFilesCountMessage = 'No book files';
@@ -315,7 +331,10 @@ class AuthorDetails extends Component {
/>
<div className={styles.info}>
<div className={styles.titleRow}>
<Measure
onMeasure={this.onTitleMeasure}
className={styles.titleRow}
>
<div className={styles.titleContainer}>
<div className={styles.toggleMonitoredContainer}>
<MonitorToggleButton
@@ -327,8 +346,8 @@ class AuthorDetails extends Component {
/>
</div>
<div className={styles.title}>
{authorName}
<div className={styles.title} style={{ width: marqueeWidth }}>
<Marquee text={authorName} />
</div>
{
@@ -374,7 +393,7 @@ class AuthorDetails extends Component {
to={`/author/${nextAuthor.titleSlug}`}
/>
</div>
</div>
</Measure>
<div className={styles.details}>
<div>
@@ -515,12 +534,15 @@ class AuthorDetails extends Component {
}
</div>
<div className={styles.overview}>
<Measure
onMeasure={this.onOverviewMeasure}
className={styles.overview}
>
<TextTruncate
line={Math.floor(125 / (defaultFontSize * lineHeight))}
line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
text={stripHtml(overview)}
/>
</div>
</Measure>
</div>
</div>
</div>

1
frontend/src/Author/Index/Banners/AuthorIndexBanners.js
View File

@@ -264,7 +264,6 @@ class AuthorIndexBanners extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller

1
frontend/src/Author/Index/Overview/AuthorIndexOverviews.js
View File

@@ -204,7 +204,6 @@ class AuthorIndexOverviews extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller

1
frontend/src/Author/Index/Posters/AuthorIndexPosters.js
View File

@@ -270,7 +270,6 @@ class AuthorIndexPosters extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<WindowScroller

8
frontend/src/Book/Details/BookDetails.css
View File

@@ -54,13 +54,13 @@
.titleContainer {
display: flex;
margin-bottom: 5px;
margin-top: -5px
}
.title {
font-weight: 300;
font-size: 50px;
line-height: 50px;
line-height: 60px;
}
.toggleMonitoredContainer {
@@ -128,8 +128,8 @@
}
.overview {
flex: 1 0 auto;
margin-top: 8px;
flex: 1 1 auto;
margin-top: 4px;
min-height: 0;
font-size: $intermediateFontSize;
}

29
frontend/src/Book/Details/BookDetails.js
View File

@@ -60,7 +60,8 @@ class BookDetails extends Component {
isEditBookModalOpen: false,
isDeleteBookModalOpen: false,
selectedTabIndex: 0,
titleWidth: 0
titleWidth: 0,
overviewHeight: 0
};
}
@@ -110,6 +111,10 @@ class BookDetails extends Component {
this.setState({ titleWidth: width });
}
onOverviewMeasure = ({ height }) => {
this.setState({ overviewHeight: height });
}
//
// Render
@@ -149,10 +154,11 @@ class BookDetails extends Component {
isEditBookModalOpen,
isDeleteBookModalOpen,
selectedTabIndex,
titleWidth
titleWidth,
overviewHeight
} = this.state;
const marqueeWidth = (titleWidth - 150);
const marqueeWidth = (titleWidth - 170);
return (
<PageContent title={title}>
@@ -227,8 +233,10 @@ class BookDetails extends Component {
/>
<div className={styles.info}>
<Measure onMeasure={this.onTitleMeasure}>
<div className={styles.titleRow}>
<Measure
onMeasure={this.onTitleMeasure}
className={styles.titleRow}
>
<div className={styles.titleContainer}>
<div className={styles.toggleMonitoredContainer}>
@@ -272,7 +280,6 @@ class BookDetails extends Component {
to={`/book/${nextBook.titleSlug}`}
/>
</div>
</div>
</Measure>
<div className={styles.details}>
@@ -370,12 +377,15 @@ class BookDetails extends Component {
/>
</div>
<div className={styles.overview}>
<Measure
onMeasure={this.onOverviewMeasure}
className={styles.overview}
>
<TextTruncate
line={Math.floor(125 / (defaultFontSize * lineHeight))}
line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
text={stripHtml(overview)}
/>
</div>
</Measure>
</div>
</div>
</div>
@@ -509,7 +519,6 @@ BookDetails.propTypes = {
author: PropTypes.object,
previousBook: PropTypes.object,
nextBook: PropTypes.object,
isSmallScreen: PropTypes.bool.isRequired,
onMonitorTogglePress: PropTypes.func.isRequired,
onRefreshPress: PropTypes.func,
onSearchPress: PropTypes.func.isRequired

1
frontend/src/Calendar/CalendarPage.js
View File

@@ -149,7 +149,6 @@ class CalendarPage extends Component {
{
!authorError && authorIsPopulated && hasAuthor &&
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
{

33
frontend/src/Components/Measure.js
View File

@@ -16,23 +16,46 @@ class Measure extends Component {
// Listeners
onMeasure = _.debounce((payload) => {
this.props.onMeasure(payload);
}, 250, { leading: true, trailing: false })
this.props.onMeasure(payload.bounds);
}, 250, { leading: true, trailing: true })
//
// Render
render() {
const {
className,
style,
onMeasure,
children,
...otherProps
} = this.props;
return (
<ReactMeasure
{...this.props}
/>
bounds={true}
onResize={this.onMeasure}
{...otherProps}
>
{({ measureRef }) => (
<div
ref={measureRef}
className={className}
style={style}
>
{children}
</div>
)}
</ReactMeasure>
);
}
}
Measure.propTypes = {
onMeasure: PropTypes.func.isRequired
className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
onMeasure: PropTypes.func.isRequired,
children: PropTypes.node
};
export default Measure;

4
frontend/src/Components/Page/PageJumpBar.js
View File

@@ -123,10 +123,9 @@ class PageJumpBar extends Component {
return (
<div className={styles.jumpBar}>
<Measure
whitelist={['height']}
className={styles.jumpBarItems}
onMeasure={this.onMeasure}
>
<div className={styles.jumpBarItems}>
{
visibleItems.map((item) => {
return (
@@ -138,7 +137,6 @@ class PageJumpBar extends Component {
);
})
}
</div>
</Measure>
</div>
);

4
frontend/src/Components/Page/Toolbar/PageToolbarSection.js
View File

@@ -133,10 +133,7 @@ class PageToolbarSection extends Component {
return (
<Measure
whitelist={['width']}
onMeasure={this.onMeasure}
>
<div
className={styles.sectionContainer}
style={{
flexGrow: buttonCount
@@ -199,7 +196,6 @@ class PageToolbarSection extends Component {
</div> :
null
}
</div>
</Measure>
);
}

7
frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContent.js
View File

@@ -113,8 +113,6 @@ class EditQualityProfileModalContent extends Component {
return (
<ModalContent onModalClose={onModalClose}>
<Measure
whitelist={['height']}
includeMargin={false}
onMeasure={this.onHeaderMeasure}
>
<ModalHeader>
@@ -124,10 +122,8 @@ class EditQualityProfileModalContent extends Component {
<ModalBody>
<Measure
whitelist={['height']}
onMeasure={this.onBodyMeasure}
>
<div>
{
isFetching &&
<LoadingIndicator />
@@ -202,13 +198,10 @@ class EditQualityProfileModalContent extends Component {
</Form>
}
</div>
</Measure>
</ModalBody>
<Measure
whitelist={['height']}
includeMargin={false}
onMeasure={this.onFooterMeasure}
>
<ModalFooter>

4
frontend/src/Settings/Profiles/Quality/QualityProfileItems.js
View File

@@ -121,11 +121,8 @@ class QualityProfileItems extends Component {
</Button>
<Measure
whitelist={['height']}
includeMargin={false}
onMeasure={this.onMeasure}
>
<div
className={styles.qualities}
style={{ minHeight: `${minHeight}px` }}
>
@@ -154,7 +151,6 @@ class QualityProfileItems extends Component {
}
<QualityProfileItemDragPreview />
</div>
</Measure>
</div>
</FormGroup>

2
package.json
View File

@@ -104,7 +104,7 @@
"react-focus-lock": "2.4.1",
"react-google-recaptcha": "2.1.0",
"react-lazyload": "3.0.0",
"react-measure": "1.4.7",
"react-measure": "2.5.2",
"react-popper": "1.3.7",
"react-redux": "7.2.1",
"react-router": "5.2.0",

1196
yarn.lock
View File

File diff suppressed because it is too large Load Diff