diff --git a/bookwyrm/migrations/0122_alter_annualgoal_year.py b/bookwyrm/migrations/0122_alter_annualgoal_year.py new file mode 100644 index 00000000..90af5fcc --- /dev/null +++ b/bookwyrm/migrations/0122_alter_annualgoal_year.py @@ -0,0 +1,19 @@ +# Generated by Django 3.2.5 on 2022-01-04 18:59 + +import bookwyrm.models.user +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("bookwyrm", "0121_user_summary_keys"), + ] + + operations = [ + migrations.AlterField( + model_name="annualgoal", + name="year", + field=models.IntegerField(default=bookwyrm.models.user.get_current_year), + ), + ] diff --git a/bookwyrm/models/user.py b/bookwyrm/models/user.py index deec2a44..bd340b01 100644 --- a/bookwyrm/models/user.py +++ b/bookwyrm/models/user.py @@ -415,12 +415,17 @@ class KeyPair(ActivitypubMixin, BookWyrmModel): return activity_object +def get_current_year(): + """sets default year for annual goal to this year""" + return timezone.now().year + + class AnnualGoal(BookWyrmModel): """set a goal for how many books you read in a year""" user = models.ForeignKey("User", on_delete=models.PROTECT) goal = models.IntegerField(validators=[MinValueValidator(1)]) - year = models.IntegerField(default=timezone.now().year) + year = models.IntegerField(default=get_current_year) privacy = models.CharField( max_length=255, default="public", choices=fields.PrivacyLevels.choices ) diff --git a/bookwyrm/static/css/bookwyrm.css b/bookwyrm/static/css/bookwyrm.css index 5ea65d22..15324a14 100644 --- a/bookwyrm/static/css/bookwyrm.css +++ b/bookwyrm/static/css/bookwyrm.css @@ -135,6 +135,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 { @@ -215,7 +227,7 @@ input[type=file]::file-selector-button:hover { /** General `details` element styles ******************************************************************************/ -summary { +details summary { cursor: pointer; } @@ -223,22 +235,22 @@ summary::-webkit-details-marker { display: none; } -summary::marker { +details summary::marker { content: none; } -.detail-pinned-button summary { +details.detail-pinned-button summary { position: absolute; right: 0; } -.detail-pinned-button form { +details.detail-pinned-button form { float: left; - width: -webkit-fill-available; + width: 100%; margin-top: 1em; } -/** Details dropdown +/** Dropdown w/ Details element ******************************************************************************/ details.dropdown[open] summary.dropdown-trigger::before { @@ -250,11 +262,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; } @@ -289,6 +301,46 @@ details.dropdown .dropdown-menu a:focus-visible { } } +/** 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 ******************************************************************************/ @@ -1149,3 +1201,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 9c35b1be..4bc7cca5 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/static/js/bookwyrm.js b/bookwyrm/static/js/bookwyrm.js index 6d21c207..cf3944b3 100644 --- a/bookwyrm/static/js/bookwyrm.js +++ b/bookwyrm/static/js/bookwyrm.js @@ -41,6 +41,7 @@ let BookWyrm = new (class { document .querySelectorAll("[data-duplicate]") .forEach((node) => node.addEventListener("click", this.duplicateInput.bind(this))); + document .querySelectorAll("details.dropdown") .forEach((node) => @@ -60,6 +61,9 @@ let BookWyrm = new (class { .querySelectorAll('input[type="file"]') .forEach(bookwyrm.disableIfTooLarge.bind(bookwyrm)); document.querySelectorAll("[data-copytext]").forEach(bookwyrm.copyText.bind(bookwyrm)); + document + .querySelectorAll(".modal.is-active") + .forEach(bookwyrm.handleActiveModal.bind(bookwyrm)); }); } @@ -405,7 +409,7 @@ let BookWyrm = new (class { } /** - * Handle the modal component. + * Handle the modal component with a button trigger. * * @param {Event} event - Event fired by an element * with the `data-modal-open` attribute @@ -416,6 +420,7 @@ let BookWyrm = new (class { * for information about using the modal. */ handleModalButton(event) { + const { handleFocusTrap } = this; const modalButton = event.currentTarget; const targetModalId = modalButton.dataset.modalOpen; const htmlElement = document.querySelector("html"); @@ -427,6 +432,8 @@ let BookWyrm = new (class { // Helper functions function handleModalOpen(modalElement) { + event.preventDefault(); + htmlElement.classList.add("is-clipped"); modalElement.classList.add("is-active"); modalElement.getElementsByClassName("modal-card")[0].focus(); @@ -455,42 +462,48 @@ let BookWyrm = new (class { modalButton.focus(); } - function handleFocusTrap(event) { - if (event.key !== "Tab") { - return; - } - - const focusableEls = event.currentTarget.querySelectorAll( - [ - "a[href]:not([disabled])", - "button:not([disabled])", - "textarea:not([disabled])", - 'input:not([type="hidden"]):not([disabled])', - "select:not([disabled])", - "details:not([disabled])", - '[tabindex]:not([tabindex="-1"]):not([disabled])', - ].join(",") - ); - const firstFocusableEl = focusableEls[0]; - const lastFocusableEl = focusableEls[focusableEls.length - 1]; - - if (event.shiftKey) { - /* Shift + tab */ if (document.activeElement === firstFocusableEl) { - lastFocusableEl.focus(); - event.preventDefault(); - } - } /* Tab */ else { - if (document.activeElement === lastFocusableEl) { - firstFocusableEl.focus(); - event.preventDefault(); - } - } - } - // Open modal handleModalOpen(modal); } + /** + * Handle the modal component when opened at page load. + * + * @param {Element} modalElement - Active modal element + * @return {undefined} + * + */ + handleActiveModal(modalElement) { + if (!modalElement) { + return; + } + + const { handleFocusTrap } = this; + + modalElement.getElementsByClassName("modal-card")[0].focus(); + + const closeButtons = modalElement.querySelectorAll("[data-modal-close]"); + + closeButtons.forEach((button) => { + button.addEventListener("click", function () { + handleModalClose(modalElement); + }); + }); + + document.addEventListener("keydown", function (event) { + if (event.key === "Escape") { + handleModalClose(modalElement); + } + }); + + modalElement.addEventListener("keydown", handleFocusTrap); + + function handleModalClose(modalElement) { + modalElement.removeEventListener("keydown", handleFocusTrap); + history.back(); + } + } + /** * Display pop up window. * diff --git a/bookwyrm/templates/annual_summary/layout.html b/bookwyrm/templates/annual_summary/layout.html index b5ba9cc7..ab25458c 100644 --- a/bookwyrm/templates/annual_summary/layout.html +++ b/bookwyrm/templates/annual_summary/layout.html @@ -192,6 +192,31 @@ + {% if goal_status and goal_status.percent >= 100 %} +
+
+

