From 68e1bb26df44ed90ff4f767555720a3a5cfa95e2 Mon Sep 17 00:00:00 2001 From: rimu <3310831+rimu@users.noreply.github.com> Date: Sat, 30 Dec 2023 14:04:18 +1300 Subject: [PATCH] voting button ajax spinner --- app/static/images/spinner.svg | 60 ++++++++++++++++++++ app/static/structure.css | 15 +++++ app/static/structure.scss | 16 ++++++ app/templates/post/_post_voting_buttons.html | 2 + app/templates/post/_voting_buttons.html | 2 + 5 files changed, 95 insertions(+) create mode 100644 app/static/images/spinner.svg diff --git a/app/static/images/spinner.svg b/app/static/images/spinner.svg new file mode 100644 index 00000000..e0519455 --- /dev/null +++ b/app/static/images/spinner.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/static/structure.css b/app/static/structure.css index 8bb63df7..99bf589f 100644 --- a/app/static/structure.css +++ b/app/static/structure.css @@ -558,6 +558,7 @@ fieldset legend { border: solid 1px #0071CE; } .voting_buttons .upvote_button, .voting_buttons .downvote_button { + position: relative; padding-left: 3px; border-radius: 3px; cursor: pointer; @@ -582,6 +583,20 @@ fieldset legend { .voting_buttons .downvote_button { margin-top: 5px; } +.voting_buttons .htmx-indicator { + position: absolute; +} +.voting_buttons .htmx-request .htmx-indicator { + display: inline; + position: absolute; + width: 20px; + height: 20px; + right: 14px; + top: 5px; +} +.voting_buttons .htmx-request.htmx-indicator { + display: inline; +} .voting_buttons a { text-decoration: none; } diff --git a/app/static/structure.scss b/app/static/structure.scss index ff8e0ad4..22744ffd 100644 --- a/app/static/structure.scss +++ b/app/static/structure.scss @@ -258,6 +258,7 @@ nav, etc which are used site-wide */ } .upvote_button, .downvote_button { + position: relative; padding-left: 3px; border-radius: 3px; cursor: pointer; @@ -288,6 +289,21 @@ nav, etc which are used site-wide */ margin-top: 5px; } + .htmx-indicator{ + position: absolute; + } + .htmx-request .htmx-indicator{ + display:inline; + position: absolute; + width: 20px; + height: 20px; + right: 14px; + top: 5px; + } + .htmx-request.htmx-indicator{ + display:inline; + } + a { text-decoration: none; } diff --git a/app/templates/post/_post_voting_buttons.html b/app/templates/post/_post_voting_buttons.html index 6e5cfa36..24892934 100644 --- a/app/templates/post/_post_voting_buttons.html +++ b/app/templates/post/_post_voting_buttons.html @@ -3,11 +3,13 @@ hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons"> {{ post.up_votes }} +
{{ post.down_votes }} +
{% else %}
diff --git a/app/templates/post/_voting_buttons.html b/app/templates/post/_voting_buttons.html index fd8f0b90..a1c63200 100644 --- a/app/templates/post/_voting_buttons.html +++ b/app/templates/post/_voting_buttons.html @@ -3,11 +3,13 @@ hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons"> {{ comment.up_votes }} +
{{ comment.down_votes }} +
{% else %}