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

Unify range slider look with css

Browse Source 
Make panel elements placement less fickle
This commit is contained in:
Gnoxter 2016-02-06 17:42:35 +01:00
parent b05da52ade
commit fd173a920c
3 changed files with 125 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
htdocs/index.wrx
View File

@ -82,9 +82,9 @@
<div class="openwebrx-button" onclick="demodulator_analog_replace('usb');">USB</div> <div class="openwebrx-button" onclick="demodulator_analog_replace('usb');">USB</div>
<div class="openwebrx-button" onclick="demodulator_analog_replace('cw');">CW</div> <div class="openwebrx-button" onclick="demodulator_analog_replace('cw');">CW</div>
<span>Volume:</span> <div>Volume:
<input id="openwebrx-panel-volume" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()"> <input id="openwebrx-panel-volume" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
</div>
<div id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()">Mute</div> <div id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute()">Mute</div>
</div> </div>

121
htdocs/openwebrx.css
View File

@ -33,6 +33,118 @@ input
vertical-align:middle; vertical-align:middle;
} }
input[type=range]
{
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus
{
outline: none;
}
input[type=range]::-webkit-slider-runnable-track
{
width: 100%;
height: 7px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #B6B6B6;
border-radius: 11px;
border: 1px solid #8A8A8A;
}
input[type=range]::-webkit-slider-thumb
{
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
height: 24px;
width: 7px;
border-radius: 0px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -9.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track
{
background: #B6B6B6;
}
input[type=range]::-moz-range-track
{
width: 100%;
height: 7px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000;
background: #B6B6B6;
border-radius: 11px;
border: 1px solid #8A8A8A;
}
input[type=range]::-moz-range-thumb
{
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
height: 24px;
width: 7px;
border-radius: 0px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]::-ms-track
{
width: 100%;
height: 7px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower
{
background: #B6B6B6;
border: 1px solid #8A8A8A;
border-radius: 22px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper
{
background: #B6B6B6;
border: 1px solid #8A8A8A;
border-radius: 22px;
box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb
{
box-shadow: 1px 1px 1px #828282;
border: 1px solid #8A8A8A;
height: 24px;
width: 7px;
border-radius: 0px;
background: #FFFFFF;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower
{
background: #B6B6B6;
}
input[type=range]:focus::-ms-fill-upper
{
background: #B6B6B6;
}
#webrx-top-container #webrx-top-container
{ {
position: relative; position: relative;
@ -544,6 +656,10 @@ input
font-weight: bold; font-weight: bold;
} }
#openwebrx-panel-receiver
{
width:110px;
}
#openwebrx-mute-on #openwebrx-mute-on
{ {
@ -554,3 +670,8 @@ input
{ {
color: white; color: white;
} }
#openwebrx-panel-volume
{
width:70%;
}

3
htdocs/openwebrx.js
View File

@ -1838,13 +1838,14 @@ function place_panels()
if (c.dataset.panelPos=="left") { left_col.push(c); } if (c.dataset.panelPos=="left") { left_col.push(c); }
else if(c.dataset.panelPos=="right") { right_col.push(c); } else if(c.dataset.panelPos=="right") { right_col.push(c); }
c.style.width=newSize[0]+"px"; c.style.width=newSize[0]+"px";
c.style.height=newSize[1]+"px"; //c.style.height=newSize[1]+"px";
if(!c.openwebrxPanelTransparent) c.style.margin=panel_margin.toString()+"px"; if(!c.openwebrxPanelTransparent) c.style.margin=panel_margin.toString()+"px";
else c.style.marginLeft=panel_margin.toString()+"px"; else c.style.marginLeft=panel_margin.toString()+"px";
c.openwebrxPanelWidth=parseInt(newSize[0]); c.openwebrxPanelWidth=parseInt(newSize[0]);
c.openwebrxPanelHeight=parseInt(newSize[1]); c.openwebrxPanelHeight=parseInt(newSize[1]);
} }
} }
y=hoffset; //was y=0 before hoffset y=hoffset; //was y=0 before hoffset
while(left_col.length>0) while(left_col.length>0)
{ {