Commit Graph

20 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 f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 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
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
Cynthia Lin 323e2faac8 css: Change `*-device-width` to `*-width` selectors.
See https://stackoverflow.com/questions/18500836/should-i-use-max-device-width-or-max-width
for an explanation on why this isn't optimal.
2018-04-21 22:15:56 -07:00
ihsavru a5be1fb109 lightbox: Fix responsiveness issues with image description.
Fixes #7789
2018-01-19 17:12:38 -08:00
Cynthia Lin b607d26f0a lightbox: Fix image metadata not displaying at full width when possible. 2017-11-24 09:21:31 -08:00
Cynthia Lin e071d27b6b lightbox: Fix text overflow of translated user interface.
Fixes #7469.
2017-11-22 09:56:30 -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
Steve Howell ba51078418 Simplify CSS linter and clean up CSS.
The CSS linter was pretty hard to reason about.  It was
pretty flexible about certain things, but then it would
prevent seemingly innocuous code from getting checked in.

This commit overhauls the pretty-printer to be more composable,
where every object in the AST knows how to render itself.  It
also cleans up a little bit of the pre_fluff/post_fluff logic
in the parser itself, so comments are more likely to be "attached"
to the AST node that make sense.

The linter is actually a bit more finicky about newlines, but
this is mostly a good thing, as most of the variations before
this commit were pretty arbitrary.
2017-11-13 12:43:43 -08:00
Brock Whittaker b6feac678b Remove all `font-weight: 500` instances.
Previously, the font-weight for 500 did not exist in our set, so
all of those examples defaulted to 400. This fixes them to stay
as they previously were by migrating them to a font weight of 400.
2017-08-28 15:01:53 -07:00
Brock Whittaker 8445f886d7 Add ability to pan and zoom lightbox images.
This adds the ability to pan and zoom lightbox images because they
are now converted to <canvas> elements.
2017-07-31 17:03:31 -07:00
Cory Lynch 1b2d44b016 lightbox.css: Replace RGB colors with HSL colors. 2017-06-21 07:02:57 -04:00
Shubham Dhama 9c5353cc3d lightbox: Remove the unwanted scrollbar from the image list.
Fixes: #5277.
2017-06-15 03:39:40 -07:00
Brock Whittaker a27f8f2f30 Fix up YouTube embed issues and styling.
This fixes the styling to stay on the screen of most reasonably sized
monitors along with extending the JavaScript code to allow for the
video to be keyed to in the lightbox.
2017-03-21 14:28:13 -07:00
Brock Whittaker 2775707a67 hotkeys: Add lightbox image feed with controls.
This adds an image feed that you can scroll through with hotkeys
in the lightbox.

The left and right arrow keys along with the left and right arrows
will go to the prev/next image, and clicking on an image will also
take a user to that image.
2017-03-19 22:11:38 -07:00
Brock Whittaker 24e2f31d3d Remove second background from #lighbox_overlay.
The child ".image-preview" has a background which is ordinarily
invisible (as it is the same color as the #lightbox_overlay bg,
however when fading in it is noticeable.
2017-03-19 12:43:10 -07:00
Tim Abbott f67e9a7e5e CSS: Rename #overlay to #lightbox_overlay. 2017-03-18 13:54:11 -07:00