LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-23 11:21:26 +00:00
Code Issues Projects Releases Wiki Activity

fix: Fix avatar image overlay aspect ratio

Browse source
This commit is contained in:
Jay Sitter 2023-07-02 17:23:48 -04:00
parent 61276ec4e5
commit 0047c17eb3
2 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/assets/css/main.css
View file

@ -254,10 +254,6 @@ hr {
-ms-filter: blur(10px); -ms-filter: blur(10px);
} }
.img-cover {
object-fit: cover;
}
.img-expanded { .img-expanded {
max-height: 90vh; max-height: 90vh;
} }
@ -350,10 +346,12 @@ br.big {
} }
.avatar-overlay { .avatar-overlay {
width: 20%; width: 20vw;
height: 20%; height: 20vw;
max-width: 120px; max-width: 120px;
max-height: 120px; max-height: 120px;
min-width: 80px;
min-height: 80px;
} }
.avatar-pushup { .avatar-pushup {

6
src/shared/components/common/pictrs-image.tsx
View file

@ -34,13 +34,13 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
className={classNames("overflow-hidden pictrs-image", { className={classNames("overflow-hidden pictrs-image", {
"img-fluid": !this.props.icon && !this.props.iconOverlay, "img-fluid": !this.props.icon && !this.props.iconOverlay,
banner: this.props.banner, banner: this.props.banner,
"thumbnail rounded": "thumbnail rounded object-fit-cover":
this.props.thumbnail && !this.props.icon && !this.props.banner, this.props.thumbnail && !this.props.icon && !this.props.banner,
"img-expanded slight-radius": "img-expanded slight-radius":
!this.props.thumbnail && !this.props.icon, !this.props.thumbnail && !this.props.icon,
"img-blur": this.props.thumbnail && this.props.nsfw, "img-blur": this.props.thumbnail && this.props.nsfw,
"img-cover img-icon me-1": this.props.icon, "object-fit-cover img-icon me-1": this.props.icon,
"ms-2 mb-0 rounded-circle img-cover avatar-overlay": "ms-2 mb-0 rounded-circle object-fit-cover avatar-overlay":
this.props.iconOverlay, this.props.iconOverlay,
"avatar-pushup": this.props.pushup, "avatar-pushup": this.props.pushup,
})} })}