Commit Graph

127 Commits

Author SHA1 Message Date
Aman Agrawal f7b0282a0d navbar: Hide right arrow displayed by Safari on summary elements. 2023-08-20 23:15:18 -07:00
Aman Agrawal eda91378ec portico_signin: Fix back to login button alignment. 2023-08-16 10:05:15 -07:00
Sahil Batra 817e39650e css: Re-add bootstrap CSS defined using "table" class.
This commit re-adds bootstrap CSS rules defined using "table"
class to the specific CSS files where CSS for different tables
is present.

This is a prep commit for removing table related bootstrap CSS
from bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra fcaaa6566e bootstrap: Remove bootstrap CSS for <table> element.
This commit adds the required bootstrap CSS for "<table>"
element in the specific files and removes them from
bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra 9240d780a4 bootstrap: Remove CSS for table-stripped from bootstrap.css.
This commit re-adds the CSS to have different background for
alternate rows in striped tables to specific files and remove
them from bootstrap.css.
2023-08-06 18:13:33 -07:00
Sahil Batra 29ce34020d portico: Re-add bootstrap CSS for tables with "table-bordered" class.
This commit re-adds required bootstrap CSS rules defined with
"table-bordered" class to the specific files.

This is a prep commit to remove bootstrap CSS for tables.
2023-08-06 18:13:33 -07:00
Sahil Batra 2926337404 templates: Re-add bootstrap CSS for tweet blockquote elements.
This CSS will only be used if somehow the tweet is renderd as
a simple quote without iframe either due to network problem
or if the actual tweet is deleted.
2023-07-23 15:44:58 -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
Sahil Batra 30dec9822b landing_page: Re-add bootstrap CSS for blockquote in testimonials.
This commit re-adds bootstrap CSS rules for blockquote elements
used for testimonials in the landing page.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra 1c98252a85 portico: Re-add bootstrap CSS for blockquote in markdown pages.
This commit re-adds bootstrap CSS rules for blockquote written
using ">" in case study pages and some other pages like
"/why-zulip", "/history", etc.

We also remove the unnecessary CSS for "blockquote::after"
selector in this commit.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra d15222db22 corporate: Re-add bootstrap CSS for blockquotes in "for/" pages.
This commit re-adds the required bootstrap CSS for blockquote
elements used in "for/businesd", "for/research", "for/events"
and "for/open-source" pages.

This commit only handles the blockquote elements inside ".quote"
and ".intro-quote" elements and not "blockquote.twitter-tweet"
elements which will be handled separately. The blockquote
elements rendered using markdown using ">" will also be handled
separately.

This commit also updates blockquotes in self-hosting page as
blockquote element on this page is also inside ".quote" element.

This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
2023-07-23 15:44:58 -07:00
Sahil Batra fab29eb779 landing_page: Remove unnecessary CSS.
We use "testimonials" class only to show the testimonials
in landing page, i.e. hello.html and that page does not
use "why-page" class. So, the CSS with selectors including
".portico-landing.why-page .testimonials" is not required
and this commit removes it.

The removed CSS was added in fc6833e46a when we used
"testimonials" class for quotes in why-zulip.html page
but this changed since we moved the quotes to markdown file.
2023-07-23 15:44:58 -07:00
Sahil Batra ae7db86b79 bootstrap: Remove CSS for ".label" elements.
The "label" class was only used for the labels shown in
activity support page. This commit adds the required CSS
rules to activity.css and removes them from bootstrap.css.
2023-07-23 15:44:58 -07:00
Anders Kaseorg 7746e11486 dependencies: Upgrade JavaScript dependencies.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-07-21 15:58:42 -07:00
Sahil Batra f00dcf5674 billing: Fix licenses input in "Pay by invoice" section of upgrade page.
The bootstrap CSS was not re-added to the input for number of licenses
in "Pay by invoice" section of upgrade page while removing the bootstrap
CSS for "number" type inputs from bootstrap.css.

This commit fixes it by re-using the existing CSS for other number type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 87fd7b3810 integrations: Re-add bootstrap CSS for search input.
This commit re-adds bootstrap CSS for search input in
integrations page using a more specific selector in
integrations.css. We also change the selector to use
a class name instead of "input".

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra ec2826188b integrations_dev_panel: Re-add bootstrap CSS for text inputs.
This commit re-adds bootstrap CSS for text inputs in devtools
integrations page using a more specific selector in
integrations_dev_panel.css.

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 8ae71c8f90 email_log: Re-add boostrap CSS for text inputs.
This commit re-adds bootstrap CSS for the input
used to set the email to which emails will be
forwarded in the development environment "/emails"
page by using a more specific selector in
email_log.css.

This commit also increases the width of input to be
consistent with many other text type inputs and this
also helps in viewing the full placeholder text.

