michael/pyfedi
1
0
Fork 0
mirror of https://codeberg.org/rimu/pyfedi synced 2025-01-23 19:36:56 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

voting button ajax spinner

Browse source
This commit is contained in:
rimu 2023-12-30 14:04:18 +13:00
parent ef161bbec1
commit 68e1bb26df
5 changed files with 95 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/static/images/spinner.svg Normal file
View file

@ -0,0 +1,60 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(80,50)">
<g transform="rotate(0)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="1">
<animateTransform attributeName="transform" type="scale" begin="-0.875s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.875s"></animate>
</circle>
</g>
</g><g transform="translate(71.21320343559643,71.21320343559643)">
<g transform="rotate(45)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.875">
<animateTransform attributeName="transform" type="scale" begin="-0.75s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.75s"></animate>
</circle>
</g>
</g><g transform="translate(50,80)">
<g transform="rotate(90)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.75">
<animateTransform attributeName="transform" type="scale" begin="-0.625s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.625s"></animate>
</circle>
</g>
</g><g transform="translate(28.786796564403577,71.21320343559643)">
<g transform="rotate(135)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.625">
<animateTransform attributeName="transform" type="scale" begin="-0.5s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.5s"></animate>
</circle>
</g>
</g><g transform="translate(20,50.00000000000001)">
<g transform="rotate(180)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.5">
<animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.375s"></animate>
</circle>
</g>
</g><g transform="translate(28.78679656440357,28.786796564403577)">
<g transform="rotate(225)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.375">
<animateTransform attributeName="transform" type="scale" begin="-0.25s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.25s"></animate>
</circle>
</g>
</g><g transform="translate(49.99999999999999,20)">
<g transform="rotate(270)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.25">
<animateTransform attributeName="transform" type="scale" begin="-0.125s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="-0.125s"></animate>
</circle>
</g>
</g><g transform="translate(71.21320343559643,28.78679656440357)">
<g transform="rotate(315)">
<circle cx="0" cy="0" r="6" fill="#0e6efd" fill-opacity="0.125">
<animateTransform attributeName="transform" type="scale" begin="0s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
</circle>
</g>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.9 KiB

15
app/static/structure.css
View file

@ -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;
}

16
app/static/structure.scss
View file

@ -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;
}

2
app/templates/post/_post_voting_buttons.html
View file

@ -3,11 +3,13 @@
hx-post="/post/{{ post.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
<span class="fe fe-arrow-up"></span>
{{ post.up_votes }}
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="">
</div>
<div class="downvote_button digits_{{ digits(post.down_votes) }} {{ downvoted_class }}"
hx-post="/post/{{ post.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
<span class="fe fe-arrow-down"></span>
{{ post.down_votes }}
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="">
</div>
{% else %}
<div class="upvote_button digits_{{ digits(post.up_votes) }} {{ upvoted_class }}">

2
app/templates/post/_voting_buttons.html
View file

@ -3,11 +3,13 @@
hx-post="/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
<span class="fe fe-arrow-up"></span>
{{ comment.up_votes }}
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="">
</div>
<div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}"
hx-post="/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
<span class="fe fe-arrow-down"></span>
{{ comment.down_votes }}
<img class="htmx-indicator" src="/static/images/spinner.svg" alt="">
</div>
{% else %}
<div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}">