Commit Graph

3126 Commits

Author SHA1 Message Date
m-e-l-u-h-a-n 03e4ccbc2d message-view: Increase spacing for lists coming after paragraphs.
Lists that were followed by a paragraph (i.e. our p+ul, p+ol CSS rule)
in messages had negative top margin of -3px.  Adjusting the margin
here is important, because the default styling would result in an
excessive gap that made bulleted lists weirdly far from the previous
paragraph.  See #12113 for background.

However, the -3px negative margin was so large that it reduced spaces
between paragraph and lists, such that there was too little visible
separation between the two.  We fix this by going with a 0px
margin-top instead.

This has been tested for various structures of messages:
1. text + bulleted list
2. bulleted list + unbulleted list(or two lists)
3. only list.

And it looks good in all cases.

Fixes #17284.
2021-02-16 08:56:26 -08:00
Suyash Vardhan Mathur 05928bbdee api docs: Change font size for code and response blocks.
The code blocks and response blocks had small and unreadable font,
because they were using the bootstrap defaults without adjustment for
the size of content on the rest of the page.  Fixes part of
zulip#15967.
2021-02-16 08:22:35 -08:00
Suyash Vardhan Mathur c9c40d4fd2 api docs: Cleaned up CSS for parameter classes.
Deduplicated CSS classes of data types of response and
request parameters in API Documentation to use a single
class.
2021-02-09 10:31:36 -08:00
Suyash Vardhan Mathur 26a81ab3aa api docs: Display data type of responses in API Documentation.
Previously, the data type of responses wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation. Here we add a recursive function to
render the data types visibly in API Documentation.
Fixes part of #15967.
2021-02-05 10:41:42 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal 1b34f689a6 settings: Use sm_max for adjusting settings for small width devices. 2021-01-25 14:49:32 -08:00
Aman Agrawal 65db0aeb98 settings: Use 425px as breakpoint for seperating api key buttons. 2021-01-25 14:49:32 -08:00
Aman Agrawal e4389b7562 settings: Remove dead code.
This code has no effect on the checkbox in settings overlay.
2021-01-25 14:49:32 -08:00
Aman Agrawal b38dc0a48b user_status: Expand to full width on mobile like width devices.
Use 424px as a breakpoint vs 384px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 705fd50e9e feedback_container: Expand to almost full width below 767px.
Remove css clutter.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1374d556da css: Use a min width for main app containers below mm (375px) widths. 2021-01-25 14:49:32 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal c287377512 css: Replace 575px with it's variable sm-max. 2021-01-25 14:49:32 -08:00
Aman Agrawal d9b60e63cf media_breakpoints: Use ms-min var for 320px. 2021-01-25 14:49:32 -08:00
Aman Agrawal 6fc71194c8 lightbox: Show compact view at 767px instead of 736px.
No regression is possible since are just doing adjustments to
make this view compact at a higher width.
2021-01-25 14:49:32 -08:00
Aman Agrawal e2130b944d compose: Adjust compose box for mobile at 374px vs 370px.
Since the change in breakpoint is minor no regression is seen.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1e56db447c settings: Show bots info at full width at less than 991px.
Since the bots list breaks at 625px with left col of settings
hidden and at  850px with left col of settings visible
without this media query,
having this media query trigger at 991px shouldn't produce
any problems.
2021-01-25 14:49:32 -08:00
Aman Agrawal 89b5245d3c css: Replace 767px with it's variable md-max. 2021-01-25 14:49:32 -08:00
Aman Agrawal 17f34bdfbf rendered_markdown: Use 575px instead of 600px for breakpoint.
This media query changes the how embedded messages is displayed
on small screens. Changing breakpoint to 575px offers similar
experience.
2021-01-25 14:49:32 -08:00
Aman Agrawal 500f02e796 subscriptions_overlay: Justify stream filters at 991px vs 1033px.
This media query aligns filter buttons on tablets. Since tablets
range are usually less than 991px in width, this breakpoint makes
more sense. Also, the filter buttons looks nice between 1033px
and 991px.
2021-01-25 14:49:32 -08:00
Aman Agrawal d71ea084e0 settings: Use 767px as breakpoint for single col mode.
Since we are increasing breakpoint from 750px to 767px, there
is no regression. Visually, no difference is perceived.
2021-01-25 14:49:32 -08:00
Aman Agrawal 3d95078117 settings: Move user avatar below at 991px instead of 953px.
Since we are increasing the breakpoint width, the is no
regression possible.
2021-01-25 14:49:32 -08:00
Aman Agrawal 92cd856848 subscriptions_overlay: Use 991px as breakpoint for smaller devices.
Instead of adjusting the width of settings container at
1130px, we adjust it at 991px which is the standard for smaller
screens. Adjusting it 1200px(xl) didn't make sense, so the
next reasonable breakpoint was used.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac402428ed recent_topics: Use 767px for 750px as breakpoint for hiding columns.
There is no breaking change, just standardizing breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal e404fea055 popovers: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable here.
2021-01-25 14:49:32 -08:00
Aman Agrawal a9be2f4067 recent_topics: Expand width at 767px instead of 700px.
This looks nice and doesn't break anything.
2021-01-25 14:49:32 -08:00
Aman Agrawal d074b8b1f0 informational_overlays: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable.
2021-01-25 14:49:32 -08:00
Aman Agrawal 67dd54445f drafts: Expand width at 757px instead of 700px.
This is to standardize the media breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal 9e1eb25199 alerts: Reduce width to 80% at 991px (lg-max) instead of 900px.
Since alert-box has size of 900px on large devices, we had to
reduce its size for devices less than 900px. Setting this
breakpoint to 991px, shouldn't break anything.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac09572317 media_query: Use 575px instead of 500px to reduce spacing.
At 575px, we used to reduce spacing for
all components around webapp.

