From e8f9e3ab289e60f8e207d6ed0b82604624cc8e59 Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Thu, 2 Dec 2021 21:29:16 -0600
Subject: [PATCH] posts: show 2 posts per row on mobile instead of 3.

Three thumbnails per row was pretty tight for most phones since the most
common phone resolution is 360x640. Two thumbnails per row lets us have
thumbnails up to 180x180 in size.
---
 .../post_gallery_component.html.erb           |  2 +-
 .../post_gallery_component.scss               |  4 ----
 .../src/styles/common/utilities.scss          | 20 +++++++++++++++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/components/post_gallery_component/post_gallery_component.html.erb b/app/components/post_gallery_component/post_gallery_component.html.erb
index 3e10e11a1..bf746ef2a 100644
--- a/app/components/post_gallery_component/post_gallery_component.html.erb
+++ b/app/components/post_gallery_component/post_gallery_component.html.erb
@@ -2,7 +2,7 @@
   <% if empty? %>
     <p>No posts found.</p>
   <% else %>
-    <div class="posts-container user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
+    <div class="posts-container grid gap-1 grid-cols-2 md:block user-disable-cropped-<%= current_user.disable_cropped_thumbnails? %>">
       <% posts.each do |post| -%>
 <%    %><%= post_preview(post, **options) -%>
       <% end -%>
diff --git a/app/components/post_gallery_component/post_gallery_component.scss b/app/components/post_gallery_component/post_gallery_component.scss
index b2cb868cd..fc88b47de 100644
--- a/app/components/post_gallery_component/post_gallery_component.scss
+++ b/app/components/post_gallery_component/post_gallery_component.scss
@@ -15,10 +15,6 @@
 @media screen and (max-width: 660px) {
   .post-gallery-full {
     .posts-container {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 0.25rem;
-
       &.user-disable-cropped-false article.post-preview img.has-cropped-true {
         object-fit: none;
       }
diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index fd09c2cc2..6577694d3 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -13,7 +13,9 @@ $spacer: 0.25rem; /* 4px */
 .font-bold { font-weight: bold; }
 
 .inline-block { display: inline-block; }
+.block { display: block; }
 .flex { display: flex; }
+.grid { display: grid; }
 
 .text-center { text-align: center; }
 .text-muted { color: var(--muted-text-color); }
@@ -34,8 +36,10 @@ $spacer: 0.25rem; /* 4px */
 
 .absolute { position: absolute; }
 
-.top-0\.5 { top: 0.5 * $spacer; }
-.left-0\.5 { left: 0.5 * $spacer; }
+.top-0\.5    { top: 0.5 * $spacer; }
+.bottom-0\.5 { bottom: 0.5 * $spacer; }
+.left-0\.5   { left: 0.5 * $spacer; }
+.right-0\.5  { right: 0.5 * $spacer; }
 
 .rounded-sm { border-radius: 0.5 * $spacer; }
 .rounded    { border-radius: 1.0 * $spacer; }
@@ -75,6 +79,8 @@ $spacer: 0.25rem; /* 4px */
 .space-x-4 > * + * { margin-left: 4 * $spacer; }
 .space-y-4 > * + * { margin-top: 4 * $spacer; }
 
+.gap-1 { gap: 1 * $spacer; }
+
 .divide-y-1 > * + * { border-top: 1px solid var(--divider-border-color); }
 
 .align-top { vertical-align: top; }
@@ -87,6 +93,14 @@ $spacer: 0.25rem; /* 4px */
 
 .float-right { float: right; }
 
+.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.grid-cols-8  { grid-template-columns: repeat(8, minmax(0, 1fr)); }
+.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
 .thin-scrollbar {
   overflow-x: hidden;
   overflow-y: auto;
@@ -143,7 +157,9 @@ $spacer: 0.25rem; /* 4px */
 
 @media screen and (min-width: 660px) {
   .md\:inline-block { display: inline-block; }
+  .md\:block { display: block; }
   .md\:flex { display: flex; }
+  .md\:grid { display: grid; }
 
   .md\:space-x-4 > * + * { margin-left: 4 * $spacer; }
   .md\:space-x-8 > * + * { margin-left: 8 * $spacer; }