knowyt/client/src/components/Sources.vue

90 lines
2.3 KiB
Vue
Raw Normal View History

2021-08-15 20:04:24 +00:00
<template>
<div class="sources">
<div :class="['sources__container', 'sources__container-' + sources.length]">
<div class="sources__container-ring">
2021-08-20 20:06:28 +00:00
<Source
2021-08-15 20:04:24 +00:00
v-for="(source, idx) in sources"
2021-08-20 20:06:28 +00:00
:class="['sources__source-' + idx]"
:source="source"
2021-08-30 16:21:14 +00:00
:selectable="selectable"
2021-08-15 20:04:24 +00:00
:key="source.id"
2021-08-20 20:06:28 +00:00
/>
2021-08-15 20:04:24 +00:00
</div>
</div>
</div>
</div>
</template>
<script>
export default {
2021-08-30 16:21:14 +00:00
props: ['sources', 'selectable'],
mounted() {
this.$store.commit('selection/clearSelection')
},
2021-08-15 20:04:24 +00:00
}
</script>
<style lang="scss">
.sources {
position: relative;
width: 100%;
height: 100%;
&__container {
position: absolute;
2021-08-27 12:50:39 +00:00
left: 15%;
2021-08-15 20:04:24 +00:00
top: 10%;
2021-08-27 12:50:39 +00:00
width: 70%;
2021-08-15 20:04:24 +00:00
height: 80%;
}
&__container-ring {
position: absolute;
width: 100%;
height: 100%;
}
2021-08-15 20:19:11 +00:00
&__container-2,
&__container-3 {
.sources__source-0 { left: 10%; top: 10%; }
.sources__source-1 { left: 90%; top: 10%; }
.sources__source-2 { left: 50%; top: 100%; }
}
2021-08-15 20:04:24 +00:00
&__container-4,
&__container-5,
&__container-6 {
2021-08-15 20:19:11 +00:00
.sources__source-0 { left: 100%; top: 20%; }
.sources__source-1 { left: 100%; top: 80%; }
.sources__source-2 { left: 0; top: 80%; }
.sources__source-3 { left: 0; top: 20%; }
.sources__source-4 { left: 50%; top: 0; }
.sources__source-5 { left: 50%; top: 100%; }
}
&__container-7,
&__container-9 {
.sources__source-0 { left: 95%; top: 20%; }
.sources__source-1 { left: 95%; top: 80%; }
.sources__source-2 { left: 5%; top: 80%; }
.sources__source-3 { left: 5%; top: 20%; }
.sources__source-4 { left: 50%; top: 0; }
.sources__source-5 { left: 30%; top: 100%; }
.sources__source-6 { left: 70%; top: 100%; }
.sources__source-7 { left: 0%; top: 50%; }
.sources__source-8 { left: 100%; top: 50%; }
}
&__container-8,
&__container-10 {
.sources__source-0 { left: 95%; top: 20%; }
.sources__source-1 { left: 95%; top: 80%; }
.sources__source-2 { left: 5%; top: 80%; }
.sources__source-3 { left: 5%; top: 20%; }
.sources__source-4 { left: 30%; top: 0; }
.sources__source-5 { left: 70%; top: 0; }
.sources__source-6 { left: 30%; top: 100%; }
.sources__source-7 { left: 70%; top: 100%; }
.sources__source-8 { left: 0%; top: 50%; }
.sources__source-9 { left: 100%; top: 50%; }
2021-08-15 20:04:24 +00:00
}
}
</style>