Commit Graph

38 Commits

Author SHA1 Message Date
Karl Stolley 0407abc788 help_pages: Improve anchor highlights.
These changes ensure that only headings targeted by URL fragments are
highlighted in full. Div elements will have their immediate first
child element highlighted instead (e.g., the first element of an API
parameter box).
2023-05-18 13:57:42 -07:00
Lakshay Mittal a208da9c4d style: Fix dropdown text alignment by reducing vertical padding.
Zulip's select widgets have a 30px height; this comes from Bootstrap
but is also generally nice for visual consistency.

In modals, we use a 15px font-size, instead of the 14px used in the
rest of the app, and in that context, the 4px vertical padding plus
30px fixed height resulted in the text not being vertically aligned.

Fix this by removing that vertical padding; all of our select elements
with these classes appear to position the text in the center of the
dropdown through other CSS mechanisms.
2023-05-16 15:43:06 -07:00
Sahil Batra 007a51f277 accounts: Allow user to change email visibility during first login.
We now allow users to change email address visibility setting
on the "Terms of service" page during first login. This page is
not shown for users creating account using normal registration
process, but is useful for imported users and users created
through API, LDAP, SCIM and management commands.
2023-05-16 13:52:56 -07:00
Karl Stolley b852da6eed help_pages: Preserve anchor highlights.
This commit assigns a `.scroll-target` class to preserve any URL
fragment whose corresponding ID is on the self-same page as the
activating link.

This accommodates a side-effect of the fetch-based page-loading
logic, which seems to lose the `:target` reference once a load
or reload is complete.
2023-05-15 14:57:42 -07:00
Karl Stolley ceec61ba10 help_pages: Highlight headings targeted by URL fragments.
One caveat: While the approach here works fine when loading a new
docs page whose URL includes a fragment, there appears to be something
about `simplebar` that clears out the `:target` reference. If you
click a heading link on a help page, for example, you might
momentarily see the highlighted style appear before it disappears.
2023-05-15 14:57:42 -07:00
Tim Abbott 2b2ee686f3 portico: Extract CSS variable padded-content-padding. 2023-05-12 11:54:17 -07:00
Karl Stolley f1db7c1d72 portico_css: Keep targeted elements below menu bar.
This PR ensure that all elements targeted by URL fragments will
remain visible below the portico's menu bar at all viewport
sizes and also when a user zooms in, provided the target is on a
page with the menu bar, which will have the `portico-landing`
class.

Whether a quirk or a bug, Chrome appears to ignore the padding on
ancestral containing elements when calculating the offset for
`scroll-margin-top`, which is why padding has been moved to
`.inner-content` for `.why-page` and `.case-studies-page`, which
are the two unique class names for portico pages where the targeted-
element scrolling behavior is used.
2023-05-12 11:54:17 -07:00
Karl Stolley a5ff3d7e59 portico_pages: Add uniform structure HTML structure.
This commit ensures that the Attribution, Jobs, and Team pages all
share a uniform structure to match those of other pages. This will
simplify styling and should ensure greater confidence when modifying
portico landing-page styles.

The one CSS modification here, for the jobs page, maintains the space
at the top of the "How we work" section.
2023-05-12 11:54:17 -07:00
Aman Agrawal 232543d425 billing: Making /upgrade page header visible.
This was hidden following #25518
2023-05-11 11:30:31 -07:00
Mateusz Mandera 1a15449e16 support: Rename "downgrade plan" to "modify plan".
Just a naming change to facilitate adding more options to that <select>
- mainly, an option to upgrade the plan to Plus.
2023-04-10 17:32:45 -07:00
Anders Kaseorg e9c1d72771 stylelint: Fix media-feature-range-notation.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-04-04 10:54:01 -07:00
Anders Kaseorg 2ce8357009 codespell: Fix newly found typos.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-04-03 22:39:21 -07:00
Sahil Batra 2ebb9834cd modal: Fix flex-direction property for modal__content.
The flex-direction property for modal__content should
be set to column as we want to display the elements.

This does not affect most of the modals since they
do not have multiple direct child elements that are
visible at same time and the data-simplebar attribute
already sets the "flex-direction: column" property to
the elements where it is used.

But in the email address visibility modal on user
registration page, there are multiple direct child
elements for the "modal__content" element and we need
to set "flex-direction: column" property for them to
work correctly. We also change the width of select
element in the modal to "fit-content" to avoid it
taking the whole width even when not required.