This is basically the standard breakpoint for mobile devices.
2021-01-25 14:49:32 -08:00
Aman Agrawal a55128721b search_pills: Use 575px instead of 500px as breakpoint for mobile.
The changes were not live tested since search pill is not enabled.

However, this should look fine since the properties changed
were not depended upon 500px.
2021-01-25 14:49:32 -08:00
Aman Agrawal ddf5ee9d38 compose: Use 575px instead of 551px as breakpoint for mobile.
This was tested to be working fine. Since display property
doesn't depend upon 551px, no regressions are possible.
2021-01-25 14:49:32 -08:00
Aman Agrawal e941ee4a15 media_query: Use 767px instead of 775px as md breakpoint.
We use 767px for hiding left column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 775px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 5a8150e34b media_query: Use 1199px instead of 1165px as xl breakpoint.
We use 1199px for hiding right column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 1165px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 677f5e961a subscriptions: Remove dead code for hiding stream description.
This code was intended to hide the stream description on stream
settings overlay on display <350px; but, the css selector for
should be `.stream-row` instead of `.stream_row`. Anyway, the
overlay looks fine on small devices with stream description.
Hence, we just remove this dead code.
2021-01-25 14:49:32 -08:00
Suyash Vardhan Mathur f4cf5166bb api docs: Display data type of parameters in API documentation.
Previously, the data type of parameters wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation.  Here we add a recursive function to
render the data types visibly in the API documentation.

This only covers the request parameters; we'll want to do something
similar for response parameters in a follow-up PR.

Fixes part of #15967.
2021-01-21 15:56:07 -08:00
Aman Agrawal 84a7e9f837 subscriptions_overlay: Show buttons in next line as block at <576px.
When we switch subscription overlay from two column to one
column overlay, we also set stream buttons to show in next line.

575px because it the breakpoint used by bootstrap 4 for small
screens.
2021-01-19 17:49:10 -08:00
Aman Agrawal 9b23e540df message_edit: Stop stream_header_colorblock from overlapping others. 2021-01-17 11:07:32 -08:00
Anders Kaseorg 93101c953f alerts: Prevent icons from spilling out of alerts.
Fixes #16911.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-12-30 07:55:29 -08:00
Aman Agrawal 62d721e859 docs: Remove HipChat migration guide.
As of Feb 15th 2019, Hipchat Cloud and Stride
have reached End Of Life and are no longer
supported by Atlassian. Since it is almost 2 years
now we can remove the migration guides.
2020-12-23 15:43:13 +05:30
Pranav Joglekar 089af801fb
ui: Make the set status modal mobile responsive.
The set status modal to add/remove/update user status was not
visible properly on devices with a small width. This commit fixes
the issue by adding appropriate media queries to the css to make
the modal mobile responsive.

