Enable Deny Button by default

onza · May 3, 2023 · 9add015 · 9add015
1 parent 18fa15d
commit 9add015
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -122,12 +122,12 @@ Then run command `gulp` and use the new created scripts in lib folder
 
 <br>
 
-### Add a deny button
+### Remove deny button
 
-Activate the following line in all languages in `src/js/CookieConsent.js` and add some styles.
+Remove the following line in all languages in `src/js/CookieConsent.js` and change the styles.
 
 ```html
-<!--<button class="cc-banner-btn-deny" onclick='denyAll()'>Deny</button>-->
+<button class="cc-banner_btn-deny" onclick='denyAll()'>Deny</button>
 ```
 
 <br>

diff --git a/docs/lib/css/CookieConsent.min.css b/docs/lib/css/CookieConsent.min.css
diff --git a/docs/lib/js/CookieConsent.js b/docs/lib/js/CookieConsent.js
@@ -196,15 +196,17 @@ function showCookieConsentBanner() {
           <p>We would like to use cookies to better understand your use of this website. This enables us to improve your future user experience on our website and to provide you with interest-based advertising and tailored content on our website as outside our website by partners. You can change or revoke your cookie settings at any time. </p>
           <div class="cc-banner_btns">
             <button class="cc-banner_btn-settings" onclick='showCookieConsentSettings()' title="Link to view and change cookie settings">View and change cookie settings</button>
-            <!--<button class="cc-banner-btn-deny" onclick='denyAll()'>Deny</button>-->
             <button class="cc-banner_btn" onclick='allowAll()'>Accept</button>
           </div>
-          <p class="cc-banner_btn-privacy-links"><a href="http://www.domain-xyz.com/privacy-policy/" title="Link to Privacy Policy">Privacy Policy</a></p>
+          <div class="cc-banner_btns2">
+            <button class="cc-banner_btn-deny" onclick='denyAll()'>Deny</button>
+            <p class="cc-banner_btn-privacy-links"><a href="http://www.domain-xyz.com/privacy-policy/" title="Link to Privacy Policy">Privacy Policy</a></p>
+          </div
         </div>
       </div>
     `;
   // } else if (document.documentElement.lang === 'fr' ) { 
-  //   consentBanner.innerHtml = `franzoesischer text`
+  //   consentBanner.innerHtml = `french text`
   } else {
     consentBanner.innerHTML = `
       <div class='cc_overlay'>
@@ -213,10 +215,12 @@ function showCookieConsentBanner() {
           <p>Wir möchten Cookies verwenden, um Ihre Nutzung dieser Webseite besser zu verstehen. Dies ermöglicht es uns, Ihr zukünftiges Nutzererlebnis auf unserer Webseite zu verbessern und Ihnen interessenbezogene Werbung und maßgeschneiderte Inhalte sowohl auf unserer Webseite als auch außerhalb unserer Webseite durch Partner zu präsentieren. Sie können Ihre Cookie-Einstellungen jederzeit ändern oder widerrufen. </p>
           <div class="cc-banner_btns">
             <button class="cc-banner_btn-settings" onclick='showCookieConsentSettings()' title="Link zum Anzeigen und Ändern der Cookie Einstellungen">Anzeigen und Ändern der Cookie Einstellungen</button>
-            <!--<button class="cc-banner_btn--deny" onclick='denyAll()'>Ablehnen</button>-->
             <button class="cc-banner_btn" onclick='allowAll()'>Akzeptieren</button>
           </div>
-          <p class="cc-banner_btn-privacy-links"><a href="http://www.domain-xyz.com/datenschutz/" title="Link zur Datenschutzerklärung">Datenschutzerklärung</a></p>
+          <div class="cc-banner_btns2">
+            <button class="cc-banner_btn-deny" onclick='denyAll()'>Ablehnen</button>
+            <p class="cc-banner_btn-privacy-links"><a href="http://www.domain-xyz.com/datenschutz/" title="Link zur Datenschutzerklärung">Datenschutzerklärung</a></p>
+          </div>
         </div>
       </div>
     `;

diff --git a/lib/css/CookieConsent.css b/lib/css/CookieConsent.css
@@ -102,16 +102,32 @@
   background-color: var(--c-btn-blue);
   border: none;
 }
-.cookieconsent .cc-banner .cc-banner_btn-privacy-links {
+.cookieconsent .cc-banner .cc-banner_btns2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: 1.25rem 0 0;
-  text-align: center;
 }
-.cookieconsent .cc-banner .cc-banner_btn-privacy-links a {
+.cookieconsent .cc-banner .cc-banner_btns2 .cc-banner_btn-deny {
+  padding: 0;
+  margin: 0 0.75rem 0 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--c-text);
+  text-transform: uppercase;
+  background-color: transparent;
+  border: none;
+}
+.cookieconsent .cc-banner .cc-banner_btns2 .cc-banner_btn-privacy-links {
+  margin: 0 0 0 0.75rem;
+}
+.cookieconsent .cc-banner .cc-banner_btns2 .cc-banner_btn-privacy-links a {
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--c-text);
   text-transform: uppercase;
   text-decoration: none;
+  border: none;
 }
 .cookieconsent .cc-banner_settings_label,
 .cookieconsent .cc-banner_settings_label-required {