paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-11 17:36:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

url_previews: Rewrite message embeds in CSS Grid.

Browse Source
This commit is contained in:
Karl Stolley
2025-04-25 10:08:57 -05:00
committed by Tim Abbott
parent e579f88d54
commit 05e4a2f6ac
2 changed files with 35 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/styles/app_variables.css
View File

@@ -459,6 +459,11 @@
width upon UI initialization. */ width upon UI initialization. */
--message-box-timestamp-column-width: 0; --message-box-timestamp-column-width: 0;
/* This length is the primary reference for height
and image width on URL preview embeds.
80px at 14px/1em */
--length-message-preview-embeds: 5.7143em;
/* /*
Reaction container UI scaling. Reaction container UI scaling.
*/ */

60
web/styles/rendered_markdown.css
View File

@@ -695,14 +695,27 @@
} }
.message_embed { .message_embed {
display: block; display: grid;
position: relative; grid-template-columns:
[thumbnail-start] var(--length-message-preview-embeds)
[thumbnail-end fader-start data-container-start] minmax(0, 1fr)
[data-container-end fader-end];
grid-template-rows:
[border-start thumbnail-start data-container-start] calc(
var(--length-message-preview-embeds) - 10%
)
[fader-start] 10% [data-container-end thumbnail-end border-end fader-end];
column-gap: 5px;
margin: 0 0 var(--markdown-interelement-space-px); margin: 0 0 var(--markdown-interelement-space-px);
border: none; /* We want to control the height without worrying about
border-left: 3px solid hsl(0deg 0% 93%); padding... */
height: 80px; box-sizing: border-box;
/* ...though we will account for 10px of padding in the
height itself, so that the fade effect on long description
text works as expected. */
height: calc(var(--length-message-preview-embeds) + 10px);
padding: 5px; padding: 5px;
z-index: 1; border-left: 3px solid hsl(0deg 0% 93%);
text-shadow: hsl(0deg 0% 0% / 1%) 0 0 1px; text-shadow: hsl(0deg 0% 0% / 1%) 0 0 1px;
.message_embed_title { .message_embed_title {
@@ -714,40 +727,24 @@
line-height: normal; line-height: normal;
} }
.message_embed_description {
position: relative;
max-width: 500px;
margin-top: 3px;
/* to put it below the container gradient. */
z-index: -1;
}
.message_embed_image { .message_embed_image {
display: inline-block; display: block;
padding: 5px; grid-area: thumbnail;
width: 70px; /* Keep the embed image square. */
height: 70px; max-height: var(--length-message-preview-embeds);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
.data-container { .data-container {
position: relative; grid-area: data-container;
padding: 0 5px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 115px);
max-height: 80px;
overflow: hidden; overflow: hidden;
} }
.data-container::after { &::after {
content: " "; content: " ";
position: absolute; grid-area: fader;
width: 100%; height: 100%;
height: 10%;
bottom: 0;
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
@@ -757,6 +754,9 @@
} }
} }
/* Although grid will automatically respond to
RTL languages, we still need to manually fix
the border here, which is not part of grid. */
&.rtl .message_embed { &.rtl .message_embed {
border-left: unset; border-left: unset;
border-right: 3px solid hsl(0deg 0% 93%); border-right: 3px solid hsl(0deg 0% 93%);