Added layout options for the public booking form. Fixes #16

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-10-12 22:27:29 +02:00
co-authored by Claude Opus 5.5
parent 5fcea0cf85
commit 0f48160fb4
11 changed files with 293 additions and 24 deletions
+46 -2
View File
@@ -161,6 +161,49 @@
color: var(--rz-body);
}
/* Layout options: classes on .public-page from LayoutOptions::classes in src/backend/layout.rs.
The markup is the same for all of them. */
.public-page.rz-width-centered .public-form,
.public-page.rz-width-centered .public-banner-text {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.public-page.rz-width-centered.rz-form-stacked .public-form,
.public-page.rz-width-centered.rz-form-stacked .public-banner-text {
max-width: 680px;
}
.public-page.rz-form-stacked .public-form-columns > * {
flex: 0 0 100%;
max-width: 100%;
}
.public-page.rz-slots-large .btn-check + .btn {
min-width: 5.5rem;
margin: 0 0.4rem 0.4rem 0;
padding: 0.8rem 1.1rem;
font-size: 1.0625rem;
}
.public-page.rz-corners-square,
.public-page.rz-corners-square * {
border-radius: 0 !important;
}
/* The preview is much narrower than a real window, so the centred column is shown in proportion */
.public-page.public-preview.rz-width-centered .public-form,
.public-page.public-preview.rz-width-centered .public-banner-text {
max-width: 75%;
}
.public-page.public-preview.rz-width-centered.rz-form-stacked .public-form,
.public-page.public-preview.rz-width-centered.rz-form-stacked .public-banner-text {
max-width: 55%;
}
/* Banner: the image (or a strip in the primary colour) with an optional logo and the title.
The fallbacks are for the form embedded in the admin portal, outside of .public-page. */
@@ -225,12 +268,13 @@
font-size: x-large;
}
.public-banner-focus {
/* Three classes: the mark stays round with square corners too */
.public-page .public-banner .public-banner-focus {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid #ffffff;
border-radius: 50%;
border-radius: 50% !important;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
transform: translate(-50%, -50%);
pointer-events: none;