Merge pull request #1396 from devinit/feature/cookie-banner-styling

Cookie banner styling
devinit · Jul 9, 2024 · 6e36e7e · 6e36e7e
2 parents b4feeea + 14f5c2a
commit 6e36e7e
Show file tree

Hide file tree

Showing 22 changed files with 124 additions and 88 deletions.
diff --git a/di_website/api/views.py b/di_website/api/views.py
@@ -5,6 +5,7 @@
 from django.conf import settings
 from django.http import JsonResponse, HttpResponse
 from django.views.decorators.http import require_http_methods
+from django.db.utils import DataError
 
 from github import Github
 from wagtail.models import Site
@@ -144,9 +145,14 @@ def post_cookie_consent_log_entry(request):
     token = json_data.pop('token')
     client_ip = get_client_ip(request)
     anon_ip = anonymise_ip_address(client_ip)
+    if anon_ip == '0':
+        anon_ip = '0.0.0.0'
     json_data['anonymised_ip_address'] = anon_ip
-    CookieConsentLogEntry.objects.update_or_create(
-        token=token,
-        defaults=json_data
-    )
+    try:
+        CookieConsentLogEntry.objects.update_or_create(
+            token=token,
+            defaults=json_data
+        )
+    except DataError:
+        pass
     return HttpResponse(status=204)
diff --git a/di_website/templates/includes/scaffold/footer.html b/di_website/templates/includes/scaffold/footer.html
@@ -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>

diff --git a/di_website/templates/tags/cookie_notice.html b/di_website/templates/tags/cookie_notice.html
@@ -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>

diff --git a/patterns/assets/css/core/_forms.scss b/patterns/assets/css/core/_forms.scss
@@ -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 {
@@ -99,4 +99,4 @@ input[type="checkbox"]:focus {
 	//outline: thin dotted #333;
 	//outline: 5px auto focus-ring-color;
 	//outline-offset: -2px;
-}
+}
diff --git a/patterns/assets/css/modules/_accordion.scss b/patterns/assets/css/modules/_accordion.scss
@@ -14,7 +14,6 @@
 .accordion__heading {
 	position: relative;
 	background-color: $poppy-dark;
-    color: #fff;
     width: 100%;
 	padding: 0.75em 1.5em;
 	display: block;

diff --git a/patterns/assets/css/modules/_buttons.scss b/patterns/assets/css/modules/_buttons.scss
@@ -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;
@@ -373,7 +372,7 @@ button.button--alt {
 .download-button--action {
 	background: $action;
 	color: #fff;
-	border-color: #action;
+	border-color: $action;
 	ul {
 		border-color: $action;
 	}

diff --git a/patterns/assets/css/modules/_cards.scss b/patterns/assets/css/modules/_cards.scss
@@ -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 & {

diff --git a/patterns/assets/css/modules/_chart_tools.scss b/patterns/assets/css/modules/_chart_tools.scss
@@ -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;
@@ -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;

diff --git a/patterns/assets/css/modules/_forms.scss b/patterns/assets/css/modules/_forms.scss
@@ -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;
 	}
@@ -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;

diff --git a/patterns/assets/css/modules/_gnr-countries-block.scss b/patterns/assets/css/modules/_gnr-countries-block.scss
@@ -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;
@@ -364,7 +363,6 @@
 	letter-spacing: 0;
 	display: inline-block;
 	box-shadow: none;
-	padding: 0;
 	position: absolute;
 	top: 0;
 	right: 0;

diff --git a/patterns/assets/css/modules/_message.scss b/patterns/assets/css/modules/_message.scss
@@ -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;

diff --git a/patterns/assets/css/modules/_modal.scss b/patterns/assets/css/modules/_modal.scss
@@ -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) {
@@ -50,7 +49,6 @@
 		@include respond-to($c-vp) {
 			margin-bottom: 20px;
 		}
-		width: 100%;
 		// height: 680px;
 	}
 }
@@ -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;

diff --git a/patterns/assets/css/modules/_navigation.scss b/patterns/assets/css/modules/_navigation.scss
@@ -374,7 +374,6 @@
 		overflow-y: scroll;
 		position: absolute;
 		//left: 5%;
-		left: 0;
 		top: 50%;
 		transform: translateY(-50%);
 		-webkit-transform: translateY(-50%);

diff --git a/patterns/assets/css/modules/_tables.scss b/patterns/assets/css/modules/_tables.scss
@@ -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;

diff --git a/patterns/assets/css/modules/form-items/_validation.scss b/patterns/assets/css/modules/form-items/_validation.scss
@@ -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;
 	}
-}
+}
diff --git a/patterns/assets/js/utils/setupNotices.js b/patterns/assets/js/utils/setupNotices.js
@@ -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();
     });