Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Truncate long cells in the data table and add a row-detail popup

Browse Source 
Cells now clip with an ellipsis instead of wrapping and inflating row height. A new eye button before the pencil opens a popup showing every field of that row in full, label above value, for comfortable reading.
This commit is contained in:
william
2026-08-24 11:33:29 +02:00
parent 0e5db97180
commit 26cf245ffe
2 changed files with 74 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+24 -1
View File
@@ -59,9 +59,32 @@ button.danger{ color:var(--danger); border-color:rgba(226,104,95,.4); }
.fieldRowCard{ margin-bottom:10px; }
.relationTarget{ margin-top:6px; }
.dataTableWrap{ overflow-x:auto; max-width:100%; }
.dataTable{ width:100%; border-collapse:collapse; font-size:12.5px; }
.dataTable th, .dataTable td{ border:1px solid var(--border); padding:6px 8px; text-align:left; }
.dataTable th{ background:var(--panel2); color:var(--text-dim); }
.dataTable th{ background:var(--panel2); color:var(--text-dim); white-space:nowrap; }
.dataTable td{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ---------- Détail d'une entrée (bouton 👁️) ---------- */
/* Popup plein écran assombri, pour lire une ligne dont les colonnes sont
tronquées dans le tableau (voir .dataTable td ci-dessus) sans avoir à
ouvrir le formulaire de modification. */
.rowDetailModal{
display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
align-items:center; justify-content:center; z-index:100; padding:20px;
}
.rowDetailModal.open{ display:flex; }
.rowDetailCard{
background:var(--panel); border:1px solid var(--border); border-radius:10px;
max-width:640px; width:100%; max-height:80vh; display:flex; flex-direction:column;
}
.rowDetailHeader{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex:0 0 auto; }
.rowDetailHeader h3{ margin:0; color:var(--text); font-size:15px; }
.rowDetailBody{ padding:6px 16px 16px; overflow-y:auto; }
.rowDetailField{ padding:10px 0; border-bottom:1px solid var(--border); }
.rowDetailField:last-child{ border-bottom:none; }
.rowDetailLabel{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
.rowDetailValue{ font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
.content-wide{ max-width:1080px; }
.twoCol{ display:flex; gap:24px; align-items:flex-start; margin-top:10px; }