sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend): compact wfm controls layout

Browse Source 
Align the WFM options into a concise control strip with consistent sizes and spacing in the main window.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
Stan Grams
2026-03-01 10:25:52 +01:00
parent 3ea516d27c
commit 816780aa6b
2 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+9 -5
View File
@@ -153,25 +153,29 @@
</div> </div>
<div class="controls-col controls-col-wfm label-below-col" id="wfm-controls-col" style="display:none;"> <div class="controls-col controls-col-wfm label-below-col" id="wfm-controls-col" style="display:none;">
<div class="inline wfm-controls-inline"> <div class="inline wfm-controls-inline">
<label class="wfm-control">Deemphasis <label class="wfm-control">
<span class="wfm-control-label">Deemp</span>
<select id="wfm-deemphasis" class="status-input"> <select id="wfm-deemphasis" class="status-input">
<option value="50">50 uS</option> <option value="50">50 uS</option>
<option value="75">75 uS</option> <option value="75">75 uS</option>
</select> </select>
</label> </label>
<label class="wfm-control">Audio <label class="wfm-control">
<span class="wfm-control-label">Audio</span>
<select id="wfm-audio-mode" class="status-input"> <select id="wfm-audio-mode" class="status-input">
<option value="stereo">Stereo</option> <option value="stereo">Stereo</option>
<option value="mono">Mono</option> <option value="mono">Mono</option>
</select> </select>
</label> </label>
<div class="inline" id="sdr-gain-controls"> <div class="wfm-gain-group" id="sdr-gain-controls">
<label class="wfm-control">RF Gain <label class="wfm-control">
<span class="wfm-control-label">RF Gain</span>
<input id="sdr-gain-db" class="status-input" type="number" min="0" max="60" step="1" inputmode="decimal"> <input id="sdr-gain-db" class="status-input" type="number" min="0" max="60" step="1" inputmode="decimal">
</label> </label>
<button id="sdr-gain-set" type="button" class="status-input">Set</button> <button id="sdr-gain-set" type="button" class="wfm-inline-btn">Set</button>
</div> </div>
<label class="wfm-control wfm-st-flag-wrap" aria-label="Stereo pilot status"> <label class="wfm-control wfm-st-flag-wrap" aria-label="Stereo pilot status">
<span class="wfm-control-label">Pilot</span>
<span id="wfm-st-flag" class="wfm-st-flag wfm-st-flag-mono">MO</span> <span id="wfm-st-flag" class="wfm-st-flag wfm-st-flag-mono">MO</span>
</label> </label>
</div> </div>
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+39 -16
View File
@@ -171,31 +171,53 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
justify-content: flex-start; justify-content: flex-start;
} }
.wfm-controls-inline { .wfm-controls-inline {
gap: 0.6rem; gap: 0.45rem;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-end;
flex-wrap: wrap;
} }
.wfm-control { .wfm-control {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 0.35rem; align-items: stretch;
gap: 0.22rem;
color: var(--text-muted); color: var(--text-muted);
font-size: 0.85rem; font-size: 0.72rem;
line-height: 1.1;
white-space: nowrap; white-space: nowrap;
} }
.wfm-control-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.wfm-control .status-input { .wfm-control .status-input {
min-width: 4.6rem; min-width: 4.4rem;
width: auto; width: auto;
font-size: 0.9rem; height: 2.1rem;
} padding: 0.28rem 0.45rem;
.wfm-control input.status-input { font-size: 0.85rem;
width: 5rem;
}
.wfm-control button.status-input {
padding: 0.45rem 0.5rem;
height: auto;
line-height: 1.2; line-height: 1.2;
box-sizing: border-box; box-sizing: border-box;
} }
.wfm-control input.status-input {
width: 4.25rem;
}
.wfm-gain-group {
display: flex;
align-items: flex-end;
gap: 0.35rem;
}
.wfm-inline-btn {
min-width: 3rem;
height: 2.1rem;
padding: 0 0.6rem;
font-size: 0.8rem;
line-height: 1.1;
flex-shrink: 0;
}
.wfm-st-flag-wrap { .wfm-st-flag-wrap {
min-width: 0; min-width: 0;
} }
@@ -203,12 +225,13 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 2.35rem; min-width: 2.7rem;
padding: 0.45rem 0.5rem; min-height: 2.1rem;
padding: 0.28rem 0.5rem;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: 6px; border-radius: 6px;
font-size: 0.9rem; font-size: 0.82rem;
font-weight: 800; font-weight: 800;
line-height: 1.2; line-height: 1.2;
letter-spacing: 0.04em; letter-spacing: 0.04em;