This is a prep commit for removing bootstrap CSS for
text type inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 83e747d757 billing: Re-add bootstrap CSS for inputs in sponsorship page.
This commit re-adds bootstrap CSS for "Organization website"
input in sponsorship page using a more specific selector in
billing.css. This change is done by re-using the existing
CSS for number type inputs and also removes the height
property which is not required.

This is a prep commit for removing bootstrap CSS for text
type inputs.
2023-07-07 10:10:28 -07:00
Sahil Batra 0454be5d26 activity: Re-add bootstrap CSS for inputs in realm details page.
This commit re-adds bootstrap CSS for text inputs in realm details
page by using a more specific selector in activity.css. The CSS
added for search input includes bootstrap CSS applied using
".search-query" and "input[type="text"]" selectors.

We remove the CSS for search-query CSS from bootstrap.css
as the search element in app navbar already overrides the
bootstrap CSS.

This is a prep commit for removing bootstrap CSS for text type
inputs.
2023-07-07 10:10:28 -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
Aman Agrawal 8cea85523b landing_page: Set `hero-text` to have 400 font-weight.
In this context, bolder resolves to 400 font-weight, so we directly
use it so reduce complications.
2023-07-06 17:57:37 -07:00
Aman Agrawal bed6ca92ca portico: Remove unused class `landing-page`. 2023-07-06 17:57:37 -07:00
Aman Agrawal 1557c4d112 css: Use 400 font weight instead of 500.
500 font weight defaults to 400 which is what we support.
2023-07-06 17:57:37 -07:00
Aman Agrawal ef4454ab7e css: Default 550 font weight to 600.
Since we support 600 font weight, 550 defaults to 600, so we
directly use it here.
2023-07-06 17:57:37 -07:00
Aman Agrawal 98ee387197 css: Use 700 font weight for 800 since they default to it.
We don't have 800 font weight available, so the font weight defaults
to 700, so we use it directly here to avoid any changes when
we convert to variable font.
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
Sahil Batra e4dad94cba portico: Define variable for modal background color.
The CSS for modals uses "--color-background-color" to set
background color of modal. But the variable is defined in
zulip.css which is not available for portico pages and thus
the email visibility modal was not rendering as expected in
"Terms of service" page.

This commit defines the "--color-background-color" variable
in portico.css such that it is available for portico pages
as well.
2023-07-03 21:49:34 -07:00
Sahil Batra 95f8ab1626 templates: Improve email confirmation page.
This commit updates the text on email confirmation page to
make it more clear what's going on and why the user needs
to check their email.

Fixes #25900.
2023-07-02 16:14:41 -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
Sahil Batra 631eba09ee css: Remove bootstrap CSS for password type inputs.
We use password type inputs for API key and password
change modal in the main app and in login, register
and password reset pages.

For the portico pages, i.e. login, register and
password reset pages, the bootstrap CSS is already
overridden by our custom CSS defined in
portico_signin.css and some of the CSS added by
bootstrap is redundant. Only outline property was
being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css
in this commit.

For the inputs used in app, i.e. API key and password
change modal, we have already added the CSS rules of
Bootstrap using "modal_password_input" class.

Thus, we can remove the CSS for password type inputs
from bootstrap.css.
2023-06-23 11:53:38 -07:00
Sahil Batra cbcbfef396 bootstrap: Remove CSS for fieldset element from bootstrap.css.
This commit adds the required bootstrap CSS rules for fieldset
elements to the specific selector in portico_signin.css and
removes the CSS from bootstrap.css.
2023-06-23 11:53:38 -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
Mateusz Mandera 4a6dfde8fe billing: Fix css for popups on the billing page.
As of 9427fb7230, the billing page
needs a proper value for --color-background-modal.
2023-06-05 16:54:34 -07:00
Anders Kaseorg 5b07bf767b landing-page: Add Microsoft Store download link.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-05-31 08:16:59 -07:00
Sahil Batra c8ad693e41 billing: Add bootstrap CSS to number type inputs.
This commit adds bootstrap CSS rules for number type inputs
in billing and upgrade page to billing.css as we will be
removing them from bootstrap.css in further commits.
2023-05-23 10:54:12 -07:00
Sahil Batra 96eaadda71 activity: Add bootstrap CSS styles for number type inputs.
This commit adds bootstrap CSS rules for number type inputs
in activity page to activity.css as we will be removing them
from bootstrap.css in further commits.
2023-05-23 10:54:12 -07:00
Sahil Batra a62a863f67 bootstrap: Remove CSS for "submit" type inputs.
We use "submit" type inputs in dev login page. Only "cursor"
CSS was applied to those elements from bootstrap and this
commit adds it to those elements in portico_signin.css and
removes the CSS in bootstrap.css and bootstrap-btn.css.
2023-05-23 10:54:12 -07:00
Sahil Batra 599ad856b2 bootstrap: Remove CSS for ".input-xxlarge" elements.
We use "input-xxlarge" class for search box in activity
support page only. This commit adds the width property
in activity.css for the search box and rest of the CSS
applied using this class was redundant and can be removed
safely.
2023-05-23 10:54:12 -07:00
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