Add HTMX spinner to user feeds

This commit is contained in:
Alessio 2024-02-19 18:04:57 -08:00
parent 1317d44b52
commit 69543e872e
2 changed files with 9 additions and 4 deletions

View File

@ -97,7 +97,7 @@ ul.inline-dotted-list li:last-child:after {
.htmx-spinner-container {
display: none;
}
.tweet.htmx-request > .htmx-spinner-container {
.htmx-request > .htmx-spinner-container {
display: revert;
font-size: 3em;
position: absolute;
@ -107,13 +107,13 @@ ul.inline-dotted-list li:last-child:after {
right: 0;
}
.tweet .htmx-spinner-container .htmx-spinner-background {
.htmx-spinner-container .htmx-spinner-background {
opacity: 0.3;
background-color: #7cc5f6;
width: 100%;
height: 100%;
}
.tweet .htmx-spinner-container .htmx-spinner {
.htmx-spinner-container .htmx-spinner {
position: absolute;
top: 50%;
left: 50%;

View File

@ -49,11 +49,16 @@
<a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com">
<img class="svg-icon" src="/static/icons/external-link.svg" />
</a>
<a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" title="Refresh">
<a class="unstyled-link quick-link" hx-get="?scrape" hx-target="body" hx-indicator=".user-header" title="Refresh">
<img class="svg-icon" src="/static/icons/refresh.svg" />
</a>
</div>
</div>
</div>
<div class="htmx-spinner-container">
<div class="htmx-spinner-background"></div>
<img class="svg-icon htmx-spinner" src="/static/icons/spinner.svg" />
</div>
</div>
{{end}}