github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-22 05:25:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: responsive oneboxing with images in chat (#22824)

Browse Source 
* UX: fix narrow oneboxing with images in chat

* UX: more responsive oneboxing

* UX: onebox-avatar limits

* ony flex non onebox-avatars
This commit is contained in:
chapoi 2023-07-27 13:57:30 +02:00 committed by GitHub
parent 3a11c82547
commit d10fd697b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
plugins/chat/assets/stylesheets/common/chat-message-images.scss
View File

@ -3,12 +3,10 @@ $max_image_height: 150px;
.chat-message {
// append selectors to set images to a
// max height of $max_image_height
.chat-message-collapser
.onebox
img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message-collapser img.onebox,
.chat-message-collapser .chat-uploads img,
.chat-message-collapser p img,
.onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
img.onebox,
.chat-uploads img,
p img,
aside.onebox .onebox-body .aspect-image-full-size,
aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message-text p img:not(.emoji) {
@ -19,6 +17,46 @@ $max_image_height: 150px;
overflow: hidden;
}
.onebox {
container-type: inline-size;
.thumbnail {
max-width: 40% !important;
&.onebox-avatar {
max-height: 100px;
width: 20%;
max-width: 60px;
margin-right: 0.5rem;
}
}
@container (width < 400px) {
.onebox-body {
&:not(:has(.thumbnail.onebox-avatar)) {
display: flex;
flex-direction: column;
}
h3 {
margin-block: 0.75rem 0;
}
p {
margin-top: 0.5rem;
}
.thumbnail {
max-width: 100% !important;
margin: 0;
&.onebox-avatar {
max-width: 20%;
margin-right: 0.5rem;
}
}
}
}
}
.chat-message-collapser
.chat-message-collapser-header
+ div