ui: content-sized label column in decoded field tables (v2.7.14)
The decoded view used a fixed 10rem right-aligned label column, so short labels pushed the values ~168px to the right — for transparent files the block looked like indented record data. efRenderFieldsHtml now uses a grid with grid-template-columns: max-content 1fr: labels stay right aligned and values stay aligned, but the column is only as wide as the widest label of the block. Applies to the file manager decoded view and the snapshot Decoded block (transparent and per-record fields alike). - tests: efRenderFieldsHtml markup (grid, no w-40) and decoded view.
This commit is contained in:
+7
-5
@@ -1413,7 +1413,7 @@
|
||||
// ===== Version =====
|
||||
// Single source of truth for the PWA version: shown in the header and used
|
||||
// by the server version check in pysimConnect().
|
||||
const SIMPLE_VERSION = '2.7.13';
|
||||
const SIMPLE_VERSION = '2.7.14';
|
||||
document.getElementById('app-version').textContent = 'v' + SIMPLE_VERSION;
|
||||
|
||||
// ===== Tab switching =====
|
||||
@@ -12634,13 +12634,15 @@ function efDataSummary(data) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Decoded field rows: the label column is sized to its content (grid
|
||||
// max-content) instead of a fixed width, so values start right after the
|
||||
// widest label and short labels do not push the data far to the right.
|
||||
function efRenderFieldsHtml(rows) {
|
||||
if (!rows.length) return '<span class="text-gray-400">' + esc(t('No decodable fields')) + '</span>';
|
||||
let html = '<div class="text-xs">';
|
||||
let html = '<div class="text-xs" style="display:grid;grid-template-columns:max-content 1fr;column-gap:0.5rem;row-gap:0.125rem">';
|
||||
for (const [k, v] of rows) {
|
||||
html += '<div class="flex gap-2 mb-0.5">' +
|
||||
'<span class="w-40 shrink-0 text-right text-gray-500 dark:text-slate-400 break-all">' + esc(k) + '</span>' +
|
||||
'<span class="font-mono break-all">' + esc(v) + '</span></div>';
|
||||
html += '<span class="text-right text-gray-500 dark:text-slate-400 break-all">' + esc(k) + '</span>' +
|
||||
'<span class="font-mono break-all">' + esc(v) + '</span>';
|
||||
}
|
||||
return html + '</div>';
|
||||
}
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
const CACHE = 'simple-v216';
|
||||
const CACHE = 'simple-v217';
|
||||
const URLS = [
|
||||
'index.html',
|
||||
'help.html',
|
||||
|
||||
@@ -214,12 +214,25 @@ test('file manager decoded view renders fields, not JSON', () => {
|
||||
assert.match(out, /228062800000208/);
|
||||
assert.match(out, /pySim JSON \(server\)/);
|
||||
assert.doesNotMatch(out, /\{"imsi"/);
|
||||
// the label column is content-sized, not a fixed 10rem block
|
||||
assert.match(out, /grid-template-columns:max-content 1fr/);
|
||||
assert.doesNotMatch(out, /w-40/);
|
||||
// no decoder -> raw fallback with a note
|
||||
const raw = pysimFsDecodedHtml({ name: 'EF.NOPE', fid: 'abcd' }, { success: true, data: '0011' });
|
||||
assert.match(raw, /No decoder for this file/);
|
||||
assert.match(raw, /0011/);
|
||||
});
|
||||
|
||||
test('efRenderFieldsHtml sizes the label column to its content', () => {
|
||||
const out = efRenderFieldsHtml([['ICCID', '8988'], ['Very long label', 'x']]);
|
||||
assert.match(out, /style="display:grid;grid-template-columns:max-content 1fr/);
|
||||
assert.doesNotMatch(out, /w-40/);
|
||||
assert.ok(out.includes('>ICCID</span>'));
|
||||
assert.ok(out.includes('>8988</span>'));
|
||||
assert.ok(out.includes('>Very long label</span>'));
|
||||
assert.match(efRenderFieldsHtml([]), /No decodable fields/);
|
||||
});
|
||||
|
||||
test('profilerRenderReport shows decoded field diffs and the raw-only note', () => {
|
||||
const res = {
|
||||
path: 'ADF.USIM/6F07', name: 'EF.IMSI', status: 'fail',
|
||||
|
||||
Reference in New Issue
Block a user