Added dummy for settings page

This commit is contained in:
Leon Etienne (ubuntu wsl)
2020-09-30 15:21:39 +02:00
parent 3515480744
commit 5e98e31eee
8 changed files with 247 additions and 6 deletions

View File

@@ -59,7 +59,7 @@
</div>
<div class="flex flex-col md:ml-4 overflow-x-hidden">
<h1 class="title pr">Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video)</h1>
<h1 class="title">Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video)</h1>
<div class="relative my-4">
<p class="description p-2">

View File

@@ -0,0 +1,5 @@
<template>
<svg viewBox="-4 -4 24 24" class="bi bi-toggle-off" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>
</svg>
</template>

View File

@@ -0,0 +1,5 @@
<template>
<svg viewBox="-4 -4 24 24" class="bi bi-toggle-on" fill="#8a54a2" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
</svg>
</template>

View File

@@ -2,15 +2,19 @@
<div class="header flex flex-row justify-between w-full p-5">
<div class="left-icons flex flex-flex-row justify-start">
<nuxt-link exact to="/">
<div class="headerbutton block md:hidden">
<Logo class="headerlogo" />
</div>
</nuxt-link>
</div>
<div class="right-icons flex flex-row justify-end flex-grow">
<div class="headerbutton button-settings">
<IconGear class="headericon icon-gear" />
</div>
<nuxt-link exact to="/settings">
<div class="headerbutton button-settings">
<IconGear class="headericon icon-gear" />
</div>
</nuxt-link>
</div>
</div>

View File

@@ -0,0 +1,40 @@
<template>
<div>
<div class="toggle-button">
<IconToggleOff v-if="!isOn" />
<IconToggleOn v-else />
</div>
</div>
</template>
<script>
import IconToggleOn from "~/components/Icons/toggle-on.vue";
import IconToggleOff from "~/components/Icons/toggle-off.vue";
export default {
props: {
isOn: {type: Boolean, default: false}
},
components: {
IconToggleOn,
IconToggleOff,
}
}
</script>
<style lang="scss" scoped>
.toggle-button {
width: 50px;
overflow: visible;
stroke-width: 1px;
fill: theme("colors.text-gray-1");
stroke: theme("colors.text-gray-1");
cursor: pointer;
transition: fill 0.1s, stroke 0.1s;
&:hover {
fill: theme("colors.text-gray-2");
stroke: theme("colors.text-gray-2");
}
}
</style>