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

View File

@ -151,3 +151,14 @@ function characterCount()
return $("#id_status").val().length + $("#id_spoiler_text").val().length; 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;
});
});
}

View File

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

View File

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