Commit Graph

14 Commits

Author SHA1 Message Date
David Rosa 4b8c99b01a widgets: Rename confusing attribute name in `tabbed_sections.py`.
Renames misleading attribute in HTML template using `code-section`
to refer to both language toggles in API docs and app toggles in
help center docs.
2023-08-31 11:55:28 -07:00
Signior-X 3392be5688 user docs: Convert browser scrollbar overflow from .markdown to html.
Remove overflow: hidden from the body and overflow: auto from the
.markdown element. Adjust the scroll-margin-top on the heading
elements so that using the hash, the page opens at perfect
location. Add position: fixed to .sidebar so that it does not scroll
with the content.

For the mobile view, change the .sidebar right from 100vw to 100%.

Also change how the hamburger menu changes its position: use right
instead of left as that works better than translate combined with
left.
2023-08-30 15:34:34 -07:00
Sahil Batra fdc0fc9d97 markdown: Re-add bootstrap CSS for blockquote used in markdown.
This commit re-adds bootstrap CSS rules for blockquote elements
used in various markdown pages including the ones which are
rendered during message formatting like when quoting a message.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Aman Agrawal 233b486618 css: Use variable font when using Source Sans 3.
This is to overcome the limitations of previous static font,
which didn't allow us to use various font widths.
2023-07-06 17:57:37 -07:00
Wladimir Ramos b80a205dbe
portico: Polish UI for portico pages copy-codeblock button.
* Add a Copy code tooltip.
* Add cursor pointer.
* Add a hover effect.
* Move variables to snake_case.

Fixes: #25962.
2023-07-06 16:18:59 -07:00
Karl Stolley d6c21c2237 docs: Correct scope of copied material from copy button.
This traverses the DOM to the <pre> element containing the
copyable material of interest.

The button is attached to the .codehilite element to ensure
that the button does not move with horizontally-scrolling
code content that exceeds the width of the content column,
as happens frequently at mobile scales or for very long
lines of content.

Fixes #26093.
2023-06-24 07:51:54 -07:00
UBC Student 1cbff7094b docs: Add copy code button to portico docs.
Added a copy-to-clipboard button to the code blocks in the API and
Help Center docs. Previously, copying code from the docs required
manual copying, which was cumbersome.

Used the same copy-to-clipboard svg icon as the one used in
web/src but manually created the button within the js function instead
of using a template. Updated the pre CSS element to have relative
positioning and gave the copy-codeblock element absolute positioning
to ensure the button stayed in the top-right corner.

Fixes #25726.
2023-06-09 11:26:05 -07:00
Anders Kaseorg d274583d8f styles: Use modern color notation.
postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-24 17:26:55 -07:00
Anders Kaseorg 5cdf38b1f7 styles: Use standard CSS nesting syntax.
CSS nesting is being standardized with the syntactic restriction that
the nested selector cannot start with an identifier.  This was
necessary to allow the syntax to be parsed without lookahead.

https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/
https://www.w3.org/TR/css-nesting-1/#syntax

The postcss-nesting plugin used by postcss-preset-env enforces this
restriction.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:26:30 -07:00
Joelute e44a87b271 documentation: Reduce `max-width` on content.
In the documentation, text-lines felt a bit too long
in text-heavy pages. This change aims to reduce
`max-width` on the content to 700px.

[CZO discussion](https://chat.zulip.org/#narrow/stream/19-documentation/topic/line.20wrapping.20code.20blocks/near/1516561)
2023-03-03 11:36:06 -08:00
Lauryn Menard 262debb72b css: Update code element styling for documentation pages.
Updates `markdown.css` to remove border styling from code
elements, and instead use background-color (as well as
font-family) to visually highlight inline code elements
as distinct from regular text.

Updates code element font-family to be the same as in
`zulip.css`.

Makes padding on the left and right the symmetrical for
inline code elements. Previously there was 4px padding on
the right, but not on the left.

Maintains anchor font-color styling for code elements that
are also links.
2023-03-02 13:32:50 -08:00
Lauryn Menard 3c63025d88 css: Remove code elements from bootstrap.css.
Updates `markdown.css` and `rendered_markdown.css` for the rules
in `bootstrap.css` that were being used to style code elements and
removes the now redundant/ignored rules from `bootstrap.css`.
2023-03-02 13:32:50 -08:00
Joelute 4c6f85727c documentation: Add horizontal scrollbar to code blocks in help center.
Some code blocks in the help center have lines that are too long
to fit, and wrap onto the next line. This can look awkward, and
may cause confusion. An horizontal scroll bar is added to the code
blocks to help fit everything into their own lines and clear up
confusions.

Fixes #24004.
2023-02-27 11:52:01 -08:00
Anders Kaseorg c1675913a2 web: Move web app to ‘web’ directory.
Ever since we started bundling the app with webpack, there’s been less
and less overlap between our ‘static’ directory (files belonging to
the frontend app) and Django’s interpretation of the ‘static’
directory (files served directly to the web).

Split the app out to its own ‘web’ directory outside of ‘static’, and
remove all the custom collectstatic --ignore rules.  This makes it
much clearer what’s actually being served to the web, and what’s being
bundled by webpack.  It also shrinks the release tarball by 3%.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-02-23 16:04:17 -08:00