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

Cookie banner feedback
devinit · Jul 9, 2024 · 6ed6f19 · 6ed6f19
2 parents 6e36e7e + 1df7251
commit 6ed6f19
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 557 deletions.
diff --git a/di_website/templates/includes/scaffold/footer.html b/di_website/templates/includes/scaffold/footer.html
@@ -9,6 +9,7 @@
         <h4 class="footer__title" style="padding-top: 2em;">Cookie preferences</h4>
         <ul class="footer__list">
           <li>
+            <a id="change_cookie_preferences"></a>
             <a
             href="#"
             class="button"

diff --git a/di_website/templates/tags/cookie_notice.html b/di_website/templates/tags/cookie_notice.html
@@ -1,7 +1,6 @@
 {% load wagtailcore_tags string_utils %}
 
 {% csrf_token %}
-{% if request.get_full_path|remove_url_parameters != notice.set_cookie_page.url %}
 <div class="notice__wrapper notice__wrapper--notice display-none" data-notice id="cookie_notice">
   <div class="row">
     <div class="notice__content">
@@ -18,32 +17,14 @@ <h2>{{ notice.heading }}</h2>
           Accept necessary cookies
         </button>
         {% if notice.set_cookie_page %}
-        <a target="_blank" rel="noopener" href="{% pageurl notice.set_cookie_page %}" class="button button--reverse">
-          View cookies
-        </a>
+          {% if request.get_full_path|remove_url_parameters != notice.set_cookie_page.url %}
+          <a target="_blank" rel="noopener" href="{% pageurl notice.set_cookie_page %}" class="button button--reverse">
+            View cookies
+          </a>
+          {% endif %}
         {% endif %}
-        <p>You can change your preferences at any time by visiting our Privacy and cookies policy.</p>
+        <p>You can change your preferences at any time by clicking the button at the bottom of this page.</p>
     </div>
   </div>
 </div>
-{% else %}
-<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--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--radio {% if request.COOKIES.cookie_notice_choice == 'necessary' %}button--radioactive{% endif %}">
-          Accept necessary cookies
-        </button>
-    </div>
-  </div>
-</div>
-{% endif %}
+
diff --git a/patterns/assets/css/modules/_message.scss b/patterns/assets/css/modules/_message.scss
@@ -1,25 +1,3 @@
-// ------------------------------------------------------------
-// notice
-// ------------------------------------------------------------
-
-// .body--message {
-//     // used to modify the body and absolutely positioned elements within
-//     // make the header relative
-//     .hero {
-//         @include respond-to-max($menu-respond) {
-//             margin-top: -13.5em;
-//             padding-top: 13.5em;
-//             &:before {
-//                 height: 200%;
-//                 top: -200%;
-//             }
-//         }
-//         @include respond-to($menu-respond) {
-//             margin-top: -15em;
-//         }
-//     }
-// }
-
 .notice__wrapper {
     position: fixed;
     bottom: 0;
@@ -55,36 +33,6 @@
     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;
-    }
     strong, b {
         @extend %font-heading;
     }