leonetienne/Tubio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added basic webinterface design

Browse Source
This commit is contained in:
Leon Etienne (ubuntu wsl)
2020-09-28 01:53:26 +02:00
parent 1f13487fca
commit 01d52d1dce
29 changed files with 752 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
tubio-frontend-nuxt-app/components/DownloadBox.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div class="download-box">
<h2 class="no-dls-yet mt-2">No downloads yet...</h2>
</div>
</template>
<style lang="scss" scoped>
.download-box {
width: 100%;
min-height: 600px;
border-radius: 5px;
background-color: #fff5;
}
.no-dls-yet {
color: theme("colors.text-gray-1");
font-size: 34pt;
text-align: center;
}
</style>

6
tubio-frontend-nuxt-app/components/Icons/arrow-right-square.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<svg viewBox="0 0 16 16" class="bi bi-arrow-right-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/>
</svg>
</template>

6
tubio-frontend-nuxt-app/components/Icons/gear.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<svg viewBox="0 0 16 16" class="bi bi-gear" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 0 1 4.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 0 1-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 0 1 1.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 0 1 2.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 0 1 2.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 0 1 1.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 0 1-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 0 1 8.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 0 0 1.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 0 0 .52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 0 0-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 0 0-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 0 0-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 0 0-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 0 0 .52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 0 0 1.255-.52l.094-.319z"/>
<path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 1 0 0 4.492 2.246 2.246 0 0 0 0-4.492zM4.754 8a3.246 3.246 0 1 1 6.492 0 3.246 3.246 0 0 1-6.492 0z"/>
</svg>
</template>

6
tubio-frontend-nuxt-app/components/Icons/terminal.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<svg viewBox="0 0 16 16" class="bi bi-terminal" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M14 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"/>
<path fill-rule="evenodd" d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9zM3.146 4.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 1 1-.708-.708L4.793 6.5 3.146 4.854a.5.5 0 0 1 0-.708z"/>
</svg>
</template>

2
tubio-frontend-nuxt-app/components/Layout/Background.vue
View File

