From d6dc975a2ee66b7fb8c2df5054e6086b97615a54 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sat, 16 Jan 2021 14:04:09 -0800 Subject: [PATCH 01/28] Creates re-usable template for cards --- .../templates/snippets/components/card.html | 19 ++ bookwyrm/templates/snippets/status_body.html | 163 ++++++++---------- 2 files changed, 94 insertions(+), 88 deletions(-) create mode 100644 bookwyrm/templates/snippets/components/card.html diff --git a/bookwyrm/templates/snippets/components/card.html b/bookwyrm/templates/snippets/components/card.html new file mode 100644 index 000000000..3c2cf9f1e --- /dev/null +++ b/bookwyrm/templates/snippets/components/card.html @@ -0,0 +1,19 @@ +
+
+ {% block card-header %} + {% endblock %} +
+ +
+ {% block card-content %} + {% endblock %} +
+ +
+ {% block card-footer %} + {% endblock %} +
+ + {% block card-bonus %} + {% endblock %} +
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html index d37fa0986..f4e460240 100644 --- a/bookwyrm/templates/snippets/status_body.html +++ b/bookwyrm/templates/snippets/status_body.html @@ -1,101 +1,88 @@ +{% extends 'snippets/components/card.html' %} + {% load bookwyrm_tags %} {% load humanize %} -{% if not status.deleted %} -
-
-
-
-
- {% include 'snippets/status_header.html' with status=status %} -
-
-
-
+{% block card-header %} +

+ {% include 'snippets/status_header.html' with status=status %} +

+{% endblock %} -
- {% include 'snippets/status_content.html' with status=status %} -
- -
-{% else %} -
-
-

- {% include 'snippets/avatar.html' with user=status.user %} - {% include 'snippets/username.html' with user=status.user %} - deleted this status -

