updated CookieConsent with new style
This commit is contained in:
48
src/App.vue
48
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 Footer from "@/components/FooterComponent.vue";
|
||||
import CookieConsentBtn from "@/components/CookieConsentBtn.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import InfoModal from "@/components/InfoModal.vue";
|
||||
import Nav from '@/components/NavComponent.vue'
|
||||
import Footer from '@/components/FooterComponent.vue'
|
||||
import CookieConsent from '@/components/CookieConsent.vue'
|
||||
import { onMounted, ref } from '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;
|
||||
bgImg.style.height = document.documentElement.clientHeight + "px" || "0px";
|
||||
};
|
||||
const bgImg = document.querySelector('.bg-img') as HTMLImageElement
|
||||
bgImg.style.height = document.documentElement.clientHeight + 'px' || '0px'
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
offset.value = setOffset();
|
||||
setBgHeight();
|
||||
};
|
||||
offset.value = setOffset()
|
||||
setBgHeight()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
offset.value = setOffset();
|
||||
setBgHeight();
|
||||
});
|
||||
offset.value = setOffset()
|
||||
setBgHeight()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: "Obitron";
|
||||
src: local("Obitron"),
|
||||
url("../public/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
|
||||
font-family: 'Obitron';
|
||||
src: local('Obitron'),
|
||||
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>
|
||||
|
75
src/components/CookieConsent.vue
Normal file
75
src/components/CookieConsent.vue
Normal file
@@ -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>
|
@@ -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>
|
Reference in New Issue
Block a user