From 4cb520f24213df702b7ade385a76d74f3132cb8e Mon Sep 17 00:00:00 2001
From: Joachim <joachim.robert@protonmail.com>
Date: Wed, 29 Dec 2021 19:50:32 +0100
Subject: [PATCH] Front-end: New look and behavior for Filters and Result
 panels

---
 bookwyrm/static/css/bookwyrm.css              | 174 ++++++++++++++++--
 bookwyrm/static/css/vendor/icons.css          |   4 +
 bookwyrm/templates/feed/feed.html             |  61 ++----
 bookwyrm/templates/feed/feed_filters.html     |   5 +
 .../templates/feed/status_types_filter.html   |  16 ++
 bookwyrm/templates/search/book.html           |  31 ++--
 .../snippets/filters_panel/filter_field.html  |   8 +-
 .../snippets/filters_panel/filters_panel.html |  65 ++++---
 bookwyrm/views/feed.py                        |  10 +-
 9 files changed, 260 insertions(+), 114 deletions(-)
 create mode 100644 bookwyrm/templates/feed/feed_filters.html
 create mode 100644 bookwyrm/templates/feed/status_types_filter.html

diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css
index f8d3b5316..407f4ea8e 100644
--- a/bookwyrm/static/css/bookwyrm.css
+++ b/bookwyrm/static/css/bookwyrm.css
@@ -124,6 +124,18 @@ button::-moz-focus-inner {
         border-bottom: 1px solid #ededed;
         border-right: 0;
     }
