From e2ecc1a4f88c2ace33c96bd8cb7e2ad8e667fd5a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 Aug 2021 01:11:16 +0300
Subject: [PATCH] add attachment counter

---
 src/components/media_modal/media_modal.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index e8bc8591c..bfe7ee6ae 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -65,6 +65,11 @@
     >
       {{ description }}
     </span>
+    <span
+      class="counter"
+    >
+      {{ currentIndex + 1 }} / {{ media.length }}
+    </span>
     <span
       v-if="loading"
       class="loading-spinner"
@@ -110,15 +115,22 @@
     }
   }
 
-  /* Hardcoded since background is also hardcoded */
-  .description {
+  .description,
+  .counter {
+    /* Hardcoded since background is also hardcoded */
     color: white;
     margin-top: 1em;
     text-shadow: 0 0 10px black, 0 0 10px black;
+    padding: 0.2em 2em;
+  }
+
+  .description {
+    flex: 0 0 auto;
+    overflow-y: auto;
+    min-height: 1em;
     max-width: 500px;
     max-height: 9.5em;
-    overflow-y: auto;
-    padding: 0 2em;
+    word-break: break-all;
   }
 
   .modal-image {
@@ -141,6 +153,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
     svg {
       color: white;
     }