From 8572276fc7d8c7eb6f14891451ea636a87c146c1 Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Mon, 15 Apr 2019 21:25:33 -0600
Subject: [PATCH] Rework CSS grid for topics in listings

This was mostly motivated by a hope that this will help with the
mysterious iOS 12 bug that's causing topic listings to behave strangely
when the user tries to tap on the comments link (space gets added and
the link moves down).

The main change here is to add a new .topic-with-excerpt class, and only
add the "content" area to the CSS grid when that class is present,
instead of always adding it and just leaving it empty if the topic has
no excerpt.

In addition, this switches to using grid-gap to space out the rows
instead of margins, and center-aligns the row contents vertically on
mobile, where we want them spaced out a little to help avoid misclicks.
---
 tildes/scss/modules/_topic.scss              | 30 +++++++++++++-------
 tildes/tildes/templates/macros/topics.jinja2 |  4 +++
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/tildes/scss/modules/_topic.scss b/tildes/scss/modules/_topic.scss
index f7a7393..b2d9147 100644
--- a/tildes/scss/modules/_topic.scss
+++ b/tildes/scss/modules/_topic.scss
@@ -15,20 +15,21 @@
   grid-template-areas:
     "title    voting"
     "metadata voting"
-    "content  voting"
     "info     info";
   grid-template-columns: 1fr auto;
+  grid-gap: 0.2rem;
 
   // set some minimum row heights on mobile to space them out a bit
-  grid-template-rows:
-    auto
-    minmax($min-touch-size, auto)
-    auto
-    minmax($min-touch-size, auto);
+  $row-height: $min-touch-size - 4px;  // subtract grid-gap
+  grid-template-rows: repeat(3, minmax($row-height, auto));
+
+  // on larger screens, rows can size automatically
   @media (min-width: $size-md) {
-    grid-template-rows: auto auto minmax(0, auto) auto;
+    grid-template-rows: auto;
   }
 
+  align-items: center;
+
   position: relative;
 
   padding-left: 0.2rem;
@@ -40,7 +41,6 @@
 
   header {
     grid-area: title;
-    margin-bottom: 0.2rem;
     display: flex;
     min-height: 1rem;
   }
@@ -111,7 +111,6 @@
 .topic-metadata {
   display: flex;
   align-items: baseline;
-  margin-bottom: 0.2rem;
   max-height: 4rem;
   overflow: hidden;
 }
@@ -166,7 +165,7 @@
   }
 
   max-width: none;
-  margin: 0 0.2rem 0.2rem 0;
+  margin: 0;
   font-style: italic;
 
   h1 {
@@ -272,6 +271,17 @@
   }
 }
 
+.topic-with-excerpt {
+  // on larger screens only, add the "content" grid area
+  @media (min-width: $size-md) {
+    grid-template-areas:
+      "title    voting"
+      "metadata voting"
+      "content  voting"
+      "info     info";
+  }
+}
+
 .is-topic-mine {
   border-left: 3px solid;
   margin-left: -3px;
diff --git a/tildes/tildes/templates/macros/topics.jinja2 b/tildes/tildes/templates/macros/topics.jinja2
index 61a9b08..392743d 100644
--- a/tildes/tildes/templates/macros/topics.jinja2
+++ b/tildes/tildes/templates/macros/topics.jinja2
@@ -178,6 +178,10 @@
     {% do classes.append('is-topic-official') %}
   {% endif %}
 
+  {% if topic.content_excerpt %}
+    {% do classes.append("topic-with-excerpt") %}
+  {% endif %}
+
   {{ classes|join(' ') }}
 {% endmacro %}