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 += '
";
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}
+
+
+
+
+
+
+
+
+
+
${HeaderAdditionalParts}
+
+
+
+
+
+
+
+
${HeaderUpcomingOnTV}
+
+
+
+
+
${HeaderSpecialFeatures}
+
+
+
+
${HeaderMusicVideos}
+
+
+
+
+
+
-
-
- ${HeaderSchedule}
-
-
-
-
-
-
-
-
-
-
${HeaderAdditionalParts}
-
-
-
-
-
-
-
${HeaderUpcomingOnTV}
-
-
-
-
-
${HeaderSpecialFeatures}
-
-
-
-
${HeaderMusicVideos}
-
-
-
-
-
-