Commit Graph

82 Commits

Author SHA1 Message Date
Karl Stolley 674cf8eacc css: Hyphenate .status-emoji selector. 2023-03-27 17:31:31 -07:00
Karl Stolley f695b08989 css: Hyphenate .smiley-icon selector. 2023-03-27 17:31:31 -07:00
Karl Stolley 89f45bf50e css: Hyphenate .selected-emoji selector. 2023-03-27 17:31:31 -07:00
Karl Stolley 36241e5758 css: Hyphenate .status-emoji-wrapper selector. 2023-03-27 17:31:31 -07:00
Karl Stolley 6e2b8a3b1d css: Hyphenate .user-status selector. 2023-03-27 17:31:31 -07:00
Karl Stolley fcef6a2228 css: Hyphenate .user-status-content-wrapper selector. 2023-03-27 17:31:31 -07:00
Karl Stolley c78c1ef54b css: Hyphenate #set-user-status-modal selector. 2023-03-27 17:31:31 -07:00
Aman Agrawal 83423bb45b copy_message_button: Use `div` HTML tag instead of `button`.
For some reason, browser is treating clicking on the button as
submitting the form, which results in the page getting redirected
to the same page with an additional empty query `?` in the URL.
2023-03-27 16:11:19 -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
Sahil Singh 89733670fd image_upload_widget: Refactor style of upload_widget's preview_image.
Forms using upload widget were using the
same css for image preview.

We fix this by assigning a class to the
widget and applying specific styles to it.
2023-03-27 10:19:29 -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
Palash Baderia cefc191dd6 settings: Fix responsiveness in change email,password dialogs.
Added a width for the Change Email and Password dialogs at
sm_min (576px) and ml_min (425px) to make them more responsive
on narrow screens.

Fixes: #24339.
2023-03-27 10:11:22 -07:00
Sahil Singh 0bcf03ea64 stream_settings: Fix stream description overflow in stream settings.
With longer stream descriptions, the text overflows in stream settings.

Fix this with 'word-break: break-all;'.
2023-03-24 17:39:04 -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
YashRE42 4853a9a736 navbar: Use feathericon close icon.
This uses the new close icon which we prefer over the one made available
from bootstrap. It also adds a reference to the icon in THIRDPARTY.
2023-03-24 16:30:15 -07:00
YashRE42 e3ad9c10bb navbar: Add Ionic search icon and use for navbar search.
This adds a new search icon which we prefer over the one made
available from bootstrap, and replaces search icons in navbar
search with the Ionic icon.
2023-03-24 16:30:15 -07:00
SameepAher 6211939020 css: Change the selector name of the <i></i> tag.
Changed the id name of the <i></i> tag to user_profile_edit_button_icon
in the user profile modal, as earlier it was edit-button, which is too
vague of a selector name.
2023-03-24 15:47:54 -07:00
SameepAher 724af12cd6 css: Fix edit icon bug in user profile modal.
Close user profile modal on clicking the space around edit button, by
calling hide_user_profile() on clicking the hover box around the edit
button.

Also, modified the hover box to center around the edit button.
2023-03-24 15:47:54 -07:00
Tim Abbott 2b6ec56238 popovers: Use default our font size for Tippy popovers.
We'd accidentally shrunk the actions popover to 12px when migrating it
to Tippy.
2023-03-23 11:59:46 -07:00
Tim Abbott d3152800a6 css: Refactor Tippy popover CSS.
The CSS for our first Tippy popover, actions_popover, incorrectly did
not split the CSS that is meant to be applied to all popovers from
that CSS that is only for that specific popover.

Reorganize this with some clarifying comments.
2023-03-23 11:59:46 -07:00
Daniil Fadeev 3bfdac3e03 tippy: Fix tippy-arrow thickness. 2023-03-23 09:24:38 -07:00
Tim Abbott 35440672a7 message_list: Rename confusing hide-date CSS class.
The previous hide-date CSS class had a semantic meaning of "this
recipient row has the same date as the previous one"; since we're now
having logic read that value, it's worth giving it a semantic name
that makes that code easier to understand.
2023-03-21 12:55:13 -07:00
Aman Agrawal 404f6a404a message_list: Fix duplicate date headers at the top of message feed.
Hide the date on date separator when it is above a sticky header; see
the comments for the full algorithm.
2023-03-21 12:55:13 -07:00
Joseph Ho c8d043e12c
popovers: Fix tooltip partially hidden by recipient bar when selected.
Previously, when a user view the message source of a message at the
very top with the blue box around, the tooltip for the button will
be partially hidden by the recipient bar. Ths cause is some legacy 
CSS from, for example, 3cd33c0fea,
which increased the z-index for the bodies of selected messages.

