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";