Give every page the share pages' layout, at one width
The pages were built five ways: two layouts, seven widths from 28 to 64rem and four heading styles. Every page now looks like the share pages: a centred heading over one 40rem column of outlined cards, with the floating toolbar below. - <x-page> (components/page.blade.php) is the root of every page. It draws the h1 and its line (`brand` takes the site's logo, title and description from Admin settings), an optional `mark` and `navigation` slot, then the content. It has no width prop: every page is the same <x-pane width="narrow">. - The sign-in, password reset, confirm, verify email, two-factor challenge, setup and system password pages move onto layouts/app with the brand heading and their form in a card titled with the task. layouts/auth, auth-header and the settings heading partial are gone, and so is the per-page width CSS. - Settings put their section nav under the heading; the admin pages get a description line each. FileUploader and ShareDownload no longer pass the branding to their views. - The admin dashboard's table needed about 49rem, so its shares are a list: created above the token, which opens the share, then files, size, downloads and expiry on two lines that wrap instead of clipping, and one delete button. A "Sort by" select replaces the column headers (newest, oldest, expiring soonest with never-expiring last, largest, most downloads, most files) and resets the page. The stats stay two by two. table.css and sort-header.css are no longer imported. - Branding hints in Admin settings name every page the title shows on. - Tests: PageTemplateTest renders every page once and checks one page template, one h1 and the width, and the brand heading with its fallbacks. FrameTest measures the page column instead of the auth card and the 64rem main; dashboard tests follow the list and the sort select, including expiry order. .ai/rules/views.md records <x-page>, the CHANGELOG notes the change and the website screenshots are regenerated. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Opus 5
Claude Opus 5
parent
40e35bab0e
commit
5853f1f7d6
+28
-106
@@ -31,9 +31,7 @@
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/section-nav.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/select.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/shape.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/sort-header.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/stat.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/table.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/textarea.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/theme-toggle.css';
|
||||
@import '../../vendor/nonameweb/livewire-material/resources/css/components/toast.css';
|
||||
@@ -43,23 +41,21 @@
|
||||
|
||||
/*
|
||||
* SealShare's own rules, unlayered so they outrank every package rule: one section per view, in
|
||||
* the order a visitor meets them — the two layouts, the share flow (upload, share created,
|
||||
* download), the settings pages in their navigation's order, then admin.
|
||||
* the order a visitor meets them — the layout and the page template, the share flow (upload,
|
||||
* share created, download), the settings pages in their navigation's order, then admin.
|
||||
*/
|
||||
|
||||
/*
|
||||
* resources/views/layouts/app.blade.php: the signed-in and public pages' main column.
|
||||
* resources/views/layouts/app.blade.php: every page's main region.
|
||||
*
|
||||
* `<x-pane as="main">` gives the column its horizontal M3 margin (16px below `medium`, 24px from
|
||||
* it) and centres it; its cap is SealShare's own 64rem, margins included, which no `width` preset
|
||||
* (40, 60, 80rem) matches. The vertical rhythm is the app's own. The bottom padding clears the
|
||||
* floating toolbar in partials/toolbar.blade.php by what the toolbar publishes as
|
||||
* `--material-bottom-toolbar` (its top edge's distance from the window's bottom, safe area
|
||||
* included), plus 16px. Never set `--material-bottom-bar` here: the toolbar reads it to place
|
||||
* itself.
|
||||
* `<x-pane as="main">` gives the region its horizontal M3 margin (16px below `medium`, 24px from
|
||||
* it); the page inside (components/page.blade.php) sets its own width and centres itself. The
|
||||
* vertical rhythm is the app's own. The bottom padding clears the floating toolbar in
|
||||
* partials/toolbar.blade.php by what the toolbar publishes as `--material-bottom-toolbar` (its top
|
||||
* edge's distance from the window's bottom, safe area included), plus 16px. Never set
|
||||
* `--material-bottom-bar` here: the toolbar reads it to place itself.
|
||||
*/
|
||||
.app-main {
|
||||
max-inline-size: 64rem;
|
||||
padding-block-start: var(--md-sys-measurement-space400);
|
||||
padding-block-end: calc(var(--material-bottom-toolbar, 0px) + var(--md-sys-measurement-space200));
|
||||
}
|
||||
@@ -70,52 +66,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/layouts/auth.blade.php: the centred sign-in card.
|
||||
*
|
||||
* The card sits in a full-height flex column that top-aligns it below `medium` and centres it
|
||||
* from there. The bottom padding clears the floating toolbar exactly as .app-main's does (see
|
||||
* above); the horizontal padding and top padding stay flat at every width, as the 1.x layout had.
|
||||
*/
|
||||
.auth-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-block-size: 100dvh;
|
||||
padding-inline: var(--md-sys-measurement-space200);
|
||||
padding-block-start: var(--md-sys-measurement-space400);
|
||||
padding-block-end: calc(var(--material-bottom-toolbar, 0px) + var(--md-sys-measurement-space200));
|
||||
}
|
||||
|
||||
@media (width >= 600px) {
|
||||
.auth-main {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
inline-size: 100%;
|
||||
max-inline-size: 28rem;
|
||||
}
|
||||
|
||||
@media (width >= 600px) {
|
||||
.auth-card {
|
||||
padding: var(--md-sys-measurement-space400);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/livewire/file-uploader.blade.php: the upload page, kept to 1.x's centred 48rem
|
||||
* measure (max-w-3xl) inside the 64rem main column, which no `<x-pane>` width preset (40, 60, 80rem)
|
||||
* matches. Its text fields stop at 40rem from `medium`; at 64rem the drop zone, the divider and the
|
||||
* end-aligned submit ran some 21rem past the fields' edge, at 48rem 8rem.
|
||||
*/
|
||||
.upload-column {
|
||||
max-inline-size: 48rem;
|
||||
}
|
||||
|
||||
/* resources/views/livewire/file-uploader.blade.php: the site's own mark above the title, at 1.x's 5rem-tall size, its width following the image. */
|
||||
.upload-site-logo {
|
||||
/* resources/views/components/page.blade.php: the site's own logo above the title on a `brand` page, at 1.x's 5rem-tall size, its width following the image. */
|
||||
.page-logo {
|
||||
block-size: 5rem;
|
||||
}
|
||||
|
||||
@@ -209,14 +161,6 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/livewire/share-created.blade.php: the page a share's link is ready on, kept to
|
||||
* 1.x's centred 32rem measure, which no `<x-pane>` width preset (40, 60, 80rem) matches.
|
||||
*/
|
||||
.share-column {
|
||||
max-inline-size: 32rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/livewire/share-created.blade.php: the check that settles onto its Expressive
|
||||
* shape once the link is ready (the `share-ready`/`share-ready-fade` keyframes after it). The shape
|
||||
@@ -299,35 +243,6 @@
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/livewire/share-download.blade.php: the page a recipient opens, kept to the same
|
||||
* centred 32rem measure as share-created.blade.php.
|
||||
*/
|
||||
.download-column {
|
||||
max-inline-size: 32rem;
|
||||
}
|
||||
|
||||
/* resources/views/livewire/share-download.blade.php: the site's own mark above the title, at 1.x's 5rem-tall size. */
|
||||
.download-site-logo {
|
||||
block-size: 5rem;
|
||||
}
|
||||
|
||||
/* resources/views/partials/settings-heading.blade.php: the settings pages' shared heading, spaced above their section navigation and content. */
|
||||
.settings-heading {
|
||||
margin-block-end: var(--md-sys-measurement-space300);
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/pages/settings/layout.blade.php: the settings cards inside the 64rem main
|
||||
* column. 1.x kept the form itself to 32rem (max-w-lg) under a full-width heading; the card now
|
||||
* holds both, so the cap moves to the card and gains the card's own 16dp of side padding — 34rem,
|
||||
* which leaves the fields at 1.x's measure. The section navigation above stays full width, as it
|
||||
* was.
|
||||
*/
|
||||
.settings-column {
|
||||
max-inline-size: 34rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/pages/settings/two-factor.blade.php: the setup QR code. Fortify's own
|
||||
* twoFactorQrCodeSvg() draws no quiet zone, so the SVG comes from App\Services\QrCodeService
|
||||
@@ -367,7 +282,7 @@
|
||||
|
||||
/*
|
||||
* resources/views/pages/settings/appearance.blade.php: the theme picker stays a comfortable
|
||||
* width instead of stretching the full settings column. No `<x-group>` width prop caps it, and
|
||||
* width instead of stretching across the settings card. No `<x-group>` width prop caps it, and
|
||||
* 24rem matches no `<x-pane>` preset.
|
||||
*/
|
||||
.settings-appearance-picker {
|
||||
@@ -375,20 +290,27 @@
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/livewire/admin/admin-dashboard.blade.php: the shares table scrolls sideways on
|
||||
* its own, on a window too narrow for every column, instead of the page around it.
|
||||
* resources/views/livewire/admin/admin-dashboard.blade.php: the sort select above the shares list
|
||||
* keeps to the width its longest option needs instead of spanning the card. No `<x-select>` width
|
||||
* prop caps it, and 20rem matches no `<x-pane>` preset.
|
||||
*/
|
||||
.admin-shares-table-scroll {
|
||||
overflow-x: auto;
|
||||
.admin-shares-sort {
|
||||
max-inline-size: 20rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* resources/views/livewire/admin/admin-settings.blade.php: the settings keep 1.x's own narrower
|
||||
* measure inside the 64rem main column, 42rem, which no `<x-pane>` width preset (40, 60, 80rem)
|
||||
* matches; the pane centres it.
|
||||
* resources/views/livewire/admin/admin-dashboard.blade.php: a share's details are two lines of
|
||||
* their own (its files, size and downloads; its expiry), and they wrap rather than clip. The
|
||||
* package clamps a list item's description at two lines with an ellipsis, which on a phone hid
|
||||
* the expiry with no way to read it.
|
||||
*/
|
||||
.admin-settings {
|
||||
max-inline-size: 42rem;
|
||||
.admin-shares [data-md-list-item-description] {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.admin-share-detail {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user