diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js index 42fb4e293..44692a785 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js @@ -170,6 +170,7 @@ class AddNewMovieSearchResult extends Component { imdbId={imdbId} /> } + canFlip={true} kind={kinds.INVERSE} position={tooltipPositions.BOTTOM} /> diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css index b07dafefa..c5ddc7272 100644 --- a/frontend/src/Components/Tooltip/Tooltip.css +++ b/frontend/src/Components/Tooltip/Tooltip.css @@ -156,3 +156,35 @@ .body { padding: 5px; } + +.verticalContainer { + max-height: 300px; +} + +.horizontalContainer { + max-width: calc($breakpointExtraSmall - 20px); +} + +@media only screen and (min-width: $breakpointExtraSmall) { + .horizontalContainer { + max-width: calc($breakpointSmall * 0.8); + } +} + +@media only screen and (min-width: $breakpointSmall) { + .horizontalContainer { + max-width: calc($breakpointMedium * 0.8); + } +} + +@media only screen and (min-width: $breakpointMedium) { + .horizontalContainer { + max-width: calc($breakpointLarge * 0.8); + } +} + +/* @media only screen and (max-width: $breakpointLarge) { + .horizontalContainer { + max-width: calc($breakpointLarge * 0.8); + } +} */ diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js index 141beefdc..11dd100af 100644 --- a/frontend/src/Components/Tooltip/Tooltip.js +++ b/frontend/src/Components/Tooltip/Tooltip.js @@ -4,9 +4,30 @@ import React, { Component } from 'react'; import { Manager, Popper, Reference } from 'react-popper'; import Portal from 'Components/Portal'; import { kinds, tooltipPositions } from 'Helpers/Props'; +import dimensions from 'Styles/Variables/dimensions'; import { isMobile as isMobileUtil } from 'Utilities/mobile'; import styles from './Tooltip.css'; +let maxWidth = null; + +function getMaxWidth() { + const windowWidth = window.innerWidth; + + if (windowWidth > parseInt(dimensions.breakpointLarge)) { + maxWidth = 800; + } + + if (windowWidth > parseInt(dimensions.breakpointMedium)) { + maxWidth = 650; + } + + if (windowWidth > parseInt(dimensions.breakpointSmall)) { + maxWidth = 500; + } + + maxWidth = 450; +} + class Tooltip extends Component { // @@ -17,6 +38,7 @@ class Tooltip extends Component { this._scheduleUpdate = null; this._closeTimeout = null; + this._maxWidth = maxWidth || getMaxWidth(); this.state = { isOpen: false @@ -54,9 +76,11 @@ class Tooltip extends Component { } else if ((/^bottom/).test(data.placement)) { data.styles.maxHeight = windowHeight - bottom - 20; } else if ((/^right/).test(data.placement)) { - data.styles.maxWidth = windowWidth - right - 50; + data.styles.maxWidth = Math.min(this._maxWidth, windowWidth - right - 20); + data.styles.maxHeight = top - 20; } else { - data.styles.maxWidth = left - 35; + data.styles.maxWidth = Math.min(this._maxWidth, left - 20); + data.styles.maxHeight = top - 20; } return data; @@ -144,10 +168,16 @@ class Tooltip extends Component { {({ ref, style, placement, arrowProps, scheduleUpdate }) => { this._scheduleUpdate = scheduleUpdate; + const popperPlacement = placement ? placement.split('-')[0] : position; + const vertical = popperPlacement === 'top' || popperPlacement === 'bottom'; + return (
- } - title={translate('Links')} - body={ + tooltip={ - } - title={translate('Tags')} - body={ + tooltip={ } position={tooltipPositions.BOTTOM} diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.js b/frontend/src/Movie/Index/Table/MovieIndexRow.js index 4f0d7ba9a..c84ae6c43 100644 --- a/frontend/src/Movie/Index/Table/MovieIndexRow.js +++ b/frontend/src/Movie/Index/Table/MovieIndexRow.js @@ -8,8 +8,8 @@ import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellCo import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell'; import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell'; import TagListConnector from 'Components/TagListConnector'; -import Popover from 'Components/Tooltip/Popover'; -import { icons } from 'Helpers/Props'; +import Tooltip from 'Components/Tooltip/Tooltip'; +import { icons, kinds } from 'Helpers/Props'; import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal'; import MovieDetailsLinks from 'Movie/Details/MovieDetailsLinks'; import EditMovieModalConnector from 'Movie/Edit/EditMovieModalConnector'; @@ -369,21 +369,22 @@ class MovieIndexRow extends Component { className={styles[name]} > - } - title={translate('Links')} - body={ + tooltip={ } + canFlip={true} + kind={kinds.INVERSE} />