add FullscreenModal component

2021-07-06 20:36:52 +02:00
parent 26adaf0be1
commit 5c84e59e72
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+<template>
+  <b-modal
+    :id="id"
+    class="modal-image"
+    static hide-footer hide-header
+  >
+    <template #default="{ close }">
+      <div class="modal-image-wrapper">
+        <button-expand expanded  @click="close()" />
+        <img
+          v-if="image"
+          :src="image.url" :alt="image.alt"
+          @click="close()"
+        >
+      </div>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  name: 'FullscreenModal',
+
+  props: {
+    image: { type: Object, default: null },
+    id: { type: String, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-image {
+  z-index: 1100;
+
+  ::v-deep .modal {
+    &-dialog {
+      max-width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+
+    &-content {
+      height: 100%;
+      border: 0;
+      background-color: transparent;
+      pointer-events: none;
+    }
+
+    &-body {
+      position: relative;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .modal-image-wrapper {
+        pointer-events: auto;
+        position: relative;
+
+        &:not(:hover) .btn-expand {
+          display: none;
+        }
+      }
+
+      .btn-expand {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 1;
+      }
+
+      img {
+        max-width: 100vw;
+        max-height: 100vh;
+        display: block;
+      }
+    }
+  }
+
+}
+</style>