Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Webstar:e6fbfb5f97b4961c118e180541cc172857a20387
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0
..
compare: Webstar:081e15dcf2f2433827f8bce886b8447c24a82631
Branches Tags
Webstar:main
Webstar:claude/2
Webstar:v0.1.0

No commits in common. "e6fbfb5f97b4961c118e180541cc172857a20387" and "081e15dcf2f2433827f8bce886b8447c24a82631" have entirely different histories.
e6fbfb5f97 ... 081e15dcf2

1 changed files with 4 additions and 31 deletions
Show Stats Expand all files Collapse all files

35
containers/libreportal/frontend/js/components/app/apps-manager.js
View File

@ -39,11 +39,6 @@ class AppsManager {
constructor() { constructor() {
this.cache = new Map(); this.cache = new Map();
this.setupTaskCompletionListener(); this.setupTaskCompletionListener();
// The dynamic-width box decides cap-vs-full based on the parent's
// current size, so re-run it when the window resizes (drags, snaps,
// devtools open). updateAppsCount is a fast no-op when no
// #apps-section is on screen.
window.addEventListener('resize', () => this.updateAppsCount());
} }
setupTaskCompletionListener() { setupTaskCompletionListener() {
@ -552,11 +547,9 @@ class AppsManager {
}); });
} }
// Sync --app-count on .apps-section so the CSS max-width formula either // Sync --app-count on .apps-section to the number of currently-visible
// shrinks the glass box around the visible cards (avoiding a card-shaped // cards so the CSS max-width cap shrinks the glass box to exactly the
// hole on the right) or — when the visible cards would already fill the // cards it holds. Driven from render and from the sidebar search filter.
// row at full width — disengages the cap so the box runs edge-to-edge.
// Driven from render, sidebar search filter, and window resize.
updateAppsCount() { updateAppsCount() {
const container = document.getElementById('apps-section'); const container = document.getElementById('apps-section');
if (!container) return; if (!container) return;
@ -564,27 +557,7 @@ class AppsManager {
container.querySelectorAll('.app-card').forEach(card => { container.querySelectorAll('.app-card').forEach(card => {
if (card.style.display !== 'none') visible++; if (card.style.display !== 'none') visible++;
}); });
visible = Math.max(visible, 1); container.style.setProperty('--app-count', Math.max(visible, 1));
// How many columns the grid would naturally lay out at full width.
// If the visible count already meets that, suppress the cap (huge
// sentinel) so the formula gives way to the 100%-44px parent cap and
// the box reaches the layout edge. Without this the "exactly fills
// the row" case (e.g. 3 cards on a 3-col viewport) sits a few pixels
// shy of the edge while N+1 cards jumps straight to full width —
// visually inconsistent.
const style = getComputedStyle(container);
const minCol = parseFloat(style.getPropertyValue('--app-min')) || 300;
const gap = parseFloat(style.getPropertyValue('--app-gap')) || 20;
// Section eats 90px of parent's inner width before any card lands:
// 22px margin + 22px padding + 1px border, doubled.
const parent = container.parentElement;
const inside = parent ? Math.max(0, parent.clientWidth - 90) : 0;
const naturalCols = inside > 0
? Math.max(1, Math.floor((inside + gap) / (minCol + gap)))
: visible;
const effective = visible >= naturalCols ? 99 : visible;
container.style.setProperty('--app-count', effective);
} }
// Client-side substring filter wired to the sidebar search box. // Client-side substring filter wired to the sidebar search box.