From a31b24692416e300c3239af369bb5bb84bde7151 Mon Sep 17 00:00:00 2001 From: Jakob Ketterl Date: Fri, 15 Jan 2021 19:06:00 +0100 Subject: [PATCH] restructure header --- htdocs/css/openwebrx-header.css | 131 ++++++++++++----------------- htdocs/include/header.include.html | 39 +++++---- htdocs/lib/Header.js | 8 +- 3 files changed, 74 insertions(+), 104 deletions(-) diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css index b22da87..e2b094f 100644 --- a/htdocs/css/openwebrx-header.css +++ b/htdocs/css/openwebrx-header.css @@ -1,32 +1,36 @@ -#webrx-top-container -{ +#webrx-top-container { position: relative; z-index:1000; background-color: #575757; -} -#webrx-top-photo -{ - width: 100%; - display: block; -} + background-image: url(../gfx/openwebrx-top-photo.jpg); + background-position-x: center; + background-position-y: top; + background-repeat: no-repeat; + background-size: cover; -#webrx-top-photo-clip -{ - min-height: 67px; - max-height: 67px; - height: 350px; 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; -} -#webrx-top-bar -{ background: rgba(128, 128, 128, 0.15); margin:0; padding:0; @@ -37,31 +41,25 @@ -moz-user-select: none; -ms-user-select: none; overflow: hidden; - position: absolute; - left: 0; - top: 0; - right: 0; + + display: flex; } -#webrx-tob-container, #webrx-top-container * { +.webrx-top-bar-parts > * { + flex: 0; +} + +#webrx-top-container, #webrx-top-container * { line-height: initial; box-sizing: initial; } -#webrx-top-container img { - vertical-align: initial; -} - -#webrx-top-logo -{ +#webrx-top-logo { padding: 12px; - float: left; } -#webrx-rx-avatar -{ +#webrx-rx-avatar { background-color: rgba(154, 154, 154, .5); - float: left; margin: 7px; cursor:pointer; @@ -73,49 +71,37 @@ } #webrx-rx-texts { - float: left; + flex: 1; padding: 10px; } #webrx-rx-texts div { padding: 3px; -} - -#webrx-rx-title -{ white-space:nowrap; overflow: hidden; cursor:pointer; - font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; color: #909090; +} + +#webrx-rx-title { + font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; font-size: 11pt; font-weight: bold; } -#webrx-rx-desc -{ - white-space:nowrap; - overflow: hidden; - cursor:pointer; +#webrx-rx-desc { font-size: 10pt; - color: #909090; } -#webrx-rx-desc a -{ - color: #909090; -} - -#openwebrx-rx-details-arrow -{ +#openwebrx-rx-details-arrow { cursor:pointer; position: absolute; - left: 470px; - top: 55px; + bottom: 0; + left: 50%; + transform: translate(-50%, 0); } -#openwebrx-rx-details-arrow a -{ +#openwebrx-rx-details-arrow a { margin: 0; padding: 0; line-height: 0; @@ -137,23 +123,19 @@ 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; - float: right; margin:0; color: white; text-shadow: 0px 0px 4px #000000; @@ -162,23 +144,17 @@ font-weight: bold; } -#webrx-rx-photo-title -{ - position: absolute; - left: 15px; - top: 78px; - color: White; +#webrx-rx-photo-title { + margin: 10px 15px; + color: white; font-size: 16pt; text-shadow: 1px 1px 4px #444; opacity: 1; } -#webrx-rx-photo-desc -{ - position: absolute; - left: 15px; - top: 109px; - color: White; +#webrx-rx-photo-desc { + margin: 10px 15px; + color: white; font-size: 10pt; font-weight: bold; text-shadow: 0px 0px 6px #444; @@ -186,8 +162,7 @@ line-height: 1.5em; } -#webrx-rx-photo-desc a -{ +#webrx-rx-photo-desc a { color: #5ca8ff; text-shadow: none; } diff --git a/htdocs/include/header.include.html b/htdocs/include/header.include.html index c66aed1..ec31619 100644 --- a/htdocs/include/header.include.html +++ b/htdocs/include/header.include.html @@ -1,26 +1,25 @@
-
- Receiver panorama -
- - Receiver avatar -
-
-
-
-
- - -
-
-

Status
-

Log
-

Receiver
-
Map - ${settingslink} -
+
+ + Receiver avatar +
+
+
+
+

Status
+

Log
+

Receiver
+
Map + ${settingslink} +
+
+
+
+ + +
diff --git a/htdocs/lib/Header.js b/htdocs/lib/Header.js index cd3f4bf..469df1e 100644 --- a/htdocs/lib/Header.js +++ b/htdocs/lib/Header.js @@ -30,18 +30,14 @@ Header.prototype.init_rx_photo = function() { Header.prototype.close_rx_photo = function() { this.rx_photo_state = 0; - this.el.find("#webrx-rx-photo-desc").animate({opacity: 0}); - 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-description-container').removeClass('expanded'); this.el.find("#openwebrx-rx-details-arrow-down").show(); this.el.find("#openwebrx-rx-details-arrow-up").hide(); } Header.prototype.open_rx_photo = function() { this.rx_photo_state = 1; - this.el.find("#webrx-rx-photo-desc").animate({opacity: 1}); - 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-description-container').addClass('expanded'); this.el.find("#openwebrx-rx-details-arrow-down").hide(); this.el.find("#openwebrx-rx-details-arrow-up").show(); }