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; 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" <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 %}

2
brutaldon/templates/main/toot_partial.html
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>