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

css: Rewrite styling for markdown paragraph spacing. 

Historically, we had a large bottom-margin on p tags designed to
produce correct spacing between consecutive paragraphs (10px, similar
to the spacing between consecutive paragraphs in different messages by
the same sender).  And then we tried to fix the end-of-message spacing
with a p:last-of-type rule, which fixed that problem, but created lots
of unnecessary extra space just before a bulleted list, block quote, etc.

We recently added some p+ul and p+blockquote negative margin rules in
62f2396ee2 to try to fix this, but those
created some secondary issues in interaction with the p:last-pf-type
rule.  This rabbit hole is likely somewhat deep.

The right fix for this overall formatting is to implement the
inter-paragraph spacing as a p+p rule, rather than a bottom-margin on
the p rule; then, we get all the properties we're interested in for
how paragraphs interact.

We may need to do some follow-up work to add small p+ul and
p+blockquote rules to get the pixel-perfect spacing we want (or maybe
just adjust the ul/blockquote spacing CSS), but this is clearly a
better architecture for doing this work.

Fixes #12101 through solving the same problem it does.
This commit is contained in:
Tim Abbott 2019-04-12 12:30:47 -07:00
parent 74a87ecff0
commit d7aa186dab
1 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/styles/zulip.scss
View File

@ -1432,23 +1432,20 @@ a:hover code {
}
.rendered_markdown {
/* The default top/bottom margins for paragraphs are small, to make sure
they look nice next to blockquotes, lists, etc. */
p {
margin: 3px 0px 10px 0px;
margin: 3px 0px 3px 0px;
}
p + ul {
margin-top: -7px;
/* The spacing between two paragraphs is significantly larger. We
arrange things so that this spacing matches the spacing between
paragraphs in two consecutive 1-line messages. */
p + p {
margin-top: 10px;
}
p + blockquote {
margin-top: -4px;
}
p:last-of-type {
margin-bottom: 3px;
}
/* This ensures bulleted lists are nicely centered in 1-line messages */
/* Ensure bulleted lists are nicely centered in 1-line messages */
ul {
margin: 5px 0 5px 20px;
}