knowyt/client/src/components/Sources.vue

<template>
  <div class="sources">
    <div :class="['sources__container', 'sources__container-' + sources.length]">
      <div class="sources__container-ring">
        <div
          v-for="(source, idx) in sources"
          :class="['sources__source', 'sources__source-' + idx]"
          :key="source.id"
        >
          {{ source }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['sources'],
}
</script>

<style lang="scss">
.sources {
  position: relative;
  width: 100%;
  height: 100%;

  &__container {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
  }

  &__container-ring {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  &__source {
    position: absolute;
    width: 180px;
    height: 20px;
    margin: -10px 0 0 -90px;
    border: 1px solid #e0e0e0;
    color: #ffffff;
  }

  &__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%; }
  }
  &__container-4,
  &__container-5,
  &__container-6 {
    .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%; }
  }
}
</style>