From 7dc22774532872fc99aa7768cf299ab623e9d155 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 9 Jan 2023 13:02:16 -0500
Subject: Use stylelint

---
 src/components/gallery/gallery.vue | 100 ++++++++++++++++++-------------------
 1 file changed, 49 insertions(+), 51 deletions(-)

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

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index ccf6e3e2..744b8198 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -86,7 +86,7 @@
 <script src='./gallery.js'></script>
 
 <style lang="scss">
-@import '../../_variables.scss';
+@import "../../variables";
 
 .Gallery {
   .gallery-rows {
@@ -100,6 +100,53 @@
     width: 100%;
     flex-grow: 1;
 
+    .gallery-row-inner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-flow: row wrap;
+      align-content: stretch;
+
+      .gallery-item {
+        margin: 0 0.5em 0 0;
+        flex-grow: 1;
+        height: 100%;
+        box-sizing: border-box;
+        // to make failed images a bit more noticeable on chromium
+        min-width: 2em;
+
+        &:last-child {
+          margin: 0;
+        }
+      }
+
+      &.-grid {
+        width: 100%;
+        height: auto;
+        position: relative;
+        display: grid;
+        grid-gap: 0.5em;
+        grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
+
+        .gallery-item {
+          margin: 0;
+          height: 200px;
+        }
+      }
+    }
+
+    &.-grid,
+    &.-minimal {
+      height: auto;
+
+      .gallery-row-inner {
+        position: relative;
+      }
+    }
+
     &:not(:first-child) {
       margin-top: 0.5em;
     }
@@ -114,7 +161,7 @@
         linear-gradient(to top, white, white);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
-      -webkit-mask-composite: xor;
+      mask-composite: xor;
       mask-composite: exclude;
     }
   }
@@ -138,54 +185,5 @@
       padding: 0 2em;
     }
   }
-
-  .gallery-row {
-    &.-grid,
-    &.-minimal {
-      height: auto;
-      .gallery-row-inner {
-        position: relative;
-      }
-    }
-  }
-
-  .gallery-row-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-content: stretch;
-
-    &.-grid {
-      width: 100%;
-      height: auto;
-      position: relative;
-      display: grid;
-      grid-column-gap: 0.5em;
-      grid-row-gap: 0.5em;
-      grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-
-      .gallery-item {
-        margin: 0;
-        height: 200px;
-      }
-    }
-  }
-
-  .gallery-item {
-    margin: 0 0.5em 0 0;
-    flex-grow: 1;
-    height: 100%;
-    box-sizing: border-box;
-    // to make failed images a bit more noticeable on chromium
-    min-width: 2em;
-    &:last-child {
-      margin: 0;
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From a58a6d3c357592f34007c67bbf7fdf740864212a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 14 Jan 2023 23:20:28 -0500
Subject: Fix notification attachment icon overflow

---
 src/components/attachment/attachment.js          | 4 +++-
 src/components/attachment/attachment.scss        | 7 ++++++-
 src/components/attachment/attachment.vue         | 5 +++--
 src/components/gallery/gallery.js                | 1 +
 src/components/gallery/gallery.vue               | 1 +
 src/components/status_content/status_content.vue | 1 +
 6 files changed, 15 insertions(+), 4 deletions(-)

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

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 5dc50475..6e14b24d 100644
--- 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
index b2dea98d..966acc68 100644
--- 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
index 2a89886d..79f62806 100644
--- 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
index 4e1bda55..e86a3eea 100644
--- 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
index ccf6e3e2..bc18f545 100644
--- 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
index e2120f7a..c0e5c0b9 100644
--- 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"
-- 
cgit v1.2.3-70-g09d2

