Commit Graph

448 Commits

Author SHA1 Message Date
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
evykassirer 0a7fbc7085 search css refactor: Move search-related selectors out of media queries. 2023-03-07 15:38:11 -08:00
evykassirer 1df3b4f86f search: Rename .search_button to more correct .search_close_button. 2023-03-07 15:38:11 -08:00
evykassirer 3d3d00ab8e search css refactor: Split pill searchbox code into its own section. 2023-03-07 15:38:11 -08:00
evykassirer a030fe40ac search css refactor: Split up general media query. 2023-03-07 15:38:11 -08:00
evykassirer f1e6f4b5dd search css refactor: Move relevant css from zulip.css. 2023-03-07 15:38:11 -08:00
evykassirer caba06e93d global css: Convert SASS variables to CSS custom properties. 2023-03-07 15:38:11 -08:00
Hardik Dharmani e61a092f1e
stream_settings: Fix save/discard widget on narrow screens.
In narrow screens, the save/discard widget was incorrectly shown
even with no changes, due to the CSS intended to switch it from `inline-block` 
to `block display.

Fixed by adding `display: none` to `.hide` class for @media(width < 575px)
to hide buttons on screen width less than 575px.

Fixes #24589.
2023-03-07 15:37:24 -08:00
Hardik Dharmani 74ff9a4beb
popovers: Add disabled button CSS for light theme.
Previously, we only had disabled button CSS for the dark theme in dialog widgets.

Fixes #24567.
2023-03-07 11:01:01 -08:00
Lauryn Menard f1e60014fa css: Move `pre code` reset rules to `rendered_markdown` class block.
Moves and simplifies the `pre code` rules in `rendered_markdown.css`
so that they are all part of the `rendered_markdown` class block.
2023-03-03 14:10:06 -08:00
Joelute 5762799d18 popovers: Remove background when hovering Github username.
When someone hovers over the Github username in the popover
with dark theme, a background will appear. These changes
ensures that the `background-color` isn't overwritten by
other CSS.
2023-03-03 11:46: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
Sahil Batra 8a0b99cb39 streams: Align stream type icons in "Archive stream" modal.
This commit adds inline_decorated_stream_name component
which is used to show stream name along with its privacy
type icon. This component is added such that we can align
the icon and stream name properly as there are many
instances where the icon and name are not aligned in the
current UI.

This component is only used in "Archive stream" modal for
now and will be used for other UIs as well in future.
2023-03-03 11:10:45 -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 07f7089cf3 settings: Add bootstrap CSS to label.checkbox elements.
This commit adds min-height property added by bootstrap
to the label.checkbox elements in components.css.
We do not need to add padding-left property added by
bootstrap since we already set padding to 0.

After adding this CSS, we can safely remove the CSS from
bootstrap.css.
2023-03-01 16:34:12 -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
Palash Baderia c1009bc051 settings: Drop column from tables on narrow screen.
Drop the "last_active" column in the users section of the
organization settings, and the "Bot_type" column in the bots
section on sm_min (576px or less). Also, drop the "Date_muted"
column in the muted topics section of the personal settings
on ml_min (425px or less).

Added new className "topic_date_muted" for the date_muted
column, and "bot_type" for the bot_type column, to hide them
using display none when the viewport is small.

Fixes: #24320
2023-03-01 15:42:15 -08:00
Ganesh Pawar 5a5203144d modal: Make the modal content scrollable instead of the whole modal.
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
2023-03-01 15:36:29 -08:00
Ganesh Pawar 6e19fe0ad1 Remove `overflow: visible` for `move_topic_modal`.
It was added in 85fc8d5472 to prevent
the dropdown list widget from being clipped off due to overflow.
This is not needed now since the `dropdown-menu` has a
`position: fixed` property which avoids it from being clipped off.
2023-03-01 15:36:29 -08:00
Hardik Dharmani ac01e3ee51 stream-settings: Fix long stream names abbreviated too early.
Make .stream-header div a flex container and adjust max-width
of .sub-stream-name to take up 100% of available space.
Add 1rem margin-left to .button-group for spacing.

Fixes: #24507
2023-03-01 11:54:31 -08:00
Daniil Fadeev ae089da9cb poll_widget: Make the poll-vote button the top layer.
Fixes #24409.
2023-02-28 16:53:49 -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
Ganesh Pawar 537617b46d invite_user: Convert overlay to `dialog_widget`.
Fixes #22957.
2023-02-26 18:37:05 -08:00
Aman Agrawal b0d9b319e3 message_row: Allow time row to expand if it needs more width.
While setting a min-width according to the current width, we allow
the time column to expand if the translated `AM/PM` time needs
more width.
2023-02-26 17:05: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
Sahil Batra a862e686db modal: Do not use flex for all modal titles.
The "display: flex" property was added to ".modal__title"
element in 9e4aa19ac in #24194 to fix overlay of long
name in user profile modal (#23781).

Due to this change, the space between words in heading of
"Archive stream" modal is being removed.

This commit fixes it by adding "display: flex" only to the
title of user profile modal and not all the modals. The
heading in "Archive stream" modal is not perfect but there
is ongoing work to fix it and till then this commit changes
it to be the same as it was before adding flex property.

There is no major change in other modals, except that the
space between heading and help-link widget has increased
which was anyways the case before adding the flex property
and that can be modified later if we want to.
2023-02-24 09:13:09 -08:00
Palash Baderia d8adc6de1c personal_settings: Add deactivate organization button for organization.
Added a 'Deactivate Organization' button inside the
'Personal Settings > Account & Privacy'. This button only appears
when the organization owner is the only user present. To verify this,
I used the 'get_active_human_count' function from the 'people.js'.

To remove duplication, a function has been created inside settings_org
file to handle the click event for the two buttons present inside
personal_settings and organization_settings that perform the same
action of deactivating organization. The click handler is defined in
the click_handlers.js file, which calls the dialog for deactivating
the organization. Previously, the error used to appear at the top of
the organization_settings, but now it appears inside the dialog box
itself.

To remove the duplication of two buttons having the same IDs,changed
the Id `deactivate_realm_button` to a className.

Fixes: #24105
2023-02-23 18:17:28 -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