Commit Graph

20 Commits

Author SHA1 Message Date
Anders Kaseorg d84727ce7f styles: Use Source Code Pro as our monospace font.
Fixes #15993.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
Anders Kaseorg 6a877890b8 Revert "css: Fix webapp alert styling incorrectly applying to portico."
This reverts commit 85b3157b47.

This broke the × button on Blueslip alert boxes, because @extend does
not work across different PostCSS compilation units.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-01 15:25:23 -07:00
Tim Abbott 85b3157b47 css: Fix webapp alert styling incorrectly applying to portico.
In a00f5dd90e, we needed to move the
`alert-box` styles from alerts.css to be visible in portico pages.
However, when doing so, we incorrectly moved all of alerts.css, which
also has styles for `alert` and` alert-error` designed to make it
convenient to include hidden elements for potential errors in the
webapp settings UIs directly in the HTML template (and then use
show/hide to manage them).

We fix this by moving just the alert-box scope to the common
components.css module, which is designed as the place for styles
shared between the webapp and portico pages.

This fixes an issue where the error messages for wrong password and
the like were invisible :(.
2021-03-31 10:06:40 -07: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 f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 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
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
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
Tim Abbott 4d55dc9db5 alerts: Fix z-index of alert panels to be above settings.
I noticed that our nice feature to show JavaScript errors collected by
blueslip in view of users was hidden in the background if you had one
of our settings screens open.

Further investigation determined the same was true for our other
panels.js alerts (e.g. the one for get_events failing, etc.).  This is
easily fixed by just raising the z-index of the alerts panels; I
tested and a variety of our possible alerts look good on top of stream
settings, so no need to do anything special here.

Fixes #8576.
2018-03-14 09:21:14 -07:00
YJDave c3a289b473 create stream: Add div element indicating stream creation result.
Add div element to inform user whether stream is successfully
created or not. This will help to inform user in case if current
user is not subscribed to created stream.
2018-03-09 18:09:38 -08:00
Steve Howell f35b7b4c77 css: Convert colors to hsl() format.
This changes most of the app-related CSS files, but leaves
things like landing pages and bootstrap alone.
2017-11-13 12:43:43 -08:00
Brock Whittaker b5db5c9703 Show javascript exceptions and `blueslip.error` in development.
This now shows `blueslip.error` and other JS exceptions in development
in the alert box at the top of the page.  Hopefully this will make it
a lot easier to notice newly introduced JS exceptions when working on
Zulip.

Tweaked by tabbott to handle all JS errors, not just blueslip.error.

Fixes: #6155.
2017-09-16 01:02:28 -07:00
Brock Whittaker 25e5a10a5b unicode: Replace "×" with HTML and HEX entities.
This refactors and fixes unicode issues where entities don't display
properly due to being a special character that seems to be rendered
incorrectly in a non-deterministic way every time.
2017-08-22 16:31:53 -07:00
Rishi Gupta 8b9929e771 alerts: Restyle alert banners.
Changes the background to be white, among other things.
2017-05-16 23:34:45 -07:00
Tim Abbott 6c9daf7c3b alerts: Clean up network error messages a bit. 2017-04-28 12:58:30 -07:00
Brock Whittaker c7cb20d873 alerts: Polish .alert-box .alert styling.
This polishes the styling on the alerts inside of the .alert-box to
have more appropriate colors, margins, and padding.
2017-04-28 12:50:04 -07:00
Abhijeet Kaur 8f88b045a4 Rename "Administration" to "Organization" in the settings UI.
This better sets expectatations for the fact that in Zulip, the
Organization settings UI is available read-only to non-administrator
users.

Tweaked by tabbott to update some additional references.
2017-04-07 17:32:56 -07:00
Tim Abbott 943a3b1cff alerts: Fix "Try Now" retry get_events button.
This has apparently been broken since we renamed get_updates to
get_events.
2017-04-03 16:22:05 -07:00
Brock Whittaker 34f9ccb87c alerts: Change sidebar alerts to be at top of the screen.
This changes the alerts to be individual boxes that slide down from
the top of the screen for a better UI experience.
2017-04-03 16:22:05 -07:00