restructure header
This commit is contained in:
Jakob Ketterl
parent
a8ef3a0e6a
commit
a31b246924
|
|
@ -1,32 +1,36 @@
|
||||||
#webrx-top-container
|
#webrx-top-container {
|
||||||
{
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index:1000;
|
z-index:1000;
|
||||||
background-color: #575757;
|
background-color: #575757;
|
||||||
}
|
|
||||||
|
|
||||||
#webrx-top-photo
|
background-image: url(../gfx/openwebrx-top-photo.jpg);
|
||||||
{
|
background-position-x: center;
|
||||||
width: 100%;
|
background-position-y: top;
|
||||||
display: block;
|
background-repeat: no-repeat;
|
||||||
}
|
background-size: cover;
|
||||||
|
|
||||||
#webrx-top-photo-clip
|
|
||||||
{
|
|
||||||
min-height: 67px;
|
|
||||||
max-height: 67px;
|
|
||||||
height: 350px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.webrx-top-bar-parts
|
#openwebrx-description-container {
|
||||||
{
|
transition-property: height, opacity;
|
||||||
|
transition-duration: 1s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
/* originally, top-bar + description was 350px */
|
||||||
|
max-height: 283px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#openwebrx-description-container.expanded {
|
||||||
|
opacity: 1;
|
||||||
|
height: 283px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webrx-top-bar-parts {
|
||||||
height:67px;
|
height:67px;
|
||||||
}
|
|
||||||
|
|
||||||
#webrx-top-bar
|
|
||||||
{
|
|
||||||
background: rgba(128, 128, 128, 0.15);
|
background: rgba(128, 128, 128, 0.15);
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
|
|
@ -37,31 +41,25 @@
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
display: flex;
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-tob-container, #webrx-top-container * {
|
.webrx-top-bar-parts > * {
|
||||||
|
flex: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#webrx-top-container, #webrx-top-container * {
|
||||||
line-height: initial;
|
line-height: initial;
|
||||||
box-sizing: initial;
|
box-sizing: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-top-container img {
|
#webrx-top-logo {
|
||||||
vertical-align: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
#webrx-top-logo
|
|
||||||
{
|
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
float: left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-rx-avatar
|
#webrx-rx-avatar {
|
||||||
{
|
|
||||||
background-color: rgba(154, 154, 154, .5);
|
background-color: rgba(154, 154, 154, .5);
|
||||||
float: left;
|
|
||||||
margin: 7px;
|
margin: 7px;
|
||||||
|
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
|
|
@ -73,49 +71,37 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-rx-texts {
|
#webrx-rx-texts {
|
||||||
float: left;
|
flex: 1;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-rx-texts div {
|
#webrx-rx-texts div {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
}
|
|
||||||
|
|
||||||
#webrx-rx-title
|
|
||||||
{
|
|
||||||
white-space:nowrap;
|
white-space:nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
|
|
||||||
color: #909090;
|
color: #909090;
|
||||||
|
}
|
||||||
|
|
||||||
|
#webrx-rx-title {
|
||||||
|
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 {
|
||||||
{
|
|
||||||
white-space:nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor:pointer;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
color: #909090;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-rx-desc a
|
#openwebrx-rx-details-arrow {
|
||||||
{
|
|
||||||
color: #909090;
|
|
||||||
}
|
|
||||||
|
|
||||||
#openwebrx-rx-details-arrow
|
|
||||||
{
|
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 470px;
|
bottom: 0;
|
||||||
top: 55px;
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#openwebrx-rx-details-arrow a
|
#openwebrx-rx-details-arrow a {
|
||||||
{
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
|
|
@ -137,23 +123,19 @@
|
||||||
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;
|
||||||
float: right;
|
|
||||||
margin:0;
|
margin:0;
|
||||||
color: white;
|
color: white;
|
||||||
text-shadow: 0px 0px 4px #000000;
|
text-shadow: 0px 0px 4px #000000;
|
||||||
|
|
@ -162,23 +144,17 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-rx-photo-title
|
#webrx-rx-photo-title {
|
||||||
{
|
margin: 10px 15px;
|
||||||
position: absolute;
|
color: white;
|
||||||
left: 15px;
|
|
||||||
top: 78px;
|
|
||||||
color: White;
|
|
||||||
font-size: 16pt;
|
font-size: 16pt;
|
||||||
text-shadow: 1px 1px 4px #444;
|
text-shadow: 1px 1px 4px #444;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#webrx-rx-photo-desc
|
#webrx-rx-photo-desc {
|
||||||
{
|
margin: 10px 15px;
|
||||||
position: absolute;
|
color: white;
|
||||||
left: 15px;
|
|
||||||
top: 109px;
|
|
||||||
color: White;
|
|
||||||
font-size: 10pt;
|
font-size: 10pt;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-shadow: 0px 0px 6px #444;
|
text-shadow: 0px 0px 6px #444;
|
||||||
|
|
@ -186,8 +162,7 @@
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,25 @@
|
||||||
<div id="webrx-top-container">
|
<div id="webrx-top-container">
|
||||||
<div id="webrx-top-photo-clip">
|
<div id="webrx-top-bar" class="webrx-top-bar-parts">
|
||||||
<img src="static/gfx/openwebrx-top-photo.jpg" id="webrx-top-photo" alt="Receiver panorama"/>
|
<a href="https://www.openwebrx.de/" target="_blank"><img src="static/gfx/openwebrx-top-logo.png" id="webrx-top-logo" alt="OpenWebRX Logo"/></a>
|
||||||
<div id="webrx-top-bar" class="webrx-top-bar-parts">
|
<img id="webrx-rx-avatar" class="openwebrx-photo-trigger" src="static/gfx/openwebrx-avatar.png" alt="Receiver avatar"/>
|
||||||
<a href="https://www.openwebrx.de/" target="_blank"><img src="static/gfx/openwebrx-top-logo.png" id="webrx-top-logo" alt="OpenWebRX Logo"/></a>
|
<div id="webrx-rx-texts">
|
||||||
<img id="webrx-rx-avatar" class="openwebrx-photo-trigger" src="static/gfx/openwebrx-avatar.png" alt="Receiver avatar"/>
|
<div id="webrx-rx-title" class="openwebrx-photo-trigger"></div>
|
||||||
<div id="webrx-rx-texts">
|
<div id="webrx-rx-desc" class="openwebrx-photo-trigger"></div>
|
||||||
<div id="webrx-rx-title" class="openwebrx-photo-trigger"></div>
|
|
||||||
<div id="webrx-rx-desc" class="openwebrx-photo-trigger"></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>
|
|
||||||
<section id="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>
|
|
||||||
<a class="button" href="map" target="openwebrx-map"><span class="sprite sprite-panel-map"></span><br/>Map</a>
|
|
||||||
${settingslink}
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
|
<section id="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>
|
||||||
|
<a class="button" href="map" target="openwebrx-map"><span class="sprite sprite-panel-map"></span><br/>Map</a>
|
||||||
|
${settingslink}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div id="openwebrx-description-container">
|
||||||
<div id="webrx-rx-photo-title"></div>
|
<div id="webrx-rx-photo-title"></div>
|
||||||
<div id="webrx-rx-photo-desc"></div>
|
<div id="webrx-rx-photo-desc"></div>
|
||||||
</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>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -30,18 +30,14 @@ Header.prototype.init_rx_photo = function() {
|
||||||
|
|
||||||
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("#webrx-rx-photo-desc").animate({opacity: 0});
|
this.el.find('#openwebrx-description-container').removeClass('expanded');
|
||||||
this.el.find("#webrx-rx-photo-title").animate({opacity: 0});
|
|
||||||
this.el.find('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic'});
|
|
||||||
this.el.find("#openwebrx-rx-details-arrow-down").show();
|
this.el.find("#openwebrx-rx-details-arrow-down").show();
|
||||||
this.el.find("#openwebrx-rx-details-arrow-up").hide();
|
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("#webrx-rx-photo-desc").animate({opacity: 1});
|
this.el.find('#openwebrx-description-container').addClass('expanded');
|
||||||
this.el.find("#webrx-rx-photo-title").animate({opacity: 1});
|
|
||||||
this.el.find('#webrx-top-photo-clip').animate({maxHeight: 350}, {duration: 1000, easing: 'easeOutCubic'});
|
|
||||||
this.el.find("#openwebrx-rx-details-arrow-down").hide();
|
this.el.find("#openwebrx-rx-details-arrow-down").hide();
|
||||||
this.el.find("#openwebrx-rx-details-arrow-up").show();
|
this.el.find("#openwebrx-rx-details-arrow-up").show();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue