From b1fea9845810db0503afcd36e55fb4a4032eacd3 Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 21 Apr 2021 22:31:27 +0200
Subject: [PATCH] Use one card-footer-item per footer button

---
 .../templates/snippets/status/layout.html     | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/bookwyrm/templates/snippets/status/layout.html b/bookwyrm/templates/snippets/status/layout.html
index 7ef269af..28bfe621 100644
--- a/bookwyrm/templates/snippets/status/layout.html
+++ b/bookwyrm/templates/snippets/status/layout.html
@@ -12,8 +12,8 @@
 {% block card-content %}{% endblock %}
 
 {% block card-footer %}
-<div class="card-content pt-0">
-    {% if moderation_mode and perms.bookwyrm.moderate_post %}
+{% if moderation_mode and perms.bookwyrm.moderate_post %}
+<div class="card-footer-item">
 
     {# moderation options #}
     <form class="dropdown-item pt-0 pb-0" name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
@@ -22,28 +22,28 @@
             {% trans "Delete status" %}
         </button>
     </form>
-    {% elif no_interact %}
-    {# nothing here #}
-    {% elif request.user.is_authenticated %}
-    <div class="is-flex">
-        <div>
-            {% trans "Reply" as button_text %}
-            {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon_with_text="comment" class="is-small is-white toggle-button" focus="id_content_reply" %}
-        </div>
-        <div class="ml-3">
-            {% include 'snippets/boost_button.html' with status=status %}
-        </div>
-        <div class="ml-3">
-            {% include 'snippets/fav_button.html' with status=status %}
-        </div>
-        {% if not moderation_mode %}
-        <div class="ml-3">
-            {% include 'snippets/status/status_options.html' with class="is-small is-white" right=True %}
-        </div>
-        {% endif %}
-    </div>
+</div>
+{% elif no_interact %}
+{# nothing here #}
+{% elif request.user.is_authenticated %}
+<div class="card-footer-item">
+    {% trans "Reply" as button_text %}
+    {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon_with_text="comment" class="is-small is-light is-transparent toggle-button" focus="id_content_reply" %}
+</div>
+<div class="card-footer-item">
+    {% include 'snippets/boost_button.html' with status=status %}
+</div>
+<div class="card-footer-item">
+    {% include 'snippets/fav_button.html' with status=status %}
+</div>
+{% if not moderation_mode %}
+<div class="card-footer-item">
+    {% include 'snippets/status/status_options.html' with class="is-small is-light is-transparent" right=True %}
+</div>
+{% endif %}
 
-    {% else %}
+{% else %}
+<div class="card-footer-item">
     <a href="/login">
         <span class="icon icon-comment is-small" title="{% trans 'Reply' %}">
             <span class="is-sr-only">{% trans "Reply" %}</span>
@@ -57,11 +57,10 @@
             <span class="is-sr-only">{% trans "Like status" %}</span>
         </span>
     </a>
-    {% endif %}
 </div>
+{% endif %}
 {% endblock %}
 
-
 {% block card-bonus %}
 {% if request.user.is_authenticated and not moderation_mode %}
 {% with status.id|uuid as uuid %}