From 96d2c86d3bc1c26da2ca46ec04fb27a9de348e47 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 29 Jun 2020 14:48:22 +0300
Subject: change placeholders to use descriptions, use icons with placeholders,
 change uploads to use attachment component

---
 src/components/attachment/attachment.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

(limited to 'src/components/attachment/attachment.vue')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 98f772c0..a18bf186 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="usePlaceHolder"
+    v-if="usePlaceholder"
     @click="openModal"
   >
     <a
@@ -8,8 +8,11 @@
       class="placeholder"
       target="_blank"
       :href="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
     >
-      [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
+      <span :class="placeholderIconClass" />
+      <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </div>
   <div
@@ -22,6 +25,8 @@
       v-if="hidden"
       class="image-attachment"
       :href="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
       @click.prevent="toggleHidden"
     >
       <img
@@ -83,6 +88,8 @@
     <audio
       v-if="type === 'audio'"
       :src="attachment.url"
+      :alt="attachment.description"
+      :title="attachment.description"
       controls
     />
 
@@ -116,22 +123,19 @@
   display: flex;
   flex-wrap: wrap;
 
-  .attachment.media-upload-container {
-    flex: 0 0 auto;
-    max-height: 200px;
+  .non-gallery {
     max-width: 100%;
-    display: flex;
-    align-items: center;
-    video {
-      max-width: 100%;
-    }
   }
 
   .placeholder {
-    margin-right: 8px;
-    margin-bottom: 4px;
+    display: inline-block;
+    padding: 0.3em 1em 0.3em 0;
     color: $fallback--link;
     color: var(--postLink, $fallback--link);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 100%;
   }
 
   .nsfw-placeholder {
-- 
cgit v1.2.3-70-g09d2