From 7cdf6c24956dc3e16126dd479e74440dee4285b6 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 23 Jan 2017 10:34:08 +0000 Subject: [PATCH] Fix status counter in old IE versions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We use flexbox to lay out the counts of sending/delivered/failed on the activity and job pages. flexbox makes the best use of the space when the numbers can be significantly different widths (eg 0 sending, 5000 delivered). Flexbox was only supported from IE 11 onwards [1]. And since we were setting the `display` property of the individual numbers to `block` they were rendering one-per-line on browsers that don’t support flexbox. This commit changes these items to be floated and a predefined width. In browsers that support it, flexbox seems to override these hard-coded widths. It’s not quite as good as the flexbox solution because: - it doesn’t adjust the widths in the nice way that flexbox does - it’s hard-coded to expect 4 items (we don’t have this component with any other number of items at the moment, so it won’t actually break anything) But it’s pretty much OK because: - it’s a lot better than the before - IE 8 and 9 combined only make up 5% of our users, and this will be a declining number - polyfilling flexbox would mean using Javascript, and we don’t serve working Javacript to IE 8 users anyway 1. http://caniuse.com/#feat=flexbox --- app/assets/stylesheets/components/pill.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss index 3b04ed497..224a56d98 100644 --- a/app/assets/stylesheets/components/pill.scss +++ b/app/assets/stylesheets/components/pill.scss @@ -5,6 +5,9 @@ a, span { display: block; + width: 25%; + box-sizing: border-box; + float: left; padding: 10px; flex-grow: 1; text-align: left;