diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css index b03fdd229..59e1e86d6 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.css @@ -47,18 +47,12 @@ color: $disabledColor; } -.tmdbLink { - composes: link from '~Components/Link/Link.css'; - - margin-top: -4px; +.externalLink { + margin-top: 5px; margin-left: auto; color: $textColor; } -.tmdbLinkIcon { - margin-left: 10px; -} - .alreadyExistsIcon { margin-left: 10px; color: #37bc9b; diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js index ae31de0dc..d7f4eb25e 100644 --- a/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js +++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovieSearchResult.js @@ -39,7 +39,7 @@ class AddNewMovieSearchResult extends Component { this.setState({ isNewAddMovieModalOpen: false }); } - onTMDBLinkPress = (event) => { + onExternalLinkPress = (event) => { event.stopPropagation(); } @@ -49,6 +49,7 @@ class AddNewMovieSearchResult extends Component { render() { const { tmdbId, + imdbId, title, titleSlug, year, @@ -117,17 +118,41 @@ class AddNewMovieSearchResult extends Component { /> } - - - + { + isSmallScreen ? + null : +
+ + + + + { + imdbId && + + + + } + + + + +
+ }
@@ -156,6 +181,42 @@ class AddNewMovieSearchResult extends Component { }
+ { + isSmallScreen ? +
+ + + + + { + imdbId && + + + + } + + + + +
: + null + } +
{overview}
@@ -179,6 +240,7 @@ class AddNewMovieSearchResult extends Component { AddNewMovieSearchResult.propTypes = { tmdbId: PropTypes.number.isRequired, + imdbId: PropTypes.string, title: PropTypes.string.isRequired, titleSlug: PropTypes.string.isRequired, year: PropTypes.number.isRequired,