From b5be9b576d9fa57c4e3bf1cb9b9f445d8cab9689 Mon Sep 17 00:00:00 2001
From: Tyler Kennedy <tk@tkte.ch>
Date: Sat, 24 Dec 2022 00:54:03 -0500
Subject: [PATCH] Ux gallery tweaks (#252)

Tweaks to attachment CSS to show a better looking gallery view, video support
---
 activities/models/post_attachment.py |  3 +++
 static/css/style.css                 | 25 ++++++++++++++++++-------
 templates/activities/_post.html      |  6 ++++++
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/activities/models/post_attachment.py b/activities/models/post_attachment.py
index 0162f5a..2dfbcb9 100644
--- a/activities/models/post_attachment.py
+++ b/activities/models/post_attachment.py
@@ -72,6 +72,9 @@ class PostAttachment(StatorModel):
             "image/webp",
         ]
 
+    def is_video(self):
+        return self.mimetype in ["video/webm"]
+
     def thumbnail_url(self) -> RelativeAbsoluteUrl:
         if self.thumbnail:
             return RelativeAbsoluteUrl(self.thumbnail.url)
diff --git a/static/css/style.css b/static/css/style.css
index 144b88b..6cced33 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1127,18 +1127,24 @@ form .post {
 
 .post .attachments {
     padding-top: 4px;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    grid-column-gap: 4px;
+    grid-row-gap: 4px;
 }
 
-.post .attachments a.image {
-    display: inline-block;
-    border: 3px solid var(--color-bg-menu);
-    border-radius: 3px;
+.post .attachments a {
+    display: block;
+    width: 100%;
 }
 
 .post .attachments a.image img {
     display: block;
-    max-width: 200px;
-    max-height: 200px;
+    max-width: 100%;
+}
+
+.post .attachments video {
+    max-width: 100%;
 }
 
 .post .actions {
@@ -1327,7 +1333,11 @@ form .post {
         position: fixed;
         height: 100%;
         right: 0;
-        top: 50px;
+        top: var(--md-header-height);
+    }
+
+    .right-column nav {
+        padding: 0;
     }
 
     body:not(.no-sidebar) header {
@@ -1396,6 +1406,7 @@ form .post {
 
     .right-column {
         width: var(--sm-sidebar-width);
+        top: var(--sm-header-height);
     }
 
     .right-column nav {
diff --git a/templates/activities/_post.html b/templates/activities/_post.html
index 63bdedf..55f5256 100644
--- a/templates/activities/_post.html
+++ b/templates/activities/_post.html
@@ -45,6 +45,12 @@
                 <a href="{{ attachment.full_url.relative }}" class="image">
                   <img src="{{ attachment.thumbnail_url.relative }}" title="{{ attachment.name }}" alt="{{ attachment.name }}" loading="lazy" />
                 </a>
+              {% elif attachment.is_video %}
+                <a href="{{ attachment.full_url.relative }}" class="video">
+                  <video muted controls loop>
+                    <source src="{{ attachment.full_url.relative }}">
+                  </video>
+                </a>
               {% endif %}
             {% endfor %}
           </div>