@@ -48,7 +48,7 @@ export default {
height: 1000000px;
position: absolute;
z-index: -9;
mask-image: url("/images/tiles/grid.png");
mask-image: url("/assets/images/tiles/grid.png");
background-color: theme("colors.purple-1");
&__wrapper {

82
tubio-frontend-nuxt-app/components/Layout/Header.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<div class="header flex flex-row justify-between w-full p-5">
<div class="left-icons flex flex-flex-row justify-start">
<div class="headerbutton block md:hidden">
<Logo class="headerlogo" />
</div>
</div>
<div class="right-icons flex flex-row justify-end flex-grow">
<div class="headerbutton button-settings">
<IconGear class="headericon icon-gear" />
</div>
</div>
</div>
</template>
<script>
import IconGear from "~/components/Icons/gear";
import Logo from "~/components/Logo";
export default {
components: {
IconGear,
Logo,
},
};
</script>
<style lang="scss" scoped>
.headericon {
cursor: pointer;
height: 50px;
width: 50px;
stroke: theme("colors.purple-3");
fill: theme("colors.purple-3");
-webkit-tap-highlight-color: #0000;
transition:
stroke 0.2s,
fill 0.2s,
color 0.2s,
transform 0.2s ease-in-out;
&:hover {
transform: rotate(90deg);
stroke: theme("colors.purple-3-1");
fill: theme("colors.purple-3-1");
}
}
.headerlogo {
cursor: pointer;
height: 60px;
width: 60px;
fill: theme("colors.purple-3");
stroke: theme("colors.purple-3");
-webkit-tap-highlight-color: #0000;
transition:
stroke 0.2s,
fill 0.2s,
color 0.2s;
&:hover {
stroke: theme("colors.purple-3-1");
}
& svg {
fill: var(theme("colors.purple-3"));
stroke: var(theme("colors.purple-3"));
height: 100%;
}
}
.icon {
&-gear {
& svg {
height: 100%;
}
}
}
</style>

15
tubio-frontend-nuxt-app/components/Logo.vue
View File

@@ -1,9 +1,14 @@
<template>
<div></div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504 456.28"><defs><style>.cls-1{stroke-miterlimit:10;stroke-width:20px;}.cls-2{}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M341,10h-196a33,33,0,0,0-28.55,16.49l-98,169.69a63.94,63.94,0,0,0,0,63.91l89.05,154.23a63.88,63.88,0,0,0,55.34,32H341a63.9,63.9,0,0,0,55.35-32l89-154.23a63.89,63.89,0,0,0,0-63.91L396.39,42A63.91,63.91,0,0,0,341,10Z"/><path class="cls-2" d="M207.21,311.16H136.14v-7.9l8.67-.66a32,32,0,0,0,8-1.34,11,11,0,0,0,5.34-3.95,12.44,12.44,0,0,0,1.67-6.95V176a15.44,15.44,0,0,0-1.22-6.51q-1.23-2.61-5.79-4.39a58.26,58.26,0,0,0-8.4-2.5,55.35,55.35,0,0,0-8.28-1.39v-7.9h71.07v7.9a71.14,71.14,0,0,0-8.23.83,56.31,56.31,0,0,0-8.34,1.84q-4.23,1.33-5.67,4.33a15.14,15.14,0,0,0-1.45,6.68V289.14a13,13,0,0,0,1.61,6.5,11,11,0,0,0,5.51,4.51,54,54,0,0,0,7.62,2,55.31,55.31,0,0,0,9,1.16Z"/><path class="cls-2" d="M354.48,172a77.69,77.69,0,0,1,16.35,26.3,94.67,94.67,0,0,1,5.89,34.09,92.89,92.89,0,0,1-6,34.15A75.91,75.91,0,0,1,354,292.7a72.4,72.4,0,0,1-24,16.46,77.24,77.24,0,0,1-59.57-.39,70.63,70.63,0,0,1-24-17.19,77.75,77.75,0,0,1-15.73-26.19,93.83,93.83,0,0,1-5.73-33q0-19.24,6-34.31A79.94,79.94,0,0,1,247.59,172a71.59,71.59,0,0,1,24.3-16.69,76.38,76.38,0,0,1,58.56.11A70.79,70.79,0,0,1,354.48,172ZM337.9,283.91A73.74,73.74,0,0,0,347,261a132.51,132.51,0,0,0,2.83-28.59,130.75,130.75,0,0,0-3.17-29.81,74,74,0,0,0-9.28-23.13A44.53,44.53,0,0,0,322,164.73a41.83,41.83,0,0,0-21.14-5.28q-13.33,0-22.69,6.11a47.62,47.62,0,0,0-15.23,16.35,78.52,78.52,0,0,0-8.29,22.92,135.15,135.15,0,0,0-2.73,27.58,132.42,132.42,0,0,0,2.9,28.92,73,73,0,0,0,9.12,22.91,44.83,44.83,0,0,0,15.12,15.3q9.12,5.5,21.8,5.5a41.9,41.9,0,0,0,21.47-5.56A43.5,43.5,0,0,0,337.9,283.91Z"/><path class="cls-2" d="M220,86.76c-1.67.69-3.26,1.28-4.75,1.75a18,18,0,0,1-5.47.72c-3.19,0-5.44-.81-6.74-2.41A10.64,10.64,0,0,1,201.05,80V54.24h-6.87v-3.7h7V38.7h7V50.54h10.92v3.7H208.3V75.5a39.91,39.91,0,0,0,.17,4,7.36,7.36,0,0,0,.83,2.79,3.93,3.93,0,0,0,1.85,1.7,7.88,7.88,0,0,0,3.32.58c.64,0,1.59-.06,2.84-.17a12.8,12.8,0,0,0,2.64-.45Z"/><path class="cls-2" d="M268.45,87.72,256,88.57l-.58-.54V83.21h-.23c-.62.64-1.31,1.33-2.08,2.06a14,14,0,0,1-2.66,2,17,17,0,0,1-3.35,1.58,15.07,15.07,0,0,1-4.58.54q-5,0-7.68-3.29t-2.64-9.58V58.32a4.36,4.36,0,0,0-2.06-4,4.83,4.83,0,0,0-1.74-.68,16.78,16.78,0,0,0-2.22-.29V50.85l12.69-.93.58.54V76.88q0,4.14,1.85,6.21a5.76,5.76,0,0,0,4.44,2.09,10.19,10.19,0,0,0,3.78-.66A10.73,10.73,0,0,0,252.33,83a13.68,13.68,0,0,0,1.83-1.71,10.13,10.13,0,0,0,1.22-1.68V58.05a4.74,4.74,0,0,0-.54-2.25,5.36,5.36,0,0,0-1.51-1.68,4.35,4.35,0,0,0-2.06-.55c-.92-.07-1.94-.13-3.07-.18V50.85l13.85-.93.58.54V80.63a4.4,4.4,0,0,0,.54,2.24,4.87,4.87,0,0,0,1.5,1.57,4.18,4.18,0,0,0,1.66.56c.64.09,1.35.15,2.12.18Z"/><path class="cls-2" d="M315.68,69.36a20.36,20.36,0,0,1-5.4,14.39q-5.4,5.82-12.54,5.82a20.25,20.25,0,0,1-6.15-1A26.12,26.12,0,0,1,285.9,86l-2.85,4.43-2.39-.54q.18-2.85.27-6.87c.05-2.68.07-5.26.07-7.76V37.62a6.43,6.43,0,0,0-.59-2.63,4.23,4.23,0,0,0-1.53-1.89,6.21,6.21,0,0,0-2.45-.75q-1.71-.26-2.76-.33V29.55l14-.85.54.58V54.36l.27.07a16.38,16.38,0,0,1,5.23-3.82,13.64,13.64,0,0,1,5.57-1.27A14.75,14.75,0,0,1,311,54.9Q315.68,60.45,315.68,69.36Zm-8.06.27a28.67,28.67,0,0,0-.62-5.82,16.4,16.4,0,0,0-1.93-5.17A10.84,10.84,0,0,0,301.64,55a9.12,9.12,0,0,0-5.09-1.39,10.15,10.15,0,0,0-4.73,1.06,12.93,12.93,0,0,0-3.64,2.88V79.7a9.08,9.08,0,0,0,.9,2.16,9.9,9.9,0,0,0,1.84,2.35A9.8,9.8,0,0,0,293.54,86a8.55,8.55,0,0,0,3.59.67q4.69,0,7.6-4.55T307.62,69.63Z"/></g></g></svg>
</div>
</template>
<style>
.testclas {
color: theme("colors.black");
<style lang="scss" scoped>
.cls-1 {
fill: none !important;
}
</style>
.cls-2 {
stroke: none !important;
}
</style>

33
tubio-frontend-nuxt-app/components/Spacer.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div class="spacer"
:style="'--height: ' + height + '; --m_height: ' + mobile_height + ';'" />
</template>
<script>
export default {
props: {
height: {type: String, default: "0"},
m_height: {type: String, default: "0"},
},
computed: {
mobile_height() {
return (this.m_height === "0") ? this.height : this.m_height;
},
},
}
</script>
<style lang="scss" scoped>
.spacer {
width: 1px;
height: var(--height);
@media (max-width: theme('screens.sm')) {
height: var(--m_height);
}
}
</style>