From 854ac6d5f1abe6d2335dedd6e3acdc657c6bdde6 Mon Sep 17 00:00:00 2001 From: Jakob Ketterl Date: Sun, 5 May 2019 17:10:49 +0200 Subject: [PATCH] (hopefully) improve the header markup --- htdocs/index.wrx | 42 +++++++++-------- htdocs/openwebrx.css | 109 ++++++++++++------------------------------- htdocs/openwebrx.js | 3 +- 3 files changed, 53 insertions(+), 101 deletions(-) diff --git a/htdocs/index.wrx b/htdocs/index.wrx index f091933..edf6356 100644 --- a/htdocs/index.wrx +++ b/htdocs/index.wrx @@ -44,29 +44,31 @@
+
+ + +
+ +
+
+
%[RX_TITLE]
+
%[RX_LOC] | Loc: %[RX_QRA], ASL: %[RX_ASL] m, [maps]
+
+
+ + +
+
+
    +

  • Status
    • +

  • Log
    • +

  • Receiver
    • +
+
+
%[RX_PHOTO_TITLE]
%[RX_PHOTO_DESC]
-
-
- - - - -
%[RX_TITLE]
-
%[RX_LOC] | Loc: %[RX_QRA], ASL: %[RX_ASL] m, [maps]
-
- - -
-
-
    -

  • Status
    • -

  • Log
    • -

  • Receiver
    • -
-
-
diff --git a/htdocs/openwebrx.css b/htdocs/openwebrx.css index 9e75d84..e2c1c44 100644 --- a/htdocs/openwebrx.css +++ b/htdocs/openwebrx.css @@ -155,22 +155,12 @@ input[type=range]:focus::-ms-fill-upper .webrx-top-bar-parts { - position: absolute; - top: 0px; - left: 0px; - width:100%; height:67px; } -#webrx-top-bar-background -{ - background-color: #808080; - opacity: 0.15; - filter:alpha(opacity=15); -} - #webrx-top-bar { + background: rgba(128, 128, 128, 0.15); margin:0; padding:0; user-select: none; @@ -179,20 +169,23 @@ input[type=range]:focus::-ms-fill-upper -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; + overflow: hidden; + position: absolute; + left: 0; + top: 0; + right: 0; } #webrx-top-logo { - position: absolute; - top: 12px; - left: 15px; + padding: 12px; + float: left; } #webrx-ha5kfu-top-logo { - position: absolute; - top: 15px; - right: 15px; + float: right; + padding: 15px; } #webrx-top-photo @@ -204,79 +197,37 @@ input[type=range]:focus::-ms-fill-upper #webrx-rx-avatar-background { cursor:pointer; - position: absolute; - left: 285px; - top: 6px; + background-image: url(gfx/openwebrx-avatar-background.png); + background-origin: content-box; + background-repeat: no-repeat; + float: left; + width: 54px; + height: 54px; + padding: 7px; } #webrx-rx-avatar { cursor:pointer; - position: absolute; - left: 289px; - top: 10px; width: 46px; height: 46px; + padding: 4px; } #webrx-top-photo-clip { + min-height: 67px; max-height: 350px; overflow: hidden; position: relative; } -/*#webrx-bottom-bar -{ - position: absolute; - bottom: 0px; - width: 100%; - height: 117px; - background-image:url(gfx/webrx-bottom-bar.png); -}*/ - #webrx-page-container { min-height:100%; position:relative; } -/*#webrx-photo-gradient-left -{ - position: absolute; - bottom: 0px; - left: 0px; - background-image:url(gfx/webrx-photo-gradient-corner.png); - width: 59px; - height: 92px; - -} - -#webrx-photo-gradient-middle -{ - position: absolute; - bottom: 0px; - left: 59px; - right: 59px; - height: 92px; - background-image:url(gfx/webrx-photo-gradient-middle.png); -} - -#webrx-photo-gradient-right -{ - position: absolute; - bottom: 0px; - right: 0px; - background-image:url(gfx/webrx-photo-gradient-corner.png); - width: 59px; - height: 92px; - -webkit-transform:scaleX(-1); - -moz-transform:scaleX(-1); - -ms-transform:scaleX(-1); - -o-transform:scaleX(-1); - transform:scaleX(-1); -}*/ - #webrx-rx-photo-title { position: absolute; @@ -303,10 +254,17 @@ input[type=range]:focus::-ms-fill-upper #webrx-rx-photo-desc a { - /*color: #007df1;*/ color: #5ca8ff; text-shadow: none; - /*text-shadow: 0px 0px 7px #fff;*/ +} + +#webrx-rx-texts { + float: left; + padding: 10px; +} + +#webrx-rx-texts div { + padding: 3px; } #webrx-rx-title @@ -314,9 +272,6 @@ input[type=range]:focus::-ms-fill-upper white-space:nowrap; overflow: hidden; cursor:pointer; - position: absolute; - left: 350px; - top: 13px; font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; color: #909090; font-size: 11pt; @@ -330,15 +285,11 @@ input[type=range]:focus::-ms-fill-upper cursor:pointer; font-size: 10pt; color: #909090; - position: absolute; - left: 350px; - top: 34px; } #webrx-rx-desc a { color: #909090; - /*text-decoration: none;*/ } #openwebrx-rx-details-arrow @@ -718,9 +669,7 @@ img.openwebrx-mirror-img #openwebrx-main-buttons { - position: absolute; - right: 133px; - top: 3px; + float: right; margin:0; color: white; text-shadow: 0px 0px 4px #000000; diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index f5a17b4..efd7ddb 100644 --- a/htdocs/openwebrx.js +++ b/htdocs/openwebrx.js @@ -80,7 +80,8 @@ is_chrome = /Chrome/.test(navigator.userAgent); function init_rx_photo() { var clip = e("webrx-top-photo-clip"); - clip.style.maxHeight=clip.clientHeight+"px"; + rx_photo_height = clip.clientHeight + clip.style.maxHeight=rx_photo_height+"px"; window.setTimeout(function() { animate(e("webrx-rx-photo-title"),"opacity","",1,0,1,500,30); },1000); window.setTimeout(function() { animate(e("webrx-rx-photo-desc"),"opacity","",1,0,1,500,30); },1500); window.setTimeout(function() { close_rx_photo() },2500);