The intent of that code appeared to be something around handling overlaps
between unread indicators and the blue selected message box. It's logically
incorrect, and testing demonstrates that the blue box works fine next to unread
messages without this change, so we can safely remove these z-index values.
2023-03-21 12:47:47 -07:00
Anders Kaseorg 13066e6406 styles: Fix dark-theme mixin in zulip.css.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 15:48:29 -07:00
Anders Kaseorg ecde9066d7 stylelint: Fix declaration-block-no-redundant-longhand-properties.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 15:48:29 -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
Anders Kaseorg f03b609bfd Revert "minor: Add `z-index` to `message_time` class."
This reverts commit e16e7630e6 (#19542).

This was compiling to

    a.messagebox-content .message_time {
        z-index: 1;
    }

which did nothing, because .messagebox-content is a <div>, not an <a>.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-03-20 11:26:30 -07:00
Aman Agrawal c4903fe85a message_row: Fix rewrapping message lines after receiving ack.
Since the message time of locally echoed messages were not displayed
and their width was restricted by `notvisible` CSS class, it
resulted in width available to message text changing after the message
was successfully sent and the time was displayed.

To fix this, we just try to set opacity of the message time to 0
for locally echoed messages.
2023-03-17 08:10:13 -07:00
Lauryn Menard c446f86173 rendered-markdown: Move `pre` element CSS reset rules.
Moves CSS reset rules for `pre` elements to the `rendered_markdown`
class block.

Adds the `rendered_markdown` class to the scrollbar rules.
2023-03-16 11:30:04 -07:00
Lauryn Menard 2d8283e579 rendered-markdown: Move inline code CSS reset rules.
Moves the CSS reset rules for inline code elements to be in the
`rendered_markdown` class block.
2023-03-16 11:30:04 -07:00
Lauryn Menard d98ba32588 rendered-markdown: Copy anchor tag CSS rules from bootstrap.
Prep commit for moving CSS reset rules for inline code elements
in `rendered_markdown.css` to the `rendered_markdown` class rules.
2023-03-16 11:30:04 -07:00
Aman Agrawal f8e093c730 left_sidebar: Highlight inactive streams when narrowed to.
Having active streams greyed out can be confusing to the user. This
is especially useful when the app is still fetching messages on
a reload and the active stream has no messages and is thus marked
as `inactive`.
2023-03-15 16:17:24 -07:00
Sahil Singh 37a0c9c1b9 settings: Fix alignment of loading message.
The loading message that appears at the
top of the page when loading the Bots/
Uploaded Files/Users/Deactivated Users
page under Settings appears to be misaligned.

We fix this by changing the height of the
loading-spinner to match the line-height
of loading text.
2023-03-14 13:23:48 -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
Sahil Batra bd9d1b9158 dropdown_list_widget: Set dropdown menu wide enough to fit options.
We now set the width of dropdown menu opened for dropdown-list-widget
elements such that it is enough for all the options. For smaller
screens the dropdown menus are wide since the settings panel and
modal content can be scrolled horizontally.
This change is done only for dropdown-list-widget elements in
"Organization settings" panel and in bot-owner widget in bot edit
modal.

We don't do this change for move topic modal now as it cannot be
scrolled horizontally and appears beneath the button due to position
property.
2023-03-14 12:53:41 -07:00
Sahil Batra 7d9fe8fd23 settings: Set width of dropdown toggle same as select elements.
This commit sets width of toggle buttons for dropdown list
widget elements same as select elements in both organization
settings. We set the min-width to be 325px and max-width to
100%.
2023-03-14 12:53:41 -07:00
Sahil Batra d8750d69ae subscriptions: Fix scrolling of stream edit panel in narrow screens.
The height of stream edit panel in stream settings panel was set
incorrectly for width less than "$md_min" so one could not scroll
to the bottom. This commit fixes the height to set it same as it
is for normal width screens since the height of elements above
the scrollable container does not change with screen width.
2023-03-14 12:53:41 -07:00
Sahil Batra 0beac2f221 settings: Make settings page horizontally scrollable.
We make settings page horizontally scrollable such that
the user can see the complete dropdown by scrolling in
case the dropdown is wider than the screen.
2023-03-14 12:53:41 -07:00
Sahil Batra 882f39443a stream_settings: Set width of dropdown list widget for long options.
This commit fixes width of dropdown-list-widget used for
can_remove_subscribers_group stream setting. The button width
is set as per the selected option with min-width being 325px.
The dropdown-menu width is set as per the longest option and
the menu becomes scrollable if the whole menu doesn't fit on
screen.

We also change the position of dropdown-menu slightly such that
its top border matches with the top border of button.
2023-03-14 12:53:41 -07:00
Sahil Batra 610bd5951d streams: Set width of select elements in stream settings page.
This commit sets width of select elements in stream settings
page to "auto" such that the width adjusts to fit the options
as required in different languages and we also keep minimum
width of 325px to maintain consistency of width across elements
in the page to not look ugly.
2023-03-14 12:53:41 -07:00
Sahil Batra 80bd425133 settings: Set width of select elements in settings page.
This commit sets width of select elements in settings page
to "auto" such that the width adjusts as required in different
languages and we also keep minimum width of 325px to maintain
consistency of width across elements in the page to not look
ugly.

We also remove the CSS for overriding width of various role
based select elements and a couple of others which was added
to adjust the widths for different languages. Since we have
now set the width to auto, the browser will automatically
adjust width to fit the options.
2023-03-14 12:53:41 -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
N-Shar-ma 6a4c12b41e drafts: Space draft message content from restore draft button by 5px.
When the 1st line of a draft message took up the maximum horizontal space
possible, the last character was way too close to the pencil icon. More
noticeably, when a message began with a code block, it's right edge would
touch the icon.

To space the message contents and the restore draft button, now a margin
of 5px has been added to the draft message content. This makes the message
content narrower by 5px.
2023-03-08 11:33:53 -08:00
SameepAher 7f9fccedff css: Fix search bar width in right sidebar.
Remove old broken css which incorrectly set the width of the user list
filter bar in the right sidebar, for devices whose width is lesser than
md.
2023-03-07 16:50:30 -08:00
evykassirer 6581276a87 search css refactor: Nest media queries. 2023-03-07 15:38:11 -08:00