Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
webui: epg / dvr event dialogs - some visual improvements
  • Loading branch information
@perexg
perexg committed Mar 22, 2016
1 parent 5a0c92b commit 0b84f01
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 28 deletions.
22 changes: 11 additions & 11 deletions src/webui/static/app/dvr.js
View file
Expand Up @@ -30,7 +30,7 @@ tvheadend.dvrDetails = function(uuid) {
content += '<img class="x-epg-chicon" src="' + chicon + '">';

if (duplicate)
content += '<div class="x-epg-meta"><font color="red"><div class="x-epg-prefix">' + _('Will be skipped') + '<br>' + _('because it is a rerun of:') + '</div>' + tvheadend.niceDate(duplicate * 1000) + '</font></div>';
content += '<div class="x-epg-meta"><font color="red"><span class="x-epg-prefix">' + _('Will be skipped') + '<br>' + _('because it is a rerun of:') + '</span>' + tvheadend.niceDate(duplicate * 1000) + '</font></div>';

if (title)
content += '<div class="x-epg-title">' + title + '</div>';
Expand All @@ -39,26 +39,26 @@ tvheadend.dvrDetails = function(uuid) {
if (episode)
content += '<div class="x-epg-title">' + episode + '</div>';
if (start_real)
content += '<div class="x-epg-time"><div class="x-epg-prefix">' + _('Scheduled Start Time') + ':</div> ' + tvheadend.niceDate(start_real * 1000) + '</div>';
content += '<div class="x-epg-time"><span class="x-epg-prefix">' + _('Scheduled Start Time') + ':</span><span class="x-epg-body">' + tvheadend.niceDate(start_real * 1000) + '</span></div>';
if (stop_real)
content += '<div class="x-epg-time"><div class="x-epg-prefix">' + _('Scheduled Stop Time') + ':</div> ' + tvheadend.niceDate(stop_real * 1000) + '</div>';
content += '<div class="x-epg-time"><span class="x-epg-prefix">' + _('Scheduled Stop Time') + ':</span><span class="x-epg-body">' + tvheadend.niceDate(stop_real * 1000) + '</span></div>';
if (duration)
content += '<div class="x-epg-time"><div class="x-epg-prefix">' + _('Duration') + ':</div> ' + parseInt(duration / 60) + ' ' + _('min') + '</div>';
content += '<hr/>';
content += '<div class="x-epg-time"><span class="x-epg-prefix">' + _('Duration') + ':</span><span class="x-epg-body">' + parseInt(duration / 60) + ' ' + _('min') + '</span></div>';
content += '<hr class="x-epg-hr"/>';
if (desc) {
content += '<div class="x-epg-desc">' + desc + '</div>';
content += '<hr/>';
content += '<hr class="x-epg-hr"/>';
}
if (status)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Status') + ':</div> ' + status + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Status') + ':</span><span class="x-epg-body">' + status + '</span></div>';
if (filesize)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('File size') + ':</div> ' + parseInt(filesize / 1000000) + ' MB</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('File size') + ':</span><span class="x-epg-body">' + parseInt(filesize / 1000000) + ' MB</span></div>';
if (comment)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Comment') + ':</div> ' + comment + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Comment') + ':</span><span class="x-epg-body">' + comment + '</span></div>';
if (autorec_caption)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Autorec') + ':</div> ' + autorec_caption + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Autorec') + ':</span><span class="x-epg-body">' + autorec_caption + '</span></div>';
if (timerec_caption)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Time Scheduler') + ':</div> ' + timerec_caption + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Time Scheduler') + ':</span><span class="x-epg-body">' + timerec_caption + '</span></div>';

var buttons = [];

