From 978760475f5140f61f8f3dd7c3a7a0b454fa412c Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Tue, 20 Apr 2021 09:54:02 -0700
Subject: [PATCH] More compact display of statuses

---
 .../snippets/status/book_preview.html         |  14 --
 .../snippets/status/content_status.html       | 126 ++++++++++++++++
 .../snippets/status/generated_status.html     |  43 ++++++
 .../templates/snippets/status/layout.html     |  86 +++++++++++
 .../snippets/status/status_body.html          |  89 +-----------
 .../snippets/status/status_content.html       | 137 ------------------
 6 files changed, 261 insertions(+), 234 deletions(-)
 delete mode 100644 bookwyrm/templates/snippets/status/book_preview.html
 create mode 100644 bookwyrm/templates/snippets/status/content_status.html
 create mode 100644 bookwyrm/templates/snippets/status/generated_status.html
 create mode 100644 bookwyrm/templates/snippets/status/layout.html
 delete mode 100644 bookwyrm/templates/snippets/status/status_content.html

diff --git a/bookwyrm/templates/snippets/status/book_preview.html b/bookwyrm/templates/snippets/status/book_preview.html
deleted file mode 100644
index 920b9f538..000000000
--- a/bookwyrm/templates/snippets/status/book_preview.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% load bookwyrm_tags %}
-<div class="columns">
-    <div class="column is-narrow">
-        <div>
-            <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
-            {% include 'snippets/stars.html' with rating=book|rating:request.user %}
-            {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
-        </div>
-    </div>
-    <div class="column">
-        <h3 class="title is-6">{% include 'snippets/book_titleby.html' with book=book %}</h3>
-        {% include 'snippets/trimmed_text.html' with full=book|book_description %}
-    </div>
-</div>
diff --git a/bookwyrm/templates/snippets/status/content_status.html b/bookwyrm/templates/snippets/status/content_status.html
new file mode 100644
index 000000000..05662098c
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/content_status.html
@@ -0,0 +1,126 @@
+{% spaceless %}
+
+{% load bookwyrm_tags %}
+{% load i18n %}
+
+{% with status_type=status.status_type %}
+<div
+    class="block"
+    {% firstof "reviewBody" as body_prop %}
+    {% firstof 'itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"' as rating_type %}
+
+    itemprop="rating"
+    itemtype="https://schema.org/Rating"
+>
+
+    <div class="columns">
+    {% if not hide_book %}
+    {% with book=status.book|default:status.mention_books.first %}
+    <div class="column is-narrow">
+        <div>
+            <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book %}</a>
+            {% include 'snippets/stars.html' with rating=book|rating:request.user %}
+            {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
+        </div>
+    </div>
+    {% endwith %}
+    {% endif %}
+
+    <article class="column">
+        {% if status_type == 'Review' %}
+        <header class="mb-2">
+            <h3
+                class="title is-5 has-subtitle"
+                dir="auto"
+                itemprop="name"
+            >
+                {{ status.name|escape }}
+            </h3>
+
+            <h4 class="subtitle is-6">
+                <span
+                    class="is-hidden"
+                    {{ rating_type }}
+                >
+                    <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
+
+                    {# @todo Is it possible to not hard-code the value? #}
+                    <meta itemprop="bestRating" content="5">
+                </span>
+                {% include 'snippets/stars.html' with rating=status.rating %}
+            </h4>
+        </header>
+        {% endif %}
+
+        {% if status.content_warning %}
+            <div>
+                <p>{{ status.content_warning }}</p>
+
+                {% trans "Show more" as button_text %}
+
+                {% with text=button_text class="is-small" controls_text="show-status-cw" controls_uid=status.id %}
+                    {% include 'snippets/toggle/open_button.html' %}
+                {% endwith %}
+            </div>
+        {% endif %}
+
+        <div
+            {% if status.content_warning %}
+                id="show-status-cw-{{ status.id }}"
+                class="is-hidden"
+            {% endif %}
+        >
+            {% if status.content_warning %}
+                {% trans "Show less" as button_text %}
+
+                {% with text=button_text class="is-small" controls_text="show-status-cw" controls_uid=status.id %}
+                    {% include 'snippets/toggle/close_button.html' %}
+                {% endwith %}
+            {% endif %}
+
+            {% if status.quote %}
+                <div class="quote block">
+                    <blockquote dir="auto" class="content mb-2">{{ status.quote | safe }}</blockquote>
+
+                    <p> &mdash; {% include 'snippets/book_titleby.html' with book=status.book %}</p>
+                </div>
+            {% endif %}
+
+            {% if status.content and status_type != 'GeneratedNote' and status_type != 'Announce' %}
+                {% with full=status.content|safe no_trim=status.content_warning itemprop=body_prop %}
+                    {% include 'snippets/trimmed_text.html' %}
+                {% endwith %}
+            {% endif %}
+
+            {% if status.attachments.exists %}
+                <div class="block">
+                    <div class="columns">
+                        {% for attachment in status.attachments.all %}
+                            <div class="column is-narrow">
+                                <figure class="image is-128x128">
+                                    <a
+                                        href="/images/{{ attachment.image }}"
+                                        target="_blank"
+                                        aria-label="{% trans 'Open image in new window' %}"
+                                    >
+                                        <img
+                                            src="/images/{{ attachment.image }}"
+
+                                            {% if attachment.caption %}
+                                                alt="{{ attachment.caption }}"
+                                                title="{{ attachment.caption }}"
+                                            {% endif %}
+                                        >
+                                    </a>
+                                </figure>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+        </div>
+    </article>
+</div>
+
+{% endwith %}
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/generated_status.html b/bookwyrm/templates/snippets/status/generated_status.html
new file mode 100644
index 000000000..f4186cd10
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/generated_status.html
@@ -0,0 +1,43 @@
+{% spaceless %}
+
+{% load bookwyrm_tags %}
+{% load i18n %}
+
+{% if status_type == 'Rating' %}
+<div
+    class="block"
+        {% firstof 'itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"' as rating_type %}
+        itemprop="rating"
+        itemtype="https://schema.org/Rating"
+>
+    <div>
+        <span class="is-sr-only" {{ rating_type }}>
+            <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
+
+                {# @todo Is it possible to not hard-code the value? #}
+                <meta itemprop="bestRating" content="5">
+        </span>
+
+        {% include 'snippets/stars.html' with rating=status.rating %}
+    </div>
+</div>
+{% endif %}
+
+{% if not hide_book %}
+{% with book=status.book|default:status.mention_books.first %}
+<div class="columns">
+    <div class="column is-narrow">
+        <div>
+            <a href="{{ book.local_path }}">{% include 'snippets/book_cover.html' with book=book size="small" %}</a>
+        </div>
+    </div>
+    <div class="column">
+        <h3 class="title is-6 mb-1">{% include 'snippets/book_titleby.html' with book=book %}</h3>
+        <p>{{ book|book_description|default:""|truncatewords_html:20 }}</p>
+        {% include 'snippets/shelve_button/shelve_button.html' with book=book %}
+    </div>
+</div>
+{% endwith %}
+{% endif %}
+
+{% endspaceless %}
diff --git a/bookwyrm/templates/snippets/status/layout.html b/bookwyrm/templates/snippets/status/layout.html
new file mode 100644
index 000000000..5b6c0c78d
--- /dev/null
+++ b/bookwyrm/templates/snippets/status/layout.html
@@ -0,0 +1,86 @@
+{% extends 'components/card.html' %}
+{% load i18n %}
+
+{% load bookwyrm_tags %}
+{% load humanize %}
+
+{% block card-header %}
+    <h3 class="card-header-title has-background-white-ter is-block">
+        {% include 'snippets/status/status_header.html' with status=status %}
+    </h3>
+{% endblock %}
+
+{% block card-content %}{% endblock %}
+
+{% block card-footer %}
+<div class="card-footer-item">
+    {% if moderation_mode and perms.bookwyrm.moderate_post %}
+
+    {# moderation options #}
+    <form class="dropdown-item pt-0 pb-0" name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
+        {% csrf_token %}
+        <button class="button is-danger is-light" type="submit">
+            {% trans "Delete status" %}
+        </button>
+    </form>
+    {% elif no_interact %}
+    {# nothing here #}
+    {% elif request.user.is_authenticated %}
+    <div class="field has-addons">
+        <div class="control">
+            {% trans "Reply" as button_text %}
+            {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon="comment" class="is-small toggle-button" focus="id_content_reply" %}
+        </div>
+        <div class="control">
+            {% include 'snippets/boost_button.html' with status=status %}
+        </div>
+        <div class="control">
+            {% include 'snippets/fav_button.html' with status=status %}
+        </div>
+    </div>
+
+    {% else %}
+    <a href="/login">
+        <span class="icon icon-comment" title="{% trans 'Reply' %}">
+            <span class="is-sr-only">{% trans "Reply" %}</span>
+        </span>
+
+        <span class="icon icon-boost" title="{% trans 'Boost status' %}">
+            <span class="is-sr-only">{% trans "Boost status" %}</span>
+        </span>
+
+        <span class="icon icon-heart" title="{% trans 'Like status' %}">
+            <span class="is-sr-only">{% trans "Like status" %}</span>
+        </span>
+    </a>
+    {% endif %}
+</div>
+
+<div class="card-footer-item">
+    {% include 'snippets/privacy-icons.html' with item=status %}
+</div>
+
+<div class="card-footer-item">
+    <a href="{{ status.remote_id }}">{{ status.published_date | post_date }}</a>
+</div>
+{% if not moderation_mode %}
+<div class="card-footer-item">
+    {% include 'snippets/status/status_options.html' with class="is-small" right=True %}
+</div>
+{% endif %}
+{% endblock %}
+
+
+{% block card-bonus %}
+{% if request.user.is_authenticated and not moderation_mode %}
+{% with status.id|uuid as uuid %}
+<section class="is-hidden" id="show-comment-{{ status.id }}">
+    <div class="card-footer">
+        <div class="card-footer-item">
+            {% include 'snippets/create_status_form.html' with reply_parent=status type="reply" %}
+        </div>
+    </div>
+</section>
+{% endwith %}
+{% endif %}
+{% endblock %}
diff --git a/bookwyrm/templates/snippets/status/status_body.html b/bookwyrm/templates/snippets/status/status_body.html
index ffa71d5e1..58d3fbf4e 100644
--- a/bookwyrm/templates/snippets/status/status_body.html
+++ b/bookwyrm/templates/snippets/status/status_body.html
@@ -1,90 +1,13 @@
-{% extends 'components/card.html' %}
-{% load i18n %}
-
-{% load bookwyrm_tags %}
-{% load humanize %}
-
-{% block card-header %}
-    <h3 class="card-header-title has-background-white-ter is-block">
-        {% include 'snippets/status/status_header.html' with status=status %}
-    </h3>
-{% endblock %}
-
+{% extends 'snippets/status/layout.html' %}
 
 {% block card-content %}
-    {% include 'snippets/status/status_content.html' with status=status %}
-{% endblock %}
+{% with status_type=status.status_type %}
 
-
-{% block card-footer %}
-<div class="card-footer-item">
-    {% if moderation_mode and perms.bookwyrm.moderate_post %}
-
-    {# moderation options #}
-    <form class="dropdown-item pt-0 pb-0" name="delete-{{status.id}}" action="/delete-status/{{ status.id }}" method="post">
-        {% csrf_token %}
-        <button class="button is-danger is-light" type="submit">
-            {% trans "Delete status" %}
-        </button>
-    </form>
-    {% elif no_interact %}
-    {# nothing here #}
-    {% elif request.user.is_authenticated %}
-    <div class="field has-addons">
-        <div class="control">
-            {% trans "Reply" as button_text %}
-            {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text=button_text icon="comment" class="is-small toggle-button" focus="id_content_reply" %}
-        </div>
-        <div class="control">
-            {% include 'snippets/boost_button.html' with status=status %}
-        </div>
-        <div class="control">
-            {% include 'snippets/fav_button.html' with status=status %}
-        </div>
-    </div>
-
-    {% else %}
-    <a href="/login">
-        <span class="icon icon-comment" title="{% trans 'Reply' %}">
-            <span class="is-sr-only">{% trans "Reply" %}</span>
-        </span>
-
-        <span class="icon icon-boost" title="{% trans 'Boost status' %}">
-            <span class="is-sr-only">{% trans "Boost status" %}</span>
-        </span>
-
-        <span class="icon icon-heart" title="{% trans 'Like status' %}">
-            <span class="is-sr-only">{% trans "Like status" %}</span>
-        </span>
-    </a>
-    {% endif %}
-</div>
-
-<div class="card-footer-item">
-    {% include 'snippets/privacy-icons.html' with item=status %}
-</div>
-
-<div class="card-footer-item">
-    <a href="{{ status.remote_id }}">{{ status.published_date | post_date }}</a>
-</div>
-{% if not moderation_mode %}
-<div class="card-footer-item">
-    {% include 'snippets/status/status_options.html' with class="is-small" right=True %}
-</div>
+{% if status_type == 'GeneratedNote' or status_type == 'Rating' %}
+    {% include 'snippets/status/generated_status.html' with status=status %}
+{% else %}
+    {% include 'snippets/status/content_status.html' with status=status %}
 {% endif %}
-{% endblock %}
 
-
-{% block card-bonus %}
-{% if request.user.is_authenticated and not moderation_mode %}
-{% with status.id|uuid as uuid %}
-<section class="is-hidden" id="show-comment-{{ status.id }}">
-    <div class="card-footer">
-        <div class="card-footer-item">
-            {% include 'snippets/create_status_form.html' with reply_parent=status type="reply" %}
-        </div>
-    </div>
-</section>
 {% endwith %}
-{% endif %}
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/status/status_content.html b/bookwyrm/templates/snippets/status/status_content.html
deleted file mode 100644
index 402c4aabd..000000000
--- a/bookwyrm/templates/snippets/status/status_content.html
+++ /dev/null
@@ -1,137 +0,0 @@
-{% spaceless %}
-
-{% load bookwyrm_tags %}
-{% load i18n %}
-
-{% with status_type=status.status_type %}
-<div
-    class="block"
-
-    {% if status_type == 'Review' %}
-        {% firstof "reviewBody" as body_prop %}
-        {% firstof 'itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"' as rating_type %}
-    {% endif %}
-
-    {% if status_type == 'Rating' %}
-        itemprop="rating"
-        itemtype="https://schema.org/Rating"
-    {% endif %}
->
-    {% if status_type == 'Review' or status_type == 'Rating' %}
-        <div>
-            {% if status.name %}
-                <h3
-                    class="title is-5 has-subtitle"
-                    dir="auto"
-                    itemprop="name"
-                >
-                    {{ status.name|escape }}
-                </h3>
-            {% endif %}
-
-            <span
-                class="is-sr-only"
-                {{ rating_type }}
-            >
-                <meta itemprop="ratingValue" content="{{ status.rating|floatformat }}">
-
-                {% if status_type == 'Rating' %}
-                    {# @todo Is it possible to not hard-code the value? #}
-                    <meta itemprop="bestRating" content="5">
-                {% endif %}
-            </span>
-
-            {% include 'snippets/stars.html' with rating=status.rating %}
-        </div>
-    {% endif %}
-
-    {% if status.content_warning %}
-        <div>
-            <p>{{ status.content_warning }}</p>
-
-            {% trans "Show more" as button_text %}
-
-            {% with text=button_text class="is-small" controls_text="show-status-cw" controls_uid=status.id %}
-                {% include 'snippets/toggle/open_button.html' %}
-            {% endwith %}
-        </div>
-    {% endif %}
-
-    <div
-        {% if status.content_warning %}
-            id="show-status-cw-{{ status.id }}"
-            class="is-hidden"
-        {% endif %}
-    >
-        {% if status.content_warning %}
-            {% trans "Show less" as button_text %}
-
-            {% with text=button_text class="is-small" controls_text="show-status-cw" controls_uid=status.id %}
-                {% include 'snippets/toggle/close_button.html' %}
-            {% endwith %}
-        {% endif %}
-
-        {% if status.quote %}
-            <div class="quote block">
-                <blockquote dir="auto" class="content mb-2">{{ status.quote | safe }}</blockquote>
-
-                <p> &mdash; {% include 'snippets/book_titleby.html' with book=status.book %}</p>
-            </div>
-        {% endif %}
-
-        {% if status.content and status_type != 'GeneratedNote' and status_type != 'Announce' %}
-            {% with full=status.content|safe no_trim=status.content_warning itemprop=body_prop %}
-                {% include 'snippets/trimmed_text.html' %}
-            {% endwith %}
-        {% endif %}
-
-        {% if status.attachments.exists %}
-            <div class="block">
-                <div class="columns">
-                    {% for attachment in status.attachments.all %}
-                        <div class="column is-narrow">
-                            <figure class="image is-128x128">
-                                <a
-                                    href="/images/{{ attachment.image }}"
-                                    target="_blank"
-                                    aria-label="{% trans 'Open image in new window' %}"
-                                >
-                                    <img
-                                        src="/images/{{ attachment.image }}"
-
-                                        {% if attachment.caption %}
-                                            alt="{{ attachment.caption }}"
-                                            title="{{ attachment.caption }}"
-                                        {% endif %}
-                                    >
-                                </a>
-                            </figure>
-                        </div>
-                    {% endfor %}
-                </div>
-            </div>
-        {% endif %}
-    </div>
-</div>
-
-{% if not hide_book %}
-    {% if status.book or status.mention_books.count %}
-        <div
-            {% if status_type != 'GeneratedNote' %}
-                class="box has-background-white-bis"
-            {% endif %}
-        >
-            {% if status.book %}
-                {% with book=status.book %}
-                    {% include 'snippets/status/book_preview.html' %}
-                {% endwith %}
-            {% elif status.mention_books.count %}
-                {% with book=status.mention_books.first %}
-                    {% include 'snippets/status/book_preview.html' %}
-                {% endwith %}
-            {% endif %}
-        </div>
-    {% endif %}
-{% endif %}
-{% endwith %}
-{% endspaceless %}