Mirrors/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2024-11-04 10:02:40 +01:00
Code Issues Releases Wiki Activity

Fix issue with the disk space label percents overlapping on small screens.

Browse Source
This commit is contained in:
nitsua 2020-09-19 14:36:22 -04:00 committed by Qstick
parent 4e0f027a91
commit 6fdf06a882
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/System/Status/DiskSpace/DiskSpace.js
View File

@ -42,7 +42,8 @@ class DiskSpace extends Component {
render() { render() {
const { const {
isFetching, isFetching,
items items,
isSmallScreen
} = this.props; } = this.props;
return ( return (
@ -98,7 +99,7 @@ class DiskSpace extends Component {
progress={diskUsage} progress={diskUsage}
kind={diskUsageKind} kind={diskUsageKind}
size={sizes.MEDIUM} size={sizes.MEDIUM}
showText={diskUsage >= 12} showText={((!isSmallScreen && diskUsage >= 12) || (isSmallScreen && diskUsage >= 45))}
text={`${diskUsage}%`} text={`${diskUsage}%`}
/> />
</TableRowCell> </TableRowCell>
@ -117,7 +118,8 @@ class DiskSpace extends Component {
DiskSpace.propTypes = { DiskSpace.propTypes = {
isFetching: PropTypes.bool.isRequired, isFetching: PropTypes.bool.isRequired,
items: PropTypes.array.isRequired items: PropTypes.array.isRequired,
isSmallScreen: PropTypes.bool.isRequired
}; };
export default DiskSpace; export default DiskSpace;

7
frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js
View File

@ -3,12 +3,14 @@ import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { fetchDiskSpace } from 'Store/Actions/systemActions'; import { fetchDiskSpace } from 'Store/Actions/systemActions';
import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
import DiskSpace from './DiskSpace'; import DiskSpace from './DiskSpace';
function createMapStateToProps() { function createMapStateToProps() {
return createSelector( return createSelector(
(state) => state.system.diskSpace, (state) => state.system.diskSpace,
(diskSpace) => { createDimensionsSelector(),
(diskSpace, dimensions) => {
const { const {
isFetching, isFetching,
items items
@ -16,7 +18,8 @@ function createMapStateToProps() {
return { return {
isFetching, isFetching,
items items,
isSmallScreen: dimensions.isSmallScreen
}; };
} }
); );