webui: epg / dvr event dialogs - some visual improvements

diff --git a/src/webui/static/app/dvr.js b/src/webui/static/app/dvr.js
index c532f6f1441b6d67aad3fa36185ab590b2d75066..16a6065bed20c3eeeb591d2d691f00a6db734a7e 100644 (file)
--- a/src/webui/static/app/dvr.js
+++ b/src/webui/static/app/dvr.js
@@ -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>';
@@ -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 = [];
 

diff --git a/src/webui/static/app/epg.js b/src/webui/static/app/epg.js
index 967fde44b03b0f38fd8ecdd00fc3504ebdad64d9..7df78be40d69883407350a2ba8d1da66a72b3f1c 100644 (file)
--- a/src/webui/static/app/epg.js
+++ b/src/webui/static/app/epg.js
@@ -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) {
@@ -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)
@@ -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>';

diff --git a/src/webui/static/app/ext.css b/src/webui/static/app/ext.css
index b029c61bdb65b7599e444b944418fdb3bb04e736..0bc759fe8e71d6512e78ad0ce5cef786735aa069 100644 (file)
--- a/src/webui/static/app/ext.css
+++ b/src/webui/static/app/ext.css
@@ -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 {
@@ -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;
 }
 
@@ -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 {