+ {% with goal=goal_status.goal goal_percent=goal_status.percent %} + {% blocktrans trimmed count counter=goal %} + {{ display_name }} set a goal of reading {{ goal }} book in {{ year }},
+ and achieved {{ goal_percent }}% of that goal + {% plural %} + {{ display_name }} set a goal of reading {{ goal }} books in {{ year }},
+ and achieved {{ goal_percent }}% of that goal + {% endblocktrans %} + {% endwith %} +

+

{% trans "Way to go!" %}

+
+
+ +
+
+
+
+
+ {% endif %} + {% if ratings_total > 0 %}
diff --git a/bookwyrm/templates/author/author.html b/bookwyrm/templates/author/author.html index 66ecb062..2f3ed6f0 100644 --- a/bookwyrm/templates/author/author.html +++ b/bookwyrm/templates/author/author.html @@ -92,10 +92,11 @@ {% trans "View on OpenLibrary" %} {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="ol_sync" controls_uid=author.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %} - {% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" %} - {% endwith %} + + {% include "author/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %} {% endif %}
{% endif %} @@ -107,10 +108,11 @@ {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="iv_sync" controls_uid=author.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %} - {% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %} - {% endwith %} + + {% include "author/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %} {% endif %}
{% endif %} diff --git a/bookwyrm/templates/author/sync_modal.html b/bookwyrm/templates/author/sync_modal.html index a061ada8..a6e032cb 100644 --- a/bookwyrm/templates/author/sync_modal.html +++ b/bookwyrm/templates/author/sync_modal.html @@ -19,12 +19,8 @@ {% endblock %} {% block modal-footer %} - - -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text %} + + {% endblock %} {% block modal-form-close %}{% endblock %} diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html index 4903da87..19dbccbd 100644 --- a/bookwyrm/templates/book/book.html +++ b/bookwyrm/templates/book/book.html @@ -63,7 +63,11 @@
{% if not book.cover %} {% if user_authenticated %} - - {% include 'book/cover_add_modal.html' with book=book controls_text="add_cover" controls_uid=book.id %} + {% join "add_cover" book.id as modal_id %} + {% include 'book/cover_add_modal.html' with id=modal_id %} {% if request.GET.cover_error %}

{% trans "Failed to load cover" %}

{% endif %} @@ -117,23 +122,30 @@ {% trans "Load data" as button_text %} {% if book.openlibrary_key %}

- {% trans "View on OpenLibrary" %} + + {% trans "View on OpenLibrary" %} + {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="ol_sync" controls_uid=book.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_ol_sync" class="is-small" icon_with_text="download" %} - {% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" %} - {% endwith %} + + {% include "book/sync_modal.html" with source="openlibrary.org" source_name="OpenLibrary" id="openlibrary_sync" %} {% endif %}

{% endif %} {% if book.inventaire_id %}

