github/lidarr
1
0
Fork 0
mirror of https://github.com/lidarr/lidarr.git synced 2025-07-12 16:13:58 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Fixed: Queue tooltips appearing offscreen on mobile devices

Browse source 
Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
This commit is contained in:
Qstick 2019-07-20 22:32:11 -04:00
parent 5dddae5d02
commit 9143bb4a7c
4 changed files with 53 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

48
frontend/src/Components/Tooltip/Tooltip.js
View file

@ -35,6 +35,33 @@ class Tooltip extends Component {
}
}
//
// Control
computeMaxSize = (data) => {
const {
top,
right,
bottom,
left
} = data.offsets.reference;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
if ((/^top/).test(data.placement)) {
data.styles.maxHeight = top - 20;
} else if ((/^bottom/).test(data.placement)) {
data.styles.maxHeight = windowHeight - bottom - 20;
} else if ((/^right/).test(data.placement)) {
data.styles.maxWidth = windowWidth - right - 30;
} else {
data.styles.maxWidth = left - 30;
}
return data;
}
//
// Listeners
@ -72,7 +99,8 @@ class Tooltip extends Component {
anchor,
tooltip,
kind,
position
position,
canFlip
} = this.props;
return (
@ -98,10 +126,18 @@ class Tooltip extends Component {
// are shown (Quality Definitions for example).
eventsEnabled={false}
modifiers={{
computeMaxHeight: {
order: 851,
enabled: true,
fn: this.computeMaxSize
},
preventOverflow: {
// Fixes positioning for tooltips in the queue
// and likely others.
escapeWithReference: true
},
flip: {
enabled: canFlip
}
}}
>
@ -132,7 +168,9 @@ class Tooltip extends Component {
)}
/>
<div className={bodyClassName}>
<div
className={bodyClassName}
>
{tooltip}
</div>
</div> :
@ -154,13 +192,15 @@ Tooltip.propTypes = {
anchor: PropTypes.node.isRequired,
tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
position: PropTypes.oneOf(tooltipPositions.all)
position: PropTypes.oneOf(tooltipPositions.all),
canFlip: PropTypes.bool.isRequired
};
Tooltip.defaultProps = {
bodyClassName: styles.body,
kind: kinds.DEFAULT,
position: tooltipPositions.TOP
position: tooltipPositions.TOP,
canFlip: true
};
export default Tooltip;