mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update guide
This commit is contained in:
parent
f5a9a7c6bf
commit
e5119016fc
17 changed files with 202 additions and 95 deletions
|
@ -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 {
|
||||
|
|
|
@ -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>';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue