From fa0ccece327d9804f7dc343ed326b7f201ece608 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 10:51:57 +0800
Subject: [PATCH] Handle > 4 medias

- Mastodon now doesn't allow >4, so this is for the future or maybe the forks.
- Using grid for better control on how images lay out
---
 src/components/status.css | 45 ++++++++++++++++++++++++---------------
 src/components/status.jsx | 23 +++++++++++---------
 2 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/components/status.css b/src/components/status.css
index e3a96cb3..68d82600 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -280,37 +280,48 @@
 
 .status .media-container {
   margin-top: 8px;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 1fr;
   gap: 2px;
-  flex-direction: row;
+  height: 160px;
 }
-.status:not(.large) .media-container.media-gt4 {
-  flex-wrap: nowrap;
-  overflow: auto;
+.status .media-container.media-gt2 {
+  height: 200px;
+}
+.status.large :is(.media-container, .media-container.media-gt2) {
+  height: auto;
+  max-height: 80vh;
 }
 .status .media {
-  flex-grow: 1;
-  flex-basis: calc(50% - 8px);
   border-radius: 8px;
   overflow: hidden;
-  max-height: 160px;
   min-height: 80px;
   border: 1px solid var(--outline-color);
 }
-.status .media-container.media-gt2 .media {
-  aspect-ratio: 1 / 1;
+.status .media:only-child {
+  grid-area: span 2 / span 2;
 }
-.status:not(.large) .media-container.media-gt4 .media {
-  min-width: 80px;
+.status .media:first-child:nth-last-child(3) {
+  grid-area: span 2;
 }
+
+.status:not(.large) .media-container.media-gt4 .media:last-child {
+  position: relative;
+}
+.status:not(.large) .media-container.media-gt4 .media:last-child:after {
+  content: '4+';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  place-content: center;
+  place-items: center;
+  background-color: var(--bg-faded-blur-color);
+}
+
 .status .media:hover {
   border-color: var(--outline-hover-color);
 }
-.status .media.block {
-  flex-basis: 100%;
-  max-height: auto;
-}
 .status .media :is(img, video) {
   width: 100%;
   height: 100%;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 8cd055d6..a0f4c3b8 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -417,16 +417,19 @@ function Status({
                 mediaAttachments.length > 2 ? 'media-gt2' : ''
               } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
             >
-              {mediaAttachments.map((media, i) => (
-                <Media
-                  media={media}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    setShowMediaModal(i);
-                  }}
-                />
-              ))}
+              {mediaAttachments
+                .slice(0, size === 'l' ? undefined : 4)
+                .map((media, i) => (
+                  <Media
+                    key={media.id}
+                    media={media}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setShowMediaModal(i);
+                    }}
+                  />
+                ))}
             </div>
           )}
           {!!card &&