Fixed: Issue with link/tags icon to drop a line on movie details mobile (#4667)

#4523

frontend/src/Components/HeartRating.js

@@ -4,14 +4,17 @@ import Icon from 'Components/Icon';
 import { icons } from 'Helpers/Props';
 import styles from './HeartRating.css';
 
-function HeartRating({ rating, iconSize }) {
+function HeartRating({ rating, iconSize, hideHeart }) {
   return (
     <span>
+      {
+        !hideHeart &&
           <Icon
             className={styles.heart}
             name={icons.HEART}
             size={iconSize}
           />
+      }
 
       {rating * 10}%
     </span>
@@ -20,7 +23,8 @@ function HeartRating({ rating, iconSize }) {
 
 HeartRating.propTypes = {
   rating: PropTypes.number.isRequired,
-  iconSize: PropTypes.number.isRequired
+  iconSize: PropTypes.number.isRequired,
+  hideHeart: PropTypes.bool
 };
 
 HeartRating.defaultProps = {

frontend/src/Movie/Details/MovieDetails.css

@@ -206,4 +206,13 @@
   .movieNavigationButtons {
     display: none;
   }
+
+  .certification,
+  .links,
+  .tags,
+  .rating,
+  .year,
+  .runtime {
+    margin-right: 10px;
+  }
 }

frontend/src/Movie/Details/MovieDetails.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
@@ -280,6 +281,7 @@ class MovieDetails extends Component {
     } = this.state;
 
     const marqueeWidth = isSmallScreen ? titleWidth : (titleWidth - 150);
+    const friendlyRuntime = moment.utc((runtime * 60) * 1000).format('h[h] m[m]');
 
     return (
       <PageContent title={title}>
@@ -424,7 +426,7 @@ class MovieDetails extends Component {
                     {
                       !!runtime &&
                         <span className={styles.runtime}>
-                          {runtime} Minutes
+                          {friendlyRuntime}
                         </span>
                     }
 
@@ -434,6 +436,7 @@ class MovieDetails extends Component {
                           <HeartRating
                             rating={ratings.value}
                             iconSize={20}
+                            hideHeart={isSmallScreen}
                           />
                         </span>
                     }

frontend/src/MovieFile/Editor/MovieFileEditorRow.js

@@ -238,7 +238,7 @@ MovieFileEditorRow.propTypes = {
   customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
   qualityCutoffNotMet: PropTypes.bool.isRequired,
   languages: PropTypes.arrayOf(PropTypes.object).isRequired,
-  mediaInfo: PropTypes.object.isRequired,
+  mediaInfo: PropTypes.object,
   onDeletePress: PropTypes.func.isRequired
 };
 

frontend/src/MovieFile/FileDetailsModal.js

@@ -47,7 +47,7 @@ function FileDetailsModal(props) {
 FileDetailsModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onModalClose: PropTypes.func.isRequired,
-  mediaInfo: PropTypes.object.isRequired
+  mediaInfo: PropTypes.object
 };
 
 export default FileDetailsModal;