Expand Down
18 changes: 9 additions & 9 deletions src/webui/static/app/epg.js
View file
Expand Up @@ -104,22 +104,22 @@ tvheadend.epgDetails = function(event) {
if (event.episodeOnscreen)
content += '<div class="x-epg-title">' + event.episodeOnscreen + '</div>';
if (event.start)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Start Time') + ':</div> ' + tvheadend.niceDate(event.start) + '</div>';
content += '<div class="x-epg-time"><span class="x-epg-prefix">' + _('Start Time') + ':</span><span class="x-epg-body">' + tvheadend.niceDate(event.start) + '</span></div>';
if (event.stop)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('End Time') + ':</div> ' + tvheadend.niceDate(event.stop) + '</div>';
content += '<div class="x-epg-time"><span class="x-epg-prefix">' + _('End Time') + ':</span><span class="x-epg-body">' + tvheadend.niceDate(event.stop) + '</span></div>';
if (duration)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Duration') + ':</div> ' + parseInt(duration / 60) + ' min</div>';
content += '<hr/>';
content += '<div class="x-epg-time"><span class="x-epg-prefix">' + _('Duration') + ':</span><span class="x-epg-body">' + parseInt(duration / 60) + ' ' + _('min') + '</span></div>';
content += '<hr class="x-epg-hr"/>';
if (event.summary)
content += '<div class="x-epg-summary">' + event.summary + '</div>';
if (event.description)
content += '<div class="x-epg-desc">' + event.description + '</div>';
if (event.summary || event.description)
content += '<hr/>';
content += '<hr class="x-epg-hr"/>';
if (event.starRating)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Star Rating') + ':</div> ' + event.starRating + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Star Rating') + ':</span><span class="x-epg-body">' + event.starRating + '</span></div>';
if (event.ageRating)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Age Rating') + ':</div> ' + event.ageRating + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Age Rating') + ':</span><span class="x-epg-body">' + event.ageRating + '</span></div>';
if (event.genre) {
var genre = [];
Ext.each(event.genre, function(g) {
Expand All @@ -130,7 +130,7 @@ tvheadend.epgDetails = function(event) {
if (g1 || g2)
genre.push((g1 ? '[' + g1 + '] ' : '') + g2);
});
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Content Type') + ':</div> ' + genre.join(', ') + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Content Type') + ':</span><span class="x-epg-body">' + genre.join(', ') + '</span></div>';
}
var tags = [];
if (event.hd > 1)
Expand All @@ -154,7 +154,7 @@ tvheadend.epgDetails = function(event) {
if (event.audiodesc)
tags.push(_('Audio description#EPG').split('#')[0]);
if (tags.length > 0)
content += '<div class="x-epg-meta"><div class="x-epg-prefix">' + _('Parameters') + ':</div> ' + tags.join(', ') + '</div>';
content += '<div class="x-epg-meta"><span class="x-epg-prefix">' + _('Parameters') + ':</span><span class="x-epg-body">' + tags.join(', ') + '</span></div>';

content += '<div id="related"></div>';
content += '<div id="altbcast"></div>';
Expand Down
26 changes: 18 additions & 8 deletions src/webui/static/app/ext.css
View file
Expand Up @@ -639,10 +639,17 @@
white-space: nowrap;
}

.x-epg-hr {
margin: 0;
}

.x-epg-title {
margin: 5px;
padding: 5px;
font: normal 16px arial, tahoma, helvetica, sans-serif;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #000000;
}

.x-epg-subtitle {
Expand All @@ -651,19 +658,19 @@
font-weight: bold;
}

.x-epg-time {
font-style: italic;
margin: 5px;
}

.x-epg-prefix {
display: inline-block;
width: 12em;
font-weight: bold;
}

.x-epg-body {
margin-left: 5px;
display: inline-block;
}

.x-epg-summary {
margin: 5px 5px 5px 5px;
margin: 5px;
font-weight: bold;
}

Expand All @@ -678,9 +685,12 @@
max-height: 99px;
}

.x-epg-time {
margin: 5px 5px 5px 10px;
}

.x-epg-meta {
font-style: italic;
margin: 5px;
margin: 5px 5px 5px 10px;
}

.tv-video-player {
Expand Down

1 comment on commit 0b84f01

@ProfYaffle
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@perexg - I think it's this commit that introduced this one... there isn't enough vertical space to show a channel logo if the programme has no/a short subtitle. Compare these:

image

I'm not good enough with CSS - whether there's a way of having the image as the minimum size before the HR?

Please sign in to comment.