joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clean up header styles

Browse Source
This commit is contained in:
Jakob Ketterl 2021-02-05 17:56:02 +01:00
parent c23acc1513
commit 53faca64c0
6 changed files with 54 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/css/map.css
View File

@ -6,10 +6,6 @@ body {
flex-direction: column; flex-direction: column;
} }
#webrx-top-container {
flex: none;
}
.openwebrx-map { .openwebrx-map {
flex: 1 1 auto; flex: 1 1 auto;
} }

59
htdocs/css/openwebrx-header.css
View File

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

27
htdocs/include/header.include.html
View File

@ -1,12 +1,12 @@
<div id="webrx-top-container"> <div class="webrx-top-container">
<div id="webrx-top-bar" class="webrx-top-bar-parts"> <div class="webrx-top-bar-parts">
<a href="https://www.openwebrx.de/" target="_blank"><img src="static/gfx/openwebrx-top-logo.png" id="webrx-top-logo" alt="OpenWebRX Logo"/></a> <a href="https://www.openwebrx.de/" target="_blank"><img src="static/gfx/openwebrx-top-logo.png" class="webrx-top-logo" alt="OpenWebRX Logo"/></a>
<img id="webrx-rx-avatar" class="openwebrx-photo-trigger" src="static/gfx/openwebrx-avatar.png" alt="Receiver avatar"/> <img class="webrx-rx-avatar openwebrx-photo-trigger" src="static/gfx/openwebrx-avatar.png" alt="Receiver avatar"/>
<div id="webrx-rx-texts"> <div class="webrx-rx-texts openwebrx-photo-trigger">
<div id="webrx-rx-title" class="openwebrx-photo-trigger"></div> <div class="webrx-rx-title"></div>
<div id="webrx-rx-desc" class="openwebrx-photo-trigger"></div> <div class="webrx-rx-desc"></div>
</div> </div>
<section id="openwebrx-main-buttons"> <section class="openwebrx-main-buttons">
<div class="button" data-toggle-panel="openwebrx-panel-status"><span class="sprite sprite-panel-status"></span><br/>Status</div> <div class="button" data-toggle-panel="openwebrx-panel-status"><span class="sprite sprite-panel-status"></span><br/>Status</div>
<div class="button" data-toggle-panel="openwebrx-panel-log"><span class="sprite sprite-panel-log"></span><br/>Log</div> <div class="button" data-toggle-panel="openwebrx-panel-log"><span class="sprite sprite-panel-log"></span><br/>Log</div>
<div class="button" data-toggle-panel="openwebrx-panel-receiver"><span class="sprite sprite-panel-receiver"></span><br/>Receiver</div> <div class="button" data-toggle-panel="openwebrx-panel-receiver"><span class="sprite sprite-panel-receiver"></span><br/>Receiver</div>
@ -14,12 +14,9 @@
${settingslink} ${settingslink}
</section> </section>
</div> </div>
<div id="openwebrx-description-container"> <div class="openwebrx-description-container">
<div id="webrx-rx-photo-title"></div> <div class="webrx-rx-photo-title"></div>
<div id="webrx-rx-photo-desc"></div> <div class="webrx-rx-photo-desc"></div>
</div>
<div id="openwebrx-rx-details-arrow">
<a id="openwebrx-rx-details-arrow-up" class="openwebrx-photo-trigger" style="display: none;"><span class="sprite sprite-rx-details-arrow-up"></span></a>
<a id="openwebrx-rx-details-arrow-down" class="openwebrx-photo-trigger"><span class="sprite sprite-rx-details-arrow-down"></span></a>
</div> </div>
<a class="openwebrx-rx-details-arrow openwebrx-rx-details-arrow--down openwebrx-photo-trigger"><span class="sprite sprite-rx-details-arrow"></span></a>
</div> </div>

24
htdocs/lib/Header.js
View File

@ -1,7 +1,7 @@
function Header(el) { function Header(el) {
this.el = 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 // ignore buttons when the corresponding panel is not in the DOM
return $('#' + $(this).data('toggle-panel'))[0]; return $('#' + $(this).data('toggle-panel'))[0];
}); });
@ -15,10 +15,10 @@ function Header(el) {
}; };
Header.prototype.setDetails = function(details) { Header.prototype.setDetails = function(details) {
this.el.find('#webrx-rx-title').html(details['receiver_name']); 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-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-title').html(details['photo_title']);
this.el.find('#webrx-rx-photo-desc').html(details['photo_desc']); this.el.find('.webrx-rx-photo-desc').html(details['photo_desc']);
}; };
Header.prototype.init_rx_photo = function() { 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() { Header.prototype.close_rx_photo = function() {
this.rx_photo_state = 0; this.rx_photo_state = 0;
this.el.find('#openwebrx-description-container').removeClass('expanded'); this.el.find('.openwebrx-description-container').removeClass('expanded');
this.el.find("#openwebrx-rx-details-arrow-down").show(); this.el.find(".openwebrx-rx-details-arrow").removeClass('openwebrx-rx-details-arrow--up').addClass('openwebrx-rx-details-arrow--down');
this.el.find("#openwebrx-rx-details-arrow-up").hide();
} }
Header.prototype.open_rx_photo = function() { Header.prototype.open_rx_photo = function() {
this.rx_photo_state = 1; this.rx_photo_state = 1;
this.el.find('#openwebrx-description-container').addClass('expanded'); this.el.find('.openwebrx-description-container').addClass('expanded');
this.el.find("#openwebrx-rx-details-arrow-down").hide(); this.el.find(".openwebrx-rx-details-arrow").removeClass('openwebrx-rx-details-arrow--down').addClass('openwebrx-rx-details-arrow--up');
this.el.find("#openwebrx-rx-details-arrow-up").show();
} }
Header.prototype.toggle_rx_photo = function(ev) { Header.prototype.toggle_rx_photo = function(ev) {
@ -73,5 +71,5 @@ $.fn.header = function() {
}; };
$(function(){ $(function(){
$('#webrx-top-container').header(); $('.webrx-top-container').header();
}); });

2
htdocs/map.js
View File

@ -282,7 +282,7 @@
processUpdates(json.value); processUpdates(json.value);
break; break;
case 'receiver_details': case 'receiver_details':
$('#webrx-top-container').header().setDetails(json['value']); $('.webrx-top-container').header().setDetails(json['value']);
break; break;
default: default:
console.warn('received message of unknown type: ' + json['type']); console.warn('received message of unknown type: ' + json['type']);

2
htdocs/openwebrx.js
View File

@ -780,7 +780,7 @@ function on_ws_recv(evt) {
secondary_demod_init_canvases(); secondary_demod_init_canvases();
break; break;
case "receiver_details": case "receiver_details":
$('#webrx-top-container').header().setDetails(json['value']); $('.webrx-top-container').header().setDetails(json['value']);
break; break;
case "smeter": case "smeter":
smeter_level = json['value']; smeter_level = json['value'];