mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-10-31 22:18:52 +00:00
[bugfix] Fix wide images being squished when used as instance avatar (#2669)
This commit is contained in:
parent
291e180990
commit
2d9e498f96
5 changed files with 52 additions and 27 deletions
|
@ -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 {
|
||||
.page-header {
|
||||
& > a {
|
||||
& > h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
& > img {
|
||||
align-self: center;
|
||||
max-height: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
@ -50,6 +50,15 @@
|
|||
|
||||
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 {
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -395,7 +395,8 @@ section.with-sidebar > div, section.with-sidebar > form {
|
|||
gap: 1rem;
|
||||
}
|
||||
|
||||
.file-upload > div {
|
||||
.file-upload {
|
||||
.file-upload-with-preview {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
||||
|
@ -411,6 +412,13 @@ section.with-sidebar > div, section.with-sidebar > form {
|
|||
img.header {
|
||||
width: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.file-input-with-image-description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
@ -61,8 +61,6 @@ Instance Logo
|
|||
src="{{- .instance.Thumbnail -}}"
|
||||
alt="{{- template "thumbnailDescription" . -}}"
|
||||
title="{{- template "thumbnailDescription" . -}}"
|
||||
width="100"
|
||||
height="100"
|
||||
/>
|
||||
<h1>{{- .instance.Title -}}</h1>
|
||||
</a>
|
||||
|
|
Loading…
Reference in a new issue