fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
f4b08e4c73611d557fd72e1a1171d7a2b2943852
breadcrumb-the-shire/web/css/core.css

55 lines
2.2 KiB
CSS
Raw Normal View History

css: consolidate core stylesheet entrypoint and add contract check
2026-04-20 19:55:49 +02:00
@charset "UTF-8";
/*
* Core CSS framework entrypoint for the default admin shell.
* Keep imports in deterministic order; file-level @layer declarations define precedence.
*/
@import url("app-layers.css");
/* Shared foundation used by multiple templates */
@import url("components/app-badges.css");
@import url("layout/app-shell.css");
@import url("components/app-dialog.css");
@import url("components/app-blockquote.css");
@import url("components/app-forms.css");
@import url("components/app-flash.css");
@import url("components/app-brand.css");
@import url("components/app-file-upload.css");
feat(ui): copyable input partial + dynamic copy-target - New core partial templates/partials/app-input-copy.phtml renders a standard label + input with a compact copy button overlaid on the right edge of the input. Used for privacy/imprint URLs on the tenant form; reusable for any field where a one-click copy is helpful. - Extend the shared copy-field component (web/js/components/app-copy-field.js) with data-copy-target support — the button now reads the target input's .value at click-time, so users can edit a field and still copy the current value. Static data-copy-value keeps working unchanged. - New component CSS web/css/components/app-input-copy.css positions the button absolute/inset + margin-block:auto (robust vertical centering regardless of input height) and uses a descendant selector (0,2,0) so the button wins over the global [data-tooltip] position:relative. - Also register app-input-copy.css + app-tenant-logo.css in core.css @import list — they were only in the shared asset group before, which default-template admin pages don't load, so tenant-logo styles were effectively missing on admin tenant edit (topbar size etc.). - Document the Copy-to-Clipboard + Copyable Input standards in docs/reference-frontend-javascript.md so future consumers don't re-invent the markup/selectors. - File-upload preview: pending-file block restructured to a compact list-item row (small square thumb + filename/size stack + clear X) and removed the transparency checker pattern on the current-image preview in favour of a flat --app-preview-bg surface. - Tenant edit page title + breadcrumb now show the tenant description ("Acme GmbH") instead of the generic "Mandant bearbeiten" when one is present. - i18n: add "Copy to clipboard" / "In Zwischenablage kopieren" across both locales. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 21:26:11 +02:00
@import url("components/app-input-copy.css");
@import url("components/app-tenant-logo.css");
feat(responsive): mobile polish — topbar, drawer, footer, tabs, notification dropdown Unifies the breakpoint system and fixes cross-layer CSS bugs that kept the old mobile hide rules from ever taking effect. Breakpoints: - Document canonical xs/sm/md/lg/xl/2xl scale in variables.base.css - Replace 968px one-offs with 1024px (app-details, app-page-editor) - Make details tab-panel max-width responsive (min(70ch, 100%)) Topbar (< md): - Hide breadcrumb in components layer so cross-layer overrides actually win - Dock search icon alongside right-column icons via flex layout - Add xs (400px) tightening for hit-area preservation - Hide brand divider alongside hidden brand name - Switch hover states to theme-aware --app-dropdown-hover-background-color Mobile drawer: - Icon-bar now vertical like desktop (was horizontal top strip, effectively invisible) - Sidebar shifted 52px right so icon-bar and sidebar slide in as one 280px unit - Add breathing room above first nav item (20px top padding) List tabs: - Rewrite .app-list-tabs to horizontal scroll with hidden scrollbar, snap, and mask-image gradient fades; add initListTabs to scroll active into view - Register as runtime component in app-init.js List toolbar: - Stack wide controls (multi-select, search/text inputs) full-width below sm, keep compact controls at natural width Footer: - New dedicated app-footer.css with mobile-first stacking, border-top separator, theme-aware hover; remove redundant rules from app-shell.css Notification dropdown: - Width with min(360px, 100vw - 2rem) and min-width: 0 override global details > ul rule; switch to position: fixed below md so it hugs the viewport right edge instead of the non-rightmost bell button Content spacing: - Add padding-block-start to .app-main-content on mobile (was 0) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 23:50:59 +02:00
@import url("components/app-footer.css");
css: consolidate core stylesheet entrypoint and add contract check
2026-04-20 19:55:49 +02:00
/* Default admin experience */
@import url("vendor-overrides/multi-select.css");
@import url("components/app-icon-button.css");
@import url("components/app-buttons.css");
@import url("vendor-overrides/gridjs.css");
@import url("layout/app-topbar.css");
@import url("layout/app-sidebar.css");
@import url("components/app-search.css");
@import url("components/app-list-titlebar.css");
@import url("components/app-details-titlebar.css");
@import url("components/app-dashboard-titlebar.css");
refactor(system-info): reduce to Stripe-style status page Reduce admin/system-info to a single focused status view: overall status banner, components list from existing health checks, and an environment meta table. Drops the Modules and Permissions tabs — those were dev-diagnostics already available via CLI. - Remove SystemInfoService + its test; wire the action directly to SystemHealthService and build meta inline - Extend SystemHealthService with per-check label + description so the UI speaks in customer terms while the CLI doctor path stays compatible - Rebuild the view on existing app-stats-table + app-empty-state primitives; add a small app-status-banner component for the headline signal - Align help-center nav label and i18n keys (de/en) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 16:32:46 +02:00
@import url("components/app-status-banner.css");
css: consolidate core stylesheet entrypoint and add contract check
2026-04-20 19:55:49 +02:00
@import url("components/app-empty-state.css");
@import url("components/app-details.css");
@import url("components/app-details-card.css");
@import url("components/app-form-info-tile.css");
@import url("components/app-list-table.css");
@import url("components/app-list-tabs.css");
@import url("components/app-tabs.css");
@import url("components/app-list-toolbar.css");
@import url("components/app-filter-drawer.css");
feat(core): detail drawer + address book list redesign Introduces a reusable core detail-drawer primitive that slides in from the right and loads any view via a `*-fragment(none).phtml` endpoint. Bundles the address book list overhaul that is its first consumer. Core additions: - `app-detail-drawer.js` — generic drawer with stepper, focus trap, body scroll-lock, URL-hash deep-linking, session-expiry detection - `app-fragment-init.js` — auto-wires tabs/lookups/confirm/file-upload/ fslightbox inside injected HTML; consumers do not re-initialize components - `app-focus-trap.js` — shared focus-trap + refcounted scroll-lock, used by both filter-drawer and detail-drawer - `getHtml()` in `app-http.js` + `SessionExpiredError`; drawer reloads the page on auth redirect instead of rendering the login form in the panel - `DetailDrawerFragmentContractTest` enforces that every `initDetailDrawer` consumer ships matching `*-fragment($id).php` + `*-fragment(none).phtml` Address book list: - Grid collapses from 9 columns to 4 (identity / context / phone / actions) with a two-line identity cell (avatar + name + email) - Tenant register tabs above the grid using the `app-list-tabs` partial; tenant filter wired via hidden toolbar field so grid.js forwards it on every data fetch - Profile body extracted to a shared partial so the full-page view and the new drawer fragment share the same markup - New i18n keys for the drawer/list labels Also refactors `app-filter-drawer` to reuse the shared focus-trap and scroll-lock instead of maintaining its own copy, and documents the detail-drawer convention in CLAUDE.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-22 15:22:26 +02:00
@import url("components/app-detail-drawer.css");
css: consolidate core stylesheet entrypoint and add contract check
2026-04-20 19:55:49 +02:00
@import url("components/app-active-filter-chips.css");
@import url("components/app-confirm-dialog.css");
@import url("components/app-breadcrumb.css");
@import url("components/app-tile.css");
@import url("components/app-tooltips.css");
@import url("components/app-lookup-field.css");
feat(responsive): mobile polish — topbar, drawer, footer, tabs, notification dropdown Unifies the breakpoint system and fixes cross-layer CSS bugs that kept the old mobile hide rules from ever taking effect. Breakpoints: - Document canonical xs/sm/md/lg/xl/2xl scale in variables.base.css - Replace 968px one-offs with 1024px (app-details, app-page-editor) - Make details tab-panel max-width responsive (min(70ch, 100%)) Topbar (< md): - Hide breadcrumb in components layer so cross-layer overrides actually win - Dock search icon alongside right-column icons via flex layout - Add xs (400px) tightening for hit-area preservation - Hide brand divider alongside hidden brand name - Switch hover states to theme-aware --app-dropdown-hover-background-color Mobile drawer: - Icon-bar now vertical like desktop (was horizontal top strip, effectively invisible) - Sidebar shifted 52px right so icon-bar and sidebar slide in as one 280px unit - Add breathing room above first nav item (20px top padding) List tabs: - Rewrite .app-list-tabs to horizontal scroll with hidden scrollbar, snap, and mask-image gradient fades; add initListTabs to scroll active into view - Register as runtime component in app-init.js List toolbar: - Stack wide controls (multi-select, search/text inputs) full-width below sm, keep compact controls at natural width Footer: - New dedicated app-footer.css with mobile-first stacking, border-top separator, theme-aware hover; remove redundant rules from app-shell.css Notification dropdown: - Width with min(360px, 100vw - 2rem) and min-width: 0 override global details > ul rule; switch to position: fixed below md so it hugs the viewport right edge instead of the non-rightmost bell button Content spacing: - Add padding-block-start to .app-main-content on mobile (was 0) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-23 23:50:59 +02:00
@import url("components/app-token-select.css");
css: consolidate core stylesheet entrypoint and add contract check
2026-04-20 19:55:49 +02:00
@import url("components/app-page-editor.css");
@import url("vendor-overrides/editorjs.css");
@import url("components/app-page-copy.css");
@import url("layout/app-aside-icon-bar.css");
Reference in New Issue Copy Permalink