diff --git a/htdocs/css/map.css b/htdocs/css/map.css index 796f442..70702b9 100644 --- a/htdocs/css/map.css +++ b/htdocs/css/map.css @@ -6,10 +6,6 @@ body { flex-direction: column; } -#webrx-top-container { - flex: none; -} - .openwebrx-map { flex: 1 1 auto; } diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css index cfe9be2..bc1ee2d 100644 --- a/htdocs/css/openwebrx-header.css +++ b/htdocs/css/openwebrx-header.css @@ -1,4 +1,4 @@ -#webrx-top-container { +.webrx-top-container { position: relative; z-index:1000; background-color: #575757; @@ -12,7 +12,7 @@ overflow: hidden; } -#openwebrx-description-container { +.openwebrx-description-container { transition-property: height, opacity; transition-duration: 1s; transition-timing-function: ease-out; @@ -23,7 +23,7 @@ overflow: hidden; } -#openwebrx-description-container.expanded { +.openwebrx-description-container.expanded { opacity: 1; height: 283px; } @@ -50,22 +50,21 @@ flex: 0; } -#webrx-top-container, #webrx-top-container * { +.webrx-top-container, .webrx-top-container * { line-height: initial; box-sizing: initial; } -#webrx-top-logo { +.webrx-top-logo { padding: 12px; /* overwritten by media queries */ display: none; } -#webrx-rx-avatar { +.webrx-rx-avatar { background-color: rgba(154, 154, 154, .5); margin: 7px; - cursor:pointer; width: 46px; height: 46px; padding: 4px; @@ -73,7 +72,7 @@ box-sizing: content-box; } -#webrx-rx-texts { +.webrx-rx-texts { /* minimum layout width */ width: 0; /* will be getting wider with flex */ @@ -82,70 +81,66 @@ margin: auto 0; } -#webrx-rx-texts div { +.webrx-rx-texts div { margin: 0 10px; padding: 3px; white-space:nowrap; overflow: hidden; - cursor:pointer; color: #909090; } -#webrx-rx-title { +.webrx-rx-title { font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; font-size: 11pt; font-weight: bold; } -#webrx-rx-desc { +.webrx-rx-desc { font-size: 10pt; } -#openwebrx-rx-details-arrow { - cursor:pointer; +.openwebrx-rx-details-arrow { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); -} -#openwebrx-rx-details-arrow a { margin: 0; padding: 0; line-height: 0; display: block; } -#openwebrx-main-buttons .button { +.openwebrx-main-buttons .button { display: block; width: 55px; cursor:pointer; } -#openwebrx-main-buttons .button[data-toggle-panel] { +.openwebrx-main-buttons .button[data-toggle-panel] { /* will be enabled by javascript if the panel is present in the DOM */ display: none; } -#openwebrx-main-buttons .button img { +.openwebrx-main-buttons .button img { height: 38px; } -#openwebrx-main-buttons a { +.openwebrx-main-buttons a { color: inherit; text-decoration: inherit; } -#openwebrx-main-buttons .button:hover { +.openwebrx-main-buttons .button:hover { background-color: rgba(255, 255, 255, 0.3); } -#openwebrx-main-buttons .button:active { +.openwebrx-main-buttons .button:active { background-color: rgba(255, 255, 255, 0.55); } -#openwebrx-main-buttons { +.openwebrx-main-buttons { padding: 5px 15px; display: flex; list-style: none; @@ -157,7 +152,7 @@ font-weight: bold; } -#webrx-rx-photo-title { +.webrx-rx-photo-title { margin: 10px 15px; color: white; font-size: 16pt; @@ -165,7 +160,7 @@ opacity: 1; } -#webrx-rx-photo-desc { +.webrx-rx-photo-desc { margin: 10px 15px; color: white; font-size: 10pt; @@ -175,17 +170,21 @@ line-height: 1.5em; } -#webrx-rx-photo-desc a { +.webrx-rx-photo-desc a { color: #5ca8ff; text-shadow: none; } +.openwebrx-photo-trigger { + cursor: pointer; +} + /* * Responsive stuff */ @media (min-width: 576px) { - #webrx-rx-texts { + .webrx-rx-texts { display: initial; } } @@ -194,7 +193,7 @@ } @media (min-width: 992px) { - #webrx-top-logo { + .webrx-top-logo { display: initial; } } @@ -236,13 +235,13 @@ height: 38px; } -.sprite-rx-details-arrow-down { +.openwebrx-rx-details-arrow--down .sprite-rx-details-arrow { background-position: 0 -65px; width: 43px; height: 12px; } -.sprite-rx-details-arrow-up { +.openwebrx-rx-details-arrow--up .sprite-rx-details-arrow { background-position: -43px -65px; width: 43px; height: 12px; diff --git a/htdocs/include/header.include.html b/htdocs/include/header.include.html index ec31619..a991d47 100644 --- a/htdocs/include/header.include.html +++ b/htdocs/include/header.include.html @@ -1,12 +1,12 @@ -
-
- - Receiver avatar -
-
-
+
+
+ + Receiver avatar +
+
+
-
+

