Commit Graph

531 Commits

Author SHA1 Message Date
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 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 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 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
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
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
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
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 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
Gittenburg 55a67ee7c5 message_edit: Display Formatting button as "Help".
Match the compose change b245e1e49a.
2020-10-02 14:54:14 -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 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
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
Armaan Ahluwalia 5f7b47e20c css: Transition 'app.css' to SCSS.
This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.

To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template

Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.
2018-05-02 17:13:16 -07:00
Yashashvi Dave 7bbe44d7a0 org settings: Remove "Delete streams" administrative tab from settings.
Fixes #9227
2018-04-30 17:47:34 +05:30
Tim Abbott d1cc442404 compose: Move colorblock CSS to compose.css. 2018-04-19 22:51:25 -07:00
Cynthia Lin f1db3a681a compose: Refactor compose box from `<table>` to `<div>` structure.
`<td>` elements are fixed-width, so we refactor the entire
`<table>` structure for responsive design.

This fixes a bug with how the `To:` block looks in other languages.

Fixes #9152.
2018-04-19 22:51:13 -07:00
Tim Abbott 636390104a css: Fix glitchy white line in recipient headers.
The intent had always been for this to be just a color change; a white
boundary didn't look good for either the day or night theme.
2018-04-16 13:37:21 -07:00
novokrest 0d164fab1b message_edit_form: Show default cursor instead of pointer.
Fixes part of #3938.

(This only changes the sections within the message-edit form; the top
and left chrome are still cursor: pointer).
2018-04-12 15:08:38 -07:00
guaca a19daf0ab2 Settings: Fix vertical spacing.
Removed the top margin of input-group css
 to prevent the double margins. Also fixed the
 default-language positioning, and maintained
margin consistency in organization settings.

Fixes #8890.
2018-04-12 09:38:24 -07:00
Marco Burstein 7c66d11781 compose: Show avatars for people in typeahead autocompletes.
`@everone` and `@all` will have a megaphone icon from FontAwesome in
place of the avatar.

Also, fix the `composebox_typeahead` tests to account for the images.

Fix #6635.
2018-04-09 15:47:11 -07:00
Aastha Gupta f900f955c0 message edit: show spinner on topic change.
On clicking the checkbox in topic edit form, display a spinner and
hide the cancel icon.  Also, do not display any success message.

Fixes #8793.
2018-03-23 07:21:22 -07:00
Shubham Dhama 8f4523e8dd compose typeahead: Add all public streams including unsubscribed streams.
This makes it convenient to mention a stream you're not subscribed to,
which can be useful for communicating about where a topic is
discussed, for example.

Fixes: #5757.
2018-03-14 11:10:43 -07:00
Tim Abbott 4ae1418831 popovers: Rename confusing my_email to user_popover_email. 2018-03-12 12:24:50 -07:00
Priyank Patel 29c6d23043 user profiles: Add copy-to-clipboard btn for long emails.
Implements copy to clipboard btn that shows up if email is too long.
Making it easier for user to copy long emails.
2018-03-12 12:06:40 -07:00
YJDave f46d925208 org settings: Fix issue, loading spinners are not visible.
In org settings, loading spinners are not visible, currently
because their size is very small.

Fix this, by increasing width and height of spinners and
adding spinner text, to make spinners more visible.
Fixes #8502
2018-03-07 13:34:50 -08:00
Xavier Cooney 769052d9c7 css: Allow the bot API key to be selected on all browsers.
The problem that prompted this PR is that I couldn't select the API
key of a bot in chrome to copy it, but I could on Firefox.

Using the `auto` proerty value to override the `user-select`
property  of a parent does not seem to be compatible
with all browsers.
2018-03-06 12:55:53 -08:00
Vaida Plankyte 80ff3d8da5 frontend: Reduce opacity of hotkey hints.
This helps these draw a bit less attention.
2018-02-19 11:53:37 -08:00
Brock Whittaker d30a6c64c3 Revert "Make recipient bar styling more compact and clean."
This reverts commit 8e2d9b8f68.

This adds the arrows back to the recipient bars because even though
it's not our end state, it looks better than the boxy design that we
had in between.
2018-02-16 11:55:00 -08:00
Brock Whittaker 06f3cb2b78 message-feed: Add some styling to open graph previews.
This adds some styling to make the open graph previews look a bit nicer,
including:

1. Adding a bottom fading gradient to slowly fade out text that is out
of bounds rather than chopping it off.
2. Using font anti-aliasing to make the characters appear smoother.
3. Increasing the font size of the title to give it prominence.
4. Changing the height to 80px from 70px.
2018-02-05 16:27:31 -08:00
Brock Whittaker 1a93cd4ffe panels: Give admins a red warning banner when email isn't configured.
Also refactor the "panels"/banner code to be a bit clearer about how
it's supposed to generically work, using [data-process] as a uniquely
identifying marker.

Fixes: #8166.

[greg: rebased and squashed a series of fixup commits.]
2018-02-05 16:00:52 -08:00
Brock Whittaker c129bba1af informational-overlays: Move CSS => informational-overlays.css.
This moves the CSS to a specialized stylesheet and adds a custom class ".hotkeys_full_table".
2018-01-27 15:20:12 -08:00
YJDave 2ca0fb4128 user setting: Move password change flow in UI into modal.
Thanks to @brokwhittaker for his significant chagnes in
password modal design.
2018-01-23 14:40:47 -05:00
Aditya Bansal 7d8d7f7f9b reminders: Add alert message for set reminder success or failure. 2018-01-19 11:33:11 -05:00
Brock Whittaker 842afd1821 dark-mode: Make alert words compatible.
The alert word highlighting is too light to work with the font
when it is white, so this changes it to have a translucent background
so that the color adjusts to be more visible on a darker background.

This is originally taken from #7844 and is a modification of the
solution in #7847.

The reason this approach is better for the codebase is now there is
only one color to change for alert words which reduces the likelihood
that someone in the future will change the color of one theme's
alert words and not the other.

Fixes: #7844.
2018-01-11 17:24:41 -08:00
Andy Perez c209069fcd bugdown: Improve image inlining logic.
Fix #7537
2018-01-09 16:43:22 -05:00
cPhost 97c3d5fce3 user profiles: add tooltip for too long email. 2017-12-13 14:20:18 -06:00
Balaji2198 c54c40eecd refactor: Remove obsolete .sidebar-nav. 2017-12-13 14:17:41 -06:00
Balaji2198 e9ae14c968 refactor: Remove obsolete .position-relative. 2017-12-13 14:17:41 -06:00
Balaji2198 7b91668ef4 refactor: Remove obsolete .messagebox-bottom-colorblock. 2017-12-13 14:17:41 -06:00
Balaji2198 b9c784bd7f refactor: Remove obsolete .messagebox-bottom.
This is an obsolete css class in zulip.css.
2017-12-13 14:17:41 -06:00
Balaji2198 6f7574ce19 refactor: Remove obsolete .message-right.
This is an obsolote css class in zulip.css.
2017-12-13 14:17:41 -06:00