- {% trans "View on Inventaire" %} + + {% trans "View on Inventaire" %} + + {% if request.user.is_authenticated and perms.bookwyrm.edit_book %} - {% with controls_text="iv_sync" controls_uid=book.id %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text focus="modal_title_iv_sync" class="is-small" icon_with_text="download" %} - {% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" %} - {% endwith %} + + {% include "book/sync_modal.html" with source="inventaire.io" source_name="Inventaire" id="inventaire_sync" %} {% endif %}

{% endif %} diff --git a/bookwyrm/templates/book/cover_add_modal.html b/bookwyrm/templates/book/cover_add_modal.html index f09b4495..e8207ff4 100644 --- a/bookwyrm/templates/book/cover_add_modal.html +++ b/bookwyrm/templates/book/cover_add_modal.html @@ -29,8 +29,7 @@ {% block modal-footer %} -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text %} + {% endblock %} -{% block modal-form-close %}{% endblock %} +{% block modal-form-close %}{% endblock %} diff --git a/bookwyrm/templates/snippets/delete_readthrough_modal.html b/bookwyrm/templates/book/delete_readthrough_modal.html similarity index 61% rename from bookwyrm/templates/snippets/delete_readthrough_modal.html rename to bookwyrm/templates/book/delete_readthrough_modal.html index 24d0ff98..5b3a74cc 100644 --- a/bookwyrm/templates/snippets/delete_readthrough_modal.html +++ b/bookwyrm/templates/book/delete_readthrough_modal.html @@ -2,11 +2,17 @@ {% load i18n %} {% block modal-title %}{% trans "Delete these read dates?" %}{% endblock %} + {% block modal-body %} {% if readthrough.progress_updates|length > 0 %} -{% blocktrans with count=readthrough.progress_updates|length %}You are deleting this readthrough and its {{ count }} associated progress updates.{% endblocktrans %} + {% blocktrans trimmed with count=readthrough.progress_updates|length %} + You are deleting this readthrough and its {{ count }} associated progress updates. + {% endblocktrans %} +{% else %} + {% trans "This action cannot be un-done" %} {% endif %} {% endblock %} + {% block modal-footer %}
{% csrf_token %} @@ -14,7 +20,6 @@ - {% trans "Cancel" as button_text %} - {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="delete_readthrough" controls_uid=readthrough.id %} +
{% endblock %} diff --git a/bookwyrm/templates/book/readthrough.html b/bookwyrm/templates/book/readthrough.html index 12430f75..e711ecd0 100644 --- a/bookwyrm/templates/book/readthrough.html +++ b/bookwyrm/templates/book/readthrough.html @@ -1,6 +1,7 @@ {% load i18n %} {% load humanize %} {% load tz %} +{% load utilities %}
@@ -10,14 +11,14 @@ {% if readthrough.finish_date or readthrough.progress %}
  • {% if readthrough.finish_date %} - {{ readthrough.finish_date | localtime | naturalday }}: {% trans "finished" %} + {{ readthrough.finish_date | localtime | naturalday }}: {% trans "finished" %} {% else %} - {% if readthrough.progress_mode == 'PG' %} - {% include 'snippets/page_text.html' with page=readthrough.progress total_pages=book.pages %} - {% else %} - {{ readthrough.progress }}% - {% endif %} + {% if readthrough.progress_mode == 'PG' %} + {% include 'snippets/page_text.html' with page=readthrough.progress total_pages=book.pages %} + {% else %} + {{ readthrough.progress }}% + {% endif %} {% endif %} {% if readthrough.progress %} @@ -47,6 +48,7 @@ {% endif %}
    • {% endif %} + {% if readthrough.start_date %}
  • {{ readthrough.start_date | localtime | naturalday }}: {% trans "started" %}
    • {% endif %} @@ -60,7 +62,11 @@
    {% trans "Delete these read dates" as button_text %} - {% include 'snippets/toggle/toggle_button.html' with class="is-small" text=button_text icon="x" controls_text="delete_readthrough" controls_uid=readthrough.id focus="modal_title_delete_readthrough" %} +
    @@ -79,4 +85,5 @@
    -{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete_readthrough" controls_uid=readthrough.id no_body=True %} +{% join "delete_readthrough" readthrough.id as modal_id %} +{% include 'book/delete_readthrough_modal.html' with id=modal_id %} diff --git a/bookwyrm/templates/book/sync_modal.html b/bookwyrm/templates/book/sync_modal.html index d80bf25f..6e5df0c0 100644 --- a/bookwyrm/templates/book/sync_modal.html +++ b/bookwyrm/templates/book/sync_modal.html @@ -19,12 +19,8 @@ {% endblock %} {% block modal-footer %} - - -{% trans "Cancel" as button_text %} -{% include 'snippets/toggle/toggle_button.html' with text=button_text %} + + {% endblock %} {% block modal-form-close %}{% endblock %} diff --git a/bookwyrm/templates/components/modal.html b/bookwyrm/templates/components/modal.html index 2eabd2e2..3e1cc759 100644 --- a/bookwyrm/templates/components/modal.html +++ b/bookwyrm/templates/components/modal.html @@ -1,40 +1,33 @@ {% load i18n %} -