Fixes part of #16817.
2020-12-18 12:45:14 -08:00
Vishnu KS 4b99f9e407 support: Fix styling of plan details.
The vertical allignment of billing method and downgrade plan
went a bit off in 41cb047645

This commit should fix the allignment.
2020-12-17 17:09:20 -08:00
Siddharth Asthana 6f962c1815 support: Add ability to change subdomain of realms. 2020-12-06 00:48:10 -08:00
Vishnu KS bae9dc5f2f billing: Use name selector for overriding the spin button for license input. 2020-11-06 09:59:33 -08:00
Kamal Marhubi 9c176bc0fa markdown: Remove border colour on inline code links
The visual noise from the blue border has bothered me forever and I
finally decided to do something about it. I don't know if this is the
best solution, but I do think it's a lot better than the status quo!
2020-11-05 09:32:05 -08:00
YashRE42 79d077135e navbar: Remove :not() text-overflow selector.
Here we change from using clip to using ellipses on stream name.
2020-11-03 16:54:09 -08:00
YashRE42 af221526f2 navbar: Remove unnecessary :not() selector.
Replace not selector with equivalent properties.
2020-11-03 16:54:09 -08:00
YashRE42 4c0b7f9e9b messsage_view_header: Remove flex set via :not().
This did not server any purpose.
2020-11-03 16:54:09 -08:00
YashRE42 967efc32d2 widgets: Remove tictactoe example widget.
Steve asked me to remove this, since the tictactoe game was always
intended as a proof of concept. Now that we have poll and todo
widgets, the sample code for tictactoe has much less value.

We replace the content and type in test_widgets.py to maintain
coverage.
2020-11-03 14:46:39 -08:00
Aman Agrawal 190af58d18 subscription_settings: Fix subscriber search box width.
These properties were causing the search box to have a very small
width. Removing it returns search box to normal width.
2020-11-02 16:30:57 -08:00
aniketsonu 28aaf24a61 invite: Add Copy-to-Clipboard button for multiuse links.
A convenient copy-to-clipboard button was added in the Invite users to
Zulip modal, to make it slightly more convenient to share the
generated links.

The formatting is extracted to a template to make i18n and variable
substitution simpler.

Tweaked by tabbott significantly to simplify JS, HTML, and CSS.

Fixes #16442.
2020-11-02 15:34:50 -08:00
Aman Agrawal 7d21f574b7 subscriptions_overlay: Increase line height of stream name.
This stop some part of stream name from being hidden.
2020-11-02 12:15:33 -08:00
Aman Agrawal aa5a032087 subscriptions_overlay: Stop button from overflowing out of view.
This media query makes the buttons overflow out of view and are
not visible for large stream names.
2020-11-02 12:13:12 -08:00
Aman Agrawal a144f56a00 compose: Remove breaking css property.
When compose box is open we already set
```
    $(".new_message_textarea").css("min-height", "3em");
```
in compose_actions.js.

So, this property actually reduces the min-height slightly which
hides the topic when it is long enough to span in two lines.
2020-11-02 12:10:36 -08:00
Aman Agrawal a26c0b6584 compose: Remove unused css property.
This property never gets used and is not necessary since it
is overridden by
```
        .button.small {
            font-size: 1em;
            padding: 3px 10px;
        }

```
in compose.css

which looks good enough.
2020-11-02 12:10:36 -08:00
Aman Agrawal e7a5588cb3 drafts: Remove unused css property.
Since width of drafts-container is set to 58% above, this
property never gets used.
2020-11-02 12:09:34 -08:00
Aman Agrawal 93e99d0ebd settings: Remove unused css property.
There is no sidebar-bottom-anchor in our codebase, because it was
removed in 96caebf38f.
2020-11-02 12:07:30 -08:00
Anders Kaseorg b98434682e styles: Convert [readonly] selector to :read-only pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
Anders Kaseorg 192f1eb0fc styles: Convert [disabled] selectors to :disabled pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
aryanshridhar c591141d7c popover: Fixed color-picker popover responsiveness.
Color-picker overflows the screen width when an user
attempts to change color of the stream in small devices.

Fixed by making it fullscreen in narrow devices.

