Improving RDS panel.

htdocs/css/openwebrx.css

@@ -1533,7 +1533,6 @@ img.openwebrx-mirror-img
 #openwebrx-panel-digimodes[data-mode="sstv"]    #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="fax"]     #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="ism"]     #openwebrx-digimode-content-container,
-#openwebrx-panel-digimodes[data-mode="rds"]     #openwebrx-digimode-content-container,
 #openwebrx-panel-digimodes[data-mode="ft8"]     #openwebrx-digimode-select-channel,
 #openwebrx-panel-digimodes[data-mode="wspr"]    #openwebrx-digimode-select-channel,
 #openwebrx-panel-digimodes[data-mode="jt65"]    #openwebrx-digimode-select-channel,
@@ -1555,7 +1554,6 @@ img.openwebrx-mirror-img
 #openwebrx-panel-digimodes[data-mode="sstv"]    #openwebrx-digimode-select-channel,
 #openwebrx-panel-digimodes[data-mode="fax"]     #openwebrx-digimode-select-channel,
 #openwebrx-panel-digimodes[data-mode="ism"]     #openwebrx-digimode-select-channel,
-#openwebrx-panel-digimodes[data-mode="rds"]     #openwebrx-digimode-select-channel,
 #openwebrx-panel-digimodes[data-mode="selcall"] #openwebrx-digimode-select-channel,
 #openwebrx-panel-digimodes[data-mode="zvei"]    #openwebrx-digimode-select-channel
 {
@@ -1583,7 +1581,6 @@ img.openwebrx-mirror-img
 #openwebrx-panel-digimodes[data-mode="sstv"]    #openwebrx-digimode-canvas-container,
 #openwebrx-panel-digimodes[data-mode="fax"]     #openwebrx-digimode-canvas-container,
 #openwebrx-panel-digimodes[data-mode="ism"]     #openwebrx-digimode-canvas-container,
-#openwebrx-panel-digimodes[data-mode="rds"]     #openwebrx-digimode-canvas-container
 {
     height: 200px;
     margin: -10px;
@@ -1641,6 +1638,7 @@ img.openwebrx-mirror-img
 #openwebrx-panel-metadata-wfm {
 	width: 350px;
 	max-height: 300px;
+	padding: 10px 10px 10px 10px;
 }
 
 .rds-container {
@@ -1649,20 +1647,47 @@ img.openwebrx-mirror-img
 	overflow: hidden auto;
 }
 
-.rds-container > *, .rds-radiotext-plus > * {
+.rds-container .rds-stationname {
-	margin: 2px 0;
+	font-weight: bold;
+	font-size: 18pt;
 }
 
-.rds-container .rds-stationname {
+.rds-container .rds-top-line,
-	font-family: roboto-mono;
+.rds-container .rds-bottom-line,
-	font-size: 18pt;
+.rds-container .rds-stationname,
-	padding: 10px 0;
+.rds-container .rds-radiotext,
+.rds-container .rds-radiotext-plus {
+	min-height: 1lh;
+}
+
+.rds-container .rds-top-line {
+	padding: 0 0 5px 0;
+}
+
+.rds-container .rds-bottom-line {
+	padding: 5px 0 0 0;
 }
 
 .rds-container .rds-stationname,
-.rds-container .rds-identifier,
+.rds-container .rds-radiotext,
+.rds-container .rds-radiotext-plus {
+	padding: 5px 0 5px 0;
+}
+
+.rds-container .rds-callsign {
+	float: left;
+}
+
+.rds-container .rds-identifier {
+	float: right;
+}
+
 .rds-container .rds-prog_type {
-	min-height: 1lh;
+	float: left;
+}
+
+.rds-container .rds-clock {
+	float: right;
 }
 
 .rds-container .rds-radiotext-plus .rds-rtplus-item:not(:empty):before {

htdocs/lib/MetaPanel.js

@@ -507,7 +507,8 @@ WfmMetaPanel.prototype.update = function(data) {
     }
 
     $el.find('.rds-stationname').text(this.long_stationname || this.ps);
-    $el.find('.rds-identifier').text(this.short_stationname || this.callsign || this.pi);
+    $el.find('.rds-callsign').text(this.short_stationname || this.callsign);
+    $el.find('.rds-identifier').text(this.pi);
 };
 
 WfmMetaPanel.prototype.isSupported = function(data) {
@@ -520,7 +521,10 @@ WfmMetaPanel.prototype.setEnabled = function(enabled) {
     if (enabled) {
         $(this.el).removeClass('disabled').html(
             '<div class="rds-container">' +
-                '<div class="rds-identifier rds-autoclear"></div>' +
+                '<div class="rds-top-line">' +
+                    '<span class="rds-callsign rds-autoclear"></span>' +
+                    '<span class="rds-identifier rds-autoclear"></span>' +
+                '</div>' +
                 '<div class="rds-stationname rds-autoclear"></div>' +
                 '<div class="rds-radiotext rds-autoclear"></div>' +
                 '<div class="rds-radiotext-plus">' +
@@ -530,8 +534,10 @@ WfmMetaPanel.prototype.setEnabled = function(enabled) {
                     '<div class="rds-rtplus-weather rds-autoclear"></div>' +
                     '<div class="rds-rtplus-homepage rds-autoclear"></div>' +
                 '</div>' +
-                '<div class="rds-prog_type rds-autoclear"></div>' +
+                '<div class="rds-bottom-line">' +
-                '<div class="rds-clock rds-autoclear"></div>' +
+                    '<span class="rds-prog_type rds-autoclear"></span>' +
+                    '<span class="rds-clock rds-autoclear"></span>' +
+                '</div>' +
             '</div>'
         );
     } else {