mirrors/gotosocial
1
0
Fork 1
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-05-31 22:58:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

[bugfix] Fix wide images being squished when used as instance avatar (#2669)

Browse source
This commit is contained in:
tobi 2024-02-21 14:24:04 +01:00 committed by GitHub
parent 291e180990
commit 2d9e498f96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 52 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/source/css/index.css
View file

@ -18,12 +18,23 @@
*/ */
/* /*
Render instance title a Render instance title + image
bit bigger on index page. a bit bigger on index page.
Overrides the css from page.css.
*/ */
.page-header a h1 { .page-header {
font-size: 2rem; & > a {
line-height: 2rem; & > h1 {
font-size: 2rem;
line-height: 2rem;
}
& > img {
align-self: center;
max-height: 6rem;
}
}
} }
/* /*

13
web/source/css/page.css
View file

@ -47,11 +47,20 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;
justify-content: center; justify-content: center;
img { img {
align-self: center; 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 { h1 {
align-self: center; align-self: center;
text-align: center; text-align: center;

7
web/source/settings/admin/settings/index.tsx
View file

@ -105,19 +105,18 @@ function AdminSettingsForm({ data: instance }: AdminSettingsFormProps) {
/> />
<div className="file-upload" aria-labelledby="avatar"> <div className="file-upload" aria-labelledby="avatar">
<strong id="avatar">Instance avatar</strong> <strong id="avatar">Instance avatar (1:1 images look best)</strong>
<div> <div className="file-upload-with-preview">
<img <img
className="preview avatar" className="preview avatar"
src={form.thumbnail.previewValue ?? instance?.thumbnail} src={form.thumbnail.previewValue ?? instance?.thumbnail}
alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")} 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 <FileInput
field={form.thumbnail} field={form.thumbnail}
accept="image/png, image/jpeg, image/webp, image/gif" accept="image/png, image/jpeg, image/webp, image/gif"
/> />
<br/>
<TextInput <TextInput
field={form.thumbnailDesc} field={form.thumbnailDesc}
label="Avatar image description" label="Avatar image description"

36
web/source/settings/style.css
View file

@ -395,21 +395,29 @@ section.with-sidebar > div, section.with-sidebar > form {
gap: 1rem; gap: 1rem;
} }
.file-upload > div { .file-upload {
display: flex; .file-upload-with-preview {
gap: 1rem; display: flex;
gap: 1rem;
img {
height: 8rem; img {
border: 0.2rem solid $border-accent; height: 8rem;
border: 0.2rem solid $border-accent;
}
img.avatar {
width: 8rem;
}
img.header {
width: 24rem;
}
} }
img.avatar { .file-input-with-image-description {
width: 8rem; display: flex;
} flex-direction: column;
justify-content: space-around;
img.header {
width: 24rem;
} }
} }

2
web/template/page_header.tmpl
View file

@ -61,8 +61,6 @@ Instance Logo
src="{{- .instance.Thumbnail -}}" src="{{- .instance.Thumbnail -}}"
alt="{{- template "thumbnailDescription" . -}}" alt="{{- template "thumbnailDescription" . -}}"
title="{{- template "thumbnailDescription" . -}}" title="{{- template "thumbnailDescription" . -}}"
width="100"
height="100"
/> />
<h1>{{- .instance.Title -}}</h1> <h1>{{- .instance.Title -}}</h1>
</a> </a>