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:
parent
f9c330fb36
commit
56cb3118df
5 changed files with 131 additions and 10 deletions
|
@ -50,3 +50,13 @@
|
|||
.userDataCell {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.tabletColumn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
.tabletColumn {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>';
|
||||
}
|
||||
|
|
|
@ -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>';
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue