mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
center guide grid
This commit is contained in:
Luke Pulverenti
parent
35e37c8027
commit
e91d8b6800
11 changed files with 109 additions and 89 deletions
|
|
@ -42,6 +42,7 @@
|
|||
margin-left: 80px;
|
||||
border-left: 1px solid #444;
|
||||
}
|
||||
|
||||
.tvProgramCurrentTimeSlot {
|
||||
background-color: green;
|
||||
}
|
||||
|
|
@ -132,13 +133,10 @@
|
|||
}
|
||||
|
||||
.channelTimeslotHeader {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timeslotHeaders {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -197,24 +195,25 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.channelHeaderCell:hover {
|
||||
.channelHeaderCell:hover {
|
||||
background-color: #38c;
|
||||
}
|
||||
}
|
||||
|
||||
.channelList {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 46px;
|
||||
overflow-x: scroll;
|
||||
float: left;
|
||||
border-bottom: 4px solid #3B3B3B;
|
||||
}
|
||||
|
||||
.programGrid {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: scroll;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.programGrid, .timeslotHeaders {
|
||||
margin-left: 190px;
|
||||
}
|
||||
|
||||
.timeslotCell, .timeslotHeader {
|
||||
|
|
@ -237,21 +236,9 @@
|
|||
z-index: 99;
|
||||
}
|
||||
|
||||
.timeslotCellInnerWithProgram:hover {
|
||||
.timeslotCellInnerWithProgram:hover {
|
||||
background-color: #38c;
|
||||
}
|
||||
|
||||
.timeslotHeaders, .programGrid {
|
||||
left: 201px;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader, .timeslotHeaders {
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.channelList, .programGrid {
|
||||
top: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.channelHeaderCell, .timeslotCell {
|
||||
height: 52px;
|
||||
|
|
@ -265,6 +252,7 @@
|
|||
.guideProgramTime {
|
||||
padding: 0 .5em .35em;
|
||||
}
|
||||
|
||||
.plainProgramInfo {
|
||||
background-color: #252525;
|
||||
}
|
||||
|
|
@ -284,16 +272,68 @@
|
|||
top: 7px;
|
||||
}
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@media (min-height: 500px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 600px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 700px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 900px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1000px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1100px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 1200px) {
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
.channelHeaderCell, .channelTimeslotHeader {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.timeslotHeaders, .programGrid {
|
||||
left: 91px;
|
||||
}
|
||||
|
||||
.guideChannelImage {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,11 +27,18 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="text-align: center;">
|
||||
<div style="position: relative; margin: 0 auto; display: inline-block; text-align: left; max-width:100%;">
|
||||
|
||||
<div style="white-space:nowrap;">
|
||||
<div class="channelTimeslotHeader"> </div>
|
||||
<div class="timeslotHeaders"></div>
|
||||
</div>
|
||||
|
||||
<div style="white-space:nowrap;">
|
||||
<div class="channelList"></div>
|
||||
<div class="programGrid">
|
||||
<div class="programGrid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,19 +10,19 @@
|
|||
<div class="content-primary">
|
||||
<form class="liveTvSettingsForm" style="display: none;">
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<div style="margin-top: 2.5em;">
|
||||
<p>Active service: <span id="activeServiceName"></span></p>
|
||||
<p>Status: <span id="activeServiceStatus"></span></p>
|
||||
<p>Version: <span id="activeServiceVersion"></span></p>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<label for="selectActiveService">Change active service: </label>
|
||||
<select id="selectActiveService" data-mini="true">
|
||||
</select>
|
||||
<div class="fieldDescription">Although multiple tv plugins can be installed only one can be active at a time.</div>
|
||||
<div class="fieldDescription">Multiple tv plugins can be installed but only one can be active at a time.</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
|
@ -46,6 +46,9 @@
|
|||
</select>
|
||||
<div class="fieldDescription">Downloading more days worth of guide data provides the ability to schedule out further in advance and view more listings, but it will also take longer to download. Auto will choose based on the number of channels.</div>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<ul data-role="listview" class="ulForm">
|
||||
<li>
|
||||
<button type="submit" data-theme="b" data-icon="check">
|
||||
Save
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@
|
|||
context: 'games',
|
||||
useAverageAspectRatio: false,
|
||||
showTitle: true,
|
||||
showParentTitle: true
|
||||
showParentTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
|
||||
html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
|
||||
|
|
|
|||
|
|
@ -255,11 +255,7 @@
|
|||
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), item);
|
||||
|
||||
if (item.CommunityRating || item.CriticRating) {
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show();
|
||||
} else {
|
||||
$('.itemCommunityRating', page).hide();
|
||||
}
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
|
||||
|
||||
if (item.Type != "Episode" && item.Type != "Movie" && item.Type != "Series") {
|
||||
var premiereDateElem = $('#itemPremiereDate', page).show();
|
||||
|
|
|
|||
|
|
@ -1508,20 +1508,8 @@
|
|||
html += '<div class="starRatingValue">';
|
||||
html += item.CommunityRating.toFixed(1);
|
||||
html += '</div>';
|
||||
|
||||
//var rating = item.CommunityRating / 2;
|
||||
|
||||
//for (var i = 1; i <= 5; i++) {
|
||||
// if (rating <= i - 1) {
|
||||
// html += "<div class='starRating emptyStarRating' title='" + item.CommunityRating + "'></div>";
|
||||
// }
|
||||
// else if (rating < i) {
|
||||
// html += "<div class='starRating halfStarRating' title='" + item.CommunityRating + "'></div>";
|
||||
// }
|
||||
// else {
|
||||
// html += "<div class='starRating' title='" + item.CommunityRating + "'></div>";
|
||||
// }
|
||||
//}
|
||||
} else {
|
||||
html += '<div style="display:inline-block;margin-left:-1.25em;"></div>';
|
||||
}
|
||||
|
||||
if (item.CriticRating != null) {
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@
|
|||
|
||||
$('.itemEpisodeName', page).html(program.EpisodeTitle || '');
|
||||
|
||||
if (program.CommunityRating) {
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program)).show();
|
||||
} else {
|
||||
$('.itemCommunityRating', page).hide();
|
||||
}
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), program, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), program);
|
||||
|
|
|
|||
|
|
@ -44,11 +44,7 @@
|
|||
|
||||
$('.itemEpisodeName', page).html(item.EpisodeTitle || '');
|
||||
|
||||
if (item.CommunityRating) {
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show();
|
||||
} else {
|
||||
$('.itemCommunityRating', page).hide();
|
||||
}
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
|
||||
|
||||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
|
||||
|
|
|
|||
|
|
@ -45,11 +45,7 @@
|
|||
|
||||
$('.itemEpisodeName', page).html(item.EpisodeTitle || '');
|
||||
|
||||
if (item.CommunityRating) {
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show();
|
||||
} else {
|
||||
$('.itemCommunityRating', page).hide();
|
||||
}
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
|
||||
|
||||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
|
||||
|
|
|
|||
|
|
@ -32,11 +32,7 @@
|
|||
|
||||
$('.itemEpisodeName', page).html(programInfo.EpisodeTitle || '');
|
||||
|
||||
if (programInfo.CommunityRating) {
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(programInfo)).show();
|
||||
} else {
|
||||
$('.itemCommunityRating', page).hide();
|
||||
}
|
||||
$('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(programInfo));
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context);
|
||||
LibraryBrowser.renderOverview($('.itemOverview', page), programInfo);
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@
|
|||
}
|
||||
|
||||
// Chrome or IE with plugin installed
|
||||
if (media.canPlayType('video/webm').replace(/no/, '')) {
|
||||
if (media.canPlayType('video/webm').replace(/no/, '') && !$.browser.mozilla) {
|
||||
return '.webm';
|
||||
}
|
||||
|
||||
|
|
@ -616,6 +616,7 @@
|
|||
|
||||
// Some 1080- videos are reported as 1912?
|
||||
if (maxAllowedWidth >= 1910) {
|
||||
options.push({ name: '1080p - 15Mbps', maxWidth: 1920, bitrate: 15000000 });
|
||||
options.push({ name: '1080p - 10Mbps', maxWidth: 1920, bitrate: 10000000 });
|
||||
options.push({ name: '1080p - 8Mbps', maxWidth: 1920, bitrate: 8000000 });
|
||||
options.push({ name: '1080p - 6Mbps', maxWidth: 1920, bitrate: 6000000 });
|
||||
|
|
@ -888,11 +889,11 @@
|
|||
|
||||
}).on("error", function () {
|
||||
|
||||
|
||||
var errorCode = this.error ? this.error.code : '';
|
||||
console.log('Html5 Video error code: ' + errorCode);
|
||||
|
||||
}).on("ended.playbackstopped", onPlaybackStopped).on('ended.playnext', playNextAfterEnded);
|
||||
}).on("ended.playbackstopped", onPlaybackStopped)
|
||||
.on('ended.playnext', playNextAfterEnded);
|
||||
|
||||
currentItem = item;
|
||||
curentDurationTicks = item.RunTimeTicks;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue