Added dummy for settings page
This commit is contained in:
@@ -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">
|
||||
|
5
tubio-frontend-nuxt-app/components/Icons/toggle-off.vue
Normal file
5
tubio-frontend-nuxt-app/components/Icons/toggle-off.vue
Normal 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>
|
5
tubio-frontend-nuxt-app/components/Icons/toggle-on.vue
Normal file
5
tubio-frontend-nuxt-app/components/Icons/toggle-on.vue
Normal 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>
|
@@ -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>
|
||||
|
40
tubio-frontend-nuxt-app/components/Toggle.vue
Normal file
40
tubio-frontend-nuxt-app/components/Toggle.vue
Normal 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>
|
Reference in New Issue
Block a user