New features & improvements

CHANGELOG.md

@@ -15,6 +15,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 * Configuration File Changes: The configuration file format has been updated to reflect the new JSON cookie storage
   method. The `cookie_prefix` is now used to store cookies in a JSON object.
 
+## New Features
+
+* JSON Cookie Storage: Cookies are now stored in a JSON object under a single key with the prefix specified in the
+  configuration file. This change improves the structure and management of cookies.
+* `hide_floating_button_on_mobile` option: A new configuration option has been added to hide the floating cookies button
+  on mobile devices. This option allows you to control the visibility of the floating button based on the device type.
+* UI/UX Improvements: The cookies consent modal has been updated with improved styling and layout for a better user
+  experience.
+
 ### Migration Guide
 
 1. Update the configuration file to reflect the new JSON cookie storage method:

README.md

@@ -120,6 +120,7 @@ return [
      */
     'cookie_prefix' => '',
     'display_floating_button' => true, // Set to false to display the footer link instead
+    'hide_floating_button_on_mobile' => false, // Set to true to hide the floating button on mobile
     'use_separate_page' => false, // Set to true to use a separate page for cookies explanation
     /*
     |--------------------------------------------------------------------------
@@ -184,6 +185,8 @@ page:
 <a href="javascript:void(0);" onclick="toggleCookieBanner()">Cookies Preferences</a>
 ```
 
+The `hide_floating_button_on_mobile` field is optional and, if set to `true`, will hide the floating button on mobile
+
 The `use_separate_page` field is optional and, if set to `true`, will display the cookies preferences in a separate
 page.
 

config/cookies_consent.php

@@ -18,6 +18,7 @@
      */
     'cookie_prefix' => 'my_app_',
     'display_floating_button' => true, // Set to false to display the footer link instead
+    'hide_floating_button_on_mobile' => false, // Set to true to hide the floating button on mobile
     'use_separate_page' => false, // Set to true to use a separate page for cookies explanation
     /*
     |--------------------------------------------------------------------------

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laravel-cookies-consent",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "<p align=\"center\"> <img src=\"logo.jpg\" alt=\"logo\" width=\"400\"> </p>",
   "main": "index.js",
   "directories": {

resources/js/cookies-consent.js

@@ -31,6 +31,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const cookieBanner = document.getElementById('cookies-consent-banner');
     const cookieButton = document.getElementById('scify-cookie-consent-floating-button');
     const showFloatingButton = cookieBanner.dataset.showFloatingButton === 'true' || cookieBanner.dataset.showFloatingButton === '1';
+    const hideFloatingButtonOnMobile = cookieBanner.dataset.hideFloatingButtonOnMobile === 'true' || cookieBanner.dataset.hideFloatingButtonOnMobile === '1';
     let cookieConsent = getCookie('cookieConsent');
     initialiseBanner();
     setSliders();
@@ -42,8 +43,14 @@ document.addEventListener('DOMContentLoaded', function () {
     function initialiseBanner() {
         if (onCookiesPage()) {
             cookieBanner.style.display = 'block';
-            if (showFloatingButton && cookieButton)
-                cookieButton.style.display = 'none';
+            if (showFloatingButton && cookieButton) {
+                // if on mobile, also check the hideFloatingButtonOnMobile
+                if (hideFloatingButtonOnMobile && window.innerWidth < 768) {
+                    cookieButton.style.display = 'none';
+                } else {
+                    cookieButton.style.display = 'block';
+                }
+            }
         } else {
             if (cookieConsent) {
                 cookieBanner.style.display = 'none';