darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 08:44:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change size and layout of cookie banner buttons

Browse Source
This commit is contained in:
Tom Byers
2020-01-09 16:21:12 +00:00
parent f8a51f0b3e
commit 24b65cf648
3 changed files with 27 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/assets/stylesheets/components/cookie-message.scss
View File

@@ -31,36 +31,48 @@
} }
.notify-cookie-banner__buttons { .notify-cookie-banner__buttons {
@include govuk-clearfix; display: flex;
flex-wrap: wrap;
@include govuk-media-query($from: tablet) { @include govuk-media-query($from: tablet) {
display: inline-block; flex-wrap: nowrap;
} }
} }
.notify-cookie-banner__button,
.notify-cookie-banner__link {
vertical-align: baseline;
}
.notify-cookie-banner__button { .notify-cookie-banner__button {
float: left; display: inline-block;
width: 50%; flex: 1 0;
box-sizing: border-box; padding-left: govuk-spacing(9);
padding-right: govuk-spacing(9);
margin-bottom: govuk-spacing(2);
@include govuk-media-query($from: tablet) { @include govuk-media-query($from: tablet) {
display: inline-block; flex: 0 0 150px;
float: none; padding-left: govuk-spacing(2);
width: auto; padding-right: govuk-spacing(2);
margin-bottom: govuk-spacing(1);
} }
} }
.notify-cookie-banner__button-accept { .notify-cookie-banner__button-accept {
padding-right: govuk-spacing(4); margin-right: govuk-spacing(4);
} }
.notify-cookie-banner__link { .notify-cookie-banner__link {
@include govuk-font(19); @include govuk-font(19);
line-height: 1;
display: block; display: block;
clear: both; width: 100%;
padding: 9px 0px 6px;
@include govuk-media-query($from: tablet) { @include govuk-media-query($from: tablet) {
display: inline-block; display: inline;
width: auto;
margin-left: govuk-spacing(6); margin-left: govuk-spacing(6);
} }
} }

9
app/assets/stylesheets/govuk-frontend/extensions.scss
View File

@@ -8,12 +8,3 @@
} }
} }
// Class to extend govuk-button to allow it to sit alongside other inline content
.govuk-button__inline {
vertical-align: top;
margin-bottom: 0;
@include govuk-media-query($from: tablet) {
vertical-align: baseline;
}
}

12
app/templates/components/cookie-banner.html
View File

@@ -5,16 +5,12 @@
<h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2> <h2 class="notify-cookie-banner__heading govuk-heading-m" id="notify-cookie-banner__heading">Can we store analytics cookies on your device?</h2>
<p class="govuk-body">Analytics cookies help us understand how our website is being used.</p> <p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
<div class="notify-cookie-banner__buttons"> <div class="notify-cookie-banner__buttons">
<div class="notify-cookie-banner__button notify-cookie-banner__button-accept"> <button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-accept" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
Yes<span class="govuk-visually-hidden">, Notify can store analytics cookies on your device</span> Yes<span class="govuk-visually-hidden">, Notify can store analytics cookies on your device</span>
</button> </button>
</div> <button class="govuk-button notify-cookie-banner__button notify-cookie-banner__button-reject" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
<div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
<button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
No<span class="govuk-visually-hidden">, Notify cannot store analytics cookies on your device</span> No<span class="govuk-visually-hidden">, Notify cannot store analytics cookies on your device</span>
</button> </button>
</div>
<a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a> <a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
</div> </div>
</div> </div>