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

update guide

This commit is contained in:
Luke Pulverenti 2017-01-08 00:52:51 -05:00
parent f5a9a7c6bf
commit e5119016fc
17 changed files with 202 additions and 95 deletions

View file

@ -14,7 +14,7 @@
.guideHeaderDateSelection {
font-size: 86%;
padding: .4em 0;
padding: .4em 0 .2em;
}
.guideHeaderTimeslots {
@ -66,6 +66,8 @@
white-space: nowrap;
position: relative;
contain: strict;
box-sizing: border-box;
border-bottom: .2em solid #121212;
}
.timeslotHeadersInner {
@ -145,7 +147,7 @@
text-overflow: ellipsis;
border-right: 1px solid #121212;
width: 24vw;
background: rgba(40, 40, 40, .9);
background: rgb(38, 38, 38);
display: flex;
align-items: center;
text-decoration: none;
@ -196,7 +198,7 @@
}
.channelHeaderCell {
border-bottom: .25em solid #121212 !important;
border-bottom: .2em solid #121212 !important;
background-size: auto 70%;
background-position: 92% center;
background-repeat: no-repeat;
@ -209,15 +211,8 @@
}
}
@media all and (max-width: 1200px) {
.guideChannelNumberWithImage {
display: none;
}
}
.channelPrograms, .channelHeaderCell {
height: 4em;
height: 4.4em;
contain: strict;
}
@ -227,7 +222,7 @@
}
.channelPrograms-tv, .channelHeaderCell-tv {
height: 3.2em;
height: 3.8em;
}
.channelTimeslotHeader {
@ -254,10 +249,9 @@
.programCell {
position: absolute;
top: 0;
/* Unfortunately the borders using vh get rounded while the bottom property doesn't. So this is a little hack to try and make them even*/
bottom: .236em;
border-left: .25em solid #121212 !important;
background-color: rgba(32, 32, 32, .95);
bottom: 0;
border-left: .2em solid #121212 !important;
background-color: rgb(30, 30, 30);
display: flex;
text-decoration: none;
overflow: hidden;
@ -304,6 +298,20 @@
display: block;
}
.guideProgramNameText {
margin: 0;
font-weight: normal;
}
.guideProgramSecondaryInfo {
display: flex;
align-items: center;
}
.programSecondaryTitle {
opacity: .6;
}
.programIcon {
margin-left: auto;
margin-right: .25em;
@ -326,6 +334,8 @@
padding: .18em .32em;
border-radius: .25em;
margin-right: .35em;
width: auto;
height: auto;
}
.programTextIcon-tv {
@ -337,6 +347,8 @@
max-width: 30%;
text-overflow: ellipsis;
overflow: hidden;
font-weight: normal;
margin: 0;
}
.guideChannelName {

View file

@ -512,20 +512,32 @@
html += '<div class="' + guideProgramNameClass + '">';
html += '<div class="guideProgramNameText">' + program.Name + '</div>';
var indicatorHtml;
if (program.IsLive && options.showLiveIndicator) {
html += '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Live') + '</span>';
indicatorHtml = '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Live') + '</span>';
}
else if (program.IsPremiere && options.showPremiereIndicator) {
html += '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Premiere') + '</span>';
indicatorHtml = '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Premiere') + '</span>';
}
else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
html += '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
indicatorHtml = '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
}
else if (program.IsSeries && program.IsRepeat && options.showRepeatIndicator) {
html += '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Repeat') + '</span>';
indicatorHtml = '<span class="repeatTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#Repeat') + '</span>';
}
if (indicatorHtml || program.EpisodeTitle) {
html += '<div class="guideProgramSecondaryInfo">';
html += indicatorHtml || '';
if (program.EpisodeTitle) {
html += '<span class="programSecondaryTitle">' + program.EpisodeTitle + '</span>';
}
html += '</div>';
}
html += program.Name;
html += '</div>';
if (program.IsHD && options.showHdIcon) {
@ -610,11 +622,8 @@
html += '<button type="button" class="' + cssClass + '"' + dataSrc + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
cssClass = 'guideChannelNumber';
if (hasChannelImage) {
cssClass += ' guideChannelNumberWithImage';
}
html += '<div class="' + cssClass + '">' + channel.Number + '</div>';
html += '<h3 class="' + cssClass + '">' + channel.Number + '</h3>';
if (!hasChannelImage) {
html += '<div class="guideChannelName">' + channel.Name + '</div>';