Initial commit

src/shared/components/Icon.vue

@@ -0,0 +1,8 @@
+<template>
+  <span :class="`mdi ${$slots.default[0].text}`"></span>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+
+  export default Vue.extend({});
+</script>

src/shared/components/ImgContainer.vue

@@ -0,0 +1,52 @@
+<template functional>
+  <div class="fixed-img bg-secondary">
+    <div class="fixed-img-inner">
+      <img v-if="props.src" :src="props.src">
+      <div v-else class="text-muted">
+      <Icon>mdi-music</Icon>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+  .fixed-img-sq {
+    padding-bottom: 100%;
+  }
+  .fixed-img-rect {
+    padding-bottom: 70%;
+  }
+  .fixed-img {
+    position: relative;
+    width: 100%;
+    
+    .tile-img-inner {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+       img {
+
+         width: 100%;
+         height: 100%;
+        object-fit: cover;
+      }
+
+      span {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 4.5rem;
+      }
+    }
+  }
+</style>
+<script lang="ts">
+  import Vue from "vue";
+
+  export default Vue.extend({
+    props: {
+      square: { type: Boolean, default: false },
+    }
+  });
+</script>

src/shared/components/OverflowMenu.vue

@@ -0,0 +1,13 @@
+<template>
+  <b-dropdown variant="link" boundary="window" no-caret toggle-class="p-0">
+    <template #button-content>
+      <Icon>mdi-dots-vertical</Icon>
+    </template>
+    <slot/>
+  </b-dropdown>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+
+  export default Vue.extend({});
+</script>

src/shared/components/Spinner.vue

@@ -0,0 +1,12 @@
+<template functional>
+  <div>
+    <slot v-if="props.data" :data="props.data"></slot>
+    <div v-else class="text-center">
+      <span class="spinner-grow"/>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import Vue from "vue";
+  export default Vue.extend({})
+</script> 

src/shared/components/Tiles.vue

@@ -0,0 +1,79 @@
+<template functional>
+ <div class="tiles" :class="props.square ? 'tiles-sq' : 'tiles-rect'">
+    <div v-for="(item, index) in props.items" :key="item.id">
+      <div class="card">
+        <div class="tile-img bg-secondary">
+          <div class="tile-img-inner">
+            <img v-if="item.image" :src="item.image">
+            <div v-else class="fallback-img text-muted">
+              <Icon>mdi-music</Icon>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          <slot :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+  .tiles {
+    display: grid;
+    grid-gap: 12px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  }
+  @media(max-width: 442px) { // 15px padding + 200px tile + 12px gap + 200px tile + 15px padding
+    .tiles {
+      grid-gap: 8px;
+      grid-template-columns: repeat(2, minmax(1px, 1fr))
+    }
+  }
+
+  .tiles-sq {
+    .tile-img {
+      padding-bottom: 100%;
+    }
+  }
+  .tiles-rect {
+    .tile-img {
+      padding-bottom: 70%;
+    }
+  }
+  .tile-img {
+    position: relative;
+    width: 100%;
+    
+    .tile-img-inner {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .fallback-img {
+        *{
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-size: 4.5rem;
+        }
+      }
+    }
+  }
+</style>
+<script lang="ts">
+  import Vue from "vue";
+
+  export default Vue.extend({
+    props: {
+      items: { type: Array, required: true },
+      square: { type: Boolean, default: false },
+    }
+  });
+</script>

src/shared/components/index.ts

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Icon from "./Icon.vue";
+import OverflowMenu from "./OverflowMenu.vue";
+import Spinner from "./Spinner.vue";
+import Tiles from "./Tiles.vue";
+
+const components = {
+  Icon,
+  OverflowMenu,
+  Spinner,
+  Tiles,
+};
+
+type Key = keyof typeof components;
+
+Object.keys(components).forEach((_key) => {
+  const key = _key as keyof typeof components;
+  Vue.component(key, components[key]);
+});