-
-
+
+ {{ status.published_date | post_date }} +
+{% if status.user == request.user %} +
+ {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" small=True %} +
{% endif %} +{% endblock %} + + +{% block card-bonus %} +{% if request.user.is_authenticated %} +{% with status.id|uuid as uuid %} + + +{% endwith %} +{% endif %} + +{% if status.user == request.user %} +
+ + +
+{% endif %} +{% endblock %} From de9fbcef804227a312b06d460bd5d7eddcf8e888 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sat, 16 Jan 2021 14:04:26 -0800 Subject: [PATCH 02/28] Naturally 404 for deleted statuses --- bookwyrm/views/status.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookwyrm/views/status.py b/bookwyrm/views/status.py index c1f3486fb..a55e33ff9 100644 --- a/bookwyrm/views/status.py +++ b/bookwyrm/views/status.py @@ -26,7 +26,8 @@ class Status(View): ''' display a particular status (and replies, etc) ''' try: user = get_user_from_username(username) - status = models.Status.objects.select_subclasses().get(id=status_id) + status = models.Status.objects.select_subclasses().get( + id=status_id, deleted=False) except ValueError: return HttpResponseNotFound() From 6ab543004e9c05a5c7f44b1b4f89e8c412c2aeb8 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sat, 16 Jan 2021 14:48:17 -0800 Subject: [PATCH 03/28] Uses card component for reading goal announcement --- bookwyrm/templates/feed.html | 19 +----------------- bookwyrm/templates/snippets/goal_card.html | 23 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 bookwyrm/templates/snippets/goal_card.html diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html index 79dd4b85e..9b69efea7 100644 --- a/bookwyrm/templates/feed.html +++ b/bookwyrm/templates/feed.html @@ -98,24 +98,7 @@ {% if not goal and tab == 'home' %} {% now 'Y' as year %} {% endif %} diff --git a/bookwyrm/templates/snippets/goal_card.html b/bookwyrm/templates/snippets/goal_card.html new file mode 100644 index 000000000..b453d6e4e --- /dev/null +++ b/bookwyrm/templates/snippets/goal_card.html @@ -0,0 +1,23 @@ +{% extends 'snippets/components/card.html' %} + +{% block card-header %} +

+ {{ year }} reading goal +

+{% endblock %} + + +{% block card-content %} +
+

Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.

+ + {% include 'snippets/goal_form.html' %} +
+{% endblock %} + +{% block card-footer %} +
+ +

You can set or change your reading goal any time from your profile page

+
+{% endblock %} From 3e58163f0d2742d31fe719e3f34af0ba24edc3bd Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sat, 16 Jan 2021 19:57:20 -0800 Subject: [PATCH 04/28] refactors content warning button --- bookwyrm/static/css/format.css | 5 +++ bookwyrm/static/js/shared.js | 26 ++++++++++++++- .../snippets/content_warning_field.html | 22 ++----------- .../templates/snippets/create_status.html | 18 +++++++++-- .../snippets/create_status_form.html | 32 +++++++++++++++---- .../templates/snippets/privacy_select.html | 2 +- bookwyrm/templates/snippets/status_body.html | 4 +-- 7 files changed, 76 insertions(+), 33 deletions(-) diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css index e99513b04..870152d57 100644 --- a/bookwyrm/static/css/format.css +++ b/bookwyrm/static/css/format.css @@ -14,6 +14,11 @@ } /* --- TOGGLES --- */ +[aria-pressed=true] { + background-color: hsl(171, 100%, 41%); + color: white; +} + input.toggle-control { display: none; } diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js index b2de57368..49859fbfc 100644 --- a/bookwyrm/static/js/shared.js +++ b/bookwyrm/static/js/shared.js @@ -29,6 +29,10 @@ window.onload = function() { // update localstorage Array.from(document.getElementsByClassName('set-display')) .forEach(t => t.onclick = updateDisplay); + + // toggle display + Array.from(document.getElementsByClassName('toggle-button')) + .forEach(t => t.onclick = toggleDisplay); }; function updateDisplay(e) { @@ -51,11 +55,31 @@ function setDisplay(el) { } function toggleAction(e) { + var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false'; + e.currentTarget.setAttribute('aria-pressed', pressed); + + var targetId = e.currentTarget.getAttribute('data-controls'); + if (targetId) { + var target = document.getElementById(targetId); + if (pressed) { + target.className = target.className.replace('hidden', ''); + } else { + target.className += ' hidden'; + } + + } + // set hover, if appropriate - var hover = e.target.getAttribute('data-hover-target'); + var hover = e.currentTarget.getAttribute('data-hover-target'); if (hover) { document.getElementById(hover).focus(); } + + // set checkbox, if appropriate + var checkbox = e.currentTarget.getAttribute('data-controls-checkbox'); + if (checkbox) { + document.getElementById(checkbox).checked = !!pressed; + } } diff --git a/bookwyrm/templates/snippets/content_warning_field.html b/bookwyrm/templates/snippets/content_warning_field.html index 91bc8ba44..79494378c 100644 --- a/bookwyrm/templates/snippets/content_warning_field.html +++ b/bookwyrm/templates/snippets/content_warning_field.html @@ -1,20 +1,4 @@ -{% load bookwyrm_tags %} -{% with 0|uuid as uuid %} -
-
- - -
- -
- - -
+
+ +
-{% endwith %} diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html index 26f63508d..c843f926c 100644 --- a/bookwyrm/templates/snippets/create_status.html +++ b/bookwyrm/templates/snippets/create_status.html @@ -29,15 +29,27 @@
- {% include 'snippets/create_status_form.html' with type='review' %} +
- {% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %} +
- {% include 'snippets/create_status_form.html' with type="quotation" placeholder="An excerpt from '"|add:book.title|add:"'" %} +
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html index c92b2f3d9..37bd79628 100644 --- a/bookwyrm/templates/snippets/create_status_form.html +++ b/bookwyrm/templates/snippets/create_status_form.html @@ -1,7 +1,8 @@ - {% endif %} - + {# bottom bar #}
From afdf5fc8ecd7ed83b6792cddeeca4d8dd8184e37 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Sun, 17 Jan 2021 08:26:28 -0800 Subject: [PATCH 07/28] starts replacing pure css buttons with javascript buttons RIP, but it was time --- bookwyrm/static/css/format.css | 5 +- bookwyrm/static/js/shared.js | 32 ++++-- bookwyrm/templates/book.html | 60 ++++-------- bookwyrm/templates/goal.html | 32 +++--- bookwyrm/templates/search_results.html | 12 +-- bookwyrm/templates/shelf.html | 98 ++++++++----------- .../snippets/finish_reading_modal.html | 82 ++++++++-------- bookwyrm/templates/snippets/goal_form.html | 2 +- .../templates/snippets/shelve_button.html | 4 +- .../snippets/start_reading_modal.html | 65 ++++++------ .../snippets/toggle/toggle_button.html | 12 ++- 11 files changed, 191 insertions(+), 213 deletions(-) diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css index 870152d57..f08f6739a 100644 --- a/bookwyrm/static/css/format.css +++ b/bookwyrm/static/css/format.css @@ -14,10 +14,13 @@ } /* --- TOGGLES --- */ -[aria-pressed=true] { +.toggle-button[aria-pressed=true], .toggle-button[aria-pressed=true]:hover { background-color: hsl(171, 100%, 41%); color: white; } +.hide-active[aria-pressed=true] { + display: none; +} input.toggle-control { display: none; diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js index aa58274e1..dd4fc3322 100644 --- a/bookwyrm/static/js/shared.js +++ b/bookwyrm/static/js/shared.js @@ -52,33 +52,51 @@ function setDisplay(el) { function toggleAction(e) { var pressed = e.currentTarget.getAttribute('aria-pressed') == 'false'; - e.currentTarget.setAttribute('aria-pressed', pressed); + var el = e.currentTarget; + + var targetId = el.getAttribute('data-controls'); + document.querySelectorAll('[data-controls="' + targetId + '"]') + .forEach(t => t.setAttribute('aria-pressed', !!(t.getAttribute('aria-pressed') == 'false'))); - var targetId = e.currentTarget.getAttribute('data-controls'); if (targetId) { var target = document.getElementById(targetId); if (pressed) { - target.className = target.className.replace('hidden', ''); + removeClass(target, 'hidden'); + addClass(target, 'is-active'); } else { - target.className += ' hidden'; + addClass(target, 'hidden'); + removeClass(target, 'is-active'); } - } // set hover, if appropriate - var hover = e.currentTarget.getAttribute('data-hover-target'); + var hover = el.getAttribute('data-hover-target'); if (hover) { document.getElementById(hover).focus(); } // set checkbox, if appropriate - var checkbox = e.currentTarget.getAttribute('data-controls-checkbox'); + var checkbox = el.getAttribute('data-controls-checkbox'); if (checkbox) { document.getElementById(checkbox).checked = !!pressed; } } +function addClass(el, classname) { + el.className = el.className.split(' ').concat(classname).join(' '); +} + +function removeClass(el, className) { + var classes = el.className.split(' '); + const idx = classes.indexOf(className); + if (idx > -1) { + classes.splice(idx, 1); + } + el.className = classes.join(' '); +} + + function interact(e) { e.preventDefault(); ajaxPost(e.target); diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html index 4e65ecf84..a73569545 100644 --- a/bookwyrm/templates/book.html +++ b/bookwyrm/templates/book.html @@ -94,30 +94,20 @@ {% include 'snippets/trimmed_text.html' with full=book|book_description %} {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %} -
- - -
+ {% include 'snippets/toggle/open_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id hover="id_description" hide_active=True id="hide-description" %} -
- - {% endif %}
-
- - -
-
- - + {% include 'snippets/toggle/open_button.html' with text="Add read dates" controls_text="add-readthrough" %} +
diff --git a/bookwyrm/templates/goal.html b/bookwyrm/templates/goal.html index 4f477a216..056a7e44e 100644 --- a/bookwyrm/templates/goal.html +++ b/bookwyrm/templates/goal.html @@ -6,29 +6,21 @@ {% if user == request.user %}
{% if goal %} - - + {% include 'snippets/toggle/open_button.html' with text="Edit goal" controls_text="show-edit-goal" hover="edit-form-header" %} {% endif %} -
-
- -
- {% now 'Y' as year %} -
-
-

- {{ year }} reading goal -

-
-
-

Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.

+ {% now 'Y' as year %} +
+
+

+ {{ year }} reading goal +

+
+
+

Set a goal for how many books you'll finish reading in {{ year }}, and track your progress throughout the year.

- {% include 'snippets/goal_form.html' with goal=goal year=year %} -
+ {% include 'snippets/goal_form.html' with goal=goal year=year %}
-
+
{% endif %} diff --git a/bookwyrm/templates/search_results.html b/bookwyrm/templates/search_results.html index 10263f2ef..a35504a17 100644 --- a/bookwyrm/templates/search_results.html +++ b/bookwyrm/templates/search_results.html @@ -27,16 +27,11 @@

Didn't find what you were looking for?

- - - + {% include 'snippets/toggle/open_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
{% endif %} - - diff --git a/bookwyrm/templates/shelf.html b/bookwyrm/templates/shelf.html index ae25998ad..30554a5f6 100644 --- a/bookwyrm/templates/shelf.html +++ b/bookwyrm/templates/shelf.html @@ -31,38 +31,30 @@ {% if is_self %}
- - + {% include 'snippets/toggle/open_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form" %}
{% endif %}
-
- - - - diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html index 1b36b56b3..f6aba283e 100644 --- a/bookwyrm/templates/snippets/toggle/toggle_button.html +++ b/bookwyrm/templates/snippets/toggle/toggle_button.html @@ -1,4 +1,12 @@ -