octo
/
brutaldon
mirror of https://gitlab.com/brutaldon/brutaldon
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add animated loading indicator for some links. 

This is redundant on desktop and for full mobile browser interface,
but useful for minimal mobile browser PWA mode.
This commit is contained in:
Jason McBrayer 2018-10-14 20:14:18 -04:00
parent bb65be3e8b
commit 0fd520b78b
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
brutaldon/static/js/brutaldon-enhancements.js
View File

@ -151,3 +151,14 @@ function characterCount()
return $("#id_status").val().length + $("#id_spoiler_text").val().length;
}
function animateLinks(selector)
{
$(selector).each(
function (index, elt) {
$(elt).on("click",
function () {
$('#page-load-indicator').fadeIn();
return true;
});
});
}

19
brutaldon/templates/base.html
View File

@ -57,7 +57,7 @@
<nav class="navbar is-fixed-top is-primary" role="navigation"
aria-label="main navigation" id="main-nav-bar">
<div class="navbar-brand">
<a class="navbar-item" href="{% url "home" %}">
<a class="navbar-item animate-link" href="{% url "home" %}">
{% if own_acct %}
<img src="{{ own_acct.avatar_static }}"
class="image is-32x32 avatar"
@ -73,11 +73,11 @@
<div class="navbar-menu is-active" id="navMenu">
<!-- navbar start, navbar end -->
<div class="navbar-start">
<a href="{% url "home" %}" class="navbar-item">
<a href="{% url "home" %}" class="navbar-item animate-link">
<span class="fa fa-home"></span>
<span>&nbsp; Home</span>
</a>
<a class="navbar-item" href="{% url "note" %}"
<a class="navbar-item animate-link" href="{% url "note" %}"
>
<span class="fa fa-bell-o"></span>
{% if preferences.notifications and not preferences.theme.is_brutalist %}
@ -97,29 +97,29 @@
<span >&nbsp; Notifications</span>
{% endif %}
</a>
<a class="navbar-item" href="{% url "local" %}">
<a class="navbar-item animate-link" href="{% url "local" %}">
<span class="fa fa-community"></span>
<span >&nbsp; Local</span>
</a>
<a class="navbar-item" href="{% url "fed" %}">
<a class="navbar-item animate-link" href="{% url "fed" %}">
<span class="fa fa-globe"></span>
<span >&nbsp;Federated</span>
</a>
<a class="navbar-item" href="{% url "toot" %}">
<a class="navbar-item animate-link" href="{% url "toot" %}">
<span class="fa fa-edit"> </span>
<span >&nbsp; New Toot</span>
</a>
<a class="navbar-item" href="{% url "search" %}">
<a class="navbar-item animate-link" href="{% url "search" %}">
<span class="fa fa-search"> </span>
<span >&nbsp; Search</span>
</a>
</div>
<div class="navbar-end" >
<a class="navbar-item" href="{% url "settings" %}">
<a class="navbar-item animate-link" href="{% url "settings" %}">
<span class="fa fa-gear"></span>
<span >&nbsp;Settings</span>
</a>
<a class="navbar-item" href="{% url "logout" %}">
<a class="navbar-item animate-link" href="{% url "logout" %}">
<span class="fa fa-power-off"></span>
<span >&nbsp;Log out</span>
</a>
@ -172,6 +172,7 @@
<script type="application/javascript">
$(document).ready(function () {
menuPrepare();
animateLinks(".animate-link");
});
{% if preferences.lightbox %}

2
brutaldon/templates/main/toot_partial.html
View File

@ -143,7 +143,7 @@
{% endif %}
{{ toot.visibility }}
&nbsp;&nbsp;
<a class="level-item" href="{% url "thread" toot.id %}">
<a class="level-item animate-link" href="{% url "thread" toot.id %}">
thread
</a>
</div>