+
+    .is-flex-direction-row-mobile {
+        flex-direction: row !important;
+    }
+
+    .is-flex-direction-column-mobile {
+        flex-direction: column !important;
+    }
+}
+
+.tag.is-small {
+    height: auto;
 }
 
 .button.is-transparent {
@@ -180,7 +192,7 @@ input[type=file]::file-selector-button:hover {
 /** General `details` element styles
  ******************************************************************************/
 
-summary {
+details summary {
     cursor: pointer;
 }
 
@@ -188,22 +200,11 @@ summary::-webkit-details-marker {
     display: none;
 }
 
-summary::marker {
+details summary::marker {
     content: none;
 }
 
-.detail-pinned-button summary {
-    position: absolute;
-    right: 0;
-}
-
-.detail-pinned-button form {
-    float: left;
-    width: -webkit-fill-available;
-    margin-top: 1em;
-}
-
-/** Details dropdown
+/** Dropdown w/ Details element
  ******************************************************************************/
 
 details.dropdown[open] summary.dropdown-trigger::before {
@@ -215,11 +216,11 @@ details.dropdown[open] summary.dropdown-trigger::before {
     right: 0;
 }
 
-details .dropdown-menu {
+details.dropdown .dropdown-menu {
     display: block !important;
 }
 
-details .dropdown-menu button {
+details.dropdown .dropdown-menu button {
     /* Fix weird Safari defaults */
     box-sizing: border-box;
 }
@@ -254,6 +255,57 @@ details.dropdown .dropdown-menu a:focus-visible {
     }
 }
 
+details.detail-pinned-button summary {
+    position: absolute;
+    right: 0;
+}
+
+details.detail-pinned-button form {
+    float: left;
+    width: 100%;
+    margin-top: 1em;
+}
+
+/** Details panel
+ ******************************************************************************/
+
+details.details-panel {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    transition:  box-shadow 0.2s ease;
+    padding: 0.75rem;
+}
+
+details[open].details-panel,
+details.details-panel:hover {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+}
+
+details.details-panel summary {
+    position: relative;
+}
+
+details.details-panel summary .details-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: rotate(45deg);
+    transition: transform 0.2s ease;
+}
+
+details[open].details-panel summary .details-close {
+    transform: rotate(0deg);
+}
+
+@media only screen and (min-width: 769px) {
+    .details-panel .filters-field:not(:last-child) {
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        margin-top: 0.75rem;
+        margin-bottom: 0.75rem;
+        padding-top: 0.25rem;
+        padding-bottom: 0.25rem;
+    }
+}
+
 /** Shelving
  ******************************************************************************/
 
@@ -1116,3 +1168,93 @@ ol.ordered-list li::before {
         margin-bottom: 0.75rem !important;
     }
 }
+
+/* Gaps (for Flexbox and Grid)
+ *
+ * Those are supplementary rules to Bulma’s. They follow the same conventions.
+ * Add those you’ll need.
+ ******************************************************************************/
+
+.is-gap-0 {
+    gap: 0;
+}
+
+.is-gap-1 {
+    gap: 0.25rem;
+}
+
+.is-gap-2 {
+    gap: 0.5rem;
+}
+
+.is-gap-3 {
+    gap: 0.75rem;
+}
+
+.is-gap-4 {
+    gap: 1rem;
+}
+
+.is-gap-5 {
+    gap: 1.5rem;
+}
+
+.is-gap-6 {
+    gap: 3rem;
+}
+
+.is-row-gap-0 {
+    row-gap: 0;
+}
+
+.is-row-gap-1 {
+    row-gap: 0.25rem;
+}
+
+.is-row-gap-2 {
+    row-gap: 0.5rem;
+}
+
+.is-row-gap-3 {
+    row-gap: 0.75rem;
+}
+
+.is-row-gap-4 {
+    row-gap: 1rem;
+}
+
+.is-row-gap-5 {
+    row-gap: 1.5rem;
+}
+
+.is-row-gap-6 {
+    row-gap: 3rem;
+}
+
+.is-column-gap-0 {
+    column-gap: 0;
+}
+
+.is-column-gap-1 {
+    column-gap: 0.25rem;
+}
+
+.is-column-gap-2 {
+    column-gap: 0.5rem;
+}
+
+.is-column-gap-3 {
+    column-gap: 0.75rem;
+}
+
+.is-column-gap-4 {
+    column-gap: 1rem;
+}
+
+.is-column-gap-5 {
+    column-gap: 1.5rem;
+}
+
+.is-column-gap-6 {
+    column-gap: 3rem;
+}
diff --git a/bookwyrm/static/css/vendor/icons.css b/bookwyrm/static/css/vendor/icons.css
index 9c35b1be7..4bc7cca55 100644
--- a/bookwyrm/static/css/vendor/icons.css
+++ b/bookwyrm/static/css/vendor/icons.css
@@ -25,6 +25,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon.is-small {
+  font-size: small;
+}
+
 .icon-book:before {
   content: "\e901";
 }
diff --git a/bookwyrm/templates/feed/feed.html b/bookwyrm/templates/feed/feed.html
index 45d8f1ae9..42f175b38 100644
--- a/bookwyrm/templates/feed/feed.html
+++ b/bookwyrm/templates/feed/feed.html
@@ -6,57 +6,22 @@
 <h1 class="title">
     {{ tab.name }}
 </h1>
-<div class="block is-clipped">
-    <div class="is-pulled-left">
-        <div class="tabs">
-            <ul>
-                {% for stream in streams %}
-                <li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
-                    <a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
-                </li>
-                {% endfor %}
-            </ul>
-        </div>
-    </div>
 
-    {# feed settings #}
-    <details class="detail-pinned-button" {% if settings_saved %}open{% endif %}>
-        <summary class="control">
-            <span class="button">
-                <span class="icon icon-dots-three m-0-mobile" aria-hidden="true"></span>
-                <span class="is-sr-only-mobile">{{ _("Feed settings") }}</span>
-            </span>
-        </summary>
-        <form class="notification level is-align-items-flex-end" method="post" action="/{{ tab.key }}#feed">
-            {% csrf_token %}
-
-            <div class="level-left">
-                <div class="field">
-                    <div class="control">
-                        <span class="is-flex is-align-items-baseline">
-                            <label class="label mt-2 mb-1">Status types</label>
-                            {% if settings_saved %}
-                                <span class="tag is-success is-light ml-2">{{ _("Saved!") }}</span>
-                            {% endif %}
-                        </span>
-                        {% for name, value in feed_status_types_options %}
-                        <label class="mr-2">
-                            <input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
-                            {{ value }}
-                        </label>
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-            <div class="level-right control">
-                <button class="button is-small is-primary is-outlined" type="submit">
-                    {{ _("Save settings") }}
-                </button>
-            </div>
-        </form>
-    </details>
+<div class="tabs">
+    <ul>
+        {% for stream in streams %}
+        <li class="{% if tab.key == stream.key %}is-active{% endif %}"{% if tab.key == stream.key %} aria-current="page"{% endif %}>
+            <a href="/{{ stream.key }}#feed">{{ stream.shortname }}</a>
+        </li>
+        {% endfor %}
+    </ul>
 </div>
 
+{# feed settings #}
+{% with "/"|add:tab.key|add:"#feed" as action %}
+{% include 'feed/feed_filters.html' with size="small" method="post" action=action %}
+{% endwith %}
+
 {# announcements and system messages #}
 {% if not activities.number > 1 %}
 <a href="{{ request.path }}" class="transition-y is-hidden notification is-primary is-block" data-poll-wrapper>
diff --git a/bookwyrm/templates/feed/feed_filters.html b/bookwyrm/templates/feed/feed_filters.html
new file mode 100644
index 000000000..e08f64303
--- /dev/null
+++ b/bookwyrm/templates/feed/feed_filters.html
@@ -0,0 +1,5 @@
+{% extends 'snippets/filters_panel/filters_panel.html' %}
+
+{% block filter_fields %}
+{% include 'feed/status_types_filter.html' %}
+{% endblock %}
diff --git a/bookwyrm/templates/feed/status_types_filter.html b/bookwyrm/templates/feed/status_types_filter.html
new file mode 100644
index 000000000..1a6255b6e
--- /dev/null
+++ b/bookwyrm/templates/feed/status_types_filter.html
@@ -0,0 +1,16 @@
+{% extends 'snippets/filters_panel/filter_field.html' %}
+{% load i18n %}
+
+{% block filter %}
+<label class="label mt-2 mb-1">Status types</label>
+
+<div class="is-flex is-flex-direction-row is-flex-direction-column-mobile">
+    {% for name, value in feed_status_types_options %}
+    <label class="mr-2">
+        <input type="checkbox" name="feed_status_types" value="{{ name }}" {% if name in user.feed_status_types %}checked=""{% endif %}/>
+        {{ value }}
+    </label>
+    {% endfor %}
+</div>
+{% endblock %}
+
diff --git a/bookwyrm/templates/search/book.html b/bookwyrm/templates/search/book.html
index 66adb8c83..a77340c64 100644
--- a/bookwyrm/templates/search/book.html
+++ b/bookwyrm/templates/search/book.html
@@ -8,7 +8,7 @@
 <ul class="block">
 {% for result in local_results.results %}
     <li class="pd-4 mb-5">
-        <div class="columns is-mobile is-gapless">
+        <div class="columns is-mobile is-gapless mb-0">
             <div class="column is-cover">
                 {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' %}
             </div>
@@ -34,34 +34,29 @@
 <div class="block">
 {% for result_set in results|slice:"1:" %}
     {% if result_set.results %}
-    <section class="box has-background-white-bis">
+    <section class="mb-5">
         {% if not result_set.connector.local %}
-        <header class="columns is-mobile">
-            <div class="column">
-                <h3 class="title is-5">
+        <details class="details-panel box" {% if forloop.first %}open{% endif %}>
+            <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
+                <h3 class="mb-0 title is-5">
                     {% trans 'Results from' %}
                     <a href="{{ result_set.connector.base_url }}" target="_blank">{{ result_set.connector.name|default:result_set.connector.identifier }}</a>
                 </h3>
-            </div>
-            <div class="column is-narrow">
-                {% trans "Open" as button_text %}
-                {% include 'snippets/toggle/open_button.html' with text=button_text controls_text="more_results_panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-down" pressed=forloop.first %}
-                {% trans "Close" as button_text %}
-                {% include 'snippets/toggle/close_button.html' with text=button_text controls_text="more_results_panel" controls_uid=result_set.connector.identifier class="is-small" icon_with_text="arrow-up" pressed=forloop.first %}
-            </div>
-        </header>
+
+                <span class="details-close icon icon-x" aria-hidden></span>
+            </summary>
         {% endif %}
 
-        <div class="box has-background-white is-shadowless{% if not forloop.first %} is-hidden{% endif %}" id="more_results_panel_{{ result_set.connector.identifier }}">
+        <div class="mt-5">
             <div class="is-flex is-flex-direction-row-reverse">
                 <div>
                 </div>
 
                 <ul class="is-flex-grow-1">
                     {% for result in result_set.results %}
-                        <li class="mb-5">
+                        <li class="{% if not forloop.last %}mb-5{% endif %}">
                             <div class="columns is-mobile is-gapless">
-                                <div class="columns is-mobile is-gapless">
+                                <div class="column is-1 is-cover">
                                     {% include 'snippets/book_cover.html' with book=result cover_class='is-w-xs is-h-xs' external_path=True %}
                                 </div>
                                 <div class="column is-10 ml-3">
@@ -91,7 +86,9 @@
                     {% endfor %}
                 </ul>
             </div>
-        </div>
+        {% if not result_set.connector.local %}
+        </details>
+        {% endif %}
     </section>
     {% endif %}
     {% endfor %}
diff --git a/bookwyrm/templates/snippets/filters_panel/filter_field.html b/bookwyrm/templates/snippets/filters_panel/filter_field.html
index 0a8daaa11..7de8dc25c 100644
--- a/bookwyrm/templates/snippets/filters_panel/filter_field.html
+++ b/bookwyrm/templates/snippets/filters_panel/filter_field.html
@@ -1,6 +1,4 @@
-<div class="column is-flex">
-    <div class="box is-flex-grow-1">
-        {% block filter %}
-        {% endblock %}
-    </div>
+<div class="filters-field column">
+    {% block filter %}
+    {% endblock %}
 </div>
diff --git a/bookwyrm/templates/snippets/filters_panel/filters_panel.html b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
index bc600ba27..b4e2e88d0 100644
--- a/bookwyrm/templates/snippets/filters_panel/filters_panel.html
+++ b/bookwyrm/templates/snippets/filters_panel/filters_panel.html
@@ -1,28 +1,47 @@
 {% load i18n %}
-<div class="notification content">
-    <h2 class="columns is-mobile mb-0">
-        <span class="column pb-0">Filters</span>
+<details class="details-panel box is-size-{{ size|default:'normal' }}" {% if filters_applied %}open{% endif %}>
+    <summary class="is-flex is-align-items-center is-flex-wrap-wrap is-gap-2">
+        <h2 class="mb-0 title {% if size == 'small' %}is-6{% else %}is-5{% endif %} is-flex-shrink-0">
+            {% trans "Filters" %}
 
-        <span class="column is-narrow pb-0">
-            {% trans "Show filters" as text %}
-            {% include 'snippets/toggle/open_button.html' with text=text controls_text="filters" icon_with_text="arrow-down" class="is-small" focus="filters" %}
-            {% trans "Hide filters" as text %}
-            {% include 'snippets/toggle/close_button.html' with text=text controls_text="filters" icon_with_text="arrow-up" class="is-small" %}
+        </h2>
+
+        {% if filters_applied %}
+        <span class="tag is-success is-light ml-2 mb-0 is-{{ size|default:'normal' }}">
+            {{ _("Filters are applied") }}
         </span>
-    </h2>
-
-    <form class="is-hidden mt-3" id="filters" method="get" action="{{ request.path }}" tabindex="0">
-        {% if sort %}
-        <input type="hidden" name="sort" value="{{ sort }}">
         {% endif %}
-        <div class="columns">
-            {% block filter_fields %}
-            {% endblock %}
-        </div>
-        <button class="button is-primary">{% trans "Apply filters" %}</button>
-    </form>
 
-    {% if request.GET %}
-    <a class="help" href="{{ request.path }}">{% trans "Clear filters" %}</a>
-    {% endif %}
-</div>
+        {% if request.GET %}
+        <div class="mb-0 tags has-addons">
+            <span class="mb-0 tag is-success is-light is-{{ size|default:'normal' }}">
+                {% trans "Filters are applied" %}
+            </span>
+            <a class="mb-0 tag is-success is-{{ size|default:'normal' }}" href="{{ request.path }}">
+                {% trans "Clear filters" %}
+            </a>
+        </div>
+        {% endif %}
+
+        <span class="details-close icon icon-x is-{{ size|default:'normal' }}" aria-hidden></span>
+    </summary>
+
+    <div class="mt-3">
+        <form id="filters" method="{{ method|default:'get' }}" action="{{ action|default:request.path }}" tabindex="0">
+            {% if method == 'post' %}
+                {% csrf_token %}
+            {% endif %}
+
+            {% if sort %}
+            <input type="hidden" name="sort" value="{{ sort }}">
+            {% endif %}
+            <div class="mt-3 columns filters-fields is-align-items-stretch">
+                {% block filter_fields %}
+                {% endblock %}
+            </div>
+            <button type="submit" class="button is-primary is-small">
+            {% trans "Apply filters" %}
+            </button>
+        </form>
+    </div>
+</details>
diff --git a/bookwyrm/views/feed.py b/bookwyrm/views/feed.py
index d2350088b..f6f9fb37a 100644
--- a/bookwyrm/views/feed.py
+++ b/bookwyrm/views/feed.py
@@ -26,15 +26,15 @@ class Feed(View):
 
     def post(self, request, tab):
         """save feed settings form, with a silent validation fail"""
-        settings_saved = False
+        filters_applied = False
         form = forms.FeedStatusTypesForm(request.POST, instance=request.user)
         if form.is_valid():
             form.save()
-            settings_saved = True
+            filters_applied = True
 
-        return self.get(request, tab, settings_saved)
+        return self.get(request, tab, filters_applied)
 
-    def get(self, request, tab, settings_saved=False):
+    def get(self, request, tab, filters_applied=False):
         """user's homepage with activity feed"""
         tab = [s for s in STREAMS if s["key"] == tab]
         tab = tab[0] if tab else STREAMS[0]
@@ -61,7 +61,7 @@ class Feed(View):
                 "goal_form": forms.GoalForm(),
                 "feed_status_types_options": FeedFilterChoices,
                 "allowed_status_types": request.user.feed_status_types,
-                "settings_saved": settings_saved,
+                "filters_applied": filters_applied,
                 "path": f"/{tab['key']}",
                 "annual_summary_year": get_annual_summary_year(),
             },