diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 846650d7..8fbc665e 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -617,7 +617,7 @@ a:not(.button) { .select2 { - margin: 0; + margin: 10px 0!important; max-width: 100%; min-width: 100%; diff --git a/sas/static/sas/css/picture.scss b/sas/static/sas/css/picture.scss index a466d031..2ceb0d83 100644 --- a/sas/static/sas/css/picture.scss +++ b/sas/static/sas/css/picture.scss @@ -140,6 +140,11 @@ width: 100%; justify-content: space-between; + &.loader { + margin-top: 10px; + --loading-size: 20px + } + @media (max-width: 1000px) { max-width: calc(50% - 5px); } diff --git a/sas/static/sas/js/relation.js b/sas/static/sas/js/relation.js index 366b2219..0549aeaf 100644 --- a/sas/static/sas/js/relation.js +++ b/sas/static/sas/js/relation.js @@ -4,6 +4,7 @@ document.addEventListener("alpine:init", () => { selector: undefined, async init() { + this.loading = true; this.identifications = await ( await fetch(`/api/sas/picture/${picture_id}/identified`) ).json(); @@ -15,9 +16,11 @@ document.addEventListener("alpine:init", () => { }), picture_getter: (user) => user.profile_pict, }); + this.loading = false; }, async submit_identification() { + this.loading = true; const url = `/api/sas/picture/${picture_id}/identified`; await fetch(url, { method: "PUT", @@ -26,6 +29,7 @@ document.addEventListener("alpine:init", () => { // refresh the identified users list this.identifications = await (await fetch(url)).json(); this.selector.empty().trigger("change"); + this.loading = false; }, can_be_removed(item) { @@ -33,6 +37,7 @@ document.addEventListener("alpine:init", () => { }, async remove(item) { + this.loading = true; const res = await fetch(`/api/sas/relation/${item.id}`, { method: "DELETE", }); @@ -41,6 +46,7 @@ document.addEventListener("alpine:init", () => { (i) => i.id !== item.id, ); } + this.loading = false; }, })); }); diff --git a/sas/templates/sas/picture.jinja b/sas/templates/sas/picture.jinja index 20bb37b3..f41f0564 100644 --- a/sas/templates/sas/picture.jinja +++ b/sas/templates/sas/picture.jinja @@ -128,14 +128,14 @@ -
+
{% trans %}People{% endtrans %}
{% if user.was_subscribed %} -
- {% csrf_token %} - - -
{% endif %} +
+ + +
+ {% endif %}