WEBUI JS: Add start/stop times to epg dialog, more cosmetic changes f…

…or EPG/DVR dialogs
tvheadend · Nov 16, 2014 · b6fcb45 · b6fcb45
1 parent e065cf6
commit b6fcb45
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/src/webui/static/app/dvr.js b/src/webui/static/app/dvr.js
@@ -26,13 +26,13 @@ tvheadend.dvrDetails = function(uuid) {
 
         content += '<div class="x-epg-title">' + title + '</div>';
         content += '<div class="x-epg-title">' + episode + '</div>';
-        content += '<div class="x-epg-meta">Scheduled Start Time: ' + new Date(start_real * 1000).toLocaleString() + '</div>';
-        content += '<div class="x-epg-meta">Scheduled Stop Time: ' + new Date(stop_real * 1000).toLocaleString() + '</div>';
-        content += '<div class="x-epg-meta">Duration: ' + parseInt(duration / 60) + ' min</div>';        
+        content += '<div class="x-epg-time"><div class="x-epg-prefix">Scheduled Start Time:</div> ' + new Date(start_real * 1000).toLocaleString() + '</div>';
+        content += '<div class="x-epg-time"><div class="x-epg-prefix">Scheduled Stop Time:</div> ' + new Date(stop_real * 1000).toLocaleString() + '</div>';
+        content += '<div class="x-epg-time"><div class="x-epg-prefix">Duration:</div> ' + parseInt(duration / 60) + ' min</div>';
         content += '<div class="x-epg-desc">' + desc + '</div>';
         content += '<hr>';
-        content += '<div class="x-epg-meta">Status: ' + status + '</div>';
-        content += '<div class="x-epg-meta">File size: ' + parseInt(filesize / 1000000) + ' MB</div>';
+        content += '<div class="x-epg-meta"><div class="x-epg-prefix">Status:</div> ' + status + '</div>';
+        content += '<div class="x-epg-meta"><div class="x-epg-prefix">File size:</div> ' + parseInt(filesize / 1000000) + ' MB</div>';
 
         var win = new Ext.Window({
             title: title,

diff --git a/src/webui/static/app/epg.js b/src/webui/static/app/epg.js
@@ -99,14 +99,18 @@ tvheadend.epgDetails = function(event) {
     content += '</div>';
     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> ' + new Date(event.start).toLocaleString() + '</div>';
+    if (event.stop)
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Stop time:</div> ' + new Date(event.stop).toLocaleString() + '</div>';
     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.starRating)
-      content += '<div class="x-epg-meta">Star Rating: ' + event.starRating + '</div>';
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Star Rating:</div> ' + event.starRating + '</div>';
     if (event.ageRating)
-      content += '<div class="x-epg-meta">Age Rating: ' + event.ageRating + '</div>';
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Age Rating:</div> ' + event.ageRating + '</div>';
     if (event.genre) {
       var genre = [];
       Ext.each(event.genre, function(g) {
@@ -117,7 +121,7 @@ tvheadend.epgDetails = function(event) {
         if (g1 || g2)
           genre.push((g1 ? '[' + g1 + '] ' : '') + g2);
       });
-      content += '<div class="x-epg-meta">Content Type: ' + genre.join(', ') + '</div>';
+      content += '<div class="x-epg-meta"><div class="x-epg-prefix">Content Type:</div> ' + genre.join(', ') + '</div>';
     }
 
     content += '<div id="related"></div>';

diff --git a/src/webui/static/app/ext.css b/src/webui/static/app/ext.css
@@ -522,8 +522,18 @@
     font-weight: bold;
 }
 
-.x-epg-summary {
+.x-epg-time {
     margin: 5px;
+}
+
+.x-epg-prefix {
+    display: inline-block;
+    width: 12em;
+    font-weight: bold;
+}
+
+.x-epg-summary {
+    margin: 10px 5px 5px 5px;
     font-weight: bold;
 }
 
@@ -543,11 +553,6 @@
     margin: 5px;
 }
 
-.x-epg-action {
-    font-weight: bold;
-    margin: 5px;
-}
-
 .hts-t-info {
     float: left;
     width: 100px;