updated CookieConsent with new style

src/App.vue

@@ -11,43 +11,43 @@
   <footer class="mt-auto">
     <Footer />
   </footer>
-  <CookieConsentBtn id="cookie-btn" />
+  <CookieConsent id="cookie-btn" />
 </template>
 
 <script setup lang="ts">
-import Nav from "@/components/NavComponent.vue";
+import Nav from '@/components/NavComponent.vue'
-import Footer from "@/components/FooterComponent.vue";
+import Footer from '@/components/FooterComponent.vue'
-import CookieConsentBtn from "@/components/CookieConsentBtn.vue";
+import CookieConsent from '@/components/CookieConsent.vue'
-import { onMounted, ref } from "vue";
+import { onMounted, ref } from 'vue'
-import InfoModal from "@/components/InfoModal.vue";
+import InfoModal from '@/components/InfoModal.vue'
 
-const offset = ref(0);
+const offset = ref(0)
 
 const setOffset = () => {
-  return document.getElementsByTagName("nav")[0].clientHeight;
+  return document.getElementsByTagName('nav')[0].clientHeight
-};
+}
 
 const setBgHeight = () => {
-  const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
+  const bgImg = document.querySelector('.bg-img') as HTMLImageElement
-  bgImg.style.height = document.documentElement.clientHeight + "px" || "0px";
+  bgImg.style.height = document.documentElement.clientHeight + 'px' || '0px'
-};
+}
 
 window.onresize = () => {
-  offset.value = setOffset();
+  offset.value = setOffset()
-  setBgHeight();
+  setBgHeight()
-};
+}
 
 onMounted(() => {
-  offset.value = setOffset();
+  offset.value = setOffset()
-  setBgHeight();
+  setBgHeight()
-});
+})
 </script>
 
 <style lang="scss">
 @font-face {
-  font-family: "Obitron";
+  font-family: 'Obitron';
-  src: local("Obitron"),
+  src: local('Obitron'),
-    url("../public/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
+    url('../public/fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
 }
 
 .bg-img {
@@ -57,10 +57,4 @@ onMounted(() => {
   object-fit: cover;
   overflow: hidden;
 }
-
-#cookie-btn {
-  position: fixed;
-  bottom: 30px;
-  right: 20px;
-}
 </style>

src/components/CookieConsent.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    v-if="!consent"
+    class="cookie-card w-100 fixed-bottom d-flex flex-column flex-sm-row justify-content-between align-items-center p-2 p-sm-3 bg-body border border-1 border-primary">
+    <span class="mb-4 mb-sm-0 text-center text-sm-start">
+      We use cookies to analyze traffic on our website (Matomo). For more
+      information, please see our
+      <a class="text-muted" href="/privacy-policy">Privacy Policy</a>.
+    </span>
+
+    <div class="d-flex flex-row">
+      <button
+        class="btn mx-1 text-info"
+        type="button"
+        @click="handleConsentForget">
+        Decline
+      </button>
+
+      <button class="btn mx-1 text-info" type="button" @click="handleEssential">
+        Essential
+      </button>
+
+      <button class="btn btn-primary mx-1" type="button" @click="handleConsent">
+        Accept
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useCookies } from 'vue3-cookies'
+
+const { cookies } = useCookies()
+const consent = ref(false)
+
+const handleConsent = () => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window._paq.push(['rememberConsentGiven'])
+
+  handleEssential()
+}
+
+const handleEssential = () => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window._paq.push(['rememberCookieConsentGiven'])
+  cookies.set('consent', 'given', Infinity)
+
+  consent.value = true
+}
+
+const handleConsentForget = () => {
+  consent.value = true
+}
+
+onMounted(() => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window._paq.push(['requireCookieConsent'])
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window._paq.push(['trackPageView'])
+
+  if (cookies.get('consent') === 'given') consent.value = true
+})
+</script>
+
+<style scoped>
+form {
+  display: flex;
+  gap: 1rem;
+}
+</style>

src/components/CookieConsentBtn.vue

@@ -1,95 +0,0 @@
-<template>
-  <div
-    v-if="!consent"
-    class="card text-end bg-secondary text-white border border-1"
-  >
-    <div class="card-body">
-      <form class="mb-1">
-        <div class="form-check">
-          <input
-            id="essential-cookies"
-            checked
-            class="form-check-input"
-            disabled
-            type="checkbox"
-            value=""
-          />
-          <label class="form-check-label" for="essential-cookies">
-            Essential
-          </label>
-        </div>
-        <div class="form-check">
-          <input
-            id="tracking"
-            v-model="tracking"
-            class="form-check-input"
-            type="checkbox"
-          />
-          <label class="form-check-label" for="tracking"> Matomo </label>
-        </div>
-      </form>
-
-      <a class="text-muted" href="/privacy-policy">Privacy Policy</a>
-
-      <div class="d-flex justify-content-between mt-2">
-        <button
-          class="btn btn-outline-primary"
-          type="button"
-          @click="handleConsentForget"
-        >
-          Decline
-        </button>
-        <button class="btn btn-info" type="button" @click="handleConsent">
-          Accept
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { useCookies } from "vue3-cookies";
-
-const tracking = ref(true);
-const { cookies } = useCookies();
-const consent = ref(false);
-
-const handleConsent = () => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window._paq.push(["rememberCookieConsentGiven"]);
-  cookies.set("consent", "given", Infinity);
-
-  if (tracking.value) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    window._paq.push(["rememberConsentGiven"]);
-  }
-  consent.value = true;
-};
-const handleConsentForget = () => {
-  consent.value = true;
-};
-
-onMounted(() => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window._paq.push(["requireCookieConsent"]);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  window._paq.push(["trackPageView"]);
-
-  if (cookies.get("consent") === "given") consent.value = true;
-});
-</script>
-
-<style scoped>
-.card {
-  z-index: 10;
-}
-form {
-  display: flex;
-  gap: 1rem;
-}
-</style>