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

improved grid view

Browse source
This commit is contained in:
Luke Pulverenti 2013-04-06 16:44:14 -04:00
parent 79af4a5c3f
commit e37f1d2fbc
2 changed files with 49 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

46
dashboard-ui/css/librarybrowser.css
View file

@ -69,13 +69,33 @@
max-width: 300px;
}
.libraryItemsGrid .imgUserItemRating {
width: 20px;
height: 20px;
.libraryItemsGrid {
margin: 0 auto;
border-spacing: 0;
border-collapse: collapse;
max-width: 100%;
}
.libraryItemsGrid a {
.libraryItemsGrid a {
text-shadow: none;
}
.libraryItemsGrid th, .libraryItemsGrid td {
vertical-align: top;
text-align: left;
padding: 10px;
}
.libraryItemsGrid th {
padding-bottom: 1em;
}
.libraryItemsGrid td {
border-top: 1px solid #555;
}
.tabletColumn, .desktopColumn {
display: none!important;
}
@media all and (min-width: 650px) {
@ -84,6 +104,12 @@
}
}
@media all and (min-width: 750px) {
.tabletColumn {
display: table-cell!important;
}
}
@media all and (min-width: 1200px) {
.libraryPage .ui-content {
@ -94,8 +120,8 @@
max-width: 850px;
}
.libraryItemsGridContainer {
padding: 0 10%;
.desktopColumn {
display: table-cell!important;
}
}
@ -103,18 +129,10 @@
.ehsContent {
max-width: 900px;
}
.libraryItemsGridContainer {
padding: 0 20%;
}
}
@media all and (min-width: 1920px) {
.ehsContent {
max-width: 1000px;
}
.libraryItemsGridContainer {
padding: 0 25%;
}
}

29
dashboard-ui/scripts/movies.js
View file

@ -9,23 +9,24 @@
SortOrder: "Ascending",
IncludeItemTypes: "Movie",
Recursive: true,
Fields: "PrimaryImageAspectRatio,UserData"
Fields: "PrimaryImageAspectRatio,UserData,DisplayMediaType"
};
function getTableHtml(items) {
var html = '<div class="libraryItemsGridContainer"><table data-role="table" data-mode="reflow" class="ui-responsive table-stroke libraryItemsGrid">';
var html = '<table class="libraryItemsGrid">';
html += '<thead>';
html += '<tr>';
html += '<th>&nbsp;</th>';
html += '<th class="thName">Name</th>';
html += '<th>Year</th>';
html += '<th>Rating</th>';
html += '<th>Runtime</th>';
html += '<th>Community Rating</th>';
html += '<th></th>';
html += '<th class="desktopColumn">Type</th>';
html += '<th class="tabletColumn">Year</th>';
html += '<th class="tabletColumn">Rating</th>';
html += '<th class="tabletColumn">Runtime</th>';
html += '<th class="tabletColumn">Community Rating</th>';
html += '<th class="tabletColumn"></th>';
html += '</tr>';
html += '</thead>';
@ -39,7 +40,7 @@
html += '</tbody>';
html += '</table></div>';
html += '</table>';
return html;
}
@ -73,18 +74,20 @@
html += '<td class="tdName"><a href="' + url + '">' + item.Name + '</a></td>';
html += '<td>' + (item.ProductionYear || "") + '</td>';
html += '<td class="desktopColumn">' + (item.VideoType == "VideoFile" ? item.DisplayMediaType : item.VideoType) + '</td>';
html += '<td>' + (item.OfficialRating || "") + '</td>';
html += '<td class="tabletColumn">' + (item.ProductionYear || "") + '</td>';
html += '<td class="tabletColumn">' + (item.OfficialRating || "") + '</td>';
var minutes = (item.RunTimeTicks || 0) / 600000000;
minutes = minutes || 1;
html += '<td>' + parseInt(minutes) + 'min</td>';
html += '<td>' + (item.CommunityRating || "") + '</td>';
html += '<td class="tabletColumn">' + parseInt(minutes) + 'min</td>';
html += '<td class="tabletColumn">' + (item.CommunityRating || "") + '</td>';
html += '<td>';
html += '<td class="tabletColumn">';
var userData = item.UserData || {};