mirror
/
gridtracker
kopia lustrzana https://gitlab.com/gridtracker.org/gridtracker
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Roster control layout adapts to window width

merge-requests/43/head
Sebastian Delmont 2020-12-22 12:30:21 -05:00
rodzic 39d4122282
commit de5f8932f8
3 zmienionych plików z 489 dodań i 377 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

566
package.nw/gt_roster.html
Wyświetl plik

@ -27,25 +27,30 @@
<body onload="init()" class="roster" oncontextmenu="return handleContextMenu(event);">
<div id="MainCallRoster">
<header id="RosterControls">
<div id="MainRosterControls">
<div id="TransmitControls">
<div
id="txrxdec"
style="
background-color: Green;
border-style: outset;
border-color: yellow;
border-width: 3px;
margin: 2px;
"
class="roundBorder"
>
Waiting…
</div>
<div class="button" style="margin: 3px" onclick="window.opener.haltAllTx(true);">Halt Tx</div>
<div id="TransmitControls">
<div
id="txrxdec"
style="
background-color: Green;
border-style: outset;
border-color: yellow;
border-width: 3px;
margin: 2px;
"
class="roundBorder"
>
Waiting…
</div>
<div class="button" style="margin: 3px" onclick="window.opener.haltAllTx(true);">Halt Tx</div>
</div>
<div id="MoreLessControls">
<div class="link" onclick="toggleMoreControls()" id="ShowMoreControlsLink">More Controls</div>
<div class="link" onclick="toggleMoreControls()" id="ShowFewerControlsLink">Fewer Controls</div>
</div>
<div id="MainRosterControls">
<div id="LogbookControls">
<label>Logbook</label>
<select id="referenceNeed" onchange="valuesChanged();">
@ -69,308 +74,265 @@
</select>
</div>
<div id="HuntingControls">
<div id="HuntModeControls">
<label>Hunting</label>
<div id="HuntModeControls">
<select id="huntMode" onchange="valuesChanged();" value="callsign">
<option value="callsign">Callsign</option>
<option value="grid">Grid</option>
<option value="dxcc">DXCC</option>
<option value="dxccs">DXCC (Single)</option>
<option value="cq">CQ Zone</option>
<option value="itu">ITU Zone</option>
<option value="usstates">US States (WAS)</option>
<option value="usstate">US State (Single)</option>
<option value="wpx">Prefix (WPX)</option>
</select>
</div>
<div id="HuntNeedControls">
<select id="huntNeed" onchange="valuesChanged();">
<option value="worked">New</option>
<option value="confirmed">New+Unconfirmed</option>
</select>
</div>
<div id="HuntStateControls">
<select id="stateSelect" style="margin-top: 2px" ;>
<option value="" selected="true">Select Territory</option>
</select>
</div>
<div id="HuntDXCCsControls" style="display: none">
<select id="DXCCsSelect" style="margin-top: 2px" ;>
<option value="-1" selected="true">Select DXCC</option>
</select>
</div>
<select id="huntMode" onchange="valuesChanged();" value="callsign">
<option value="callsign">Callsign</option>
<option value="grid">Grid</option>
<option value="dxcc">DXCC</option>
<option value="dxccs">DXCC (Single)</option>
<option value="cq">CQ Zone</option>
<option value="itu">ITU Zone</option>
<option value="usstates">US States (WAS)</option>
<option value="usstate">US State (Single)</option>
<option value="wpx">Prefix (WPX)</option>
</select>
<select id="huntNeed" onchange="valuesChanged();">
<option value="worked">New</option>
<option value="confirmed">New+Unconfirmed</option>
</select>
<select id="stateSelect" onchange="valuesChanged();">
<option value="" selected="true">Select Territory</option>
</select>
<select id="DXCCsSelect" onchange="valuesChanged();" id="HuntDXCCsControls">
<option value="-1" selected="true">Select DXCC</option>
</select>
</div>
<div id="scriptIcon" style="display: none; padding: 0; margin: 0"></div>
<div id="MoreLessControls">
<div class="link" onclick="toggleMoreControls()" id="ShowMoreControlsLink">More Controls</div>
<div class="link" onclick="toggleMoreControls()" id="ShowFewerControlsLink">Fewer Controls</div>
</div>
</div>
<div id="SecondaryRosterControls">
<div id="AwardTrackerControls" class="controlItem">
<div id="AwardTrackerControls" class="secondaryControlGroup">
<h3>Awards</h3>
<div id="AwardWantedList"></div>
<div class="button" onclick="openAwardPopup()">Add Awards</div>
</div>
<div id="huntingMatrixDiv" class="controlItem" style="border: 1px solid #066">
<table style="border-collapse: collapse" title="Wanted">
<tr>
<th colspan="2">Wanted</th>
</tr>
<tr>
<td colspan="1">
<label><input type="checkbox" id="huntCallsign" onchange="wantedChanged(this);" />Callsign</label>
</td>
<td colspan="1">
<label><input type="checkbox" id="huntCQz" onchange="wantedChanged(this);" />CQz</label>
</td>
</tr>
<tr>
<td colspan="1"><input type="checkbox" id="huntGrid" onchange="wantedChanged(this);" />Grid</td>
<td colspan="1"><input type="checkbox" id="huntITUz" onchange="wantedChanged(this);" />ITUz</td>
</tr>
<tr>
<td colspan="1"><input type="checkbox" id="huntDXCC" onchange="wantedChanged(this);" />DXCC</td>
<td colspan="1"><input type="checkbox" id="huntState" onchange="wantedChanged(this);" />State</td>
</tr>
<tr>
<td colspan="1" title="Stations calling *you*">
<div id="huntingMatrixDiv" class="secondaryControlGroup" style="border: 1px solid #066">
<h3>Wanted</h3>
<div class='columns'>
<div>
<label><input type="checkbox" id="huntCallsign" onchange="wantedChanged(this);" />Callsign</label>
</div>
<div>
<label><input type="checkbox" id="huntCQz" onchange="wantedChanged(this);" />CQz</label>
</div>
<div>
<label><input type="checkbox" id="huntGrid" onchange="wantedChanged(this);" />Grid</label>
</div>
<div>
<label><input type="checkbox" id="huntITUz" onchange="wantedChanged(this);" />ITUz</label>
</div>
<div>
<label ><input type="checkbox" id="huntDXCC" onchange="wantedChanged(this);" />DXCC</label>
</div>
<div>
<label><input type="checkbox" id="huntState" onchange="wantedChanged(this);" />State</label>
</div>
<div>
<label title="Stations calling *you*">
<input type="checkbox" id="huntQRZ" onchange="wantedChanged(this);" />QRZ
</td>
<td colspan="1"><input type="checkbox" id="huntCounty" onchange="wantedChanged(this);" />County</td>
</tr>
<tr>
<td colspan="1"><input type="checkbox" id="huntPX" onchange="wantedChanged(this);" />WPX</td>
<td colspan="1"><input type="checkbox" id="huntCont" onchange="wantedChanged(this);" />Cont</td>
</tr>
<tr>
<td colspan="1" title="Off-Air Message Service Users">
</label>
</div>
<div>
<label><input type="checkbox" id="huntCounty" onchange="wantedChanged(this);" />County</label>
</div>
<div>
<label><input type="checkbox" id="huntPX" onchange="wantedChanged(this);" />WPX</label>
</div>
<div>
<label><input type="checkbox" id="huntCont" onchange="wantedChanged(this);" />Cont</label>
</div>
<div>
<label title="Off-Air Message Service Users">
<input type="checkbox" id="huntOAMS" onchange="wantedChanged(this);" />OAMS
</td>
</tr>
</table>
</label>
</div>
</div>
</div>
<div id="exceptionDiv" class="controlItem" style="border: 1px solid #622">
<table style="border-collapse: collapse; margin: 0; padding: 0" title="Exceptions">
<tr>
<td>
<table style="border-collapse: collapse">
<tr>
<td colspan="2">
<label><input type="checkbox" id="cqOnly" onchange="valuesChanged();" />CQ Only</label>
</td>
</tr>
<tr>
<td colspan="2">
<label><input type="checkbox" id="wantGrid" onchange="valuesChanged();" />Has Grid</label>
</td>
</tr>
<tr>
<td><input type="checkbox" id="wantMinDB" onchange="valuesChanged();" />Min dB</td>
<td>
<input
type="range"
min="-25"
max="0"
step="1"
class="slider"
id="minDb"
oninput="valuesChanged();"
style="width: 75px"
/>
</td>
<td align="center" id="minDbView" class="roundBorderValue">-24</td>
</tr>
<tr>
<td><input type="checkbox" id="wantMaxDT" onchange="valuesChanged();" />Max DT</td>
<td>
<input
type="range"
min="0.1"
max="2"
step="0.1"
class="slider"
id="maxDT"
oninput="valuesChanged();"
style="width: 75px"
/>
</td>
<td align="center" id="maxDTView" class="roundBorderValue">.5</td>
</tr>
<tr>
<td><input type="checkbox" id="wantMinFreq" onchange="valuesChanged();" />Min freq</td>
<td>
<input
type="range"
min="0"
max="2500"
step="10"
class="slider"
id="minFreq"
oninput="valuesChanged();"
style="width: 75px"
/>
</td>
<td align="center" id="minFreqView" class="roundBorderValue">400</td>
</tr>
<tr>
<td><input type="checkbox" id="wantMaxFreq" onchange="valuesChanged();" />Max freq</td>
<td>
<input
type="range"
min="500"
max="3500"
step="10"
class="slider"
id="maxFreq"
oninput="valuesChanged();"
style="width: 75px"
/>
</td>
<td align="center" id="maxFreqView" class="roundBorderValue">3500</td>
</tr>
<tr>
<td id="usesLoTWDiv">
<input type="checkbox" id="usesLoTW" onchange="valuesChanged();" />Uses LoTW
</td>
<td>
<input
title="Max time since their last upload"
type="range"
min="3"
max="27"
step="3"
class="slider"
id="maxLoTW"
oninput="valuesChanged();"
style="width: 75px"
/>
</td>
<td
title="Max time since their last upload"
align="center"
id="maxLoTWView"
class="roundBorderValue"
style="width: 35px"
>
3
</td>
</tr>
<tr>
<td colspan="2" id="onlySpotDiv" style="display: none">
<input type="checkbox" id="onlySpot" onchange="valuesChanged();" />Spotted Me
</td>
</tr>
</table>
</td>
<td>
<table style="border-collapse: collapse">
<tr>
<td colspan="2">
<input type="checkbox" id="noMyDxcc" onchange="onlyMyDxcc.checked=false; valuesChanged();" />Not
My DXCC
</td>
</tr>
<tr>
<td colspan="2">
<input
type="checkbox"
id="onlyMyDxcc"
onchange="noMyDxcc.checked=false; valuesChanged();"
/>Only My DXCC
</td>
</tr>
<tr>
<td colspan="2" id="useseQSLDiv" style="display: none">
<input type="checkbox" id="useseQSL" onchange="valuesChanged();" />Uses eQSL
</td>
</tr>
<tr>
<td colspan="2" id="usesOQRSDiv" style="display: none">
<input type="checkbox" id="usesOQRS" onchange="valuesChanged();" />Uses OQRS
</td>
</tr>
<tr>
<td colspan="2" id="allOnlyNewDiv" style="display: none">
<input type="checkbox" id="allOnlyNew" onchange="valuesChanged();" />Only New Calls
</td>
</tr>
<tr>
<td colspan="2" title="No Decodes Containing...">
<input type="checkbox" id="noMsg" onchange="valuesChanged();" />No &nbsp;&nbsp;<input
type="text"
class="inputTextValue"
size="5"
id="noMsgValue"
onfocus="g_regFocus=true;"
onblur="g_regFocus=false;"
oninput="valuesChanged();"
style="background-color: green; color: yellow; margin: 0"
onkeydown="checkForEnter(this);"
/>
</td>
</tr>
<tr>
<td colspan="2" title="Only Decodes Containing...">
<input type="checkbox" id="onlyMsg" onchange="valuesChanged();" />Only<input
type="text"
class="inputTextValue"
size="5"
id="onlyMsgValue"
onfocus="g_regFocus=true;"
onblur="g_regFocus=false;"
oninput="valuesChanged();"
style="background-color: green; color: yellow; margin: 0"
onkeydown="checkForEnter(this);"
/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6" align="center">
<table>
<tr>
<td>
<label
><input
type="checkbox"
id="useRegex"
title="Callsign Regular Expression"
onchange="valuesChanged();"
/>
<a
title="Regular Expressions 101"
href="https://regex101.com/?flavor=javascript"
target="_blank"
>Regex</a
></label
>
<input
type="text"
class="inputTextValue"
size="12"
id="callsignRegex"
onfocus="g_regFocus=true;"
onblur="g_regFocus=false;"
oninput="valuesChanged();"
style="display: none; background-color: green; color: yellow; margin: 0"
onkeydown="checkForEnter(this);"
/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div id="exceptionDiv" class="secondaryControlGroup" style="border: 1px solid #622">
<h3>Exceptions</h3>
<div class='columns'>
<div>
<label><input type="checkbox" id="cqOnly" onchange="valuesChanged();" />CQ Only</label>
</div>
<div>
<label><input type="checkbox" id="wantGrid" onchange="valuesChanged();" />Has Grid</label>
</div>
<div>
<label><input type="checkbox" id="wantMinDB" onchange="valuesChanged();" />Min dB</label>
<input
type="range"
min="-25"
max="0"
step="1"
class="slider"
id="minDb"
oninput="valuesChanged();"
/>
<span id="minDbView" class="roundBorderValue">-24</span>
</div>
<div>
<label><input type="checkbox" id="wantMaxDT" onchange="valuesChanged();" />Max DT</label>
<input
type="range"
min="0.1"
max="2"
step="0.1"
class="slider"
id="maxDT"
oninput="valuesChanged();"
/>
<span id="maxDTView" class="roundBorderValue">.5</span>
</div>
<div>
<label><input type="checkbox" id="wantMinFreq" onchange="valuesChanged();" />Min freq</label>
<input
type="range"
min="0"
max="2500"
step="10"
class="slider"
id="minFreq"
oninput="valuesChanged();"
/>
<span id="minFreqView" class="roundBorderValue">400</span>
</div>
<div>
<label><input type="checkbox" id="wantMaxFreq" onchange="valuesChanged();" />Max freq</label>
<input
type="range"
min="500"
max="3500"
step="10"
class="slider"
id="maxFreq"
oninput="valuesChanged();"
/>
<span id="maxFreqView" class="roundBorderValue">3500</span>
</div>
<div id="usesLoTWDiv">
<label><input type="checkbox" id="usesLoTW" onchange="valuesChanged();" />Uses LoTW</label>
<input
title="Max time since their last upload"
type="range"
min="3"
max="27"
step="3"
class="slider"
id="maxLoTW"
oninput="valuesChanged();"
/>
<span id="maxLoTWView" class="roundBorderValue" style="width: 35px;">3</span>
</div>
<div id="onlySpotDiv">
<label><input type="checkbox" id="onlySpot" onchange="valuesChanged();" />Spotted Me</label>
</div>
<div>
<label>
<input type="checkbox" id="noMyDxcc" onchange="onlyMyDxcc.checked=false; valuesChanged();" />
Not My DXCC
</label>
</div>
<div>
<label>
<input type="checkbox" id="onlyMyDxcc" onchange="noMyDxcc.checked=false; valuesChanged();" />
Only My DXCC
</label>
</div>
<div id="useseQSLDiv">
<label><input type="checkbox" id="useseQSL" onchange="valuesChanged();" />Uses eQSL</label>
</div>
<div id="usesOQRSDiv">
<label><input type="checkbox" id="usesOQRS" onchange="valuesChanged();" />Uses OQRS</label>
</div>
<div id="allOnlyNewDiv">
<label><input type="checkbox" id="allOnlyNew" onchange="valuesChanged();" />Only New Calls</label>
</div>
<div>
<label title="No Decodes Containing...">
<input type="checkbox" id="noMsg" onchange="valuesChanged();" />
No &nbsp;&nbsp;
</label>
<input
type="text"
class="inputTextValue"
size="8"
id="noMsgValue"
onfocus="g_regFocus=true;"
onblur="g_regFocus=false;"
oninput="valuesChanged();"
onkeydown="checkForEnter(this);"
/>
</div>
<div>
<label title="Only Decodes Containing...">
<input type="checkbox" id="onlyMsg" onchange="valuesChanged();" />
Only
</label>
<input
type="text"
class="inputTextValue"
size="8"
id="onlyMsgValue"
onfocus="g_regFocus=true;"
onblur="g_regFocus=false;"
oninput="valuesChanged();"
onkeydown="checkForEnter(this);"
/>
</div>
<div>
<label title="Callsign Regular Expression">
<input type="checkbox" id="useRegex" onchange="valuesChanged();" />
<a title="Regular Expressions 101" href="https://regex101.com/?flavor=javascript" target="_blank">
Regex
</a>
</label>
<input
type="text"
class="inputTextValue"
size="12"
id="callsignRegex"
onfocus="g_regFocus=true;"
onblur="g_regFocus=false;"
oninput="valuesChanged();"
onkeydown="checkForEnter(this);"
/>
</div>
</div>
</div>
<div id="instancesDiv" style="display: none"></div>
<div id="instancesDiv"></div>
</div>
</header>

