Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cookie banner styling #1396

Merged
merged 9 commits into from
Jul 9, 2024
Merged

Cookie banner styling #1396

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
be10c2f
Style faux radio buttons for cookie consent
akmiller01 Jul 8, 2024
56bdb43
Cookie preference button
akmiller01 Jul 8, 2024
ad4e758
Checkout basic
akmiller01 Jul 8, 2024
3a6c1e7
Try and fix all SCSS for sonarcloud
akmiller01 Jul 8, 2024
6f7ee7d
Re-run build
akmiller01 Jul 8, 2024
97c2cfb
Lint more SCSS
akmiller01 Jul 8, 2024
474ae2e
Rebuild
akmiller01 Jul 8, 2024
518bf43
Checkout master basic
akmiller01 Jul 8, 2024
14f5c2a
Error proof API
akmiller01 Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions di_website/templates/includes/scaffold/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,16 @@
<div class="l-footer">
<div class="l-footer__col">
{% subscribe_to_newsletter %}
<h4 class="footer__title" style="padding-top: 2em;">Cookie preferences</h4>
<ul class="footer__list">
<li>
<a
href="#"
class="button"
onclick="document.cookie = 'cookie_notice=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; location.reload();"
>Change preferences</a>
</li>
</ul>
</div>
{% get_footer_sections parent=site_root calling_page=self %}
</div>
Expand Down
10 changes: 7 additions & 3 deletions di_website/templates/tags/cookie_notice.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,20 @@ <h2>{{ notice.heading }}</h2>
</div>
</div>
{% else %}
<div class="notice__wrapper notice__wrapper--notice" id="cookie_notice">
<script>document.cookie = 'cookie_notice=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'</script>
<div class="notice__wrapper notice__wrapper--notice display-none" data-notice id="cookie_notice">
<div class="row">
<div class="notice__content">
{% if notice.heading %}
<h2>{{ notice.heading }}</h2>
{% endif %}
{% if notice.body %}
<p>{{ notice.body }}</p>
{% endif %}
<button data-notice-accept-all id="cookie_notice" class="button button--reverse {% if request.COOKIES.cookie_notice_choice == 'all' %}button--active{% endif %}">
<button data-notice-accept-all id="cookie_notice" class="button--radio {% if request.COOKIES.cookie_notice_choice == 'all' %}button--radioactive{% endif %}">
Accept all cookies
</button>
<button data-notice-accept-necessary id="cookie_notice" class="button button--reverse {% if request.COOKIES.cookie_notice_choice == 'necessary' %}button--active{% endif %}">
<button data-notice-accept-necessary id="cookie_notice" class="button--radio {% if request.COOKIES.cookie_notice_choice == 'necessary' %}button--radioactive{% endif %}">
Accept necessary cookies
</button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions patterns/assets/css/core/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ label, legend, select {
color: $form-label-color;
}