This commit also fixes the bug in login_to_access
modal, since the `modal__content` for it also
has two direct child elements.
2023-03-31 10:02:42 -07:00
Aman Agrawal d564025d6a css: Integrate newly designed header. 2023-03-29 17:59:00 -07:00
Sahil Batra 40f2865328 integrations_dev_panel: Add width CSS property for text inputs.
This commit adds width property CSS rule for text inputs in
integrations_dev_panel.css to 206px, as we are going to remove
the bootstrap CSS rule which sets width in further commits.
2023-03-27 22:34:30 -07:00
Sahil Batra 30f8c77151 billing: Add width property CSS for text inputs.
This commit adds width property CSS rule for text inputs
in billing.css to 206px, as we are going to remove the
bootstrap CSS rule which sets width to 206px in further
commits.
2023-03-27 22:34:30 -07:00
Sahil Batra 00ec5a3752 activity: Add width property CSS for inputs.
This commit adds width property CSS rule for text
inputs in activity.css to 206px, as we are going to
remove the bootstrap CSS rule which sets width to
206px in further commits.
2023-03-27 22:34:30 -07:00
Sahil Batra cf8d8db132 register: Update the user-registration form for realm creation.
In previous commits, we updated the realm creation flow to show
the realm name, type and subdomain fields in the first form
when asking for the email of the user. This commit updates the
user registration form to show the already filled realm details
as non-editable text and there is also a button to edit the
realm details before registration.

We also update the sub-heading for user registration form as
mentioned in the issue.

Fixes part of #24307.
2023-03-27 15:44:42 -07:00
Sahil Batra 80b00933b1 templates: Add realm information fields in create_realm.html.
We now show inputs for realm details like name, type and URL
in the create_realm.html template opened for "/new" url and
these information will be stored in PreregistrationRealm
objects in further commits.

We add a new class RealmDetailsForm in forms.py for this
such that it is used as a base class for RealmCreationForm
and we define RealmDetailsForm such that we can use it as
a subclass for RegistrationForm as well to avoid duplication.
2023-03-27 15:44:42 -07:00
Mateusz Mandera cf55e66c74 css: Move "style" from upgrade.html sponsorship form to billing.css.
Our linters demand "style" to not be used in .html and will complain
when trying to move this chunk of html to another .html file.
2023-03-27 10:15:21 -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 790c8a1582 stylelint: Fix at-rule-empty-line-before.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 15:48:29 -07:00
Anders Kaseorg cd3c4cd991 styles: Extend help sidebar heading links like list links.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:35:53 -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
Alya Abbott 005ca2b033 portico: Add landing page about trying Zulip by visiting chat.zulip.org. 2023-03-14 13:21:09 -07:00
Aman Agrawal dbe930394f footer: Integrate newly designed footer.
This footer was designed and mostly written by @terpimost.

This adds a new design of the footer for both corporate and not
corporate enabled pages.
2023-03-10 17:34:15 -08:00
Anders Kaseorg c41fa0dfd0 styles: Fix layout shifting for highlighted help sidebar link.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-10 14:43:30 -08: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
Joelute e2346ab3ae documentation: Increase block width in help center.
After merging #24352, we want to increase the block
width in the help center to reduce the amount of
scrollbars that are shown. Thus, we decided to
remove `max-width` on all blocks.

[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 bb819b4928 css: Remove rules in `integrations.css` for code elements.
Removes the specific rules for code elements in the integrations
documentation pages.
2023-03-02 13:32:50 -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
Sahil Batra 35ecf5f1e2 email_log: Add bootstrap CSS rules for checkbox element in emails_log.
This commit adds bootstrap CSS rules for checkbox element in
emails_log.html as we would remove the bootstrap CSS for checkbox
inputs in furhter commits. We add only required CSS rules.
2023-03-01 16:34:12 -08:00
Aman Agrawal 30719c9057 portico: Fix portico footer broken on mobile widths.
I am not sure why I added this change in flex-direction
but right now, it doesn't seem to be correct since it force
the footer to overflow mobile width.
2023-02-28 16:52:47 -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
Sahil Batra 1ac6a9ac06 register: Allow user to change email_address_visibility during signup.
We now allow user to change email_address_visibility during user
signup and it overrides the realm-level default and also overrides
the setting if user import settings from existing account.
We do not show UI to set email_address_visibility during realm
creation.

Fixes #24310.
2023-02-24 09:23:34 -08:00
Aman Agrawal c9f4e474a7 integrations: Increase font size of trademark disclaimer.
This is to address Google complaining that the font size is too
small to read on the integration pages.
2023-02-23 17:50:09 -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