Commit c55c0790 authored by Patrick's avatar Patrick

Display animated "Loading..." and back to top buttons

parent 483e46c3
......@@ -368,3 +368,44 @@ ul.djng-field-errors li.valid::before {
position:sticky;
bottom:65px;
}
/* Bootstrap refresh animated */
.gly-spin {
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(359deg);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
@-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
......@@ -55,6 +55,7 @@
</head>
<body>
<a href="#content" class="skip_link">{% trans "Skip to main content" %}</a>
<a name="#top"></a><section>
{% cms_toolbar %}
{% spaceless %}
{# <!-- Header and Nav --> #}
......
......@@ -45,24 +45,23 @@
</div>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}&producer={{ producer_id }}&departementforcustomer={{ departementforcustomer_id }}&is_like={{ is_like }}{% if q %}&q={{ q }}{% endif %}"
class="infinite-more-link btn btn-success btn-disabled not-active">&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-arrow-right"></span>&nbsp;&nbsp;&nbsp;&nbsp;</a>
class="infinite-more-link btn btn-default not-active"><span class="glyphicon glyphicon-refresh gly-spin"></span>&nbsp;{% trans "Loading..." %}</a>
{% endif %}
<div class="loading" style="display: none;">
{% trans "Loading..." %}
<div class="loaded" style="display: none;">
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
<a class="btn btn-default btn-disabled" href="#top"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a>
</div>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
$('.loaded').hide();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
$('.loaded').show();
}
});
</script>
{% else %}
<h3>{% trans "No offer found" %}</h3>
{% endif %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment