From 4cb520f24213df702b7ade385a76d74f3132cb8e Mon Sep 17 00:00:00 2001 From: Joachim Date: Wed, 29 Dec 2021 19:50:32 +0100 Subject: [PATCH 01/34] 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 @@

{{ tab.name }}

-
-
-
- -
-
- {# feed settings #} -
- - - - {{ _("Feed settings") }} - - -
- {% csrf_token %} - -
-
-
- - - {% if settings_saved %} - {{ _("Saved!") }} - {% endif %} - - {% for name, value in feed_status_types_options %} - - {% endfor %} -
-
-
-
- -
-
-
+
+
+{# 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 %}
-{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book controls_text="want_to_read" controls_uid=uuid %} +{% join "want_to_read" uuid as modal_id %} +{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id %} -{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book controls_text="start_reading" controls_uid=uuid %} +{% join "start_reading" uuid as modal_id %} +{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id %} -{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book controls_text="finish_reading" controls_uid=uuid readthrough=readthrough %} +{% join "finish_reading" uuid as modal_id %} +{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough %} -{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book controls_text="progress_update" controls_uid=uuid readthrough=readthrough %} +{% join "progress_update" uuid as modal_id %} +{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough %} {% endwith %} {% endif %} From 5f3a5c87b6bdc2d46cf7eca8827e984f09c31571 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Thu, 30 Dec 2021 18:37:49 -0800 Subject: [PATCH 15/34] Update report modal --- bookwyrm/templates/snippets/report_button.html | 14 ++++++++++---- bookwyrm/templates/snippets/report_modal.html | 14 +++++++++----- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/bookwyrm/templates/snippets/report_button.html b/bookwyrm/templates/snippets/report_button.html index 2638a9fff..6b4a3f253 100644 --- a/bookwyrm/templates/snippets/report_button.html +++ b/bookwyrm/templates/snippets/report_button.html @@ -3,9 +3,15 @@ {% with 0|uuid as report_uuid %} -{% trans "Report" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with class="is-danger is-light is-small is-fullwidth" text=button_text controls_text="report" controls_uid=report_uuid focus="modal_title_report" disabled=is_current %} - -{% include 'snippets/report_modal.html' with user=user reporter=request.user controls_text="report" controls_uid=report_uuid %} +{% join "report" report_uuid as modal_id %} + +{% include 'snippets/report_modal.html' with user=user reporter=request.user id=modal_id %} {% endwith %} diff --git a/bookwyrm/templates/snippets/report_modal.html b/bookwyrm/templates/snippets/report_modal.html index 0d6504ab3..615f13ccc 100644 --- a/bookwyrm/templates/snippets/report_modal.html +++ b/bookwyrm/templates/snippets/report_modal.html @@ -1,4 +1,4 @@ -{% extends 'components/modal.html' %} +{% extends 'components/new_modal.html' %} {% load i18n %} {% load humanize %} @@ -21,8 +21,12 @@

{% blocktrans with site_name=site.name %}This report will be sent to {{ site_name }}'s moderators for review.{% endblocktrans %}

- - +
+ + +
{% endblock %} @@ -31,9 +35,9 @@ {% block modal-footer %} -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="report" controls_uid=report_uuid class="" %} + {% endblock %} + {% block modal-form-close %}{% endblock %} From e3321c9badef2aba004a16c3ff2a1a1427a53e67 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Thu, 30 Dec 2021 18:27:33 -0800 Subject: [PATCH 16/34] Updates buttons to call modals in shelve buttons --- .../templates/snippets/shelve_button/modal_button.html | 10 ++++++++++ .../snippets/shelve_button/shelve_button.html | 10 +++++----- .../snippets/shelve_button/shelve_button_options.html | 9 ++++++--- 3 files changed, 21 insertions(+), 8 deletions(-) create mode 100644 bookwyrm/templates/snippets/shelve_button/modal_button.html diff --git a/bookwyrm/templates/snippets/shelve_button/modal_button.html b/bookwyrm/templates/snippets/shelve_button/modal_button.html new file mode 100644 index 000000000..a745b4fba --- /dev/null +++ b/bookwyrm/templates/snippets/shelve_button/modal_button.html @@ -0,0 +1,10 @@ +{% load utilities %} +
+ +
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button.html b/bookwyrm/templates/snippets/shelve_button/shelve_button.html index f27c18596..38f6be38c 100644 --- a/bookwyrm/templates/snippets/shelve_button/shelve_button.html +++ b/bookwyrm/templates/snippets/shelve_button/shelve_button.html @@ -6,7 +6,7 @@ {% with book.id|uuid as uuid %} {% active_shelf book as active_shelf %} {% latest_read_through book request.user as readthrough %} -
+
{% if switch_mode and active_shelf.book != book %}
{% include 'snippets/switch_edition_button.html' with edition=book size='is-small' %} @@ -20,16 +20,16 @@
{% join "want_to_read" uuid as modal_id %} -{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id %} +{% include 'snippets/reading_modals/want_to_read_modal.html' with book=active_shelf.book id=modal_id class="" %} {% join "start_reading" uuid as modal_id %} -{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id %} +{% include 'snippets/reading_modals/start_reading_modal.html' with book=active_shelf.book id=modal_id class="" %} {% join "finish_reading" uuid as modal_id %} -{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough %} +{% include 'snippets/reading_modals/finish_reading_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough class="" %} {% join "progress_update" uuid as modal_id %} -{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough %} +{% include 'snippets/reading_modals/progress_update_modal.html' with book=active_shelf.book id=modal_id readthrough=readthrough class="" %} {% endwith %} {% endif %} diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html b/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html index de50b53e2..add2a77c7 100644 --- a/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html +++ b/bookwyrm/templates/snippets/shelve_button/shelve_button_options.html @@ -23,19 +23,22 @@ {% trans "Start reading" as button_text %} {% url 'reading-status' 'start' book.id as fallback_url %} - {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="start_reading" controls_uid=button_uuid focus="modal_title_start_reading" fallback_url=fallback_url %} + {% join "start_reading" button_uuid as modal_id %} + {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %} {% elif shelf.identifier == 'read' %} {% trans "Finish reading" as button_text %} {% url 'reading-status' 'finish' book.id as fallback_url %} - {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="finish_reading" controls_uid=button_uuid focus="modal_title_finish_reading" fallback_url=fallback_url %} + {% join "finish_reading" button_uuid as modal_id %} + {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %} {% elif shelf.identifier == 'to-read' %} {% trans "Want to read" as button_text %} {% url 'reading-status' 'want' book.id as fallback_url %} - {% include 'snippets/toggle/toggle_button.html' with class=class text=button_text controls_text="want_to_read" controls_uid=button_uuid focus="modal_title_want_to_read" fallback_url=fallback_url %} + {% join "want_to_read" button_uuid as modal_id %} + {% include 'snippets/shelve_button/modal_button.html' with class=class fallback_url=fallback_url %} {% elif shelf.editable %} From 8ad75084de011637f35f73fea903f26c16caa6d4 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Thu, 30 Dec 2021 18:56:37 -0800 Subject: [PATCH 17/34] Force state for active modal --- bookwyrm/templates/components/new_modal.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookwyrm/templates/components/new_modal.html b/bookwyrm/templates/components/new_modal.html index 8bb3cc583..38cfc699e 100644 --- a/bookwyrm/templates/components/new_modal.html +++ b/bookwyrm/templates/components/new_modal.html @@ -1,6 +1,6 @@ {% load i18n %} -