Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

message_feed_view: Fit multiple images horizontally. 

At the moment we fit only a single image per message per line. This is
wasteful of space as multiple images can be accomodated per line on
widescreen displays. This commit modifies the rendered_markdown
stylesheet to make this possible.

The comments detail various technical considerations.

Fixes #20975.
This commit is contained in:
ditsuke 2022-02-08 21:03:10 +05:30 committed by Tim Abbott
parent c121bec188
commit 4d03a1b0b7
2 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/styles/dark_theme.css
View File

@ -280,6 +280,14 @@ body.dark-theme {
}
}
.rendered_markdown .message_inline_image {
background: hsla(0, 0%, 100%, 0.03);
&:hover {
background: hsla(0, 0%, 100%, 0.15);
}
}
input[type="text"],
input[type="email"],
input[type="password"],

58
static/styles/rendered_markdown.css
View File

@ -308,9 +308,48 @@
position: relative;
margin-bottom: 5px;
margin-right: 5px;
/* Sizing CSS for inline images requires care, because images load
asynchronously, and browsers will unfortunately jump your
scroll position when elements load above the current
position in the message feed in a way that changes the
height of elements. (As of March 2022, both Firefox and
Chrome exhibit this problem, though in Chrome it is pretty
subtle).
We prevent this by setting a fixed height for inline
previews. 100px is chosen because we don't want images to
overwhelm conversation in message feeds, as it does in chat
tools that show images at half-screen height or larger.
If there are several images next to each other, we display
them in a grid format; the same considerations requires
that either use a scrollable region or set a fixed width
for images so that the browser statically knows whether
it'll need to overflow. We choose fixed width here. */
height: 100px;
display: block !important;
border: none !important;
width: 150px;
/* Inline image containers also need an inline-block display in order
to implement the desired grid layout. */
display: inline-block;
/* Set a background for the image; the background will be visible for
messages whose aspect ratio is different from that of this
container. */
border: solid 1px transparent;
transition: background 0.3s ease;
background: hsla(0, 0%, 0%, 0.03);
&:hover {
background: hsla(0, 0%, 0%, 0.15);
}
a {
display: block;
height: 100%;
width: 100%;
}
}
&.rtl .twitter-image,
@ -350,10 +389,21 @@
.twitter-image img,
.message_inline_image img,
.message_inline_ref img {
height: auto;
max-height: 100%;
/* We use `scale-down` so that images smaller than the container are
neither scaled up up or cropped to fit. This preserves
their aspect ratio, which is often helpful. */
object-fit: scale-down;
/* We need to explicitly specify the image dimensions to have
object-fit work; likely because internally object-fit needs
to know the frame it is targeting, and images don't default
to container dimensions. */
height: 100%;
width: 100%;
float: left;
margin-right: 10px;
border-radius: inherit;
}
.message_inline_image img {