Commit Graph

21 Commits

Author SHA1 Message Date
nooblag ed023db0f4 rendered_markdown: Improve headings.
* Switch from underline to a smaller range of font sizes to indicate
  h5/h6 headings.
* Provide margin-top for headings while avoiding problematic behavior
  for messages that start with a heading.
2021-09-29 15:45:03 -07:00
nooblag 18ca7bf7f9 rendered_markdown: Rework CSS for markdown headings.
Extracted by tabbott from the original pull request, with additional
changes to document the surprising margin-top in our current
implementation and avoid a bit of unnecessary CSS.
2021-09-06 16:37:10 -07:00
manavdesai27 9cebd1ec80 markdown: Fixed hr visibility in day theme.
Tweaked by tabbott to use a simpler approach proposed by the author in
the PR.
2021-07-23 12:48:43 -07:00
Aman Agrawal eae1829ead message_edit_form: Convert from `id` to `class`.
Since we can have multiple instances of `message_edit_form`, it
makes sense to have it as a class.

We track the message_edit_form by setting an id to
`form` element dependent on message_id.
2021-04-27 10:06:25 -07:00
Sumanth V Rao 164506d950 css: Fix vertical alignment mismatch for view_in_playground button.
We'll be changing the icon and probably even doing the alignment in
a better fashion in the future, so this is just a temporary fix
till then.
2021-04-07 21:06:36 -07:00
Anders Kaseorg 8f0f0b9e91 styles: Slightly increase monospace font size.
Commit d84727ce7f (#17970) slightly
decreased the apparent size on some platforms depending on which font
was in use before, and some users complained that it was a bit hard to
read.  Based on experiments with multiple platforms and monitors and
resolutions, this appears to be a good compromise that increases the
rendered height without increasing the width more than necessary.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-07 13:17:20 -07:00
Anders Kaseorg d84727ce7f styles: Use Source Code Pro as our monospace font.
Fixes #15993.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
Anders Kaseorg e642b8e777 rendered_markdown: Add horizontal scrollbar to overflowing ```math.
Fixes #14422.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-28 19:03:40 -07:00
Sumanth V Rao e925ec6c41 css: Hide copy-paste button for codeblocks in formatting help overlay.
We missed out on this during our previous efforts to add a copy-to-clipboard
icon in codeblocks (42d30bc14b).
2021-03-26 09:46:09 -07:00
m-e-l-u-h-a-n 03e4ccbc2d message-view: Increase spacing for lists coming after paragraphs.
Lists that were followed by a paragraph (i.e. our p+ul, p+ol CSS rule)
in messages had negative top margin of -3px.  Adjusting the margin
here is important, because the default styling would result in an
excessive gap that made bulleted lists weirdly far from the previous
paragraph.  See #12113 for background.

However, the -3px negative margin was so large that it reduced spaces
between paragraph and lists, such that there was too little visible
separation between the two.  We fix this by going with a 0px
margin-top instead.

This has been tested for various structures of messages:
1. text + bulleted list
2. bulleted list + unbulleted list(or two lists)
3. only list.

And it looks good in all cases.

Fixes #17284.
2021-02-16 08:56:26 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal 17f34bdfbf rendered_markdown: Use 575px instead of 600px for breakpoint.
This media query changes the how embedded messages is displayed
on small screens. Changing breakpoint to 575px offers similar
experience.
2021-01-25 14:49:32 -08:00
Kamal Marhubi 9c176bc0fa markdown: Remove border colour on inline code links
The visual noise from the blue border has bothered me forever and I
finally decided to do something about it. I don't know if this is the
best solution, but I do think it's a lot better than the status quo!
2020-11-05 09:32:05 -08:00
YashRE42 967efc32d2 widgets: Remove tictactoe example widget.
Steve asked me to remove this, since the tictactoe game was always
intended as a proof of concept. Now that we have poll and todo
widgets, the sample code for tictactoe has much less value.

We replace the content and type in test_widgets.py to maintain
coverage.
2020-11-03 14:46:39 -08:00
Sumanth V Rao adfe4cacc6 css: Add vertical scrollbar styling for view-source textarea.
This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
2020-10-08 17:13:50 -07:00
Sumanth V Rao ab9a011f89 css: Modify button styling to adjust for svg size change.
This builds on the previous commit and adds final touches to
both the button positioning and style.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 792029cbb8 css: Refactor copy_message button to use copy_button_base class styling.
Z-index is added to the base class. This doesn't affect copy_code_button
in any way.

Attributes dropped/changed:
    - background-color
    - Base class on-hover property is now used.
    - height, width, padding is now the base classes.

We can also remove the TODO now.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 26ff6db751 css: Extract copy_button_base from copy_codeblock class.
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 918b1ea61d css: Add styling for code_external_link hyperlink.
In case of previews, we tweak the positioning a bit more
to the right.

The previous styling also had the focus-within action
which isn't needed here as hovering over the codeblock
is enough to display both the icons.
2020-09-28 16:04:54 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00