catarrh/simple
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

v3.11.0 editor polish: fixed TAR table layout, ADM placeholder

Browse Source 
The TAR table used the default auto layout with w-full, so the browser
distributed the surplus width across all columns and TAR/MSL/description
looked evenly spread.  table-fixed with explicit column widths (TAR w-28,
MSL w-20, action w-12; the description column takes the remainder) and
w-full inputs keep the first two columns tight and left-packed.  The ADM
placeholder is just "ADM" now.  sw cache simple-v365.

Tests: 665 Python + 787 frontend green; the whole inline PWA script
syntax-checked.
This commit is contained in:
Антон Трошин
2026-10-02 11:05:58 +03:00
parent c8fbaad548
commit f71b8ab73f
5 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/tests/cards_form.test.js
+2 -2
View File
@@ -535,8 +535,8 @@ test('packing without a selected preset uses the spec default TAR', () => {
test('the TAR row values are left-aligned like the headers', () => {
const out = cardsTarRowHtml({ tar: 'AF4D01', msl: '0A', desc: 'x' }, 3);
assert.doesNotMatch(out, /text-center/);
assert.match(out, /<td class="py-1 px-2"><input id="cards-tr-3-tar"/);
assert.match(out, /<td class="py-1 px-2"><input id="cards-tr-3-msl"/);
assert.match(out, /<td class="py-1 px-2"><input id="cards-tr-3-tar" class="w-full/);
assert.match(out, /<td class="py-1 px-2"><input id="cards-tr-3-msl" class="w-full/);
});
test('the TAR table renders the role rows and adds/removes free rows', () => {
frontend/tests/html.test.js
+7 -1
View File
@@ -186,6 +186,12 @@ test('the PIN/ADM and TAR fieldsets share one responsive row', () => {
// the codes are one-line rows: label left, input right
assert.match(row, /class="flex items-center gap-2"[\s\S]*?for="cards-pin1"[\s\S]*?id="cards-pin1"/);
assert.match(row, /for="cards-pin1"[^>]*class="w-10 shrink-0/);
// the TAR table is fixed-layout so the columns hug their content and the
// description absorbs the rest (no even spreading)
assert.match(row, /<table class="w-full table-fixed text-sm mb-2">/);
assert.match(row, /<th class="w-28 text-left[^"]*" data-l10n="TAR"/);
assert.match(row, /<th class="w-20 text-left[^"]*" data-l10n="MSL"/);
assert.match(row, /<th class="w-12[^"]*"><\/th>/);
// the hint is the short form
assert.match(row, /data-l10n="All codes are optional"/);
assert.ok(!row.includes('not consumed yet'), 'the long codes hint is gone');
@@ -230,7 +236,7 @@ test('the ADM field sits in the PIN/ADM fieldset of the editor', () => {
const fieldsets = [...html.matchAll(/<fieldset[\s\S]*?<\/fieldset>/g)].map(m => m[0]);
const pinAdm = fieldsets.find(f => /data-l10n="PIN\/ADM"/.test(f));
assert.ok(pinAdm, 'PIN/ADM fieldset not found');
assert.match(pinAdm, /id="cards-adm"[^>]*placeholder="ADM \(optional\)"/);
assert.match(pinAdm, /id="cards-adm"[^>]*placeholder="ADM"/);
// the From card button sits in the editor header, above the code fields
assert.ok(html.indexOf('id="cards-iccid-from-card"') < html.indexOf('id="cards-pin1"'),
'the From card button must precede the code fields');