From: Jaroslav Kysela <perex@perex.cz>
Date: Tue, 22 Mar 2016 14:47:24 +0000 (+0100)
Subject: webui: epg / dvr event dialogs - some visual improvements
X-Git-Tag: v4.2.1~825
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=0b84f018fcd25e1780cbc3a6a42fe94b96830842;p=thirdparty%2Ftvheadend.git

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 c532f6f14..16a6065be 100644
--- 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 967fde44b..7df78be40 100644
--- 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 b029c61bd..0bc759fe8 100644
--- 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 {