From e92166c7f7281de1bdeb0336c3ef36d40b3447bf Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Sun, 25 Apr 2021 20:05:31 +0200
Subject: [PATCH] Directory: Homogenize cards heights

When the content of a profile card stretches it in height, the grid is not homogenous. This PR adds a CSS class that'll display cards as stretchable columns. The card content will be able to grow, which should always place the card footer at the bottom of the card.
---
 bookwyrm/static/css/bookwyrm.css            | 10 ++++++++++
 bookwyrm/templates/directory/directory.html |  6 +++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index cf8e83996..9e74d69f1 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -53,6 +53,16 @@ body {
     background-color: transparent;
 }
 
+.card.is-stretchable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.card.is-stretchable .card-content {
+    flex-grow: 1;
+}
+
 /** Shelving
  ******************************************************************************/
 
diff --git a/bookwyrm/templates/directory/directory.html b/bookwyrm/templates/directory/directory.html
index 430e85394..2fa8a5aea 100644
--- a/bookwyrm/templates/directory/directory.html
+++ b/bookwyrm/templates/directory/directory.html
@@ -41,7 +41,7 @@
 <div class="columns is-multiline">
     {% for user in users %}
     <div class="column is-one-third">
-        <div class="card block">
+        <div class="card is-stretchable">
             <div class="card-content">
                 <div class="media">
                     <a href="{{ user.local_path }}" class="media-left">
@@ -56,13 +56,13 @@
                     </div>
                 </div>
 
-                <div class="content">
+                <div>
                 {% if user.summary %}
                     {{ user.summary | to_markdown | safe | truncatechars_html:40 }}
                 {% else %}&nbsp;{% endif %}
                 </div>
             </div>
-            <footer class="card-footer content">
+            <footer class="card-footer">
                 {% if user != request.user %}
                 {% if user.mutuals %}
                 <div class="card-footer-item">