Pjax page transitions that use the main page nav buttons

Things remain to do on this:
- Make the indicator less blatant
- Fix page titles
- apply lots of other places
This commit is contained in:
Jason McBrayer 2018-09-03 10:03:27 -04:00
parent 1dd8b1a316
commit 7c85f5474a
4 changed files with 60 additions and 9 deletions

View File

@ -103,3 +103,21 @@ emoji-link
display: block; display: block;
} }
} }
#page-load-indicator
{
width: 100%;
height: 4px;
background-color: blue;
opacity: 1;
position: fixed;
top: 0;
left: 0;
z-index: 666;
transition: all 500ms;
}
#page-load-indicator.ic-use-transition
{
width:0;
}

View File

@ -4,7 +4,7 @@
define(["jquery"], function (a0) { define(["jquery"], function (a0) {
return (root['Intercooler'] = factory(a0)); return (root['Intercooler'] = factory(a0));
}); });
} else if (typeof exports === 'object') { } else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but // Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports, // only CommonJS-like environments that support module.exports,
// like Node. // like Node.
@ -497,7 +497,6 @@ var Intercooler = Intercooler || (function() {
if (xhr.getResponseHeader("X-IC-PushURL") || closestAttrValue(elt, 'ic-push-url') == "true") { if (xhr.getResponseHeader("X-IC-PushURL") || closestAttrValue(elt, 'ic-push-url') == "true") {
try { try {
requestCleanup(indicator, elt); // clean up before snap-shotting HTML
var newUrl = xhr.getResponseHeader("X-IC-PushURL") || closestAttrValue(elt, 'ic-src'); var newUrl = xhr.getResponseHeader("X-IC-PushURL") || closestAttrValue(elt, 'ic-src');
if(_history) { if(_history) {
_history.snapshotForHistory(newUrl); _history.snapshotForHistory(newUrl);

File diff suppressed because one or more lines are too long

View File

@ -60,27 +60,57 @@
<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"
ic-post-to="{% url "home" %}"
ic-target="#main"
ic-select-from-response="#main"
ic-push-url="true"
ic-indicator="#page-load-indicator">
<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" href="{% url "note" %}"
ic-post-to="{% url "note" %}"
ic-target="#main"
ic-select-from-response="#main"
ic-push-url="true"
ic-indicator="#page-load-indicator">
<span class="fa fa-bell-o"></span> <span class="fa fa-bell-o"></span>
<span >&nbsp; Notifications</span> <span >&nbsp; Notifications</span>
</a> </a>
<a class="navbar-item" href="{% url "local" %}"> <a class="navbar-item" href="{% url "local" %}"
ic-post-to="{% url "local" %}"
ic-target="#main"
ic-select-from-response="#main"
ic-push-url="true"
ic-indicator="#page-load-indicator">
<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" href="{% url "fed" %}"
ic-post-to="{% url "fed" %}"
ic-target="#main"
ic-select-from-response="#main"
ic-push-url="true"
ic-indicator="#page-load-indicator">
<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" href="{% url "toot" %}"
ic-post-to="{% url "toot" %}"
ic-target="#main"
ic-select-from-response="#main"
ic-push-url="true"
ic-indicator="#page-load-indicator">
<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" href="{% url "search" %}"
ic-post-to="{% url "search" %}"
ic-target="#main"
ic-select-from-response="#main"
ic-push-url="true"
ic-indicator="#page-load-indicator">
<span class="fa fa-search"> </span> <span class="fa fa-search"> </span>
<span >&nbsp; Search</span> <span >&nbsp; Search</span>
</a> </a>
@ -100,7 +130,8 @@
{% endif %} {% endif %}
</nav> </nav>
{% endblock %} {% endblock %}
<section class="section"> <div id="page-load-indicator" class="ic-use-transition">&nbsp</div>
<section id="main" class="section">
<div class="container"> <div class="container">
{% block content %} {% block content %}
<h1 class="title"> <h1 class="title">