Added dummy for settings page
This commit is contained in:
Leon Etienne (ubuntu wsl)
parent
3515480744
commit
5e98e31eee
@ -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">
|
||||
<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>
|
||||
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
|
||||
<div class="hidden md:block">
|
||||
<Spacer height="2em" m_height="1em" />
|
||||
<Spacer height="0.5em" m_height="1em" />
|
||||
<Logo class="logo mt-4" />
|
||||
<Spacer height="2em" m_height="2em" />
|
||||
</div>
|
||||
|
||||
186
tubio-frontend-nuxt-app/pages/settings.vue
Normal file
186
tubio-frontend-nuxt-app/pages/settings.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Settings</h1>
|
||||
<Spacer height="2em" />
|
||||
|
||||
<div class="flex-col w-full">
|
||||
|
||||
<div class="flex flex-col lg:flex-row justify-content-start w-full">
|
||||
|
||||
<div class="w-full lg:w-1/2 border-right lg:pr-3">
|
||||
|
||||
<div class="option toggle flex justify-between items-center">
|
||||
<p>Show console</p>
|
||||
<Toggle :isOn="false"/>
|
||||
</div>
|
||||
|
||||
<div class="option toggle flex justify-between items-center">
|
||||
<p>Use account</p>
|
||||
<Toggle :isOn="false"/>
|
||||
</div>
|
||||
|
||||
<div class="option text flex justify-between w-full items-center">
|
||||
<p class="mr-3">Username</p>
|
||||
<input type="text" id="username" name="username">
|
||||
</div>
|
||||
|
||||
<div class="option text flex justify-between w-full items-center">
|
||||
<p class="mr-3">Password</p>
|
||||
<input type="password" id="password" name="password">
|
||||
</div>
|
||||
|
||||
<div class="option toggle flex justify-between items-center">
|
||||
<p>Limit speed</p>
|
||||
<Toggle :isOn="false"/>
|
||||
</div>
|
||||
|
||||
<div class="option text narrow flex justify-between w-full items-center">
|
||||
<p class="mr-3">Max speed</p>
|
||||
<input type="text" id="max_speed" name="max_speed" placeholder="100M">
|
||||
</div>
|
||||
|
||||
<div class="option text narrow flex justify-between w-full items-center">
|
||||
<p class="mr-3">Download threads</p>
|
||||
<input type="text" id="max_threads" name="max_threads" placeholder="10">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/2 border-left lg:pl-3 mt-6 lg:mt-0">
|
||||
|
||||
<div class="disk-usage">
|
||||
<h2>Disk usage</h2>
|
||||
|
||||
<div class="disk-usage__entry flex">
|
||||
<p class="mr-3">Downloads: </p>
|
||||
<p>759 mb</p>
|
||||
</div>
|
||||
<div class="disk-usage__entry flex">
|
||||
<p class="mr-3">Logs: </p>
|
||||
<p>9 mb</p>
|
||||
</div>
|
||||
<div class="disk-usage__entry flex">
|
||||
<p class="mr-3">Dependencies: </p>
|
||||
<p>312 mb</p>
|
||||
</div>
|
||||
<div class="disk-usage__entry flex">
|
||||
<p class="mr-3">Misc: </p>
|
||||
<p>3 mb</p>
|
||||
</div>
|
||||
<div class="disk-usage__entry flex">
|
||||
<p class="mr-3">Total: </p>
|
||||
<p>1567 mb</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spacer height="50px"/>
|
||||
|
||||
<div class="button">Clear downloads</div>
|
||||
<div class="button mt-2">Clear logs</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<hr class="mt-6 lg:mt-2" />
|
||||
|
||||
<div class="pt-6">
|
||||
<h2>Logs</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Toggle from "~/components/Toggle.vue";
|
||||
import Spacer from "~/components/Spacer.vue";
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Toggle,
|
||||
Spacer
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
h1 {
|
||||
color: theme("colors.text-gray-1");
|
||||
font-size: 32pt;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: theme("colors.text-gray-1");
|
||||
font-size: 24pt;
|
||||
}
|
||||
|
||||
.disk-usage {
|
||||
&__entry {
|
||||
& p {
|
||||
color: theme("colors.text-gray-1");
|
||||
font-size: 16pt;
|
||||
|
||||
&:first-child {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
color: theme("colors.text-gray-1");
|
||||
font-size: 18pt;
|
||||
height: 50px;
|
||||
|
||||
&.toggle > p {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&.text > input {
|
||||
width: 240px;
|
||||
text-align: right;
|
||||
border-radius: 5px;
|
||||
font-size: 16pt;
|
||||
height: 30px;
|
||||
padding-left: 0.7em;
|
||||
padding-right: 0.7em;
|
||||
|
||||
@media (max-width: theme('screens.md')) {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
&.text.narrow > input {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.lg')) {
|
||||
.border-right {
|
||||
border-right: 1px solid theme("colors.gray-1");
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-left: 1px solid theme("colors.gray-1");
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #000;
|
||||
font-family: ZillaSlab, serif;
|
||||
font-size: 18pt;
|
||||
transition: background-color 0.2s;
|
||||
max-width: 200px;
|
||||
|
||||
&:hover {
|
||||
background-color: theme("colors.text-error-1");
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 2px solid theme("colors.gray-1");
|
||||
}
|
||||
</style>
|
||||
@ -20,6 +20,7 @@ module.exports = {
|
||||
'purple-3-1': '#bee7f4',
|
||||
|
||||
'text-gray-1': '#bbb',
|
||||
'text-gray-2': '#fff',
|
||||
'text-error-1': '#d40'
|
||||
},
|
||||
|
||||
@ -28,7 +29,7 @@ module.exports = {
|
||||
'md': '768px',
|
||||
'lg': '1024px',
|
||||
'xl': '1280px',
|
||||
'fhd': '1670px',
|
||||
'fhd': '1870px',
|
||||
'wqhd': '2480px',
|
||||
|
||||
'break-header': '950px',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user