Fixes #16477
2020-10-29 16:56:02 -07:00
Anders Kaseorg 72d6ff3c3b docs: Fix more capitalization issues.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-23 11:46:55 -07:00
sahil839 1d5aa2e514 settings_org: Add frontend to change wildcard_mention_policy.
We add dropdown for wildcard_mention_policy in organization
permissions page.
2020-10-22 15:00:27 -07:00
YashRE42 e344ea25f8 landing-page: Rename to landing_page.css. 2020-10-19 11:50:39 -07:00
YashRE42 ab67232904 portico-signin: Rename to portico_signin.css. 2020-10-19 11:50:39 -07:00
YashRE42 7ee3484b7b portico-styles: Rename to portico_styles.css. 2020-10-19 11:50:39 -07:00
YashRE42 51f82ad839 right_sidebar: Rename .css file to right_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.right_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00
YashRE42 bd72ba76f3 left-sidebar: Rename .css file to left_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.left_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00
YashRE42 46a74d3e08 informational-overlays: Rename .css file to informational_overlays.
This changes the file name to existing conventions, it does not,
however, change the actual `.informational-overlay` tag used in the
app.
2020-10-18 14:09:47 -07:00
Aman Agrawal 1e5873df9e text-error-css: Use same color as used by bootstrap for text-error. 2020-10-18 14:06:20 -07:00
Aman Agrawal 1849ca41d2 login: Top right align error message.
Fixes the alignment issues and this better indicates the field to
which error message belongs to.
2020-10-18 14:06:20 -07:00
Aman Agrawal 8297121050 Revert "login: Fix alignment of error message in login form."
This reverts commit 6fe82620df.

Reverted since this misaligns other forms which use the same
class.
2020-10-18 14:06:20 -07:00
Sumanth V Rao 264bf1fc2a css: Hide bottom-right resizable box in view-source textarea. 2020-10-08 17:13:50 -07:00
Sumanth V Rao adfe4cacc6 css: Add vertical scrollbar styling for view-source textarea.
This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
2020-10-08 17:13:50 -07:00
Sumanth V Rao ab9a011f89 css: Modify button styling to adjust for svg size change.
This builds on the previous commit and adds final touches to
both the button positioning and style.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 792029cbb8 css: Refactor copy_message button to use copy_button_base class styling.
Z-index is added to the base class. This doesn't affect copy_code_button
in any way.

Attributes dropped/changed:
    - background-color
    - Base class on-hover property is now used.
    - height, width, padding is now the base classes.

We can also remove the TODO now.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 26ff6db751 css: Extract copy_button_base from copy_codeblock class.
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
2020-10-08 17:13:50 -07:00
Aman Agrawal c7d66421f9 sidebars: Fill search boxes to full width.
After our bootstrap upgrade, search boxes were not full width on
when sidebars acted as popovers on small widths.
2020-10-08 17:03:56 -07:00
Aman Agrawal 6fe82620df login: Fix alignment of error message in login form. 2020-10-07 16:18:54 -07:00
Gittenburg 55a67ee7c5 message_edit: Display Formatting button as "Help".
Match the compose change b245e1e49a.
2020-10-02 14:54:14 -07:00
Aman Agrawal ff5d00890c new-style-checkbox: Set to cursor to not-allowed when disabled. 2020-10-01 17:45:11 -07:00
Aman Agrawal f6e42d3c28 msg_edit: Don't show checkbox label in next line. 2020-10-01 17:45:11 -07:00
Aman Agrawal 07bba28889 settings-dropdown: Use bootstrap styling on hover.
For dropdown elements, use bootstrap styling. The styling
was not applied by default from bootstrap since we
use a combination of dropdown + simplebar for this element.
This doesn't match the expected structure of elements by
bootstrap since simplebar inserts elements of its own.

The style is same as in bootstrap v2.3.2 for
.dropdown-menu > li > a.
2020-09-30 17:45:53 -07:00
Sumanth V Rao 918b1ea61d css: Add styling for code_external_link hyperlink.
In case of previews, we tweak the positioning a bit more
to the right.

