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}

-
-
-
-