From 6a16d84e71548d139a330cb9443729ac36f51237 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 9 Dec 2019 01:03:08 +0300 Subject: [PATCH 01/31] redesign detail page --- src/components/themes/appletv/theme.css | 4 + src/components/themes/blueradiance/theme.css | 4 + src/components/themes/dark/theme.css | 4 + src/components/themes/emby/theme.css | 4 + src/components/themes/light/theme.css | 4 + src/components/themes/purple-haze/theme.css | 4 + src/components/themes/wmc/theme.css | 4 + src/controllers/itemdetailpage.js | 17 +- src/css/librarybrowser.css | 67 +-- src/itemdetails.html | 495 +++++++++---------- 10 files changed, 300 insertions(+), 307 deletions(-) diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css index 128594bc72..5d475cea68 100644 --- a/src/components/themes/appletv/theme.css +++ b/src/components/themes/appletv/theme.css @@ -463,3 +463,7 @@ html { .metadataSidebarIcon { color: #00a4dc } + +.detailPagePrimaryContainer { + background-color: rgba(255, 255, 255, 0.4) +} diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css index f450404bea..1aac0583b9 100644 --- a/src/components/themes/blueradiance/theme.css +++ b/src/components/themes/blueradiance/theme.css @@ -471,3 +471,7 @@ html { .metadataSidebarIcon { color: #00a4dc } + +.detailPagePrimaryContainer { + background-color: rgba(0, 0, 0, 0.4) +} diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css index b4d4bcda4b..e5f0e5a40e 100644 --- a/src/components/themes/dark/theme.css +++ b/src/components/themes/dark/theme.css @@ -448,3 +448,7 @@ html { .metadataSidebarIcon { color: #00a4dc } + +.detailPagePrimaryContainer { + background-color: rgba(0, 0, 0, 0.4) +} diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css index 7206150235..d4ca52baaf 100644 --- a/src/components/themes/emby/theme.css +++ b/src/components/themes/emby/theme.css @@ -448,3 +448,7 @@ html { .metadataSidebarIcon { color: #00a4dc } + +.detailPagePrimaryContainer { + background-color: rgba(0, 0, 0, 0.4) +} diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css index 6da511dfd2..8cbe886650 100644 --- a/src/components/themes/light/theme.css +++ b/src/components/themes/light/theme.css @@ -444,3 +444,7 @@ html { .metadataSidebarIcon { color: #00a4dc } + +.detailPagePrimaryContainer { + background-color: rgba(255, 255, 255, 0.4) +} diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index 566af827ee..398ad00af6 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -576,3 +576,7 @@ a[data-role=button] { .metadataSidebarIcon { color: #dbe6ff } + +.detailPagePrimaryContainer { + background-color: rgba(0, 0, 0, 0.4) +} diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css index a19eeb93a2..e6404d3620 100644 --- a/src/components/themes/wmc/theme.css +++ b/src/components/themes/wmc/theme.css @@ -466,3 +466,7 @@ html { .metadataSidebarIcon { color: #00a4dc } + +.detailPagePrimaryContainer { + background-color: rgba(0, 0, 0, 0.4) +} diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index 53a36aa862..08e77f0f2a 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -801,10 +801,8 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana }); } - html += '
'; - if (editable) { - html += ""; + html += ""; } if (detectRatio && item.PrimaryImageAspectRatio) { @@ -828,7 +826,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana html += progressHtml; } - html += "
"; html += ""; elem.innerHTML = html; @@ -1531,12 +1528,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana if (!(currentStartDate && currentStartDate.toDateString() === itemStartDate.toDateString())) { if (currentItems.length) { html += '
'; - html += '

' + datetime.toLocaleDateString(currentStartDate, { + html += '

' + datetime.toLocaleDateString(currentStartDate, { weekday: "long", month: "long", day: "numeric" }) + "

"; - html += '
' + listView.getListViewHtml({ + html += '
' + listView.getListViewHtml({ items: currentItems, enableUserDataButtons: false, showParentTitle: true, @@ -1556,12 +1553,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana if (currentItems.length) { html += '
'; - html += '

' + datetime.toLocaleDateString(currentStartDate, { + html += '

' + datetime.toLocaleDateString(currentStartDate, { weekday: "long", month: "long", day: "numeric" }) + "

"; - html += '
' + listView.getListViewHtml({ + html += '
' + listView.getListViewHtml({ items: currentItems, enableUserDataButtons: false, showParentTitle: true, @@ -1728,13 +1725,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana function renderCollectionItemType(page, parentItem, type, items) { var html = ""; html += '
'; - html += '
'; + html += '
'; html += '

'; html += "" + type.name + ""; html += "

"; html += ''; html += "
"; - html += '
'; + html += '
'; var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false); html += cardBuilder.getCardsHtml({ items: items, diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 8a7b2d247e..3cc6e96bd1 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -421,9 +421,15 @@ left: .8em } +.noBackdrop { + display:none; +} + .itemBackdrop { -webkit-background-size: cover; background-size: cover; + background-position: center center; + background-repeat: no-repeat; height: 50vh; position: relative } @@ -448,12 +454,31 @@ bottom: .75em } +.detailPagePrimaryContainer { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + position: sticky; + top: 0; + z-index: 2; +} + +.detailPageSeconderyContainer { + display:grid; + grid-template-columns: 100%; + padding-left:2%; + padding-right:2%; +} + .detailImageContainer { - margin-right: 2em; + padding-left:2%; width: 280px; -webkit-flex-shrink: 0; flex-shrink: 0; - margin-left: .6em + position: sticky; + top:15%; + float: left; } .detailPagePrimaryContent { @@ -504,7 +529,7 @@ } .thumbDetailImageContainer { - width: 400px + width: 280px; } @media all and (max-width:62.5em) { @@ -513,9 +538,6 @@ } .detailImageContainer { - position: absolute; - top: -90px; - left: 5%; width: auto } @@ -529,19 +551,6 @@ } } -@media all and (min-width:62.5em) { - .itemBackdrop { - display: none - } - - .detailPagePrimaryContainer { - display: -webkit-box; - display: -webkit-flex; - display: flex; - margin-bottom: 3em - } -} - @media all and (max-width:75em) { .lnkSibling { display: none !important @@ -575,12 +584,18 @@ } .itemDetailPage { - padding-top: 0 !important + padding-top: 2em !important } .detailimg-hidemobile { display: none } + + .detailPagePrimaryContainer { + display: flex; + justify-content: center; + flex-wrap: wrap; + } } @media all and (min-width:31.25em) { @@ -723,7 +738,7 @@ } @media all and (min-width:62.5em) { - .detailButton-mobile { + .detailFloatingButton { display: none !important } @@ -775,13 +790,11 @@ .detailPageContent { border-spacing: 0; border-collapse: collapse; - padding-top: 3em } @media all and (max-width:62.5em) { .detailPageContent-nodetailimg { padding-top: 0; - margin-top: -3em } } @@ -1016,14 +1029,6 @@ } } -.layout-tv .itemsViewSettingsContainer { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - justify-content: flex-end; - padding: 1.5em .75em 1em 0; - font-size: 92% -} - .itemsViewSettingsContainer>.button-flat { margin: 0 } diff --git a/src/itemdetails.html b/src/itemdetails.html index 2a29cce96b..1435b04a72 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,292 +1,255 @@
- -
- +
-
- +
-
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
-
+
+
+
-
+
-
+
+
-
+
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -
-
- -

-

-

-

-

-

-

- -
-
+
+
-
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +

+

+

+

+

+

+

+ +
+
+ +
+
+ +
+
+
+
+
+
+

+ ${HeaderSchedule} +

+
+
+
+
+
+

${HeaderNextUp}

+
+
+
+
+
+
+

+ +

+
+
+
+
+
+

${HeaderAdditionalParts}

+
+
+
+
+

+
+
+
+
+
+

+
+
+
+
+
+

${HeaderCastCrew}

+
+
+
+
+
+
+

${HeaderUpcomingOnTV}

+
+
+ +
+

${HeaderSpecialFeatures}

+
+
+
+

${HeaderMusicVideos}

+
+
+ +
+

${HeaderScenes}

+
+
+
+
+ +
+

${HeaderMoreLikeThis}

+
+
-
-

- ${HeaderSchedule} -

-
-
-
-
-
-

${HeaderNextUp}

-
-
-
-
-
-
-

- -

-
-
-
-
-
-

${HeaderAdditionalParts}

-
-
-
-

-
-
-
-
-
-

-
-
-
-
-
-

${HeaderCastCrew}

-
-
-
-
-
-

${HeaderUpcomingOnTV}

-
-
- -
-

${HeaderSpecialFeatures}

-
-
-
-

${HeaderMusicVideos}

-
-
- -
-

${HeaderScenes}

-
-
-
-
- -
-

${HeaderMoreLikeThis}

-
-
-
-
From 7b61b5d2e030db2b2906d2daef8b0847d2f039db Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 9 Dec 2019 22:18:13 +0300 Subject: [PATCH 02/31] fix detailImageProgressContainer position --- src/css/librarybrowser.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 3cc6e96bd1..19a5434aa5 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -472,7 +472,6 @@ } .detailImageContainer { - padding-left:2%; width: 280px; -webkit-flex-shrink: 0; flex-shrink: 0; @@ -715,10 +714,10 @@ .detailImageProgressContainer { position: absolute; - bottom: 4px; - right: 1px; - left: 1px; - text-align: center + width: 240px; + bottom: 12px; + text-align: center; + padding-left: 20px; } .detailButton-mobile-text { From 67e289d3637e31ca4d562e06cf9803d315452f6e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 10 Dec 2019 00:56:19 +0300 Subject: [PATCH 03/31] revert back padded-left and padded-right --- src/itemdetails.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/itemdetails.html b/src/itemdetails.html index 1435b04a72..2e7388fccc 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -110,7 +110,7 @@
-
+
@@ -174,47 +174,47 @@
-

+

${HeaderSchedule}

-
+
-

${HeaderNextUp}

-
+

${HeaderNextUp}

+
-

+

-
+
-

${HeaderAdditionalParts}

+

${HeaderAdditionalParts}

-

+

-

+

-

${HeaderCastCrew}

+

${HeaderCastCrew}

@@ -222,28 +222,28 @@
-

${HeaderUpcomingOnTV}

+

${HeaderUpcomingOnTV}

-

${HeaderSpecialFeatures}

+

${HeaderSpecialFeatures}

-

${HeaderMusicVideos}

+

${HeaderMusicVideos}

-

${HeaderScenes}

+

${HeaderScenes}

-

${HeaderMoreLikeThis}

+

${HeaderMoreLikeThis}

From 7f292093eb282cea12e80e605d36f08b6b73fc2e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 10 Dec 2019 00:58:53 +0300 Subject: [PATCH 04/31] increase detailimagecontainer width --- src/css/librarybrowser.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 19a5434aa5..d533baf8fa 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -472,7 +472,6 @@ } .detailImageContainer { - width: 280px; -webkit-flex-shrink: 0; flex-shrink: 0; position: sticky; @@ -528,7 +527,11 @@ } .thumbDetailImageContainer { - width: 280px; + width: 350px; +} + +.portraitDetailImageContainer { + width: 350px; } @media all and (max-width:62.5em) { From a2734a34bce3429b4fb90317ca36111c1fa26e65 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 10 Dec 2019 00:59:58 +0300 Subject: [PATCH 05/31] extra bottom padding --- src/itemdetails.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/itemdetails.html b/src/itemdetails.html index 2e7388fccc..ab5a1cde97 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -105,7 +105,7 @@
-
+
From dbbe5809e16604dc7f6a2ccc532460caf7af67e7 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 10 Dec 2019 01:06:11 +0300 Subject: [PATCH 06/31] increase detailimageprogresscontainer width --- src/css/librarybrowser.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index d533baf8fa..e6ad6e12a0 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -717,10 +717,10 @@ .detailImageProgressContainer { position: absolute; - width: 240px; + width: 300px; bottom: 12px; text-align: center; - padding-left: 20px; + padding-left: 25px; } .detailButton-mobile-text { From 08b00ac38537d2e1be4018f6c11e6b8791f15b3e Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 10 Dec 2019 01:26:15 +0300 Subject: [PATCH 07/31] remove itembackdropfader --- src/components/themes/appletv/theme.css | 7 ------- src/components/themes/blueradiance/theme.css | 7 ------- src/components/themes/dark/theme.css | 7 ------- src/components/themes/emby/theme.css | 7 ------- src/components/themes/light/theme.css | 7 ------- src/components/themes/purple-haze/theme.css | 7 ------- src/components/themes/wmc/theme.css | 7 ------- src/css/librarybrowser.css | 10 +--------- src/itemdetails.html | 7 +++---- 9 files changed, 4 insertions(+), 62 deletions(-) diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css index 5d475cea68..ff34435b78 100644 --- a/src/components/themes/appletv/theme.css +++ b/src/components/themes/appletv/theme.css @@ -423,13 +423,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#E4E2DC)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC); - background: linear-gradient(rgba(0, 0, 0, 0), #E4E2DC) -} - .infoBanner { color: #000; background: #fff3a5; diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css index 1aac0583b9..e0b5c01f00 100644 --- a/src/components/themes/blueradiance/theme.css +++ b/src/components/themes/blueradiance/theme.css @@ -408,13 +408,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: linear-gradient(rgba(0, 0, 0, 0), #181818) -} - .infoBanner { color: #ddd; background: #111; diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css index e5f0e5a40e..4694771a54 100644 --- a/src/components/themes/dark/theme.css +++ b/src/components/themes/dark/theme.css @@ -385,13 +385,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#101010)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #101010); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #101010); - background: linear-gradient(rgba(0, 0, 0, 0), #101010) -} - .infoBanner { color: #ddd; background: #111; diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css index d4ca52baaf..fa17998479 100644 --- a/src/components/themes/emby/theme.css +++ b/src/components/themes/emby/theme.css @@ -385,13 +385,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#1a1a1a)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a); - background: linear-gradient(rgba(0, 0, 0, 0), #1a1a1a) -} - .infoBanner { color: #ddd; background: #111; diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css index 8cbe886650..8db245894c 100644 --- a/src/components/themes/light/theme.css +++ b/src/components/themes/light/theme.css @@ -404,13 +404,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2); - background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2) -} - .infoBanner { color: #000; background: #fff3a5; diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index 398ad00af6..f45f94ee8d 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -501,13 +501,6 @@ a[data-role=button] { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818); - background: linear-gradient(rgba(0, 0, 0, 0), #181818) -} - .infoBanner { color: #0e0f2d; background: #dbe6ff; diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css index e6404d3620..2b430a9221 100644 --- a/src/components/themes/wmc/theme.css +++ b/src/components/themes/wmc/theme.css @@ -407,13 +407,6 @@ html { color: #fff } -.itemBackdropFader { - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#115E9E)); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #115E9E); - background: -o-linear-gradient(rgba(0, 0, 0, 0), #115E9E); - background: linear-gradient(rgba(0, 0, 0, 0), #115E9E) -} - .infoBanner { color: #000; background: #fff3a5; diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index e6ad6e12a0..0b8311bcd7 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -428,8 +428,8 @@ .itemBackdrop { -webkit-background-size: cover; background-size: cover; - background-position: center center; background-repeat: no-repeat; + background-position: center; height: 50vh; position: relative } @@ -441,14 +441,6 @@ right: 0 } -.itemBackdropFader { - position: absolute; - bottom: -1px; - left: 0; - right: 0; - height: 15vh -} - .desktopMiscInfoContainer { position: absolute; bottom: .75em diff --git a/src/itemdetails.html b/src/itemdetails.html index ab5a1cde97..48c437aeda 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,10 +1,9 @@
-
-
- +
From 156f162d2e16610dd5be8644240977993a4f6896 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 10 Dec 2019 02:15:36 +0300 Subject: [PATCH 08/31] make space between name and controller --- src/itemdetails.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/itemdetails.html b/src/itemdetails.html index 48c437aeda..9e334aaca0 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -13,7 +13,7 @@
-
+
'; html += "
"; - html += '
'; + html += '
'; var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false); html += cardBuilder.getCardsHtml({ items: items, From e18d49556ede0f17d8e764ef7f593a18cc49d2be Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Wed, 11 Dec 2019 20:51:44 +0300 Subject: [PATCH 10/31] change btn split style --- src/itemdetails.html | 76 +++++++++++++++++------------------------- src/strings/en-us.json | 1 + 2 files changed, 31 insertions(+), 46 deletions(-) diff --git a/src/itemdetails.html b/src/itemdetails.html index 9e334aaca0..109212bfa2 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -92,8 +92,11 @@
-
-
+
From 36f60d5923d2b1aa662ca051c34410c59b7921ae Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 20 Dec 2019 23:18:41 +0300 Subject: [PATCH 14/31] reducing show-focus transform scale --- src/components/emby-button/emby-button.css | 4 ++-- src/components/emby-slider/emby-slider.css | 4 ++-- src/components/emby-tabs/emby-tabs.css | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/emby-button/emby-button.css b/src/components/emby-button/emby-button.css index 0273de9d7d..2201b2cd77 100644 --- a/src/components/emby-button/emby-button.css +++ b/src/components/emby-button/emby-button.css @@ -34,7 +34,7 @@ } .emby-button.show-focus:focus { - transform: scale(1.4); + transform: scale(1.2); z-index: 1; } @@ -126,7 +126,7 @@ } .paper-icon-button-light.show-focus:focus { - transform: scale(1.6); + transform: scale(1.3); z-index: 1; } diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css index b173f5c511..945cdd5214 100644 --- a/src/components/emby-slider/emby-slider.css +++ b/src/components/emby-slider/emby-slider.css @@ -84,11 +84,11 @@ _:-ms-input-placeholder { } .mdl-slider:hover::-webkit-slider-thumb { - transform: scale(1.6); + transform: scale(1.3); } .mdl-slider.show-focus:focus::-webkit-slider-thumb { - transform: scale(1.6); + transform: scale(1.3); } .slider-no-webkit-thumb::-webkit-slider-thumb { diff --git a/src/components/emby-tabs/emby-tabs.css b/src/components/emby-tabs/emby-tabs.css index 00abd7efae..b8831b881a 100644 --- a/src/components/emby-tabs/emby-tabs.css +++ b/src/components/emby-tabs/emby-tabs.css @@ -22,7 +22,7 @@ .emby-tab-button.show-focus:focus { /* these buttons are small so scale larger than usual */ - transform: scale(1.6) !important; + transform: scale(1.3) !important; background: 0 !important; } From dfe0b8649512f38c63a209188c9771d3614cd650 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 20 Dec 2019 23:36:56 +0300 Subject: [PATCH 15/31] increase detail logo size --- src/css/librarybrowser.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 1800df5e36..575bf6ddaa 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -480,11 +480,11 @@ } .detailLogo { - width: 21.3em; - height: 5em; + width: 25em; + height: 9.375em; position: absolute; - top: 13.5%; - right: 19.5%; + top: 14.5%; + right: 10.5%; -webkit-background-size: contain; background-size: contain } From 05a200915e7aaebae2cd42d8953f5ff218a73161 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sat, 21 Dec 2019 20:58:38 +0300 Subject: [PATCH 16/31] change cast person card to circle only for pulple-haze theme --- src/components/themes/purple-haze/theme.css | 26 +++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index f45f94ee8d..543ee3bf07 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -573,3 +573,29 @@ a[data-role=button] { .detailPagePrimaryContainer { background-color: rgba(0, 0, 0, 0.4) } + +.personCard .portraitCard { + width: 50%; +} + +.personCard .cardScalable { + border-radius: 50%; + border: 2px solid #AA5CC3; +} + +.personCard .cardPadder-portrait { + padding-bottom: 100%; + contain: strict; +} + +.personCard .coveredImage { + clip-path: circle(50% at 50% 50%); +} + +.personCard .cardOverlayContainer { + clip-path: circle(50% at 50% 50%); +} + +.personCard .cardOverlayButton-br { + right: 20%; +} From f7f83f08d4e24e973bd2d7caff8559b53bced0fd Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 22 Dec 2019 16:32:11 +0300 Subject: [PATCH 17/31] Add show/hide backdrop --- src/controllers/itemdetailpage.js | 38 +++++++++++++++++++++++++++++++ src/itemdetails.html | 29 +++++++++++++++++------ src/strings/en-us.json | 2 ++ 3 files changed, 62 insertions(+), 7 deletions(-) diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index 523b6faf55..8f68009572 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -463,12 +463,18 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana var imgUrl; var screenWidth = screen.availWidth; var hasbackdrop = false; + var backdropWrapper = page.querySelector(".backdropWrapper"); var itemBackdropElement = page.querySelector("#itemBackdrop"); + var btnBackdropShow = page.querySelector(".btnBackdropShow"); var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || item.MediaType && item.MediaType !== "Video" || item.Type === "MusicAlbum" || item.Type === "MusicArtist"; + if (layoutManager.mobile) { + backdropWrapper.classList.remove("hide"); + } + if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", @@ -476,6 +482,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ImageTags.Thumb }); itemBackdropElement.classList.remove("noBackdrop"); + btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) { @@ -485,6 +492,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ImageTags.Primary }); itemBackdropElement.classList.remove("noBackdrop"); + btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (item.BackdropImageTags && item.BackdropImageTags.length) { @@ -494,6 +502,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.BackdropImageTags[0] }); itemBackdropElement.classList.remove("noBackdrop"); + btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { @@ -503,6 +512,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ParentBackdropImageTags[0] }); itemBackdropElement.classList.remove("noBackdrop"); + btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (item.ImageTags && item.ImageTags.Thumb) { @@ -512,10 +522,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ImageTags.Thumb }); itemBackdropElement.classList.remove("noBackdrop"); + btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else { itemBackdropElement.classList.add("noBackdrop"); + btnBackdropShow.classList.add("hide"); itemBackdropElement.style.backgroundImage = ""; } @@ -1913,6 +1925,26 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana }); } + function showBackdrop(instance, page, apiClient, params) { + var backdropWrapper = page.querySelector(".backdropWrapper"); + var btnBackdropHide = page.querySelector(".btnBackdropHide"); + var btnBackdropShow = page.querySelector(".btnBackdropShow"); + + backdropWrapper.classList.remove("hide"); + btnBackdropHide.classList.remove("hide"); + btnBackdropShow.classList.add("hide"); + } + + function hideBackdrop(instance, page, apiClient, params) { + var backdropWrapper = page.querySelector(".backdropWrapper"); + var btnBackdropHide = page.querySelector(".btnBackdropHide"); + var btnBackdropShow = page.querySelector(".btnBackdropShow"); + + backdropWrapper.classList.add("hide"); + btnBackdropHide.classList.add("hide"); + btnBackdropShow.classList.remove("hide"); + } + function getPlayOptions(startPosition) { var audioStreamIndex = view.querySelector(".selectAudio").value || null; return { @@ -2076,6 +2108,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana renderAudioSelections(view, self._currentPlaybackMediaSources); renderSubtitleSelections(view, self._currentPlaybackMediaSources); }); + view.querySelector(".btnBackdropShow").addEventListener("click", function () { + showBackdrop(self, view, apiClient, params); + }); + view.querySelector(".btnBackdropHide").addEventListener("click", function () { + hideBackdrop(self, view, apiClient, params); + }); view.addEventListener("click", function (e) { if (dom.parentWithClass(e.target, "moreScenes")) { apiClient.getCurrentUser().then(function (user) { diff --git a/src/itemdetails.html b/src/itemdetails.html index c210bdf216..79ddd67480 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,13 +1,14 @@
-
- +
+
+ +
+ +
- - -
@@ -109,6 +110,20 @@
${ButtonMore}
+ + + +
diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 2edeb69e88..e2d7cfba89 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -84,6 +84,7 @@ "ButtonGotIt": "Got It", "ButtonGuide": "Guide", "ButtonHelp": "Help", + "ButtonHide": "Hide", "ButtonHome": "Home", "ButtonInfo": "Info", "ButtonLearnMore": "Learn more", @@ -120,6 +121,7 @@ "ButtonSelectView": "Select view", "ButtonSend": "Send", "ButtonSettings": "Settings", + "ButtonShow": "Show", "ButtonShuffle": "Shuffle", "ButtonShutdown": "Shutdown", "ButtonSignIn": "Sign In", From 8e9b094d4b32b2930399309c1767fe30ada382cd Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 22 Dec 2019 17:47:17 +0300 Subject: [PATCH 18/31] backward compateblity for web os --- src/css/librarybrowser.css | 22 ++++ src/itemdetails.html | 210 +++++++++++++++++++------------------ 2 files changed, 128 insertions(+), 104 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 575bf6ddaa..0ac4ae8fcb 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -456,6 +456,10 @@ z-index: 2; } +.layout-tv .detailPagePrimaryContainer { + position: relative; +} + .detailPageSeconderyContainer { margin: 1.25em 0; display:grid; @@ -464,6 +468,16 @@ padding-right:2%; } +.layout-tv .detailPageSeconderyWrapper { + display: flex; +} + +.layout-tv .detailPageSeconderyContainer { + display: flex; + flex-direction: column; + width: 75%; +} + .detailImageContainer { margin: 1.25em 0; width: 350px; @@ -472,6 +486,14 @@ float: left; } +.layout-tv .detailImageContainer { + display: flex; + flex-direction: column; + position: relative; + width: 25%; + float: right; +} + .detailPagePrimaryContent { position: relative; -webkit-box-flex: 1; diff --git a/src/itemdetails.html b/src/itemdetails.html index 79ddd67480..fa350f41ce 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -126,127 +126,129 @@
-
-
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
- + +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+
+ +

+

+

+

+

+

+

+ +
+
+
-
- -
-
- -
-
- -
- - -
-
-
- -

-

-

-

-

-

-

- -
-
-
-
-
-

${HeaderSchedule}

-
-
- -
- -
-

${HeaderNextUp}

-
-
- -
-
-
- -
-

- -

-
-
+
+

${HeaderSchedule}

+
-
-
-

${HeaderAdditionalParts}

-
-
+
-
-

-
-
+
+

${HeaderNextUp}

+
-
-
-

-
-
+
+
-
-
-

${HeaderCastCrew}

-
-
+
+

+ +

+
+
+
-
-
-

${HeaderUpcomingOnTV}

-
-
- -
-

${HeaderSpecialFeatures}

-
-
- -
-

${HeaderMusicVideos}

-
-
- -
-

${HeaderScenes}

-
-
+
+

${HeaderAdditionalParts}

+
-
-
-

${HeaderMoreLikeThis}

-
-
+
+

+
+
+
+
+ +
+

+
+
+
+
+ +
+

${HeaderCastCrew}

+
+
+
+
+ +
+

${HeaderUpcomingOnTV}

+
+
+ +
+

${HeaderSpecialFeatures}

+
+
+ +
+

${HeaderMusicVideos}

+
+
+ +
+

${HeaderScenes}

+
+
+
+
+ +
+

${HeaderMoreLikeThis}

+
+
+
From 77fd191d9913f32af3c3a7a77874f83fce94b7e8 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 22 Dec 2019 20:01:33 +0300 Subject: [PATCH 19/31] Fix detailPagePrimaryContainer style --- src/css/librarybrowser.css | 39 +++++++++++++++++++++++++------------- src/itemdetails.html | 6 +++--- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 0ac4ae8fcb..dacfa7c57b 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -233,6 +233,7 @@ } @media all and (min-width:40em) { + .dashboardDocument .adminDrawerLogo, .dashboardDocument .mainDrawerButton { display: none !important @@ -422,7 +423,7 @@ } .noBackdrop { - display:none; + display: none; } .itemBackdrop { @@ -448,24 +449,32 @@ .detailPagePrimaryContainer { display: flex; - justify-content: space-between; - flex-wrap: wrap; align-items: center; + flex-flow: row wrap; + align-content: center; position: sticky; top: 0; z-index: 2; } +.infoWrapper { + margin: 1.25em 0 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + flex: 1 0 0; +} + .layout-tv .detailPagePrimaryContainer { position: relative; } .detailPageSeconderyContainer { margin: 1.25em 0; - display:grid; + display: grid; grid-template-columns: 100%; - padding-left:2%; - padding-right:2%; + padding-left: 2%; + padding-right: 2%; } .layout-tv .detailPageSeconderyWrapper { @@ -479,10 +488,8 @@ } .detailImageContainer { - margin: 1.25em 0; - width: 350px; position: sticky; - top:15%; + top: 15%; float: left; } @@ -601,8 +608,14 @@ .detailPagePrimaryContainer { display: flex; + align-items: center; justify-content: center; - flex-wrap: wrap; + } + + .infoWrapper { + text-overflow: initial; + white-space: normal; + flex: initial; } } @@ -621,7 +634,7 @@ .detailButton-mobile, .mainDetailButtons { display: -webkit-box; - display: -webkit-flex + display: -webkit-flex; } .itemName { @@ -904,7 +917,7 @@ margin: 1.25em 0; } -.sectionTitleContainer > .sectionTitle { +.sectionTitleContainer>.sectionTitle { margin: 0; display: inline-block; vertical-align: middle; @@ -924,7 +937,7 @@ flex-shrink: 0 } -.sectionTitleButton + .sectionTitleButton { +.sectionTitleButton+.sectionTitleButton { margin-left: .5em !important } diff --git a/src/itemdetails.html b/src/itemdetails.html index fa350f41ce..7c5009ec80 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -13,9 +13,9 @@
-
-
-
+
+
+
From 5e3b2a642d7b4e641e940d4e45bfb4f99870c13c Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 22 Dec 2019 23:51:53 +0300 Subject: [PATCH 20/31] fix text overflow --- src/controllers/itemdetailpage.js | 6 +++--- src/css/librarybrowser.css | 10 ++++++---- src/itemdetails.html | 2 +- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index 8f68009572..de5d270c35 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -419,13 +419,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana var offset = parentNameLast ? ".25em" : ".5em"; if (html && !parentNameLast) { - html += '

' + name + '

'; + html += '

' + name + '

'; } else { - html = '

' + name + "

" + html; + html = '

' + name + "

" + html; } if (item.OriginalTitle && item.OriginalTitle != item.Name) { - html += '

' + item.OriginalTitle + '

'; + html += '

' + item.OriginalTitle + '

'; } container.innerHTML = html; diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index dacfa7c57b..9668eee20f 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -459,10 +459,14 @@ .infoWrapper { margin: 1.25em 0 0; - text-overflow: ellipsis; + flex: 1 0 0; +} + +.infoText { white-space: nowrap; overflow: hidden; - flex: 1 0 0; + text-overflow: ellipsis; + text-align: left; } .layout-tv .detailPagePrimaryContainer { @@ -613,8 +617,6 @@ } .infoWrapper { - text-overflow: initial; - white-space: normal; flex: initial; } } diff --git a/src/itemdetails.html b/src/itemdetails.html index 7c5009ec80..5216f1c4d3 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -12,7 +12,7 @@
-
+
From 7f2cc73e632239910f4dec834621016eddb6ee52 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Tue, 24 Dec 2019 03:17:33 +0300 Subject: [PATCH 21/31] backward compateblity --- src/css/librarybrowser.css | 35 +++--- src/itemdetails.html | 214 ++++++++++++++++++------------------- 2 files changed, 118 insertions(+), 131 deletions(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 9668eee20f..ba0148e036 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -447,6 +447,10 @@ bottom: .75em } +.layout-tv .detailPagePrimaryContainer { + position: relative; +} + .detailPagePrimaryContainer { display: flex; align-items: center; @@ -459,6 +463,7 @@ .infoWrapper { margin: 1.25em 0 0; + padding-left: 3%; flex: 1 0 0; } @@ -469,42 +474,25 @@ text-align: left; } -.layout-tv .detailPagePrimaryContainer { - position: relative; -} - .detailPageSeconderyContainer { margin: 1.25em 0; - display: grid; - grid-template-columns: 100%; + display: flex; + flex-direction: column; padding-left: 2%; padding-right: 2%; } -.layout-tv .detailPageSeconderyWrapper { - display: flex; -} - -.layout-tv .detailPageSeconderyContainer { - display: flex; - flex-direction: column; - width: 75%; +.layout-tv .detailImageContainer { + position: relative; } .detailImageContainer { + margin: 1.25em 0; position: sticky; top: 15%; float: left; } -.layout-tv .detailImageContainer { - display: flex; - flex-direction: column; - position: relative; - width: 25%; - float: right; -} - .detailPagePrimaryContent { position: relative; -webkit-box-flex: 1; @@ -662,7 +650,8 @@ align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; - margin: 1em 0 + margin: 1em 0; + padding-right: 3%; } .recordingFields button { diff --git a/src/itemdetails.html b/src/itemdetails.html index 5216f1c4d3..3385636029 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -10,7 +10,7 @@
-
+
@@ -18,7 +18,7 @@
-
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -

-

-

-

-

-

-

- -
-
-
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +

+

+

+

+

+

+

+ +
+
+
+
-
-

${HeaderSchedule}

-
+
+

${HeaderSchedule}

+
+
+ +
+ +
+

${HeaderNextUp}

+
+
+ +
+
+
+ +
+

+ +

+
+
+
-
+
+

${HeaderAdditionalParts}

+
+
-
-

${HeaderNextUp}

-
+
+

+
+
+
-
-
+
+

+
+
+
-
-

- -

-
-
-
+
+

${HeaderCastCrew}

+
+
+
-
-

${HeaderAdditionalParts}

-
+
+

${HeaderUpcomingOnTV}

+
+
+ +
+

${HeaderSpecialFeatures}

+
+
+ +
+

${HeaderMusicVideos}

+
+
+ +
+

${HeaderScenes}

+
+
+
-
-

-
-
-
-
- -
-

-
-
-
-
- -
-

${HeaderCastCrew}

-
-
-
-
- -
-

${HeaderUpcomingOnTV}

-
-
- -
-

${HeaderSpecialFeatures}

-
-
- -
-

${HeaderMusicVideos}

-
-
- -
-

${HeaderScenes}

-
-
-
-
- -
-

${HeaderMoreLikeThis}

-
-
-
+
+

${HeaderMoreLikeThis}

+
+
From 89b1fd7ce0137ba8af61c9ee4d0db11c2d771169 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 30 Dec 2019 03:07:45 +0300 Subject: [PATCH 22/31] fix cast circle for mobile divice --- src/components/themes/purple-haze/theme.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index 543ee3bf07..dcfa0ec494 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -580,9 +580,10 @@ a[data-role=button] { .personCard .cardScalable { border-radius: 50%; - border: 2px solid #AA5CC3; + border: 1px solid rgb(255, 255, 255); } +.personCard .cardPadder-overflowPortrait, .personCard .cardPadder-portrait { padding-bottom: 100%; contain: strict; From e0d6686bb48204961b0e8ffd97f32a1301b0a424 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Thu, 2 Jan 2020 20:27:37 +0300 Subject: [PATCH 23/31] remove btn backdrop show/hide --- src/controllers/itemdetailpage.js | 38 ------------------------------- src/itemdetails.html | 28 +++++------------------ src/strings/en-us.json | 2 -- 3 files changed, 6 insertions(+), 62 deletions(-) diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index de5d270c35..f5d32f34e8 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -463,18 +463,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana var imgUrl; var screenWidth = screen.availWidth; var hasbackdrop = false; - var backdropWrapper = page.querySelector(".backdropWrapper"); var itemBackdropElement = page.querySelector("#itemBackdrop"); - var btnBackdropShow = page.querySelector(".btnBackdropShow"); var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" || item.MediaType && item.MediaType !== "Video" || item.Type === "MusicAlbum" || item.Type === "MusicArtist"; - if (layoutManager.mobile) { - backdropWrapper.classList.remove("hide"); - } - if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) { imgUrl = apiClient.getScaledImageUrl(item.Id, { type: "Thumb", @@ -482,7 +476,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ImageTags.Thumb }); itemBackdropElement.classList.remove("noBackdrop"); - btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) { @@ -492,7 +485,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ImageTags.Primary }); itemBackdropElement.classList.remove("noBackdrop"); - btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (item.BackdropImageTags && item.BackdropImageTags.length) { @@ -502,7 +494,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.BackdropImageTags[0] }); itemBackdropElement.classList.remove("noBackdrop"); - btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) { @@ -512,7 +503,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ParentBackdropImageTags[0] }); itemBackdropElement.classList.remove("noBackdrop"); - btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else if (item.ImageTags && item.ImageTags.Thumb) { @@ -522,12 +512,10 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana tag: item.ImageTags.Thumb }); itemBackdropElement.classList.remove("noBackdrop"); - btnBackdropShow.classList.remove("hide"); imageLoader.lazyImage(itemBackdropElement, imgUrl, false); hasbackdrop = true; } else { itemBackdropElement.classList.add("noBackdrop"); - btnBackdropShow.classList.add("hide"); itemBackdropElement.style.backgroundImage = ""; } @@ -1925,26 +1913,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana }); } - function showBackdrop(instance, page, apiClient, params) { - var backdropWrapper = page.querySelector(".backdropWrapper"); - var btnBackdropHide = page.querySelector(".btnBackdropHide"); - var btnBackdropShow = page.querySelector(".btnBackdropShow"); - - backdropWrapper.classList.remove("hide"); - btnBackdropHide.classList.remove("hide"); - btnBackdropShow.classList.add("hide"); - } - - function hideBackdrop(instance, page, apiClient, params) { - var backdropWrapper = page.querySelector(".backdropWrapper"); - var btnBackdropHide = page.querySelector(".btnBackdropHide"); - var btnBackdropShow = page.querySelector(".btnBackdropShow"); - - backdropWrapper.classList.add("hide"); - btnBackdropHide.classList.add("hide"); - btnBackdropShow.classList.remove("hide"); - } - function getPlayOptions(startPosition) { var audioStreamIndex = view.querySelector(".selectAudio").value || null; return { @@ -2108,12 +2076,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana renderAudioSelections(view, self._currentPlaybackMediaSources); renderSubtitleSelections(view, self._currentPlaybackMediaSources); }); - view.querySelector(".btnBackdropShow").addEventListener("click", function () { - showBackdrop(self, view, apiClient, params); - }); - view.querySelector(".btnBackdropHide").addEventListener("click", function () { - hideBackdrop(self, view, apiClient, params); - }); view.addEventListener("click", function (e) { if (dom.parentWithClass(e.target, "moreScenes")) { apiClient.getCurrentUser().then(function (user) { diff --git a/src/itemdetails.html b/src/itemdetails.html index 3385636029..d92b8688ef 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,14 +1,12 @@
-
-
- -
- - +
+
+ +
@@ -110,20 +108,6 @@
${ButtonMore}
- - - -
diff --git a/src/strings/en-us.json b/src/strings/en-us.json index e2d7cfba89..2edeb69e88 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -84,7 +84,6 @@ "ButtonGotIt": "Got It", "ButtonGuide": "Guide", "ButtonHelp": "Help", - "ButtonHide": "Hide", "ButtonHome": "Home", "ButtonInfo": "Info", "ButtonLearnMore": "Learn more", @@ -121,7 +120,6 @@ "ButtonSelectView": "Select view", "ButtonSend": "Send", "ButtonSettings": "Settings", - "ButtonShow": "Show", "ButtonShuffle": "Shuffle", "ButtonShutdown": "Shutdown", "ButtonSignIn": "Sign In", From 4e72a857c4c11bf83777829a33f1ddbd974e7338 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 3 Jan 2020 21:10:42 +0300 Subject: [PATCH 24/31] change shap to overflow --- src/components/themes/purple-haze/theme.css | 4 ++-- src/controllers/itemdetailpage.js | 8 ++++---- src/css/librarybrowser.css | 14 ++++---------- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index dcfa0ec494..11cb044211 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -574,8 +574,8 @@ a[data-role=button] { background-color: rgba(0, 0, 0, 0.4) } -.personCard .portraitCard { - width: 50%; +.personCard .overflowPortraitCard { + width: 40vw; } .personCard .cardScalable { diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index f5d32f34e8..e02063c031 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -895,7 +895,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana var html = cardBuilder.getCardsHtml({ items: result.Items, - shape: getThumbShape(false), + shape: "overflowBackdrop", showTitle: true, displayAsSpecial: "Season" == item.Type && item.IndexNumber, overlayText: false, @@ -1400,7 +1400,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana scrollX = enableScrollX(); html = cardBuilder.getCardsHtml({ items: result.Items, - shape: getPortraitShape(), + shape: "overflowPortrait", showTitle: true, centerText: true, lazy: true, @@ -1419,7 +1419,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana if ("Episode" === item.Type) { html = cardBuilder.getCardsHtml({ items: result.Items, - shape: getThumbShape(scrollX), + shape: "overflowBackdrop", showTitle: true, displayAsSpecial: "Season" == item.Type && item.IndexNumber, playFromHere: true, @@ -1857,7 +1857,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana coverImage: true, serverId: item.ServerId, width: 160, - shape: getPortraitShape() + shape: "overflowPortrait" }); }); } diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index ba0148e036..879ee010ea 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -491,6 +491,7 @@ position: sticky; top: 15%; float: left; + width: 22.786458333333332vw; } .detailPagePrimaryContent { @@ -535,9 +536,10 @@ } .itemDetailImage { - width: 350px; -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) + box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); + width: 100% !important; + } @media all and (max-width:62.5em) { @@ -545,14 +547,6 @@ position: relative } - .detailImageContainer { - width: 100px !important - } - - .itemDetailImage { - width: 100px !important - } - .btnPlaySimple { display: none !important } From ac9fece8cca15d93daa28afb4ccf09a6a3387d0b Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 3 Jan 2020 22:11:23 +0300 Subject: [PATCH 25/31] change style --- src/components/themes/appletv/theme.css | 4 ---- src/components/themes/blueradiance/theme.css | 4 ---- src/components/themes/dark/theme.css | 4 ---- src/components/themes/emby/theme.css | 4 ---- src/components/themes/light/theme.css | 4 ---- src/components/themes/purple-haze/theme.css | 4 ---- src/itemdetails.html | 2 +- 7 files changed, 1 insertion(+), 25 deletions(-) diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css index ff34435b78..95e1927676 100644 --- a/src/components/themes/appletv/theme.css +++ b/src/components/themes/appletv/theme.css @@ -456,7 +456,3 @@ html { .metadataSidebarIcon { color: #00a4dc } - -.detailPagePrimaryContainer { - background-color: rgba(255, 255, 255, 0.4) -} diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css index e0b5c01f00..b01190d80c 100644 --- a/src/components/themes/blueradiance/theme.css +++ b/src/components/themes/blueradiance/theme.css @@ -464,7 +464,3 @@ html { .metadataSidebarIcon { color: #00a4dc } - -.detailPagePrimaryContainer { - background-color: rgba(0, 0, 0, 0.4) -} diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css index 4694771a54..6d7fcd0c29 100644 --- a/src/components/themes/dark/theme.css +++ b/src/components/themes/dark/theme.css @@ -441,7 +441,3 @@ html { .metadataSidebarIcon { color: #00a4dc } - -.detailPagePrimaryContainer { - background-color: rgba(0, 0, 0, 0.4) -} diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css index fa17998479..5668ee5295 100644 --- a/src/components/themes/emby/theme.css +++ b/src/components/themes/emby/theme.css @@ -441,7 +441,3 @@ html { .metadataSidebarIcon { color: #00a4dc } - -.detailPagePrimaryContainer { - background-color: rgba(0, 0, 0, 0.4) -} diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css index 8db245894c..53a8b79064 100644 --- a/src/components/themes/light/theme.css +++ b/src/components/themes/light/theme.css @@ -437,7 +437,3 @@ html { .metadataSidebarIcon { color: #00a4dc } - -.detailPagePrimaryContainer { - background-color: rgba(255, 255, 255, 0.4) -} diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css index 11cb044211..f6d59341b9 100644 --- a/src/components/themes/purple-haze/theme.css +++ b/src/components/themes/purple-haze/theme.css @@ -570,10 +570,6 @@ a[data-role=button] { color: #dbe6ff } -.detailPagePrimaryContainer { - background-color: rgba(0, 0, 0, 0.4) -} - .personCard .overflowPortraitCard { width: 40vw; } diff --git a/src/itemdetails.html b/src/itemdetails.html index d92b8688ef..c7c890283c 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -8,7 +8,7 @@
-
+
From f92c05b9d3888cd059887e720d0243f4bc35b119 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 3 Jan 2020 22:37:11 +0300 Subject: [PATCH 26/31] change sticky to relative for mobile too to gain more room --- src/css/librarybrowser.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 879ee010ea..6197a2d1c3 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -447,6 +447,7 @@ bottom: .75em } +.layout-mobile .detailPagePrimaryContainer, .layout-tv .detailPagePrimaryContainer { position: relative; } @@ -482,6 +483,7 @@ padding-right: 2%; } +.layout-mobile .detailImageContainer, .layout-tv .detailImageContainer { position: relative; } From a5ec665cfa8185d1a4e56a0973b86765b0ac7cc9 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Fri, 3 Jan 2020 23:34:07 +0300 Subject: [PATCH 27/31] change detailImageProgressContainer width to vw --- src/css/librarybrowser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 6197a2d1c3..ff10701756 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -723,7 +723,7 @@ .detailImageProgressContainer { margin-left: 6px; - width: 350px; + width: 21.886458333333332vw; } .detailButton-mobile-text { From 0600fb26a34bb989dbae382dc711ed477f0d3b15 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Sun, 5 Jan 2020 23:55:28 +0300 Subject: [PATCH 28/31] apply suggestion change --- src/controllers/itemdetailpage.js | 6 +++--- src/css/librarybrowser.css | 30 ++++++++---------------------- src/itemdetails.html | 8 ++++---- 3 files changed, 15 insertions(+), 29 deletions(-) diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index e02063c031..782f3cd16e 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -419,13 +419,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana var offset = parentNameLast ? ".25em" : ".5em"; if (html && !parentNameLast) { - html += '

' + name + '

'; + html += '

' + name + '

'; } else { - html = '

' + name + "

" + html; + html = '

' + name + "

" + html; } if (item.OriginalTitle && item.OriginalTitle != item.Name) { - html += '

' + item.OriginalTitle + '

'; + html += '

' + item.OriginalTitle + '

'; } container.innerHTML = html; diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index ff10701756..835f5ddbff 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -422,10 +422,6 @@ left: .8em } -.noBackdrop { - display: none; -} - .itemBackdrop { -webkit-background-size: cover; background-size: cover; @@ -447,7 +443,11 @@ bottom: .75em } -.layout-mobile .detailPagePrimaryContainer, +.layout-mobile .detailPagePrimaryContainer { + display: block; + position: relative; +} + .layout-tv .detailPagePrimaryContainer { position: relative; } @@ -455,7 +455,6 @@ .detailPagePrimaryContainer { display: flex; align-items: center; - flex-flow: row wrap; align-content: center; position: sticky; top: 0; @@ -463,8 +462,6 @@ } .infoWrapper { - margin: 1.25em 0 0; - padding-left: 3%; flex: 1 0 0; } @@ -475,7 +472,7 @@ text-align: left; } -.detailPageSeconderyContainer { +.detailPageSecondaryContainer { margin: 1.25em 0; display: flex; flex-direction: column; @@ -587,22 +584,12 @@ } .itemDetailPage { - padding-top: 2em !important + padding-top: 0em !important } .detailimg-hidemobile { display: none } - - .detailPagePrimaryContainer { - display: flex; - align-items: center; - justify-content: center; - } - - .infoWrapper { - flex: initial; - } } @media all and (min-width:31.25em) { @@ -647,7 +634,6 @@ -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 1em 0; - padding-right: 3%; } .recordingFields button { @@ -904,7 +890,7 @@ margin: 1.25em 0; } -.sectionTitleContainer>.sectionTitle { +.sectionTitleContainer > .sectionTitle { margin: 0; display: inline-block; vertical-align: middle; diff --git a/src/itemdetails.html b/src/itemdetails.html index c7c890283c..4208d99262 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -8,12 +8,12 @@
-
+
-
-
+
+
@@ -111,7 +111,7 @@
-
+
From a73da9f46b6297f54c5fa970ffc9646de8de29e3 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 6 Jan 2020 00:10:25 +0300 Subject: [PATCH 29/31] remove leftover detailPagePrimaryContainer style form theme --- src/components/themes/wmc/theme.css | 4 ---- src/css/librarybrowser.css | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css index 2b430a9221..1516b45f14 100644 --- a/src/components/themes/wmc/theme.css +++ b/src/components/themes/wmc/theme.css @@ -459,7 +459,3 @@ html { .metadataSidebarIcon { color: #00a4dc } - -.detailPagePrimaryContainer { - background-color: rgba(0, 0, 0, 0.4) -} diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index 835f5ddbff..d5538eb2eb 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -584,7 +584,7 @@ } .itemDetailPage { - padding-top: 0em !important + padding-top: 0 !important } .detailimg-hidemobile { From 6e39a97bf2744b0e4957d409581b4119a43392c9 Mon Sep 17 00:00:00 2001 From: grafixeyehero Date: Mon, 6 Jan 2020 00:14:11 +0300 Subject: [PATCH 30/31] spacing --- src/css/librarybrowser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css index d5538eb2eb..f93ee91b83 100644 --- a/src/css/librarybrowser.css +++ b/src/css/librarybrowser.css @@ -910,7 +910,7 @@ flex-shrink: 0 } -.sectionTitleButton+.sectionTitleButton { +.sectionTitleButton + .sectionTitleButton { margin-left: .5em !important } From 4771e6466e6d3b064c880e686bd374ab97ea8d45 Mon Sep 17 00:00:00 2001 From: dkanada Date: Wed, 8 Jan 2020 22:04:02 +0900 Subject: [PATCH 31/31] minor refactoring on item details page --- src/itemdetails.html | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/itemdetails.html b/src/itemdetails.html index 4208d99262..5240cd5744 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,5 +1,4 @@
-
-