clean up header styles
This commit is contained in:
parent
c23acc1513
commit
53faca64c0
@ -6,10 +6,6 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#webrx-top-container {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.openwebrx-map {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -1,12 +1,12 @@
|
||||
<div id="webrx-top-container">
|
||||
<div id="webrx-top-bar" 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>
|
||||
<img id="webrx-rx-avatar" class="openwebrx-photo-trigger" src="static/gfx/openwebrx-avatar.png" alt="Receiver avatar"/>
|
||||
<div id="webrx-rx-texts">
|
||||
<div id="webrx-rx-title" class="openwebrx-photo-trigger"></div>
|
||||
<div id="webrx-rx-desc" class="openwebrx-photo-trigger"></div>
|
||||
<div class="webrx-top-container">
|
||||
<div class="webrx-top-bar-parts">
|
||||
<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 class="webrx-rx-avatar openwebrx-photo-trigger" src="static/gfx/openwebrx-avatar.png" alt="Receiver avatar"/>
|
||||
<div class="webrx-rx-texts openwebrx-photo-trigger">
|
||||
<div class="webrx-rx-title"></div>
|
||||
<div class="webrx-rx-desc"></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-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>
|
||||
@ -14,12 +14,9 @@
|
||||
${settingslink}
|
||||
</section>
|
||||
</div>
|
||||
<div id="openwebrx-description-container">
|
||||
<div id="webrx-rx-photo-title"></div>
|
||||
<div id="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 class="openwebrx-description-container">
|
||||
<div class="webrx-rx-photo-title"></div>
|
||||
<div class="webrx-rx-photo-desc"></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>
|
||||
|
@ -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();
|
||||
});
|
||||
|
@ -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']);
|
||||
|
@ -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'];
|
||||
|
Loading…
Reference in New Issue
Block a user