ITsolved/rezervovator
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added banner options, logo and image upload with validation to appearance settings. Fixes #15

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
pepa
2026-10-12 22:14:07 +02:00
co-authored by Claude Opus 5.5
parent 9da18a67ac
commit 5fcea0cf85
19 changed files with 1005 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/public.css
+45 -11
View File
@@ -161,22 +161,41 @@
color: var(--rz-body);
}
/* Banner */
/* 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. */
.public-banner {
height: 100px;
clip-path: inset(0 0 0 0);
background-image: var(--rz-banner-image, none);
--rz-banner-current-height: var(--rz-banner-height, 100px);
display: flex;
align-items: center;
justify-content: var(--rz-banner-justify, flex-start);
gap: 1rem;
height: var(--rz-banner-current-height);
padding: 0 30px;
overflow: hidden;
background-color: var(--rz-primary, #696cff);
background-image:
linear-gradient(rgba(0, 0, 0, var(--rz-banner-dim, 0)), rgba(0, 0, 0, var(--rz-banner-dim, 0))),
var(--rz-banner-image, none);
background-size: cover;
padding: 30px;
color: white;
background-position: var(--rz-banner-position, center);
}
.public-banner-logo {
flex: none;
height: calc(var(--rz-banner-current-height) * 0.6);
max-width: 40%;
object-fit: contain;
}
/* Two classes, to win over the heading colour above */
.public-banner .public-banner-title {
min-width: 0;
margin: 0;
font-size: x-large;
color: white;
text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;
color: var(--rz-banner-title, #ffffff);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.public-banner-text {
@@ -185,7 +204,7 @@
@media (min-width: 1200px) {
.public-banner {
height: 200px;
--rz-banner-current-height: var(--rz-banner-height-wide, 200px);
}
.public-banner .public-banner-title {
@@ -193,11 +212,26 @@
}
}
/* The preview is narrow whatever the width of the window */
/* The preview is narrow whatever the width of the window. Clicking into its banner sets
the part of the image that stays visible, the mark shows it. */
.public-preview .public-banner {
height: 100px;
--rz-banner-current-height: var(--rz-banner-height, 100px);
position: relative;
cursor: crosshair;
}
.public-preview .public-banner .public-banner-title {
font-size: x-large;
}
.public-banner-focus {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
transform: translate(-50%, -50%);
pointer-events: none;
}