Status

Log

Receiver
@@ -14,12 +14,9 @@ ${settingslink}
-
-
-
-
-
- - +
+
+
+
diff --git a/htdocs/lib/Header.js b/htdocs/lib/Header.js index 746c282..b9ff471 100644 --- a/htdocs/lib/Header.js +++ b/htdocs/lib/Header.js @@ -1,7 +1,7 @@ function Header(el) { this.el = el; - var $buttons = this.el.find('#openwebrx-main-buttons').find('[data-toggle-panel]').filter(function(){ + var $buttons = this.el.find('.openwebrx-main-buttons').find('[data-toggle-panel]').filter(function(){ // ignore buttons when the corresponding panel is not in the DOM return $('#' + $(this).data('toggle-panel'))[0]; }); @@ -15,10 +15,10 @@ function Header(el) { }; Header.prototype.setDetails = function(details) { - this.el.find('#webrx-rx-title').html(details['receiver_name']); - this.el.find('#webrx-rx-desc').html(details['receiver_location'] + ' | Loc: ' + details['locator'] + ', ASL: ' + details['receiver_asl'] + ' m'); - this.el.find('#webrx-rx-photo-title').html(details['photo_title']); - this.el.find('#webrx-rx-photo-desc').html(details['photo_desc']); + this.el.find('.webrx-rx-title').html(details['receiver_name']); + this.el.find('.webrx-rx-desc').html(details['receiver_location'] + ' | Loc: ' + details['locator'] + ', ASL: ' + details['receiver_asl'] + ' m'); + this.el.find('.webrx-rx-photo-title').html(details['photo_title']); + this.el.find('.webrx-rx-photo-desc').html(details['photo_desc']); }; Header.prototype.init_rx_photo = function() { @@ -30,21 +30,19 @@ Header.prototype.init_rx_photo = function() { } }); - $('#webrx-top-container').find('.openwebrx-photo-trigger').click(this.toggle_rx_photo.bind(this)); + $('.webrx-top-container').find('.openwebrx-photo-trigger').click(this.toggle_rx_photo.bind(this)); }; Header.prototype.close_rx_photo = function() { this.rx_photo_state = 0; - this.el.find('#openwebrx-description-container').removeClass('expanded'); - this.el.find("#openwebrx-rx-details-arrow-down").show(); - this.el.find("#openwebrx-rx-details-arrow-up").hide(); + this.el.find('.openwebrx-description-container').removeClass('expanded'); + this.el.find(".openwebrx-rx-details-arrow").removeClass('openwebrx-rx-details-arrow--up').addClass('openwebrx-rx-details-arrow--down'); } Header.prototype.open_rx_photo = function() { this.rx_photo_state = 1; - this.el.find('#openwebrx-description-container').addClass('expanded'); - this.el.find("#openwebrx-rx-details-arrow-down").hide(); - this.el.find("#openwebrx-rx-details-arrow-up").show(); + this.el.find('.openwebrx-description-container').addClass('expanded'); + this.el.find(".openwebrx-rx-details-arrow").removeClass('openwebrx-rx-details-arrow--down').addClass('openwebrx-rx-details-arrow--up'); } Header.prototype.toggle_rx_photo = function(ev) { @@ -73,5 +71,5 @@ $.fn.header = function() { }; $(function(){ - $('#webrx-top-container').header(); + $('.webrx-top-container').header(); }); diff --git a/htdocs/map.js b/htdocs/map.js index 5c31759..8b2003f 100644 --- a/htdocs/map.js +++ b/htdocs/map.js @@ -282,7 +282,7 @@ processUpdates(json.value); break; case 'receiver_details': - $('#webrx-top-container').header().setDetails(json['value']); + $('.webrx-top-container').header().setDetails(json['value']); break; default: console.warn('received message of unknown type: ' + json['type']); diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index 24d7a13..8acc66c 100644 --- a/htdocs/openwebrx.js +++ b/htdocs/openwebrx.js @@ -780,7 +780,7 @@ function on_ws_recv(evt) { secondary_demod_init_canvases(); break; case "receiver_details": - $('#webrx-top-container').header().setDetails(json['value']); + $('.webrx-top-container').header().setDetails(json['value']); break; case "smeter": smeter_level = json['value'];