diff options
| -rw-r--r-- | web/source/css/index.css | 21 | ||||
| -rw-r--r-- | web/source/css/page.css | 13 | ||||
| -rw-r--r-- | web/source/settings/admin/settings/index.tsx | 7 | ||||
| -rw-r--r-- | web/source/settings/style.css | 36 | ||||
| -rw-r--r-- | 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; - } - - img.avatar { - width: 8rem; +.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.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> |