Better banner settings: height, focal point, title style, logo, upload feedback #15

Closed
opened 2026-10-12 21:21:29 +02:00 by pepa · 0 comments
Owner

Depends on #13; the controls belong to the settings page with live preview from #14.

Current state

  • The banner height is fixed (100 px, 200 px from 1200 px width) and the image is cropped by background-size: cover with no control over what stays visible.
  • The title is always white with a hard-coded black outline (text-shadow), and it is shown only when a banner image exists.
  • The upload (POST /upload in src/backend/appearance.rs) is a plain form post that always redirects back: an unsupported file or a failed save is only logged, the user sees nothing. There is no size limit in the application.
  • The file keeps its sanitized original name, so replacing an image by one of the same name can show the cached old one.

Settings

  • Height: low / medium / high.
  • Focal point: clicking into the banner in the preview sets the point that stays visible (background-position in percent).
  • Darkening of the image (0–80 %) instead of the black outline, so that the title stays readable.
  • Title colour and alignment (left / centre).
  • Without an image the title is shown on a strip in the primary colour.
  • Optional logo: a second, small image shown next to the title. It can be uploaded and deleted independently of the banner.

Upload

  • Preview of the selected image before it is uploaded.
  • Size limit (e.g. 5 MB, below the 20 MB that the generated nginx block in deploy/ allows) and a clear message for a too large or unsupported file, in the browser before upload and again from the server.
  • Upload without a full page reload, with the result shown on the page.
  • Stored under a unique name, so a replaced image is not served from the browser cache; the previous file is deleted.
  • Allowed types stay jpg, jpeg, png, gif, webp for both images; no SVG.

Acceptance

  • All settings show in the live preview and, after saving, on the public page at mobile and desktop width.
  • Existing installations keep their banner and title; the default look is close to the current one.
  • Upload errors are visible to the user.
  • Backup, restore and import in deploy/rezervator.sh cover the logo (it is in the data directory like the banner).
  • Unit tests for validation of the new values and of uploaded file names.
Depends on #13; the controls belong to the settings page with live preview from #14. ## Current state - The banner height is fixed (100 px, 200 px from 1200 px width) and the image is cropped by `background-size: cover` with no control over what stays visible. - The title is always white with a hard-coded black outline (`text-shadow`), and it is shown only when a banner image exists. - The upload (`POST /upload` in `src/backend/appearance.rs`) is a plain form post that always redirects back: an unsupported file or a failed save is only logged, the user sees nothing. There is no size limit in the application. - The file keeps its sanitized original name, so replacing an image by one of the same name can show the cached old one. ## Settings - Height: low / medium / high. - Focal point: clicking into the banner in the preview sets the point that stays visible (`background-position` in percent). - Darkening of the image (0–80 %) instead of the black outline, so that the title stays readable. - Title colour and alignment (left / centre). - Without an image the title is shown on a strip in the primary colour. - Optional logo: a second, small image shown next to the title. It can be uploaded and deleted independently of the banner. ## Upload - Preview of the selected image before it is uploaded. - Size limit (e.g. 5 MB, below the 20 MB that the generated nginx block in `deploy/` allows) and a clear message for a too large or unsupported file, in the browser before upload and again from the server. - Upload without a full page reload, with the result shown on the page. - Stored under a unique name, so a replaced image is not served from the browser cache; the previous file is deleted. - Allowed types stay `jpg`, `jpeg`, `png`, `gif`, `webp` for both images; no SVG. ## Acceptance - All settings show in the live preview and, after saving, on the public page at mobile and desktop width. - Existing installations keep their banner and title; the default look is close to the current one. - Upload errors are visible to the user. - Backup, restore and `import` in `deploy/rezervator.sh` cover the logo (it is in the data directory like the banner). - Unit tests for validation of the new values and of uploaded file names.
pepa closed this issue 2026-10-12 22:14:08 +02:00
Sign in to join this conversation.
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: ITsolved/rezervovator#15