From c63313e839832911df57261904a3a5092c56852f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Fri, 3 Sep 2021 16:00:00 +0100 Subject: [PATCH 1/3] Give WebAuthn illustration a fixed size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The browser uses the `width` and `height` attributes of the image tag to allocate space on the page for the image. If these aren’t provided then the browser will assume the image takes up no space, until it’s downloaded it and had a look at what the file’s dimensions are. This causes the layout of the page to jump once the image downloads. `149 × 150px` is the native size of the image. But we don’t want it to display at that size, so this commit also adds some extra CSS which keeps it looking the same, namely: - the full width of the 1/4 page column on desktop - the full width of the column minus a `40px` gutter either side on mobile (by using `box-sizing: border-box` the `40px` of padding is subtracted from the 100% width, rather than added to it) --- app/assets/stylesheets/views/webauthn.scss | 5 ++++- app/templates/views/two-factor-webauthn.html | 2 +- app/templates/views/user-profile/security-keys.html | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss index 7f47049b0..2afc6e3fc 100644 --- a/app/assets/stylesheets/views/webauthn.scss +++ b/app/assets/stylesheets/views/webauthn.scss @@ -27,9 +27,12 @@ .webauthn-illustration { @include media-down(mobile) { - margin: govuk-spacing(6) govuk-spacing(9) 0 govuk-spacing(9); + box-sizing: border-box; + margin: govuk-spacing(6) auto 0 auto; + padding: 0 govuk-spacing(9) 0 govuk-spacing(9); } + width: 100%; margin: govuk-spacing(9) auto 0 auto; } diff --git a/app/templates/views/two-factor-webauthn.html b/app/templates/views/two-factor-webauthn.html index fe311c3e8..08bfb63b7 100644 --- a/app/templates/views/two-factor-webauthn.html +++ b/app/templates/views/two-factor-webauthn.html @@ -65,7 +65,7 @@ }) }}
- +
{% endblock %} diff --git a/app/templates/views/user-profile/security-keys.html b/app/templates/views/user-profile/security-keys.html index 3026156a4..612a9d8ee 100644 --- a/app/templates/views/user-profile/security-keys.html +++ b/app/templates/views/user-profile/security-keys.html @@ -99,7 +99,7 @@ {{ webauthn_button }}
- + >
{% endif %} From eee4cdd0a7b61ce30021720092599f9283ed4512 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 30 Sep 2021 14:18:27 +0100 Subject: [PATCH 2/3] Rewrite media queries to be mobile-first Also adds height: 100% which forces the SVG to scale, rather than just setting width which widens the viewbox. --- app/assets/stylesheets/views/webauthn.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss index 2afc6e3fc..dd68a2ed7 100644 --- a/app/assets/stylesheets/views/webauthn.scss +++ b/app/assets/stylesheets/views/webauthn.scss @@ -26,13 +26,15 @@ .webauthn-illustration { - @include media-down(mobile) { - box-sizing: border-box; - margin: govuk-spacing(6) auto 0 auto; - padding: 0 govuk-spacing(9) 0 govuk-spacing(9); + @include govuk-media-query($from: tablet) { + margin: govuk-spacing(9) auto 0 auto; + padding: 0; } + box-sizing: border-box; width: 100%; - margin: govuk-spacing(9) auto 0 auto; + height: 100%; + margin: govuk-spacing(6) auto 0 auto; + padding: 0 govuk-spacing(9) 0 govuk-spacing(9); } From 975088308a4763ce749425fc1b3cc68bd7e8acbc Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 30 Sep 2021 15:07:22 +0100 Subject: [PATCH 3/3] Put media query after default CSS Specificity means that the media query will always override, but this is more obvious with the order this way around. --- app/assets/stylesheets/views/webauthn.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/views/webauthn.scss b/app/assets/stylesheets/views/webauthn.scss index dd68a2ed7..33d1ee24e 100644 --- a/app/assets/stylesheets/views/webauthn.scss +++ b/app/assets/stylesheets/views/webauthn.scss @@ -26,15 +26,15 @@ .webauthn-illustration { - @include govuk-media-query($from: tablet) { - margin: govuk-spacing(9) auto 0 auto; - padding: 0; - } - box-sizing: border-box; width: 100%; height: 100%; margin: govuk-spacing(6) auto 0 auto; padding: 0 govuk-spacing(9) 0 govuk-spacing(9); + @include govuk-media-query($from: tablet) { + margin: govuk-spacing(9) auto 0 auto; + padding: 0; + } + }