diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index edda12f35..01605a9d8 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -12,7 +12,7 @@
}
.background-theme-b .backgroundContainer.withBackdrop {
- background-color: rgba(6, 6,6, .72);
+ background-color: rgba(6, 6,6, .74);
}
.ui-body-b {
@@ -408,14 +408,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
background-color: #cc3333 !important;
}
-.textLinkList a {
- margin: 0 .5em;
-}
-
- .textLinkList a:first-child {
- margin-left: 0;
- }
-
@media all and (max-width: 800px) {
.parentName {
@@ -805,3 +797,29 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.btnSyncComplete i {
border-radius: 1000px;
}
+
+.bulletSeparator {
+ margin: 0 .35em;
+}
+
+.mediaInfoIcons {
+ display: flex;
+ align-items: center;
+ margin: 1.25em 0;
+}
+
+.mediaInfoText {
+ background: rgba(31,31,31,.7);
+ padding: .2em .5em;
+ border-radius: .25em;
+ color: #ddd;
+ margin-right: .5em;
+ font-size: 94%;
+ background: rgba(170,170,190, .2);
+ display: flex;
+ align-items: center;
+}
+
+.mediaInfoText-upper {
+ text-transform: uppercase;
+}
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index b6e5908b8..f0e52a781 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -15,13 +15,6 @@
-
-
-
-
@@ -55,22 +48,30 @@
+
+
+
+
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 799fee503..e3a284deb 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -119,7 +119,7 @@
if (dom.getWindowSize().innerWidth >= 800) {
backdrop.setBackdrops([item], {
- blur: 24
+ blur: 20
}, false);
} else {
backdrop.clear();
@@ -362,7 +362,7 @@
if (links.length) {
- var html = links.join('•');
+ var html = links.join('
•');
linksElem.innerHTML = html;
linksElem.classList.remove('hide');
@@ -693,13 +693,10 @@
renderSeriesAirTime(page, item, isStatic);
- var dateAddedElement = page.querySelector('#dateAdded');
-
- if (itemHelper.enableDateAddedDisplay(item)) {
- dateAddedElement.classList.remove('hide');
- dateAddedElement.innerHTML = globalize.translate('DateAddedValue', datetime.toLocaleDateString(datetime.parseISO8601Date(item.DateCreated)));
+ if (renderDynamicMediaIcons(page, item)) {
+ page.querySelector('.mediaInfoIcons').classList.remove('hide');
} else {
- dateAddedElement.classList.add('hide');
+ page.querySelector('.mediaInfoIcons').classList.add('hide');
}
var artist = page.querySelectorAll('.artist');
@@ -726,6 +723,25 @@
}
}
+ function renderDynamicMediaIcons(view, item) {
+
+ var html = mediaInfo.getMediaInfoStats(item).map(function (mediaInfoItem) {
+
+ var text = mediaInfoItem.text;
+
+ if (mediaInfoItem.type === 'added') {
+ return '
' + text + '
';
+ }
+
+ return '
' + text + '
';
+
+ }).join('');
+
+ view.querySelector('.mediaInfoIcons').innerHTML = html;
+
+ return html;
+ }
+
function renderPhotoInfo(page, item) {
var html = '';
@@ -1422,7 +1438,7 @@
}
if (i > 0) {
- html += '•';
+ html += '
•';
}
var param = item.Type == "Audio" || item.Type == "MusicArtist" || item.Type == "MusicAlbum" ? "musicgenre" : "genre";