paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: Use range context queries to eliminate *_max variables.

Browse Source 
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>
This commit is contained in:
Anders Kaseorg
2021-02-03 17:49:05 -08:00
committed by Tim Abbott
parent d679aa015d
commit 64b78ad992
27 changed files with 119 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/js/css_variables.js
View File

@@ -22,14 +22,5 @@ module.exports = {
ml_min: ml + "px",
mm_min: mm + "px",
ms_min: ms + "px",
xs_max: xs - 1 + "px",
sm_max: sm - 1 + "px",
md_max: md - 1 + "px",
lg_max: lg - 1 + "px",
xl_max: xl - 1 + "px",
ml_max: ml - 1 + "px",
mm_max: mm - 1 + "px",
ms_max: ms - 1 + "px",
},
};