digital-garbage
549e430806
The layout was assembled by hand and read like it. Measured at 1440x900: the three columns started at three different heights, a panel head was 41px when it held a control and 34 when it did not, the gap left of the centre was 7px and right of it 19, the properties column sat 11px further in than the others inside a border that meant nothing, and five controls in one list had four different widths -- a <select> takes the width of its widest option, so the row listing checkpoint filenames was 124px wider than its neighbours. Now: --gutter is the space between regions, between two panels stacked in a column, and inside the bands; the head band height is the panel head height is the collapsible head height; --control-col gives every settings control the same two edges. The frame's bands run edge to edge and the content is inset by the gutter, so the app has an outline instead of a margin that changed per region. Also here, all of it visible in the same screenshot: * The status sat against the Generate button with 1300px of empty bar to its left -- everything was in one right-aligned group. What the app says is at the start of the row now, what you press is at the end. * A panel body is a column with a gap: two things put in it by two parts of the app had whatever space their line boxes happened to leave. * A container query adds no specificity, so the narrow-panel rule written above the rules it overrides lost -- and flex-basis in a column is HEIGHT, which turned four settings into a panel two screens long. * The theme you picked was thrown away on every load: the appearance module applied its own declared default over the choice the page had already applied from storage. It adopts the live value now, and a panel is built after setup so its control shows what setup settled on.
27 lines
964 B
JavaScript
27 lines
964 B
JavaScript
// What the app offers modules beyond the kit.
|
|
//
|
|
// Deliberately tiny and named one by one. The alternative -- letting a module
|
|
// reach for a global -- means the surface is "whatever happens to be on window",
|
|
// which nobody can review and nothing can keep stable.
|
|
|
|
import { applyDensity, normaliseCols, rememberCols, recallCols } from "../composer/internals/density.js";
|
|
|
|
export const services = {
|
|
theme: {
|
|
set(choice) { window.ComposerTheme.apply(choice); },
|
|
get: () => window.ComposerTheme.get(),
|
|
resolved: () => window.ComposerTheme.resolved(),
|
|
},
|
|
density: {
|
|
/** What the grids are set to, which the browser remembers between visits. */
|
|
get: () => recallCols("app"),
|
|
/** Column count for every adaptive grid on the page. */
|
|
set(cols) {
|
|
const n = normaliseCols(cols);
|
|
for (const grid of document.querySelectorAll(".cx-gallery")) applyDensity(grid, n);
|
|
rememberCols("app", n);
|
|
return n;
|
|
},
|
|
},
|
|
};
|