75
package.nw/lib/roster.js
Wyświetl plik

@ -452,11 +452,11 @@ function viewRoster()
if (window.opener.g_callsignLookups.lotwUseEnable == true)
{
usesLoTWDiv.style.display = "inline-block";
usesLoTWDiv.style.display = "";
if (g_rosterSettings.usesLoTW == true)
{
maxLoTW.style.display = "inline-block";
maxLoTWView.style.display = "inline-block";
maxLoTW.style.display = "";
maxLoTWView.style.display = "";
}
else
{
@ -472,18 +472,18 @@ function viewRoster()
}
if (window.opener.g_callsignLookups.eqslUseEnable == true)
{ useseQSLDiv.style.display = "block"; }
{ useseQSLDiv.style.display = ""; }
else useseQSLDiv.style.display = "none";
if (window.opener.g_callsignLookups.oqrsUseEnable == true)
{ usesOQRSDiv.style.display = "block"; }
{ usesOQRSDiv.style.display = ""; }
else usesOQRSDiv.style.display = "none";
if (g_rosterSettings.columns.Spot == true)
{ onlySpotDiv.style.display = "block"; }
{ onlySpotDiv.style.display = ""; }
else onlySpotDiv.style.display = "none";
if (callMode == "all") allOnlyNewDiv.style.display = "block";
if (callMode == "all") allOnlyNewDiv.style.display = "";
else allOnlyNewDiv.style.display = "none";
var now = timeNowSec();
@ -2189,12 +2189,10 @@ function viewRoster()
{
worker += "</table>";
RosterTable.innerHTML = worker;
callTable.style.width = parseInt(window.innerWidth) - 6 + "px";
}
else
{
RosterTable.innerHTML = worker + "</div>";
buttonsDiv.style.width = parseInt(window.innerWidth) - 6 + "px";
}
var dirPath = window.opener.g_scriptDir;
@ -2422,7 +2420,7 @@ function updateInstances()
"</div>";
}
instancesDiv.innerHTML = worker;
instancesDiv.style.display = "block";
instancesDiv.style.display = "";
}
else instancesDiv.style.display = "none";
}
@ -2785,9 +2783,9 @@ function toggleMoreControls()
function setVisual()
{
HuntNeedControls.style.display = "none";
HuntStateControls.style.display = "none";
HuntDXCCsControls.style.display = "none";
huntNeed.style.display = "none";
stateSelect.style.display = "none";
DXCCsSelect.style.display = "none";
if (g_rosterSettings.controls)
{
@ -2816,7 +2814,7 @@ function setVisual()
g_rosterSettings.columns[t] = true;
} */
HuntingControls.style.display = "none";
HuntModeControls.style.display = "none";
CallsignsControls.style.display = "none";
AwardTrackerControls.style.display = "";
huntingMatrixDiv.style.display = "";
@ -2831,19 +2829,20 @@ function setVisual()
}
AwardTrackerControls.style.display = "none";
HuntingControls.style.display = "";
HuntModeControls.style.display = "";
huntMode.style.display = "";
CallsignsControls.style.display = "";
closeAwardPopup();
if (callsignNeed.value == "all" || callsignNeed.value == "hits")
{
huntingMatrixDiv.style.display = "";
HuntNeedControls.style.display = "block";
HuntModeControls.style.display = "none";
huntNeed.style.display = "";
huntMode.style.display = "none";
}
else
{
huntingMatrixDiv.style.display = "none";
HuntModeControls.style.display = "block";
huntMode.style.display = "";
if (
huntMode.value != "callsign" &&
@ -2851,26 +2850,26 @@ function setVisual()
huntMode.value != "dxccs"
)
{
HuntNeedControls.style.display = "block";
huntNeed.style.display = "";
}
if (huntMode.value == "usstate")
{
HuntStateControls.style.display = "block";
stateSelect.style.display = "";
}
if (huntMode.value == "usstates")
{
HuntNeedControls.style.display = "block";
huntNeed.style.display = "";
}
if (huntMode.value == "dxccs")
{
HuntDXCCsControls.style.display = "block";
DXCCsSelect.style.display = "";
}
}
}
if (wantMaxDT.checked == true)
{
maxDT.style.display = "block";
maxDTView.style.display = "block";
maxDT.style.display = "";
maxDTView.style.display = "";
}
else
{
@ -2879,8 +2878,8 @@ function setVisual()
}
if (wantMinDB.checked == true)
{
minDb.style.display = "block";
minDbView.style.display = "block";
minDb.style.display = "";
minDbView.style.display = "";
}
else
{
@ -2889,8 +2888,8 @@ function setVisual()
}
if (wantMinFreq.checked == true)
{
minFreq.style.display = "block";
minFreqView.style.display = "block";
minFreq.style.display = "";
minFreqView.style.display = "";
}
else
{
@ -2899,8 +2898,8 @@ function setVisual()
}
if (wantMaxFreq.checked == true)
{
maxFreq.style.display = "block";
maxFreqView.style.display = "block";
maxFreq.style.display = "";
maxFreqView.style.display = "";
}
else
{
@ -2910,7 +2909,7 @@ function setVisual()
if (useRegex.checked == true)
{
callsignRegex.style.display = "inline-block";
callsignRegex.style.display = "";
}
else
{
@ -2919,11 +2918,11 @@ function setVisual()
if (window.opener.g_callsignLookups.lotwUseEnable == true)
{
usesLoTWDiv.style.display = "inline-block";
usesLoTWDiv.style.display = "";
if (g_rosterSettings.usesLoTW == true)
{
maxLoTW.style.display = "inline-block";
maxLoTWView.style.display = "inline-block";
maxLoTW.style.display = "";
maxLoTWView.style.display = "";
}
else
{
@ -2939,19 +2938,19 @@ function setVisual()
}
if (window.opener.g_callsignLookups.eqslUseEnable == true)
{ useseQSLDiv.style.display = "block"; }
{ useseQSLDiv.style.display = ""; }
else useseQSLDiv.style.display = "none";
if (window.opener.g_callsignLookups.oqrsUseEnable == true)
{ usesOQRSDiv.style.display = "block"; }
{ usesOQRSDiv.style.display = ""; }
else usesOQRSDiv.style.display = "none";
if (g_rosterSettings.columns.Spot == true)
{ onlySpotDiv.style.display = "block"; }
{ onlySpotDiv.style.display = ""; }
else onlySpotDiv.style.display = "none";
if (g_rosterSettings.callsign == "all" || g_rosterSettings.callsign == "hits")
{ allOnlyNewDiv.style.display = "block"; }
{ allOnlyNewDiv.style.display = ""; }
else allOnlyNewDiv.style.display = "none";
resize();

225
package.nw/lib/style_roster.css
Wyświetl plik

@ -120,23 +120,108 @@ body.roster {
flex: 1;
}
#MainRosterControls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 2px;
justify-content: space-evenly;
align-items: center;
#RosterControls {
display: grid;
}
#MainRosterControls > div {
#RosterControls.hidden {
display: none;
}
#RosterControls.normal {
grid-template-columns: 200px 1fr 100px;
grid-template-rows: auto;
grid-template-areas: " txrx controls toggle ";
}
#RosterControls.extended {
grid-template-columns: 300px 1fr;
grid-template-rows: auto;
grid-template-areas:
" txrx toggle "
" controls more-controls ";
}
@media (max-width: 880px) {
#RosterControls.extended {
grid-template-areas:
" txrx toggle "
" controls . "
" more-controls more-controls ";
}
}
#TransmitControls {
grid-area: txrx;
margin-left: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
#MoreLessControls {
grid-area: toggle;
text-align: right;
margin-right: 5px;
margin-bottom: 5px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
#RosterControls.normal #ShowFewerControlsLink {
display: none;
}
#RosterControls.normal #ShowMoreControlsLink {
display: block;
}
#MainRosterControls {
grid-area: controls;
}
#SecondaryRosterControls {
grid-area: more-controls;
}
#RosterControls.normal #SecondaryRosterControls {
display: none;
}
#RosterControls.normal #MainRosterControls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
#MainRosterControls label {
margin-right: 4px;
margin-left: 8px;
}
#RosterControls.extended #MainRosterControls {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
}
#RosterControls.extended #MainRosterControls > div {
margin-bottom: 4px;
}
#RosterControls.extended #MainRosterControls select {
min-width: 200px;
}
#RosterControls.extended #HuntModeControls {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
}
#AwardWantedList {
@ -145,22 +230,22 @@ body.roster {
max-height: 142px;
}
#RosterControls {
display: block;
@media (max-width: 1050px) {
#RosterControls.normal #HuntModeControls {
display: none !important;
}
}
#RosterControls.hidden {
display: none;
@media (max-width: 780px) {
#RosterControls.normal #CallsignsControls {
display: none;
}
}
#RosterControls.normal #ShowFewerControlsLink {
display: none;
}
#RosterControls.normal #ShowMoreControlsLink {
display: block;
}
#RosterControls.normal #SecondaryRosterControls {
display: none;
@media (max-width: 600px) {
#RosterControls.normal #LogbookControls {
display: none;
}
}
#RosterControls.extended #ShowFewerControlsLink {
@ -170,9 +255,91 @@ body.roster {
display: none;
}
#RosterControls.extended #SecondaryRosterControls {
display: block;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
margin-right: 8px;
margin-bottom: 4px;
}
@media (max-width: 650px) {
#RosterControls.extended #SecondaryRosterControls {
flex-direction: column;
align-items: stretch;
}
}
.secondaryControlGroup {
flex: 1;
margin-left: 8px;
padding: 6px;
border-width: 1px;
border-color: #aaa;
border-style: inset;
border-radius: 4px;
}
#huntingMatrixDiv {
flex: 0.7;
}
#exceptionDiv {
flex: 1.3;
}
.secondaryControlGroup h3 {
text-align: left;
font-size: 13px;
margin: 2px;
padding: 0;
}
.secondaryControlGroup .columns {
column-count: 2;
/* max-height: 160px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch; */
}
@media (min-width: 1100px) {
.secondaryControlGroup .columns {
column-count: 3;
}
}
@media (min-width: 1400px) {
.secondaryControlGroup .columns {
column-count: 4;
}
}
.secondaryControlGroup .columns > div {
text-align: left;
margin-bottom: 2px;
}
.secondaryControlGroup input.slider {
display: inline-block;
width: 75px;
}
.secondaryControlGroup input.inputTextValue {
background-color: green;
color: yellow;
padding: 2px;
}
.secondaryControlGroup .roundBorderValue {
padding: 2px;
}
#RosterTable > table {
width: 100%;
}
/* == Other Elements ====================================== */
#txrxdec {
@ -189,22 +356,6 @@ body.roster {
text-decoration: underline;
}
.controlItem {
appearance: none;
margin: 0;
padding: 0;
padding-top: 1px;
margin-top: 1px;
margin-bottom: 1px;
border-width: 1px;
border-color: #aaa;
border-style: inset;
border-radius: 4px;
display: inline-block;
transition: border-color;
vertical-align: top;
}
table.awardTableCSS {
border-collapse: collapse;
border: 0px solid #888;