pleroma-fe

commit: 4a5134af02d37f41c9adefa4a88411d022f58a47
parent f956b0ca37d33120bb4e28f3cc70b9cb6cec066f
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date:   Sun, 15 Jan 2023 12:37:36 +0000

Merge branch 'tusooa/1195-notif-overflow' into 'develop'

Fix notification attachment icon overflow

Closes #1195

See merge request pleroma/pleroma-fe!1759
Diffstat:
M
src/components/attachment/attachment.js
4
+++-
M
src/components/attachment/attachment.scss
7
++++++-
M
src/components/attachment/attachment.vue
5
+++--
M
src/components/gallery/gallery.js
1
+
M
src/components/gallery/gallery.vue
1
+
M
src/components/status_content/status_content.vue
1
+

6 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
@@ -36,6 +36,7 @@ library.add(
 const Attachment = {
   props: [
     'attachment',
+    'compact',
     'description',
     'hideDescription',
     'nsfw',
@@ -71,7 +72,8 @@ const Attachment = {
         {
           '-loading': this.loading,
           '-nsfw-placeholder': this.hidden,
-          '-editable': this.edit !== undefined
+          '-editable': this.edit !== undefined,
+          '-compact': this.compact
         },
         '-type-' + this.type,
         this.size && '-size-' + this.size,
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
@@ -102,7 +102,6 @@
     padding-top: 0.5em;
   }
 
-
   .play-icon {
     position: absolute;
     font-size: 64px;
@@ -265,4 +264,10 @@
       object-fit: cover;
     }
   }
+
+  &.-compact {
+    .placeholder-container {
+      padding-bottom: 0.5em;
+    }
+  }
 }
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
@@ -162,10 +162,11 @@
         target="_blank"
       >
         <FAIcon
-          size="5x"
+          :size="compact ? '2x' : '5x'"
           :icon="placeholderIconClass"
+          :title="localDescription"
         />
-        <p>
+        <p v-if="!compact">
           {{ localDescription }}
         </p>
       </a>
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
@@ -4,6 +4,7 @@ import { sumBy, set } from 'lodash'
 const Gallery = {
   props: [
     'attachments',
+    'compact',
     'limitRows',
     'descriptions',
     'limit',
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
@@ -20,6 +20,7 @@
             v-for="(attachment, attachmentIndex) in row.items"
             :key="attachment.id"
             class="gallery-item"
+            :compact="compact"
             :nsfw="nsfw"
             :attachment="attachment"
             :size="size"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
@@ -33,6 +33,7 @@
       <gallery
         v-if="status.attachments.length !== 0"
         class="attachments media-body"
+        :compact="compact"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
         :limit="compact ? 1 : 0"