Mirrors/Radarr
1
0
Fork 0
mirror of https://github.com/Radarr/Radarr.git synced 2024-09-19 07:52:33 +02:00
Code Issues Releases Wiki Activity

Fixed: Tooltip goes off screen for Mobile

Browse Source
This commit is contained in:
Qstick 2020-07-26 23:02:25 -04:00
parent 80ae55920b
commit c34a5c0c3d
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/Components/Tooltip/Tooltip.css
View File

@ -1,6 +1,6 @@
.tooltipContainer { .tooltipContainer {
z-index: $popperZIndex; z-index: $popperZIndex;
margin: 10px 15px; margin: 10px 10px;
} }
.tooltip { .tooltip {
@ -28,6 +28,10 @@
border-color: transparent; border-color: transparent;
} }
.arrowDisabled {
display: none;
}
.arrow::after { .arrow::after {
border-width: 10px; border-width: 10px;
content: ''; content: '';
@ -35,7 +39,6 @@
.top { .top {
bottom: -11px; bottom: -11px;
left: 50%;
margin-left: -11px; margin-left: -11px;
border-bottom-width: 0; border-bottom-width: 0;
@ -64,7 +67,6 @@
} }
.right { .right {
top: 50%;
left: -11px; left: -11px;
margin-top: -11px; margin-top: -11px;
border-left-width: 0; border-left-width: 0;
@ -95,7 +97,6 @@
.bottom { .bottom {
top: -11px; top: -11px;
left: 50%;
margin-left: -11px; margin-left: -11px;
border-top-width: 0; border-top-width: 0;
@ -124,7 +125,6 @@
} }
.left { .left {
top: 50%;
right: -11px; right: -11px;
margin-top: -11px; margin-top: -11px;
border-right-width: 0; border-right-width: 0;

27
frontend/src/Components/Tooltip/Tooltip.js
View File

@ -54,7 +54,7 @@ class Tooltip extends Component {
} else if ((/^bottom/).test(data.placement)) { } else if ((/^bottom/).test(data.placement)) {
data.styles.maxHeight = windowHeight - bottom - 20; data.styles.maxHeight = windowHeight - bottom - 20;
} else if ((/^right/).test(data.placement)) { } else if ((/^right/).test(data.placement)) {
data.styles.maxWidth = windowWidth - right - 30; data.styles.maxWidth = windowWidth - right - 50;
} else { } else {
data.styles.maxWidth = left - 30; data.styles.maxWidth = left - 30;
} }
@ -132,16 +132,16 @@ class Tooltip extends Component {
fn: this.computeMaxSize fn: this.computeMaxSize
}, },
preventOverflow: { preventOverflow: {
// Fixes positioning for tooltips in the queue // Fixes positioning for tooltips in the queue
// and likely others. // and likely others.
escapeWithReference: true escapeWithReference: false
}, },
flip: { flip: {
enabled: canFlip enabled: canFlip
} }
}} }}
> >
{({ ref, style, placement, scheduleUpdate }) => { {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
this._scheduleUpdate = scheduleUpdate; this._scheduleUpdate = scheduleUpdate;
return ( return (
@ -152,6 +152,15 @@ class Tooltip extends Component {
onMouseEnter={this.onMouseEnter} onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave} onMouseLeave={this.onMouseLeave}
> >
<div
className={this.state.isOpen ? classNames(
styles.arrow,
styles[kind],
styles[placement.split('-')[0]]
) : styles.arrowDisabled}
ref={arrowProps.ref}
style={arrowProps.style}
/>
{ {
this.state.isOpen ? this.state.isOpen ?
<div <div
@ -160,14 +169,6 @@ class Tooltip extends Component {
styles[kind] styles[kind]
)} )}
> >
<div
className={classNames(
styles.arrow,
styles[kind],
styles[placement.split('-')[0]]
)}
/>
<div <div
className={bodyClassName} className={bodyClassName}
> >