feat(entry): narrower left column, and a State field
Name, Band, Mode and Country go from 300px to 210px, which moves QTH, Comment and Note left by the same amount. The width is set in TWO places — the Name row and the Band/Mode/Country stack below it — and they have to stay equal or the two rows stop lining up, so both were changed together. State goes between QTH and the locator: it is part of the same "where is this station" reading, and it is what WAS and the US county work key off. Narrow, since it holds two or three characters, and upper-cased on the way in like the other coded fields. The Name label in this layout was hardcoded English while its twin went through t(); fixed while here.
This commit is contained in:
+11
-2
@@ -4439,6 +4439,15 @@ export default function App() {
|
||||
onBlur={() => setQth(titleCase)} />
|
||||
</div>
|
||||
);
|
||||
// State sits between QTH and the locator: it is part of the same "where is
|
||||
// this station" reading, and it is what several awards key off (WAS, the US
|
||||
// county work). Narrow — it holds two or three characters.
|
||||
const stateBlock = (
|
||||
<div className="flex flex-col w-[70px] shrink-0"><Label className="mb-1 h-3.5">{t('field.state')}</Label>
|
||||
<Input value={details.state ?? ''} className="font-mono"
|
||||
onChange={(e) => setDetails((d) => ({ ...d, state: e.target.value.toUpperCase() }))} />
|
||||
</div>
|
||||
);
|
||||
const gridBlock = (
|
||||
<div className="flex flex-col w-[76px] shrink-0"><Label className="mb-1 h-3.5">{t('field.grid')}</Label>
|
||||
<Input value={grid} placeholder="JN05" className="font-mono" onChange={(e) => { setGrid(e.target.value); markEdited('grid'); }} />
|
||||
@@ -5886,7 +5895,7 @@ export default function App() {
|
||||
to be pushed outside the entry panel and clipped. Wrapping drops
|
||||
it to its own line instead, which stays readable. */}
|
||||
<div className="flex gap-4 items-end flex-wrap">
|
||||
<div className="flex flex-col w-[300px] shrink-0"><Label className="mb-1 h-3.5">Name</Label>
|
||||
<div className="flex flex-col w-[210px] shrink-0"><Label className="mb-1 h-3.5">{t('field.name')}</Label>
|
||||
<Input value={name} onChange={(e) => { setName(e.target.value); markEdited('name'); }}
|
||||
onBlur={() => setName(titleCase)} />
|
||||
</div>
|
||||
@@ -5897,7 +5906,7 @@ export default function App() {
|
||||
{/* Row 3: tight left detail column (Band/Mode/Country) and
|
||||
single-line Comment/Note on the right. */}
|
||||
<div className="flex gap-4 items-start">
|
||||
<div className="flex flex-col gap-1.5 w-[300px] shrink-0">
|
||||
<div className="flex flex-col gap-1.5 w-[210px] shrink-0">
|
||||
{bandRow}
|
||||
{modeRow}
|
||||
{countryRow}
|
||||
|
||||
Reference in New Issue
Block a user