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
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue