restructure header

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
+    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;
-    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;
+    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;
     box-sizing: initial;
 }
 
-#webrx-top-container img {
+#webrx-top-logo {
-    vertical-align: initial;
-}
-
-#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
+#webrx-rx-desc {
-{
-    white-space:nowrap;
-    overflow: hidden;
-    cursor:pointer;
     font-size: 10pt;
-    color: #909090;
 }
 
-#webrx-rx-desc a
+#openwebrx-rx-details-arrow {
-{
-    color: #909090;
-}
-
-#openwebrx-rx-details-arrow
-{
     cursor:pointer;
     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;
     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
+#webrx-rx-photo-title {
-{
+    margin: 10px 15px;
-    position: absolute;
+    color: white;
-    left: 15px;
-    top: 78px;
-    color: White;
     font-size: 16pt;
     text-shadow: 1px 1px 4px #444;
     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-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;
 }

htdocs/include/header.include.html

@@ -1,6 +1,4 @@
 <div id="webrx-top-container">
-    <div id="webrx-top-photo-clip">
-        <img src="static/gfx/openwebrx-top-photo.jpg" id="webrx-top-photo" alt="Receiver panorama"/>
     <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"/>
@@ -8,10 +6,6 @@
             <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>
@@ -20,7 +14,12 @@
             ${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>
 </div>

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('#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-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('#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-up").show();
 }