The previous styling also had the focus-within action
which isn't needed here as hovering over the codeblock
is enough to display both the icons.
2020-09-28 16:04:54 -07:00
Vishnu KS 510efbc1a8 support: Add option to change billing method. 2020-09-28 15:37:49 -07:00
Vishnu KS 3e438538b4 support: Add support for downgrading realm. 2020-09-28 15:37:49 -07:00
Gittenburg b245e1e49a compose: Display Formatting button as "Help".
The Formatting button that opens our Markdown help popover previously
had an "A" as its icon (the Font Awesome icon for font). This commit
changes the link to spell out "Help" to make it more discoverable.
2020-09-25 16:47:44 -07:00
Gittenburg 0c6df114f6 compose: Reorder message action buttons.
Now that they are tab accessible, we should order them by importance.
Previously the order was:

1. Add emoji
2. Formatting
3. Attach files
4. Add video call
5. Preview
6. Drafts

This commit changes the order to:

1. Attach files
2. Preview
3. Add video call
4. Add emoji
5. Drafts
6. Formatting

The "Add emoji" button is moved back because emojis can be more
conveniently entered using the typeahead triggered with ":" or the
emoticon conversions.
2020-09-25 16:47:43 -07:00
Gittenburg 6e95809cc4 emoji_picker: Fix search input length.
This was probably a regression from our upgrade to bootstrap 2.3.2.
2020-09-23 11:33:27 -07:00
sahil839 7525642507 popover: Show normal popover instead of extended profile one for bot owner.
We should show normal popover instead of extended profile one for the bot
owner in bots section of organization settings.

A new function show_user_info_popover is added, as it makes sense to keep
it separated from the function used to open popover for sender of a
message, which uses the message from which the popover is opened.
This added function can further be used for showing popover for
"invited_by" in invites table.
2020-09-22 15:42:53 -07:00
Amitsinghyadav a72e9476ee api_docs: Add fragment references for all parameters.
This makes it convenient to link to a specific parameter accepted by
Zulip API endpoint.
2020-09-21 12:18:10 -07:00
Ryan Rehman d6fce41800 stream edit: Update stream subscription info text.
This changes the success text of the `subscriber_list_add`
form to display the subscribed and already subscribed users
on success. We also display the user profile as a popover.

Previously we would only display the email ids of the already
subscribed users.

Formatting tweaked by tabbott.
2020-09-18 16:53:01 -07:00
Aman Agrawal ef19e4870d css: Don't use `Monaco` font for <code>.
bootstrap sets <code> to use `Monaco` font by default. We don't
want to use this font since some characters are not clearly
readable like `()` appearing as `0`.

Hence, we use Menlo font by default if available.

Since `Monaco` font is only installed in macOS by default, this
mostly affected mac users.
2020-09-18 11:35:13 -07:00
Aman Agrawal 2befc007cf landing-page: Don't transition all li elements.
This looks weird and shouldn't be present in the first place.
2020-09-16 10:29:23 -07:00
Anders Kaseorg a3d26d701e styles: Rename .scss files back to .css.
css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00
Anders Kaseorg 7492656b92 styles: Reference images through Webpack.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-15 16:33:28 -07:00
Aman Agrawal 22665414fe landing-page: Fix carousel indicators alignment.
Reset to bootstrap v2.3.2 moved the indicators to top right, we
change it back to its previous location in this commit.
2020-09-02 10:59:22 -07:00
Aman Agrawal 2de98ab6e1 settings: Don't use css classes starting with `icon`.
Fixes #16252.

icon* classes are used by bootstrap for displaying glyphicons.
We removed these classes in our custom version of bootstrap 2.1.1;
but since our reset to v2.3.2, they have been added again and hence
any classes starting with icon* in zulip will have to be renamed.
2020-09-01 10:56:02 -07:00
Priyansh Garg 8dd29f4e99 portico: Improve error messages display on registration page.
Improves the display of error messages on registration page fixing
mis-positioning of error messages and overlapping with other text
in some cases.

Part of: #15750.
2020-08-31 22:12:03 -07:00
Sankalp 437332ff5d
css: Fix horizontal scrolling of markdown table when overflow.
Previously Zulip's markdown tables didn't properly configure the overflow CSS rules
to allow proper scrolling.

Fixes #16205.
2020-08-31 18:44:14 -07:00
Ryan Rehman 16ebf56fd7 ui: Add loading spinner for Move Topic popover.
We display a centered spinner and hide the Submit / Cancel
buttons in the Move Topic modal similar to what is done in
the Deleting messages modal.

This commit also makes a change where we now close the modal
after success/failure response of the second request instead
of the first.
2020-08-31 16:51:49 -07:00