joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

(hopefully) improve the header markup

Browse Source
This commit is contained in:
Jakob Ketterl 2019-05-05 17:10:49 +02:00
parent 0f86796e75
commit 854ac6d5f1
3 changed files with 53 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
htdocs/index.wrx
View File

@ -44,29 +44,31 @@
<div id="webrx-top-container"> <div id="webrx-top-container">
<div id="webrx-top-photo-clip"> <div id="webrx-top-photo-clip">
<img src="static/gfx/openwebrx-top-photo.jpg" id="webrx-top-photo"/> <img src="static/gfx/openwebrx-top-photo.jpg" id="webrx-top-photo"/>
<div id="webrx-top-bar" class="webrx-top-bar-parts">
<a href="https://sdr.hu/openwebrx" target="_blank"><img src="static/gfx/openwebrx-top-logo.png" id="webrx-top-logo" /></a>
<a href="http://ha5kfu.sch.bme.hu/" target="_blank"><img src="static/gfx/openwebrx-ha5kfu-top-logo.png" id="webrx-ha5kfu-top-logo" /></a>
<div id="webrx-rx-avatar-background">
<img id="webrx-rx-avatar" src="static/gfx/openwebrx-avatar.png" onclick="toggle_rx_photo();"/>
</div>
<div id="webrx-rx-texts">
<div id="webrx-rx-title" onclick="toggle_rx_photo();">%[RX_TITLE]</div>
<div id="webrx-rx-desc" onclick="toggle_rx_photo();">%[RX_LOC] | Loc: %[RX_QRA], ASL: %[RX_ASL] m, <a href="https://www.google.hu/maps/place/%[RX_GPS]" target="_blank" onclick="dont_toggle_rx_photo();">[maps]</a></div>
</div>
<div id="openwebrx-rx-details-arrow">
<a id="openwebrx-rx-details-arrow-up" onclick="toggle_rx_photo();"><img src="static/gfx/openwebrx-rx-details-arrow-up.png" /></a>
<a id="openwebrx-rx-details-arrow-down" onclick="toggle_rx_photo();"><img src="static/gfx/openwebrx-rx-details-arrow.png" /></a>
</div>
<section id="openwebrx-main-buttons">
<ul>
<li onmouseup="toggle_panel('openwebrx-panel-status');"><img src="static/gfx/openwebrx-panel-status.png" /><br/>Status</li>
<li onmouseup="toggle_panel('openwebrx-panel-log');"><img src="static/gfx/openwebrx-panel-log.png" /><br/>Log</li>
<li onmouseup="toggle_panel('openwebrx-panel-receiver');"><img src="static/gfx/openwebrx-panel-receiver.png" /><br/>Receiver</li>
</ul>
</section>
</div>
<div id="webrx-rx-photo-title">%[RX_PHOTO_TITLE]</div> <div id="webrx-rx-photo-title">%[RX_PHOTO_TITLE]</div>
<div id="webrx-rx-photo-desc">%[RX_PHOTO_DESC]</div> <div id="webrx-rx-photo-desc">%[RX_PHOTO_DESC]</div>
</div> </div>
<div id="webrx-top-bar-background" class="webrx-top-bar-parts"></div>
<div id="webrx-top-bar" class="webrx-top-bar-parts">
<a href="https://sdr.hu/openwebrx" target="_blank"><img src="static/gfx/openwebrx-top-logo.png" id="webrx-top-logo" /></a>
<a href="http://ha5kfu.sch.bme.hu/" target="_blank"><img src="static/gfx/openwebrx-ha5kfu-top-logo.png" id="webrx-ha5kfu-top-logo" /></a>
<img id="webrx-rx-avatar-background" src="static/gfx/openwebrx-avatar-background.png" onclick="toggle_rx_photo();"/>
<img id="webrx-rx-avatar" src="static/gfx/openwebrx-avatar.png" onclick="toggle_rx_photo();"/>
<div id="webrx-rx-title" onclick="toggle_rx_photo();">%[RX_TITLE]</div>
<div id="webrx-rx-desc" onclick="toggle_rx_photo();">%[RX_LOC] | Loc: %[RX_QRA], ASL: %[RX_ASL] m, <a href="https://www.google.hu/maps/place/%[RX_GPS]" target="_blank" onclick="dont_toggle_rx_photo();">[maps]</a></div>
<div id="openwebrx-rx-details-arrow">
<a id="openwebrx-rx-details-arrow-up" onclick="toggle_rx_photo();"><img src="static/gfx/openwebrx-rx-details-arrow-up.png" /></a>
<a id="openwebrx-rx-details-arrow-down" onclick="toggle_rx_photo();"><img src="static/gfx/openwebrx-rx-details-arrow.png" /></a>
</div>
<section id="openwebrx-main-buttons">
<ul>
<li onmouseup="toggle_panel('openwebrx-panel-status');"><img src="static/gfx/openwebrx-panel-status.png" /><br/>Status</li>
<li onmouseup="toggle_panel('openwebrx-panel-log');"><img src="static/gfx/openwebrx-panel-log.png" /><br/>Log</li>
<li onmouseup="toggle_panel('openwebrx-panel-receiver');"><img src="static/gfx/openwebrx-panel-receiver.png" /><br/>Receiver</li>
</ul>
</section>
</div>
</div> </div>
<div id="webrx-main-container"> <div id="webrx-main-container">
<div id="openwebrx-scale-container"> <div id="openwebrx-scale-container">

