From f60eb5713036936df69b5919b3366acd8aa548ce Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Sat, 4 Apr 2020 15:55:25 +0200
Subject: [PATCH 1/6] Fix mobile layout for itemdetails

---
 src/assets/css/librarybrowser.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index e4b5bcf8d6..8c5ab59955 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -533,7 +533,6 @@
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
 .layout-mobile .mainDetailButtons {
-    display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;

From 4db414fb68e11cfcef2b11162246a37699f19209 Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Sat, 4 Apr 2020 17:10:43 +0200
Subject: [PATCH 2/6] Hacky fix

---
 src/assets/css/librarybrowser.css | 4 ++++
 src/controllers/itemdetailpage.js | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 8c5ab59955..1a3d75a9f2 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -529,6 +529,10 @@
     align-items: center;
 }
 
+.parentName > a:nth-child(3) {
+    font-size: 0.7em;
+}
+
 .layout-mobile .parentName,
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 178419e284..99bb038c70 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -336,7 +336,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
         return html = html.join(" / ");
     }
-
+    // TODO: Clean this and the CSS rules for mobile layout. See #1022
     function renderName(item, container, isStatic, context) {
         var parentRoute;
         var parentNameHtml = [];
@@ -406,9 +406,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
         if (parentNameHtml.length) {
             if (parentNameLast) {
-                html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join(" - ") + "</h3>";
+                html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join("</br>") + "</h3>";
             } else {
-                html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join(" - ") + "</h1>";
+                html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join("</br>") + "</h1>";
             }
         }
 

From a06a0e951537536cb3251ec966c43ae83467d098 Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Sun, 5 Apr 2020 00:59:37 +0200
Subject: [PATCH 3/6] Fix layout also for desktop

---
 src/assets/css/librarybrowser.css | 11 ++++++-----
 src/controllers/itemdetailpage.js | 20 ++++++++++++++++----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 1a3d75a9f2..1f9b25ac2b 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -518,6 +518,12 @@
     margin: 0.5em 0;
 }
 
+.nameContainer {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
 .itemMiscInfo {
     display: -webkit-box;
     display: -webkit-flex;
@@ -529,10 +535,6 @@
     align-items: center;
 }
 
-.parentName > a:nth-child(3) {
-    font-size: 0.7em;
-}
-
 .layout-mobile .parentName,
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
@@ -578,7 +580,6 @@
 
 .infoText {
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index 99bb038c70..f2feb62ba8 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -336,7 +336,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
         return html = html.join(" / ");
     }
-    // TODO: Clean this and the CSS rules for mobile layout. See #1022
     function renderName(item, container, isStatic, context) {
         var parentRoute;
         var parentNameHtml = [];
@@ -406,9 +405,18 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
         if (parentNameHtml.length) {
             if (parentNameLast) {
-                html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join("</br>") + "</h3>";
+                // Music
+                if (layoutManager.mobile) {
+                    html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join("</br>") + "</h3>";
+                } else {
+                    html = '<h3 class="parentName" style="margin: .25em 0;">' + parentNameHtml.join(" - ") + "</h3>";
+                }
             } else {
-                html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join("</br>") + "</h1>";
+                if (layoutManager.mobile) {
+                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join("</br>") + "</h1>";
+                } else {
+                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml[0] + "</h1>";
+                }
             }
         }
 
@@ -418,7 +426,11 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         var offset = parentNameLast ? ".25em" : ".5em";
 
         if (html && !parentNameLast) {
-            html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+            if (!layoutManager.mobile && parentNameHtml[1]) {
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em; font-weight: 600;">' + parentNameHtml[1] + ' - ' + name + '</h3>';
+            } else {
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+            }
         } else {
             html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
         }

From cf542fa8bc15a546d36f0d872b7dcb1455715130 Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Sun, 5 Apr 2020 01:01:10 +0200
Subject: [PATCH 4/6] Bolder font in all items

---
 src/controllers/itemdetailpage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index f2feb62ba8..a89bbeb07f 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -429,14 +429,14 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
             if (!layoutManager.mobile && parentNameHtml[1]) {
                 html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em; font-weight: 600;">' + parentNameHtml[1] + ' - ' + name + '</h3>';
             } else {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em; font-weight: 600;">' + name + '</h3>';
             }
         } else {
-            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
+            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + '; font-weight: 600;">' + name + "</h1>" + html;
         }
 
         if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0">' + item.OriginalTitle + '</h4>';
+            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0; font-weight: 600;">' + item.OriginalTitle + '</h4>';
         }
 
         container.innerHTML = html;

From d779286dc923ae0119a32640ad9faddb8351df9d Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Sun, 5 Apr 2020 14:02:20 +0200
Subject: [PATCH 5/6] Move inline CSS to classes

---
 src/assets/css/librarybrowser.css | 1 +
 src/controllers/itemdetailpage.js | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 1f9b25ac2b..f5491e3895 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -516,6 +516,7 @@
 
 .itemName {
     margin: 0.5em 0;
+    font-weight: 600;
 }
 
 .nameContainer {
diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index a89bbeb07f..ab11f0484f 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -427,16 +427,16 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
 
         if (html && !parentNameLast) {
             if (!layoutManager.mobile && parentNameHtml[1]) {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em; font-weight: 600;">' + parentNameHtml[1] + ' - ' + name + '</h3>';
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + parentNameHtml[1] + ' - ' + name + '</h3>';
             } else {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em; font-weight: 600;">' + name + '</h3>';
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
             }
         } else {
-            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + '; font-weight: 600;">' + name + "</h1>" + html;
+            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
         }
 
         if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0; font-weight: 600;">' + item.OriginalTitle + '</h4>';
+            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0;">' + item.OriginalTitle + '</h4>';
         }
 
         container.innerHTML = html;

From dccd19d57fc4fcb732e4134fd6baa615d493cc31 Mon Sep 17 00:00:00 2001
From: ferferga <ferferga.fer@gmail.com>
Date: Sun, 5 Apr 2020 14:19:31 +0200
Subject: [PATCH 6/6] Move array contents to variables

---
 src/controllers/itemdetailpage.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js
index ab11f0484f..e9242c5119 100644
--- a/src/controllers/itemdetailpage.js
+++ b/src/controllers/itemdetailpage.js
@@ -400,8 +400,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         } else if (item.Album) {
             parentNameHtml.push(item.Album);
         }
-
+        // FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022
         var html = "";
+        var tvShowHtml = parentNameHtml[0];
+        var tvSeasonHtml = parentNameHtml[1];
 
         if (parentNameHtml.length) {
             if (parentNameLast) {
@@ -415,7 +417,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
                 if (layoutManager.mobile) {
                     html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml.join("</br>") + "</h1>";
                 } else {
-                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + parentNameHtml[0] + "</h1>";
+                    html = '<h1 class="parentName" style="margin: .1em 0 .25em;">' + tvShowHtml + "</h1>";
                 }
             }
         }
@@ -426,8 +428,8 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "userSetti
         var offset = parentNameLast ? ".25em" : ".5em";
 
         if (html && !parentNameLast) {
-            if (!layoutManager.mobile && parentNameHtml[1]) {
-                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + parentNameHtml[1] + ' - ' + name + '</h3>';
+            if (!layoutManager.mobile && tvSeasonHtml) {
+                html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + tvSeasonHtml + ' - ' + name + '</h3>';
             } else {
                 html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
             }