CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

updated CookieConsent with new style

Browse Source
This commit is contained in:
vikingowl
2022-07-01 19:55:59 +02:00
parent ceb2b358e1
commit cc587d115a
3 changed files with 96 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/App.vue
View File

@@ -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
View 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>

95
src/components/CookieConsentBtn.vue
View File

@@ -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>