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

12
htdocs/index.wrx
View File

@ -44,17 +44,16 @@
<div id="webrx-top-container">
<div id="webrx-top-photo-clip">
<img src="static/gfx/openwebrx-top-photo.jpg" id="webrx-top-photo"/>
<div id="webrx-rx-photo-title">%[RX_PHOTO_TITLE]</div>
<div id="webrx-rx-photo-desc">%[RX_PHOTO_DESC]</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();"/>
<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>
@ -67,6 +66,9 @@
</ul>
</section>
</div>
<div id="webrx-rx-photo-title">%[RX_PHOTO_TITLE]</div>
<div id="webrx-rx-photo-desc">%[RX_PHOTO_DESC]</div>
</div>
</div>
<div id="webrx-main-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
{
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;

3
htdocs/openwebrx.js
View File

@ -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);