Merge branch 'release/1.8.6'

Author: kristofser

changelog.md

@@ -1,6 +1,16 @@
 # Changelog
 
 All notable changes to `Cookie Consent package` will be documented in this file.
+## 1.8.6
+- Updated readme
+## 1.8.5
+- Styling updates
+## 1.8.4
+- Styling updates
+## 1.8.3
+- Styling updates
+## 1.8.2
+- Styling updates
 ## 1.8.1
 - Fixed typo in js
 ## 1.8.0

public/css/cookie-consent.css

@@ -59,44 +59,52 @@ The javascript file is included in the cookie snippet and will be added at the e
 
 Instead of including a snippet in your view, we will automatically add it. This is done using middleware using two methods:
 
-1. The first option: include it in your entire project using the kernel:
+__For Laravel 11.x and newer__
 
 ```php
-// app/Http/Kernel.php
+// bootstrap/app.php
 
-class Kernel extends HttpKernel
-{
-    protected $middleware = [
-        // ...
+->withMiddleware(function (Middleware $middleware) {
+    ...
+    $middleware->web(append: [
+        ...
         \Statikbe\CookieConsent\CookieConsentMiddleware::class,
-    ];
+    ]);
 
-    // ...
-}
-```
+// OR AS AN ALIAS
+
+    $middleware->alias([
+        ...
+        'cookie-consent' => \Statikbe\CookieConsent\CookieConsentMiddleware::class,
+    ]);
+})
 
-2. The second option: include it as a route middleware and add this to any route you want.
+```
+__For Laravel 10.x and earlier__
 
 ```php
 // app/Http/Kernel.php
 
 class Kernel extends HttpKernel
 {
-    // ...
-    
-    protected $routeMiddleware = [
+    protected $middleware = [
         // ...
-        'cookie-consent' => \Statikbe\CookieConsent\CookieConsentMiddleware::class,
+        \Statikbe\CookieConsent\CookieConsentMiddleware::class,
     ];
-}
-
 
+     protected $routeMiddleware = [
+        // ...
+        'cookie-consent' => \Statikbe\CookieConsent\CookieConsentMiddleware::class,
+    ];
+    
+    
 // routes/web.php
 Route::group([
     'middleware' => ['cookie-consent']
 ], function(){
     // ...
 });
+}
 ```
 
 This will add `cookieConsent::index` to the content of your response right before the closing body tag.

public/js/cookie-consent.js

@@ -42,10 +42,11 @@ function fadeBackdrop() {
     const backdropElement = document.querySelector('.js-lcc-backdrop');
 
     if (isHidden(backdropElement)) {
+        document.querySelector('html').classList.add('js-lcc-active');
         showElement(backdropElement);
         backdropElement.style.opacity = '1';
     } else {
-
+        document.querySelector('html').classList.remove('js-lcc-active');
         backdropElement.addEventListener('transitionend', hideBackdrop);
         backdropElement.style.opacity = '0';
     }
@@ -55,5 +56,5 @@ function fadeBackdrop() {
         hideElement(backdropElement);
 
         backdropElement.removeEventListener('transitionend', hideBackdrop);
-    };
+    }
 }

readme.md

@@ -1,4 +1,7 @@
 /* Basic styling */
+.js-lcc-active {
+  overflow: hidden;
+}
 
 [class^="lcc-"] {
   box-sizing: border-box !important;
@@ -44,7 +47,6 @@
   background-color: #111;
   color: white;
   border: 1px solid #111;
-  outline: none;
   font-size: inherit;
   padding: 6px 15px;
   cursor: pointer;
@@ -56,8 +58,32 @@
 
   &:hover,
   &:focus {
-    background: #777;
-    border-color: #777;
+    background: #555;
+    border-color: #555;
+  }
+}
+
+.lcc-button.lcc-button--ghost {
+
+  display: inline-block;
+  background: transparent;
+  background-color: transparent;
+  color: black;
+  border: 1px solid #111;
+  font-size: inherit;
+  padding: 6px 15px;
+  cursor: pointer;
+  margin: 1px 0;
+  transition:
+          color 0.2s ease,
+          background-color 0.2s ease,
+          border-color 0.2s ease;
+
+  &:hover,
+  &:focus {
+    color: white;
+    background: #555;
+    border-color: #555;
   }
 }
 
@@ -89,6 +115,7 @@
   margin-bottom: 5px;
   display: flex;
   align-items: baseline;
+  font-weight: 600;
 
   &[for] {
     cursor: pointer;
@@ -102,7 +129,7 @@
 input[id^="lcc-"]:disabled {
 
   cursor: default;
-  color: #777;
+  color: #555;
   opacity: .55;
 
   & + span {
@@ -157,7 +184,7 @@ input[id^="lcc-"]:disabled {
 
     &:hover,
     &:focus {
-      color: #777;
+      color: #555;
     }
   }
 
@@ -168,12 +195,21 @@ input[id^="lcc-"]:disabled {
 
   .lcc-modal__section {
     margin-bottom: 20px;
+
+    & .lcc-text {
+      margin-left: 24px;
+    }
   }
 
   .lcc-modal__actions {
     margin-top: 30px;
   }
 
+  .lcc-modal__actions-center {
+    display: flex;
+    justify-content: center;
+  }
+
   .lcc-modal__actions > * {
     display: block;
     margin-top: 8px;

resources/js/util/modals.js

@@ -26,10 +26,10 @@ class="lcc-modal lcc-modal--alert js-lcc-modal js-lcc-modal-alert" style="displa
         <button type="button" class="lcc-button js-lcc-accept">
             @lang('cookie-consent::texts.alert_accept')
         </button>
-        <button type="button" class="lcc-button lcc-button--link js-lcc-essentials">
+        <button type="button" class="lcc-button js-lcc-essentials">
             @lang('cookie-consent::texts.alert_essential_only')
         </button>
-        <button type="button" class="lcc-button lcc-button--link js-lcc-settings-toggle">
+        <button type="button" class="lcc-button lcc-button--ghost js-lcc-settings-toggle">
             @lang('cookie-consent::texts.alert_settings')
         </button>
     </div>
@@ -66,8 +66,8 @@ class="lcc-modal lcc-modal--alert js-lcc-modal js-lcc-modal-alert" style="displa
                 </p>
             </div>
             <div class="lcc-modal__section">
-                <label for="lcc-checkbox-funtcional" class="lcc-label">
-                    <input type="checkbox" id="lcc-checkbox-funtcional" disabled="disabled" checked="checked">
+                <label for="lcc-checkbox-functional" class="lcc-label">
+                    <input type="checkbox" id="lcc-checkbox-functional" disabled="disabled" checked="checked">
                     <span>@lang('cookie-consent::texts.setting_functional')</span>
                 </label>
                 <p class="lcc-text">
@@ -94,7 +94,7 @@ class="lcc-modal lcc-modal--alert js-lcc-modal js-lcc-modal-alert" style="displa
             </div>
         </div>
     </div>
-    <div class="lcc-modal__actions">
+    <div class="lcc-modal__actions lcc-modal__actions-center">
         <button type="button" class="lcc-button js-lcc-settings-save">
             @lang('cookie-consent::texts.settings_save')
         </button>