From 2d9e498f9693c9fe553aa93c3faee9883a4d1e77 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:24:04 +0100
Subject: [PATCH] [bugfix] Fix wide images being squished when used as instance
avatar (#2669)
---
web/source/css/index.css | 21 +++++++++---
web/source/css/page.css | 13 +++++--
web/source/settings/admin/settings/index.tsx | 7 ++--
web/source/settings/style.css | 36 ++++++++++++--------
web/template/page_header.tmpl | 2 --
5 files changed, 52 insertions(+), 27 deletions(-)
diff --git a/web/source/css/index.css b/web/source/css/index.css
index c2090f6d2..b7145b7d9 100644
--- a/web/source/css/index.css
+++ b/web/source/css/index.css
@@ -18,12 +18,23 @@
*/
/*
- Render instance title a
- bit bigger on index page.
+ Render instance title + image
+ a bit bigger on index page.
+
+ Overrides the css from page.css.
*/
-.page-header a h1 {
- font-size: 2rem;
- line-height: 2rem;
+.page-header {
+ & > a {
+ & > h1 {
+ font-size: 2rem;
+ line-height: 2rem;
+ }
+
+ & > img {
+ align-self: center;
+ max-height: 6rem;
+ }
+ }
}
/*
diff --git a/web/source/css/page.css b/web/source/css/page.css
index ae7ee1843..cc1d4efe3 100644
--- a/web/source/css/page.css
+++ b/web/source/css/page.css
@@ -47,11 +47,20 @@
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
-
+
img {
align-self: center;
+
+ /*
+ Shrink too-wide / too-tall instance
+ icons to sensible proportions. Allow
+ pretty wide images but prevent things
+ getting too out of hand + looking bad.
+ */
+ max-height: 4rem;
+ max-width: 16rem;
}
-
+
h1 {
align-self: center;
text-align: center;
diff --git a/web/source/settings/admin/settings/index.tsx b/web/source/settings/admin/settings/index.tsx
index 4e5ea343a..69fbfd4ca 100644
--- a/web/source/settings/admin/settings/index.tsx
+++ b/web/source/settings/admin/settings/index.tsx
@@ -105,19 +105,18 @@ function AdminSettingsForm({ data: instance }: AdminSettingsFormProps) {
/>
<div className="file-upload" aria-labelledby="avatar">
- <strong id="avatar">Instance avatar</strong>
- <div>
+ <strong id="avatar">Instance avatar (1:1 images look best)</strong>
+ <div className="file-upload-with-preview">
<img
className="preview avatar"
src={form.thumbnail.previewValue ?? instance?.thumbnail}
alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")}
/>
- <div>
+ <div className="file-input-with-image-description">
<FileInput
field={form.thumbnail}
accept="image/png, image/jpeg, image/webp, image/gif"
/>
- <br/>
<TextInput
field={form.thumbnailDesc}
label="Avatar image description"
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 6e19acdd4..501e9dbef 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -395,21 +395,29 @@ section.with-sidebar > div, section.with-sidebar > form {
gap: 1rem;
}
-.file-upload > div {
- display: flex;
- gap: 1rem;
-
- img {
- height: 8rem;
- border: 0.2rem solid $border-accent;
+.file-upload {
+ .file-upload-with-preview {
+ display: flex;
+ gap: 1rem;
+
+ img {
+ height: 8rem;
+ border: 0.2rem solid $border-accent;
+ }
+
+ img.avatar {
+ width: 8rem;
+ }
+
+ img.header {
+ width: 24rem;
+ }
}
-
- img.avatar {
- width: 8rem;
- }
-
- img.header {
- width: 24rem;
+
+ .file-input-with-image-description {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
}
}
diff --git a/web/template/page_header.tmpl b/web/template/page_header.tmpl
index 5a2956883..e605b349f 100644
--- a/web/template/page_header.tmpl
+++ b/web/template/page_header.tmpl
@@ -61,8 +61,6 @@ Instance Logo
src="{{- .instance.Thumbnail -}}"
alt="{{- template "thumbnailDescription" . -}}"
title="{{- template "thumbnailDescription" . -}}"
- width="100"
- height="100"
/>
<h1>{{- .instance.Title -}}</h1>
</a>