From a3c703bd37fc55c2377cb0bf099af6a21ea07e8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 14 Jun 2021 02:52:41 +0300
Subject: compact notifs

---
 src/components/status_body/status_body.scss | 56 +++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

(limited to 'src/components/status_body/status_body.scss')

diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 81a687f1..a93c92e0 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,11 +1,17 @@
 @import '../../_variables.scss';
 
 .StatusBody {
+  display: flex;
+  flex-direction: column;
 
   .emoji {
     --_still_image-label-scale: 0.5;
   }
 
+  .attachments {
+    margin-top: 0.5em;
+  }
+
   & .text,
   & .summary {
     font-family: var(--postFont, sans-serif);
@@ -115,4 +121,54 @@
   .cyantext {
     color: var(--postCyantext, $fallback--cBlue);
   }
+
+  &.-compact {
+    flex-direction: row;
+
+    --emoji-size: 16px;
+
+    & .body,
+    & .attachments {
+      max-height: 3.25em;
+    }
+
+    .body {
+      overflow: hidden;
+      white-space: normal;
+      min-width: 5em;
+      flex: 5 1 auto;
+      mask-size: auto 3.5em, auto auto;
+      mask-position: 0 0, 0 0;
+      mask-repeat: repeat-x, repeat;
+      mask-image:
+        linear-gradient(to top, white 0.5em, transparent 2.5em),
+        linear-gradient(to top, white, white);
+
+      /* Autoprefixed seem to ignore this one, and also syntax is different */
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+
+    .attachments {
+      margin-top: 0;
+      flex: 1 1 auto;
+      min-width: 5em;
+      height: 100%;
+    }
+
+    .summary-wrapper {
+      .summary::after {
+        content: ': ';
+      }
+
+      line-height: inherit;
+      margin: 0;
+      border: none;
+      display: inline-block;
+    }
+
+    .text-wrapper {
+      display: inline-block;
+    }
+  }
 }
-- 
cgit v1.2.3-70-g09d2


From f35c090caaccf272c12358a2a02df71b9212d16c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 02:27:32 +0300
Subject: merged in compact notifs and improved upon it

---
 src/components/gallery/gallery.js                    | 10 +++++++---
 src/components/gallery/gallery.vue                   |  2 +-
 src/components/post_status_form/post_status_form.vue |  1 -
 src/components/status_body/status_body.scss          |  2 +-
 src/components/status_body/status_body.vue           |  5 ++++-
 src/components/status_content/status_content.vue     |  1 +
 6 files changed, 14 insertions(+), 7 deletions(-)

(limited to 'src/components/status_body/status_body.scss')

diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index cca67dbd..ab13f698 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -6,6 +6,7 @@ const Gallery = {
     'attachments',
     'limitRows',
     'descriptions',
+    'limit',
     'nsfw',
     'setMedia',
     'size',
@@ -26,11 +27,14 @@ const Gallery = {
       if (!this.attachments) {
         return []
       }
+      console.log(this.limit)
+      const attachments = this.limit > 0
+        ? this.attachments.slice(0, this.limit)
+        : this.attachments
       if (this.size === 'hide') {
-        return this.attachments.map(item => ({ minimal: true, items: [item] }))
+        return attachments.map(item => ({ minimal: true, items: [item] }))
       }
-      const rows = this.attachments.reduce((acc, attachment, i) => {
-        if (this.size === 'small' && acc.length === 2) return acc
+      const rows = attachments.reduce((acc, attachment, i) => {
         if (attachment.mimetype.includes('audio')) {
           return [...acc, { audio: true, items: [attachment] }, { items: [] }]
         }
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index cedf64d3..a1f1c26c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -25,7 +25,7 @@
             :remove="removeAttachment"
             :edit="editAttachment"
             :description="descriptions && descriptions[attachment.id]"
-            :hideDescription="tooManyAttachments && hidingLong"
+            :hideDescription="size === 'small' || tooManyAttachments && hidingLong"
             :style="itemStyle(attachment.id, row.items)"
             @setMedia="onMedia"
             @naturalSizeLoad="onNaturalSizeLoad"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index c6f84a4b..88ca4c9c 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -298,7 +298,6 @@
         :editable="true"
         :editAttachment="editAttachment"
         :removeAttachment="removeMediaFile"
-        size="small"
         @play="$emit('mediaplay', attachment.id)"
         @pause="$emit('mediapause', attachment.id)"
       />
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 516ced9d..5be21171 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -151,7 +151,7 @@
 
     .attachments {
       margin-top: 0;
-      flex: 1 1 auto;
+      flex: 1 1 0;
       min-width: 5em;
       height: 100%;
     }
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index 2be46303..3eb13ce2 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="StatusBody">
+<div
+  class="StatusBody"
+  :class="{ '-compact': compact }"
+  >
     <div class="body">
       <div
         v-if="status.summary_raw_html"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index c1533b19..90ce130d 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -20,6 +20,7 @@
         v-if="status.attachments.length !== 0"
         :nsfw="nsfwClickthrough"
         :attachments="status.attachments"
+        :limit="this.compact ? 1 : 0"
         :size="attachmentSize"
         @setMedia="onMedia"
         @play="$emit('mediaplay', attachment.id)"
-- 
cgit v1.2.3-70-g09d2


From bfe31e20eaddaa9435c98962c53c35f4184ed5fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 18 Jun 2021 14:12:50 +0300
Subject: better compact attachments

---
 src/components/attachment/attachment.js          | 17 +++++++++++++----
 src/components/gallery/gallery.vue               |  5 ++++-
 src/components/status_body/status_body.scss      |  6 +++---
 src/components/status_content/status_content.vue |  5 -----
 4 files changed, 20 insertions(+), 13 deletions(-)

(limited to 'src/components/status_body/status_body.scss')

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index a80c5c2e..84656ffa 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -68,6 +68,7 @@ const Attachment = {
           '-nsfw-placeholder': this.hidden
         },
         '-' + this.type,
+        '-' + this.size,
         `-${this.useContainFit ? 'contain' : 'cover'}-fit`
       ]
     },
@@ -102,10 +103,18 @@ const Attachment = {
       return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
     },
     useModal () {
-      const modalTypes = this.size === 'hide' ? ['image', 'video', 'audio']
-        : this.mergedConfig.playVideosInModal
-          ? ['image', 'video']
-          : ['image']
+      let modalTypes = []
+      switch (this.size) {
+        case 'hide':
+        case 'small':
+          modalTypes = ['image', 'video', 'audio', 'flash']
+          break
+        default:
+          modalTypes = this.mergedConfig.playVideosInModal
+            ? ['image', 'video', 'flash']
+            : ['image']
+          break
+      }
       return modalTypes.includes(this.type)
     },
     ...mapGetters(['mergedConfig'])
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index a1f1c26c..65175366 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -95,7 +95,10 @@
     height: 0;
     width: 100%;
     flex-grow: 1;
-    margin-top: 0.5em;
+
+    &:not(:first-child) {
+      margin-top: 0.5em;
+    }
   }
 
   &.-long {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 5be21171..f261108e 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -123,6 +123,7 @@
   }
 
   &.-compact {
+    align-items: top;
     flex-direction: row;
 
     --emoji-size: 16px;
@@ -140,9 +141,7 @@
       mask-size: auto 3.5em, auto auto;
       mask-position: 0 0, 0 0;
       mask-repeat: repeat-x, repeat;
-      mask-image:
-        linear-gradient(to top, white 0.5em, transparent 2.5em),
-        linear-gradient(to top, white, white);
+      mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
       -webkit-mask-composite: xor;
@@ -154,6 +153,7 @@
       flex: 1 1 0;
       min-width: 5em;
       height: 100%;
+      margin-left: 0.5em;
     }
 
     .summary-wrapper {
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 90ce130d..573eadf5 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -51,10 +51,5 @@ $status-margin: 0.75em;
 .StatusContent {
   flex: 1;
   min-width: 0;
-  &.-compact {
-    flex {
-      display: flex;
-    }
-  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2