me/offline-twitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add HTMX spinner to user feeds

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
internal/webserver/static/styles.css
View File

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

7
internal/webserver/tpl/includes/user_header.tpl
View File

@ -49,11 +49,16 @@
<a class="unstyled-link quick-link" target="_blank" href="https://twitter.com/{{.Handle}}" title="Open on twitter.com"> <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" /> <img class="svg-icon" src="/static/icons/external-link.svg" />
</a> </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" /> <img class="svg-icon" src="/static/icons/refresh.svg" />
</a> </a>
</div> </div>
</div> </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> </div>
{{end}} {{end}}