Commit Graph

71 Commits

Author SHA1 Message Date
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