1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

more music sorting options

This commit is contained in:
Luke Pulverenti 2013-04-27 18:04:14 -04:00
parent f9c330fb36
commit 56cb3118df
5 changed files with 131 additions and 10 deletions

View file

@ -50,3 +50,13 @@
.userDataCell {
width: 140px;
}
.tabletColumn {
display: none;
}
@media all and (min-width: 750px) {
.tabletColumn {
display: table-cell;
}
}

View file

@ -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);
}
}

View file

@ -210,7 +210,7 @@
html += '<th></th>';
html += '<th>Track</th>';
html += '<th class="tabletColumn">Track</th>';
if (options.showAlbum) {
html += '<th>Album</th>';
@ -219,9 +219,9 @@
html += '<th>Artist</th>';
}
html += '<th>Duration</th>';
html += '<th>Play Count</th>';
html += '<th class="userDataCell"></th>';
html += '<th class="tabletColumn">Duration</th>';
html += '<th class="tabletColumn">Play Count</th>';
html += '<th class="tabletColumn userDataCell"></th>';
html += '</tr>';
@ -236,7 +236,7 @@
if (num && item.ParentIndexNumber) {
num = item.ParentIndexNumber + "." + num;
}
html += '<td>' + (num || "") + '</td>';
html += '<td class="tabletColumn">' + (num || "") + '</td>';
html += '<td><a href="' + LibraryBrowser.getHref(item, "music") + '">' + (item.Name || "") + '</a></td>';
@ -262,11 +262,11 @@
var time = DashboardPage.getDisplayText(item.RunTimeTicks || 0);
html += '<td>' + time + '</td>';
html += '<td class="tabletColumn">' + time + '</td>';
html += '<td>' + (item.UserData ? item.UserData.PlayCount : 0) + '</td>';
html += '<td class="tabletColumn">' + (item.UserData ? item.UserData.PlayCount : 0) + '</td>';
html += '<td class="userDataCell">' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
html += '<td class="tabletColumn userDataCell">' + LibraryBrowser.getUserDataIconsHtml(item) + '</td>';
html += '</tr>';
}

View file

@ -216,7 +216,7 @@
html += '</form>';
html += '<div id="searchHints" class="searchHints" style="display:none;"><div class="searchHintsContent"></div></div>';
html += '<div id="searchHints" class="searchHints" style="display:none;"><div class="searchHintsContent"><div class="circle"></div><div class="circle1"></div></div></div>';
html += '</div>';

View file

@ -33,8 +33,29 @@
<strong>Sort By:</strong>
</legend>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="SortName" data-mini="true">
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioSortName" value="on" checked="checked" data-sortby="Artist,Album,SortName" data-mini="true">
<label for="radioSortName">Name</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioAlbum" value="on" checked="checked" data-sortby="Album" data-mini="true">
<label for="radioAlbum">Album</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioArtist" value="on" checked="checked" data-sortby="Artist" data-mini="true">
<label for="radioArtist">Artist</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDateCreated" value="off" data-sortby="DateCreated,Artist,Album,SortName" data-mini="true">
<label for="radioDateCreated">Date Added</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,Artist,Album,SortName" data-mini="true">
<label for="radioDatePlayed">Date Played</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPremiereDate" value="off" data-sortby="PremiereDate,Artist,Album,SortName" data-mini="true">
<label for="radioPremiereDate">Date Released</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioPlayCount" value="off" data-sortby="PlayCount,Artist,Album,SortName" data-mini="true">
<label for="radioPlayCount">Play Count</label>
<input class="radioSortBy" data-theme="c" type="radio" name="radioSortBy" id="radioRuntime" value="off" data-sortby="Runtime" data-mini="true">
<label for="radioRuntime">Runtime</label>
</fieldset>
<fieldset data-role="controlgroup">