From ef4fbbc71181b8642160a86dcc3269316c71e775 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 6 Nov 2019 12:23:33 +0100
Subject: [PATCH] Added RichFigure Component

---
 src/components/RichFigure.vue | 57 +++++++++++++++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 src/components/RichFigure.vue

diff --git a/src/components/RichFigure.vue b/src/components/RichFigure.vue
new file mode 100644
index 0000000..7447a10
--- /dev/null
+++ b/src/components/RichFigure.vue
@@ -0,0 +1,57 @@
+<template>
+  <figure :class="[{ float: imgPos }, imgPos]" :style="'width: ' + imgW">
+    <img :src="imgSrc" :alt="caption" />
+    <figcaption>{{ caption }}</figcaption>
+  </figure>
+</template>
+
+<script>
+export default {
+  name: "rich-figure",
+  props: {
+    imgSrc: { type: String, required: true },
+    imgPos: String,
+    imgW: String,
+    caption: { type: String, required: true }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+figure {
+  position: relative;
+
+  margin: 0;
+
+  line-height: 1;
+
+  figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    line-height: 1.5;
+
+    background: rgba(#000, 0.5);
+    color: #fff;
+    text-align: center;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+.float {
+  &.left {
+    float: left;
+    margin: 0 0.75em 0.375em 0;
+  }
+
+  &.right {
+    float: right;
+    margin: 0 0 1em 1em;
+  }
+}
+</style>