settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

moved code to own Source component

Browse Source
This commit is contained in:
Settel 2021-08-20 22:06:28 +02:00
parent feb9edc76a
commit 0548515390
2 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
client/src/components/Source.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<div class="source">
<div class="source__source">
{{ source }}
</div>
</div>
</template>
<script>
export default {
props: ['source'],
}
</script>
<style lang="scss">
.source {
position: absolute;
display: flex;
flex-direction: row;
align-items: center;
width: 180px;
height: 30px;
margin: -15px 0 0 -90px;
border: 1px solid #e0e0e0;
border-radius: 10px;
&__source {
width: 100%;
color: #ffffff;
font-family: "Wendy One";
text-align: center;
}
&:hover {
background-color: rgba(128,128,128,0.5);
cursor: pointer;
}
}
</style>

17
client/src/components/Sources.vue
View File

@ -2,12 +2,12 @@
<div class="sources"> <div class="sources">
<div :class="['sources__container', 'sources__container-' + sources.length]"> <div :class="['sources__container', 'sources__container-' + sources.length]">
<div class="sources__container-ring"> <div class="sources__container-ring">
<div <Source
v-for="(source, idx) in sources" v-for="(source, idx) in sources"
:class="['sources__source', 'sources__source-' + idx]" :class="['sources__source-' + idx]"
:source="source"
:key="source.id" :key="source.id"
> />
{{ source }}
</div> </div>
</div> </div>
</div> </div>
@ -40,15 +40,6 @@ export default {
height: 100%; height: 100%;
} }
&__source {
position: absolute;
width: 180px;
height: 20px;
margin: -10px 0 0 -90px;
border: 1px solid #e0e0e0;
color: #ffffff;
}
&__container-2, &__container-2,
&__container-3 { &__container-3 {
.sources__source-0 { left: 10%; top: 10%; } .sources__source-0 { left: 10%; top: 10%; }