VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ux(classifier): stack the folder count below the folder name

Browse source 
The "direct+total folders/files" badge was right-aligned on the folder row;
move it under the name. The name + count now live in a vertical .folder-namebox
(flex column, flex:1), and the row aligns items to the top so the toggle/icon
sit on the name line with the count beneath. Dropped the count's right margin.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ZDDC 2026-06-15 10:09:46 -05:00
parent 4830cec2f8
commit 2989e6e847
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
classifier/css/layout.css
View file

@ -184,7 +184,7 @@
/* Folder Item */ /* Folder Item */
.folder-item { .folder-item {
display: flex; display: flex;
align-items: center; align-items: flex-start; /* toggle/icon sit on the name line; count drops below */
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
border-radius: var(--radius); border-radius: var(--radius);
@ -269,8 +269,15 @@
color: var(--text-muted); color: var(--text-muted);
} }
.folder-name { /* Name + count stacked vertically (count below the name, not right-aligned). */
.folder-namebox {
flex: 1; flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.folder-name {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -279,7 +286,6 @@
.folder-count { .folder-count {
font-size: 11px; font-size: 11px;
color: var(--text-muted); color: var(--text-muted);
margin-left: 0.5rem;
} }
.folder-children { .folder-children {

12
classifier/js/tree.js
View file

@ -336,18 +336,24 @@
if (agg === 'excluded') item.classList.add('excluded'); if (agg === 'excluded') item.classList.add('excluded');
} }
// Folder name // Name + counts stacked vertically: the count badge sits BELOW the name
// rather than right-aligned on the row.
const namebox = document.createElement('div');
namebox.className = 'folder-namebox';
const name = document.createElement('span'); const name = document.createElement('span');
name.className = 'folder-name'; name.className = 'folder-name';
name.textContent = folder.name; name.textContent = folder.name;
item.appendChild(name); namebox.appendChild(name);
// Subfolder / file counts (immediate). Greyed via the row's .scanning // Subfolder / file counts (immediate). Greyed via the row's .scanning
// class until the subtree is fully scanned. // class until the subtree is fully scanned.
const count = document.createElement('span'); const count = document.createElement('span');
count.className = 'folder-count'; count.className = 'folder-count';
populateCount(count, folder); populateCount(count, folder);
item.appendChild(count); namebox.appendChild(count);
item.appendChild(namebox);
// Extract button for ZIP roots // Extract button for ZIP roots
if (folder.isZipRoot) { if (folder.isZipRoot) {