diff --git a/dashboard-ui/css/detailtable.css b/dashboard-ui/css/detailtable.css index 4d55431943..13758715ed 100644 --- a/dashboard-ui/css/detailtable.css +++ b/dashboard-ui/css/detailtable.css @@ -50,3 +50,13 @@ .userDataCell { width: 140px; } + +.tabletColumn { + display: none; +} + +@media all and (min-width: 750px) { + .tabletColumn { + display: table-cell; + } +} diff --git a/dashboard-ui/css/search.css b/dashboard-ui/css/search.css index c4c3843a7a..fa2e5c7c6b 100644 --- a/dashboard-ui/css/search.css +++ b/dashboard-ui/css/search.css @@ -8,8 +8,10 @@ vertical-align: middle; font: 16px arial,sans-serif; height: 28px; + line-height: 28px; margin: 0 .15em 0 0; width: 150px; + padding: 0; } .btnSearch { @@ -148,3 +150,91 @@ width: 398px; } } + +.circle { + background-color: rgba(0,0,0,0); + border: 5px solid rgba(0,183,229,0.9); + opacity: .9; + border-right: 5px solid rgba(0,0,0,0); + border-left: 5px solid rgba(0,0,0,0); + border-radius: 50px; + box-shadow: 0 0 35px #2187e7; + width: 50px; + height: 50px; + margin: 0 auto; + -moz-animation: spinPulse 1s infinite ease-in-out; + -webkit-animation: spinPulse 1s infinite linear; +} + +.circle1 { + background-color: rgba(0,0,0,0); + border: 5px solid rgba(0,183,229,0.9); + opacity: .9; + border-left: 5px solid rgba(0,0,0,0); + border-right: 5px solid rgba(0,0,0,0); + border-radius: 50px; + box-shadow: 0 0 15px #2187e7; + width: 30px; + height: 30px; + margin: 0 auto; + position: relative; + top: -50px; + -moz-animation: spinoffPulse 1s infinite linear; + -webkit-animation: spinoffPulse 1s infinite linear; +} + +@-moz-keyframes spinPulse { + 0% { + -moz-transform: rotate(160deg); + opacity: 0; + box-shadow: 0 0 1px #2187e7; + } + + 50% { + -moz-transform: rotate(145deg); + opacity: 1; + } + + 100% { + -moz-transform: rotate(-320deg); + opacity: 0; + } +} + +@-moz-keyframes spinoffPulse { + 0% { + -moz-transform: rotate(0deg); + } + + 100% { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes spinPulse { + 0% { + -webkit-transform: rotate(160deg); + opacity: 0; + box-shadow: 0 0 1px #2187e7; + } + + 50% { + -webkit-transform: rotate(145deg); + opacity: 1; + } + + 100% { + -webkit-transform: rotate(-320deg); + opacity: 0; + } +} + +@-webkit-keyframes spinoffPulse { + 0% { + -webkit-transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + } +} diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index f5f45a7d66..a2966509fb 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -210,7 +210,7 @@ html += ''; - html += 'Track'; + html += 'Track'; if (options.showAlbum) { html += 'Album'; @@ -219,9 +219,9 @@ html += 'Artist'; } - html += 'Duration'; - html += 'Play Count'; - html += ''; + html += 'Duration'; + html += 'Play Count'; + html += ''; html += ''; @@ -236,7 +236,7 @@ if (num && item.ParentIndexNumber) { num = item.ParentIndexNumber + "." + num; } - html += '' + (num || "") + ''; + html += '' + (num || "") + ''; html += '' + (item.Name || "") + ''; @@ -262,11 +262,11 @@ var time = DashboardPage.getDisplayText(item.RunTimeTicks || 0); - html += '' + time + ''; + html += '' + time + ''; - html += '' + (item.UserData ? item.UserData.PlayCount : 0) + ''; + html += '' + (item.UserData ? item.UserData.PlayCount : 0) + ''; - html += '' + LibraryBrowser.getUserDataIconsHtml(item) + ''; + html += '' + LibraryBrowser.getUserDataIconsHtml(item) + ''; html += ''; } diff --git a/dashboard-ui/scripts/search.js b/dashboard-ui/scripts/search.js index 27704199ab..7f1224f507 100644 --- a/dashboard-ui/scripts/search.js +++ b/dashboard-ui/scripts/search.js @@ -216,7 +216,7 @@ html += ''; - html += ''; + html += ''; html += ''; diff --git a/dashboard-ui/songs.html b/dashboard-ui/songs.html index 120e02f11e..6deafeb86d 100644 --- a/dashboard-ui/songs.html +++ b/dashboard-ui/songs.html @@ -33,8 +33,29 @@ Sort By: - + + + + + + + + + + + + + + + + + + + + + +