From 7cdf6c24956dc3e16126dd479e74440dee4285b6 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 23 Jan 2017 10:34:08 +0000 Subject: [PATCH 1/2] 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; From 04c17ecfc074ee63ff6adad0548c59203f42838e Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 23 Jan 2017 10:58:13 +0000 Subject: [PATCH 2/2] Make vertical spacing CSS classes work with floats MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We have a bunch of helper classes (bottom gutter) which are used to vertically separate components on the page. This vertical spacing might get ignored if one of these containers contains floated items. This is because: > elements that contain floated items don't take those floated items > into account in calculating their height – https://css-tricks.com/containers-dont-clear-floats/ GOV.UK Frontend toolkit has a shim to prevent this from happening. https://github.com/alphagov/govuk_frontend_toolkit/blob/d15e738b92312028635acd6514c95a4799d47da4/stylesheets/_shims.scss#L38-L55 So this commit uses that shim to make the spacing consistent in older and newer browsers, irrespective of whether floats are being applied. This hasn’t been a problem because we’re not using a lot of `float` in Notify. But we are using it now to work around some other inconsistencies in old browsers. --- app/assets/stylesheets/_grids.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss index 9c03da0ee..8e59bede1 100644 --- a/app/assets/stylesheets/_grids.scss +++ b/app/assets/stylesheets/_grids.scss @@ -22,24 +22,30 @@ @include grid-column(7/8); } +%bottom-gutter, .bottom-gutter { + @extend %contain-floats; margin-bottom: $gutter; clear: both; } .bottom-gutter-2-3 { + @extend %bottom-gutter; margin-bottom: $gutter-two-thirds; } .bottom-gutter-1-2 { + @extend %bottom-gutter; margin-bottom: $gutter-half; } .bottom-gutter-3-2 { + @extend %bottom-gutter; margin-bottom: $gutter * 3/2; } .bottom-gutter-2 { + @extend %bottom-gutter; margin-bottom: $gutter * 2; }