109
htdocs/openwebrx.css
View File

@ -155,22 +155,12 @@ input[type=range]:focus::-ms-fill-upper
.webrx-top-bar-parts .webrx-top-bar-parts
{ {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:67px; height:67px;
} }
#webrx-top-bar-background
{
background-color: #808080;
opacity: 0.15;
filter:alpha(opacity=15);
}
#webrx-top-bar #webrx-top-bar
{ {
background: rgba(128, 128, 128, 0.15);
margin:0; margin:0;
padding:0; padding:0;
user-select: none; user-select: none;
@ -179,20 +169,23 @@ input[type=range]:focus::-ms-fill-upper
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
right: 0;
} }
#webrx-top-logo #webrx-top-logo
{ {
position: absolute; padding: 12px;
top: 12px; float: left;
left: 15px;
} }
#webrx-ha5kfu-top-logo #webrx-ha5kfu-top-logo
{ {
position: absolute; float: right;
top: 15px; padding: 15px;
right: 15px;
} }
#webrx-top-photo #webrx-top-photo
@ -204,79 +197,37 @@ input[type=range]:focus::-ms-fill-upper
#webrx-rx-avatar-background #webrx-rx-avatar-background
{ {
cursor:pointer; cursor:pointer;
position: absolute; background-image: url(gfx/openwebrx-avatar-background.png);
left: 285px; background-origin: content-box;
top: 6px; background-repeat: no-repeat;
float: left;
width: 54px;
height: 54px;
padding: 7px;
} }
#webrx-rx-avatar #webrx-rx-avatar
{ {
cursor:pointer; cursor:pointer;
position: absolute;
left: 289px;
top: 10px;
width: 46px; width: 46px;
height: 46px; height: 46px;
padding: 4px;
} }
#webrx-top-photo-clip #webrx-top-photo-clip
{ {
min-height: 67px;
max-height: 350px; max-height: 350px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
/*#webrx-bottom-bar
{
position: absolute;
bottom: 0px;
width: 100%;
height: 117px;
background-image:url(gfx/webrx-bottom-bar.png);
}*/
#webrx-page-container #webrx-page-container
{ {
min-height:100%; min-height:100%;
position:relative; 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 #webrx-rx-photo-title
{ {
position: absolute; position: absolute;
@ -303,10 +254,17 @@ input[type=range]:focus::-ms-fill-upper
#webrx-rx-photo-desc a #webrx-rx-photo-desc a
{ {
/*color: #007df1;*/
color: #5ca8ff; color: #5ca8ff;
text-shadow: none; 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 #webrx-rx-title
@ -314,9 +272,6 @@ input[type=range]:focus::-ms-fill-upper
white-space:nowrap; white-space:nowrap;
overflow: hidden; overflow: hidden;
cursor:pointer; cursor:pointer;
position: absolute;
left: 350px;
top: 13px;
font-family: "DejaVu Sans", Verdana, Geneva, sans-serif; font-family: "DejaVu Sans", Verdana, Geneva, sans-serif;
color: #909090; color: #909090;
font-size: 11pt; font-size: 11pt;
@ -330,15 +285,11 @@ input[type=range]:focus::-ms-fill-upper
cursor:pointer; cursor:pointer;
font-size: 10pt; font-size: 10pt;
color: #909090; color: #909090;
position: absolute;
left: 350px;
top: 34px;
} }
#webrx-rx-desc a #webrx-rx-desc a
{ {
color: #909090; color: #909090;
/*text-decoration: none;*/
} }
#openwebrx-rx-details-arrow #openwebrx-rx-details-arrow
@ -718,9 +669,7 @@ img.openwebrx-mirror-img
#openwebrx-main-buttons #openwebrx-main-buttons
{ {
position: absolute; float: right;
right: 133px;
top: 3px;
margin:0; margin:0;
color: white; color: white;
text-shadow: 0px 0px 4px #000000; text-shadow: 0px 0px 4px #000000;

3
htdocs/openwebrx.js
View File

@ -80,7 +80,8 @@ is_chrome = /Chrome/.test(navigator.userAgent);
function init_rx_photo() function init_rx_photo()
{ {
var clip = e("webrx-top-photo-clip"); 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-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() { animate(e("webrx-rx-photo-desc"),"opacity","",1,0,1,500,30); },1500);
window.setTimeout(function() { close_rx_photo() },2500); window.setTimeout(function() { close_rx_photo() },2500);