input[type="search"]::search-decoration,
input[type="search"]::search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="submit"],
button,
.button {
Expand Down Expand Up @@ -99,4 +99,4 @@ input[type="checkbox"]:focus {
//outline: thin dotted #333;
//outline: 5px auto focus-ring-color;
//outline-offset: -2px;
}
}
1 change: 0 additions & 1 deletion patterns/assets/css/modules/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
.accordion__heading {
position: relative;
background-color: $poppy-dark;
color: #fff;
width: 100%;
padding: 0.75em 1.5em;
display: block;
Expand Down
3 changes: 1 addition & 2 deletions patterns/assets/css/modules/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

.button {
background: transparent; // // Reset button and reset elements
border: none; // Reset button and reset elements
// ------- //
display: inline-block;
text-align: left;
Expand Down Expand Up @@ -373,7 +372,7 @@ button.button--alt {
.download-button--action {
background: $action;
color: #fff;
border-color: #action;
border-color: $action;
ul {
border-color: $action;
}
Expand Down
5 changes: 4 additions & 1 deletion patterns/assets/css/modules/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,10 @@ a.card {
display: block;
}
.card--feature & {
@include maintain-ratio(16 9);
$ratio: 16 9;
$ratio-height: percentage(nth($ratio, 2) / nth($ratio, 1));
height: 0;
padding-bottom: $ratio-height;
width: 60%;
}
.card--duo & {
Expand Down
5 changes: 1 addition & 4 deletions patterns/assets/css/modules/_chart_tools.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,12 @@ $mobile-fallback-width: 400px;
width: auto;
height: 35px;
@include font-size($zeta);
background-color: transparent;
padding-left: $form-padding/2;
padding-right: 25px;
vertical-align: middle;
border: $default-border-width solid $default-border-color;
appearance: none;
background: url(../svg/png/sort-dark.png) #fff no-repeat 99% 50%;
background: url(../svg/source/sort-dark.svg) #fff no-repeat 99% 50%;
background-color: #fff;
background-size: 14px 14px;
&:hover, &:focus {
border-color: $action;
Expand Down Expand Up @@ -173,7 +170,7 @@ $mobile-fallback-width: 400px;
}
}

// Controls fallback image on tablet and mobile
// Controls fallback image on tablet and mobile
.show-fallback {
.chart-container {
display: none;
Expand Down
5 changes: 1 addition & 4 deletions patterns/assets/css/modules/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@
background-color: #fff;
min-height: $form-item-height;
font-size: 16px; // Stop IOS doing the zoom thing, the Git!
&::focus-inner {
&:focus-within {
border: 0;
padding: 0;
}
Expand Down Expand Up @@ -306,15 +306,12 @@ textarea.form-item {
width: 100%;
display: block;
height: $form-item-height;
background-color: transparent;
padding-left: $form-padding/2;
padding-right: 25px;
vertical-align: middle;
border: $default-border-width solid $default-border-color;
appearance: none;
background: url(../svg/png/sort-dark.png) #fff no-repeat 99% 50%;
background: url(../svg/source/sort-dark.svg) #fff no-repeat 99% 50%;
background-color: #fff;
background-size: 14px 14px;
&:hover, &:focus {
border-color: $action;
Expand Down
2 changes: 0 additions & 2 deletions patterns/assets/css/modules/_gnr-countries-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@
position: absolute;
top: 50%;
left: 12px;
background-position: 0 0;
transform: translateY(-50%) rotate(-90deg);
-webkit-transform: translateY(-50%) rotate(-90deg);
background: url(../img/arrow-down.svg) no-repeat;
Expand Down Expand Up @@ -364,7 +363,6 @@
letter-spacing: 0;
display: inline-block;
box-shadow: none;
padding: 0;
position: absolute;
top: 0;
right: 0;
Expand Down
26 changes: 26 additions & 0 deletions patterns/assets/css/modules/_message.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,32 @@
button,a {
margin: 0.2em;
}
.button--radio {
display: flex;
align-items: center;
padding: 5px 10px;
background: none;
border: none;
cursor: pointer;
outline: none;
font-size: 16px;
color: #fff;
}
.button--radio::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
border: 2px solid #000;
border-radius: 50%;
background-color: #fff;
}
.button--radioactive::before {
background-color: #000;
background-clip: content-box;
border: 4px solid #fff;
}
.button--active {
color: $slate;
background-color: #fff;
Expand Down
3 changes: 0 additions & 3 deletions patterns/assets/css/modules/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
height: 100%;
background-color: black;
background-color: rgba(0, 0, 0, 0.75);
-webkit-transition: 0.5s;
overflow: auto;
transition: all 0.3s linear;
@include respond-to($c-vp) {
Expand Down Expand Up @@ -50,7 +49,6 @@
@include respond-to($c-vp) {
margin-bottom: 20px;
}
width: 100%;
// height: 680px;
}
}
Expand All @@ -77,7 +75,6 @@
right: 0;
display: block;
padding: 0px 15px;
border-bottom-left-radius: 8px;
border-bottom-left-radius: 10px;
border-top-right-radius: 7px;
cursor: pointer;
Expand Down
1 change: 0 additions & 1 deletion patterns/assets/css/modules/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,6 @@
overflow-y: scroll;
position: absolute;
//left: 5%;
left: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
Expand Down
6 changes: 3 additions & 3 deletions patterns/assets/css/modules/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@
border-bottom: $default-border-width solid $default-border-color;
border-right: $default-border-width solid $default-border-color;
border-left: $default-border-width solid $default-border-color;
padding-left: 0;
vertical-align: top;
padding: $internal-spacing/4 0;
padding-top: $internal-spacing/4;
padding-bottom: $internal-spacing/4;
padding-right: 0;
padding-left: 45%;
&:before {
position: relative;
display: inline-block;
width: 45%;
word-break: break-word;
Expand Down
4 changes: 2 additions & 2 deletions patterns/assets/css/modules/form-items/_validation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@

.form-message {
display: none;
@include leader($internal-spacing/4);
margin-top: ($internal-spacing/4);
@include font-size($form-label-size - 2);
.form-field--error & {
display: block;
color: $error;
}
}
}
6 changes: 3 additions & 3 deletions patterns/assets/js/utils/setupNotices.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@ export default function setupNotices(
setCookie(id + '_choice', choice);
setCookie(id + '_token', token);
if(choice == "necessary"){
$(trigger_all).removeClass('button--active');
$(trigger_all).removeClass('button--radioactive');
}else{
$(trigger_necessary).removeClass('button--active');
$(trigger_necessary).removeClass('button--radioactive');
}
$(trigger).addClass('button--active');
$(trigger).addClass('button--radioactive');
notice.slideUp(300, ()=> {
notice.remove();
});
Expand Down
Loading
Loading