From 216e78fc5f9c272a248c07c4c96288b4e1825dda Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 5 Nov 2019 22:05:53 +0100
Subject: [PATCH] Updated Gallery component

---
 src/components/Gallery.vue | 48 ++++++++++++++++++++++++++++++++++----
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
index 779a9a9..e06b728 100644
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="gallery">
     <div class="big-image">
-      <div class="image-container">
+      <figure class="image-container">
         <img :src="bigImage" alt="" />
-      </div>
+        <figcaption>
+          {{ images.indexOf(bigImage) + 1 }} / {{ images.length }}
+        </figcaption>
+      </figure>
     </div>
     <div class="thumbnails">
       <div class="thumbnail" v-for="(img, index) in images" :key="index">
@@ -45,7 +48,11 @@ export default {
 <style lang="scss" scoped>
 .big-image {
   width: 100%;
-  height: 480px;
+  height: 40vh;
+
+  @media (min-width: 35em) {
+    height: 30em;
+  }
 
   display: flex;
   justify-content: center;
@@ -53,25 +60,44 @@ export default {
   align-items: center;
 
   background-color: #444;
+
+  overflow: hidden;
 }
 
 .image-container {
-  flex: 1;
+  position: relative;
+
+  margin: 0;
 
   width: 100%;
   height: 100%;
 
+  flex: 1;
+
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
 
+  box-shadow: inset 0 0 15em #000;
+
   img {
     align-self: center;
 
     max-width: 100%;
     max-height: 100%;
   }
+
+  figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    background-color: rgba(#000, 0.5);
+    color: #fff;
+    text-align: center;
+  }
 }
 
 .thumbnails {
@@ -79,7 +105,9 @@ export default {
   align-content: center;
   align-items: center;
 
-  height: 5em;
+  height: 6.5em;
+
+  padding: 0.5em;
 
   overflow-x: scroll;
 
@@ -99,7 +127,17 @@ export default {
   align-content: center;
   align-items: center;
 
+  & + .thumbnail {
+    margin-left: 0.5em;
+  }
+
   img {
+    cursor: pointer;
+
+    box-sizing: border-box;
+
+    border: 0.25em solid #fff;
+
     align-self: center;
 
     max-width: 100%;