Fixes the problem of recipient_bar_icons being too close to each
other. To improve spacing between them, classes are added, namely
recipient_bar_icon_link (for link icon) and reciepient_bar_icon
(for other icons). CSS for spacing these classes correctly, using
padding-left and padding-right, has been added zulip.scss
Manually tested for cases with single and multiple links present.
Fixes#14364.
This is a prep commit for the new navbar, since the new navbar switches
between a search bar and stream descriptions, it's easier to have the
border defined in an outer div. Due to the way the changesets is
generated, this may seem like a large diff, however, the only change to
navbar.html is to add an opening div with the ".top-navbar-border" class
and a corrseponding closing div to wrap around "#search_box" and
"#search_box_legacy". Apart from this, a few styles have been edited in
zulip.scss and night_mode.scss.
Hovering over user names (and user circles for PM List) now displays
Name, Status Message and Last online time in a js tooltip.
Hovering over group names displays the names of all group members.
Unavailable users are shown as "Last active: Today".
Hovering on a user circle in the Buddy List results in a js tooltip
with Active/Idle/Offline/Unavailable for
green/orange/white/white-with-line.
Resolves#11607.
Webpack code splitting will make the inclusion order of CSS files less
obvious, and we need to guarantee that these rules follow the rules
they override.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
When a user performs a search that might contain historical public
streams messages that the user has access to (but doesn't because
we're searching the user's own personal history), we add a notice
above the first search result to let the user know that not all
messages may have been searched.
Fixes#12036.
This has two purposes:
1. Prevent stupid stacks of diacritical marks from overflowing into
other messages. Fixes#7843.
2. Prevent Chrome from collapsing the inside bottom margin with the
.messagebox outside (in a way that Firefox doesn’t).
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
Many of them are now automatically generated by autoprefixer, while
others are unnecessary based on .browserslistrc, and some were just
wrong (the linear-gradient based checkerboard pattern in lightbox has
been broken in Firefox for a while).
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
It’s about as fast as node-sass (faster, according to their
benchmarks) and more flexible. Autoprefixer is neat: we can now go
delete all our -moz-, -webkit-, etc. lines and have them autogenerated
as necessary based on .browserslistrc.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This moves our main CSS for rendered Zulip message content into an
external file, which may be reusable but in any case should make it
easier to find this content.
I noticed a super weird bug where the edit pencil would disappear on
hover inside the message feed (!). Investigation determined that what
was actually happening was that the Drafts overlay had been shown and
then hidden at a time when the mouse cursor was over the icons with
`data-toggle="tooltip"` configured, and the tooltip showing. The
result was that this tooltip object, if you mouse over it, would cause
us to no longer be hovering over the message (because your cursor was
actually over the invisible drafts widget's leaked tooltip).
Ideally, we'd have fixed this by making the drafts modal `display:
none`, but that would interfere with the modal's closing animation,
and there's no good way to have an event trigger on a CSS animation
finishing.
There's a second bug that makes this possible, however, which is that
the drafts modal is supposed to be `pointer-events: none` while
hidden, but some rogue CSS for `message_top_line *` set
`pointer-events: auto` to override `pointer-events: none` on
`message_top_line` was accidentally applying to things inside that
line in the drafts modal, and furthermore accidentally overriding the
`none` setting for the modal as a whole.
We fix that second bug here, which resolves the overall issue.
The -2px list margin was almost but not exactly cancelling the 3px
paragraph margin, resulting in a line spacing exactly 1px taller than
the normal line spacing.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This fixes (or at least reduces) a problem with inline `code blocks`
causing extra uneven vertical space below their line. The absolute
line-height was being measured relative to the lower midline of the
smaller font-size in the code blocks.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
06f3cb2b78 added some styling to make the
embed previews prettier, and in particular added a bottom fading gradient to
make the embed description text fade out slowly, when it is out of bounds.
The fading used an ::after pseudo-element which had 100% height of the
`.data-container` which contained the title and the description of the
preview. This pseudo-element got overlaid on the title and made it
un-clickable.
This commit retains the visual appearance of the fade, while reducing the
height of the ::after pseudo element, so that it never gets overlaid on the
title, keeping it clickable always.
Ensure that the html is safe, before using it. The html is considered if it is
in an iframe with a http/https src, based on the recommendations here:
https://oembed.com/#section3
We directly embed the `iframe` html into the lightbox overlay.
Fixes: #11573.
This moves help_table to informational-overlays.scss, replaces "," with
"or" and "P" with "shift + p" in order to be more clear and legible
this also improves the styling of the text.
The `transition` property does not need prefixing. In fact, very
few properties need that nowadays. So remove it to simplify
the code. This is strictly a refactor with no style change intended.
Many of these styles shouldn't have been prefixed even if needed.
The prefixes exist exactly because the implementations might differ
from the incoming standard.
Looking at the supported browsers:
https://caniuse.com/#search=transition
We see that this property has had mainstream support from 2012 and
was supported on Firefox in 2006 !!!
Cleanup single message template moving CSS rules for box shadow
of a private message stream inside stylesheets. For any messagebox
inside of a `.private-message` element, the box shadow is set using
the class. In cases of normal streams, the box shadow is set using
inline style since we cannot have different classes for each color.
Changes made in drafts.scss are to keep the current style of not
having the left border. Setting style using classes, this rule had
to be overridden.
A few bugs were caused by 7d4cebbc1e.
In night mode:
- home icon was hidden by grey box on "All messages" narrow.
- inactive tabs (eg "mentions" and "stars") were hidden behind grey box.
- topic tab was hidden behind grey box in topic narrow.
In both night mode and normal mode:
- "private messages" tab in individual/group pm narrows was illegible.
These were all results of unexpected differences in precedence rules
caused by the refactor.
This change adds rules for ordered lists that makes them visually similar
to bulleted lists.
Note that is has no effect because our markdown implementation doesn't
currently generate ol tags.
This change decreases the spacing at the top and bottom of bulleted lists
and blockquotes.
Specific rules for p and p:last-of-type have been added for both uls and
blockquotes to maintain visually consistent spacing in all cases.
This reverts commit 6441ad0677 since it
causes two bugs: (1) when rendering new message there is glitch where
the profile picture flashes (2) when someone sends a new message their
profile picture flickers.
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 has no functional changes, just making the implementation more
standard.
We don't have any blockquotes outside markdown rendering, which is why
it's correct to collapse the blockquote rules.
This eliminates unnecessary use of the message_content CSS class in
favor of rendered_markdown, which makes more sense for places outside
messages where we display rendered Zulip markdown.
Blockquotes and unordered lists had a large amount of space above them
when preceded by a paragraph tag, which looks ugly. This is a common
issue with the CSS rendering of essentially all markdown
implementations (e.g. GitHub has this bug).
We resolve the issue by reducing that whitespace with negative
margins. Hopefully, this won't create other weird glitches in the
process.
Fixes#11631.
Using lazysizes we only load images if they are in view.
This decreases load time and save more bandwidth since images are loaded
after html is loaded and if they are on screen.
Fixes#3564.
Pranav
YashRE42
Tim Abbott
Vinit Singh
Anders Kaseorg
Alexandra Ciobica
Archit Kaushik
Yashashvi Dave
Puneeth Chaganti
Aman Agrawal
Pragati Agrawal
YashRE42
Boris Yankov
Vaibhav
Priyank Patel