Self-Hosted
/
changedetection.io
mirror of https://github.com/dgtlmoon/changedetection.io.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Use fancy scroller for showing that AJAX is active

Browse Source
preview-refactor
dgtlmoon 3 months ago
parent 51cb83a20a
commit 38e9b81922
6 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File

15
changedetectionio/static/js/plugins.js
Unescape View File

@ -1,19 +1,4 @@
(function($) {
/*
$('#code-block').highlightLines([
{
'color': '#dd0000',
'lines': [10, 12]
},
{
'color': '#ee0000',
'lines': [15, 18]
}
]);
});
*/
$.fn.highlightLines = function(configurations) {
return this.each(function() {
const $pre = $(this);

5
changedetectionio/static/js/toggle-theme.js
Unescape View File

@ -49,4 +49,9 @@ $(document).ready(function () {
$("#overlay").toggleClass('visible');
heartpath.style.fill = document.getElementById("overlay").classList.contains("visible") ? '#ff0000' : 'var(--color-background)';
});
setInterval(function () {
$('body').toggleClass('spinner-active', $.active > 0);
}, 250); // Checks every 250 milliseconds
});

26
changedetectionio/static/styles/scss/styles.scss
Unescape View File

@ -106,10 +106,34 @@ button.toggle-button {
padding: 5px;
display: flex;
justify-content: space-between;
border-bottom: 2px solid var(--color-menu-accent);
align-items: center;
}
#pure-menu-horizontal-spinner {
height: 3px;
background: linear-gradient(-75deg, #ed5900, #ed8600, #edc600, #ed0000);
background-size: 400% 400%;
width: 100%;
animation: gradient 200s ease infinite;
}
body.spinner-active {
#pure-menu-horizontal-spinner {
animation: gradient 1s ease infinite;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.pure-menu-heading {
color: var(--color-text-menu-heading);
}

19
changedetectionio/static/styles/styles.css
Unescape View File

@ -573,9 +573,26 @@ button.toggle-button {
padding: 5px;
display: flex;
justify-content: space-between;
border-bottom: 2px solid var(--color-menu-accent);
align-items: center; }
#pure-menu-horizontal-spinner {
height: 3px;
background: linear-gradient(-75deg, #ed5900, #ed8600, #edc600, #ed0000);
background-size: 400% 400%;
width: 100%;
animation: gradient 200s ease infinite; }
body.spinner-active #pure-menu-horizontal-spinner {
animation: gradient 1s ease infinite; }
@keyframes gradient {
0% {
background-position: 0% 50%; }
50% {
background-position: 100% 50%; }
100% {
background-position: 0% 50%; } }
.pure-menu-heading {
color: var(--color-text-menu-heading); }

9
changedetectionio/templates/base.html
Unescape View File

@ -35,7 +35,9 @@
<body class="">
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">
<div class="pure-menu-fixed" style="width: 100%;">
<div class="home-menu pure-menu pure-menu-horizontal" id="nav-menu">
{% if has_password and not current_user.is_authenticated %}
<a class="pure-menu-heading" href="https://changedetection.io" rel="noopener">
<strong>Change</strong>Detection.io</a>
@ -129,7 +131,12 @@
</li>
</ul>
</div>
<div id="pure-menu-horizontal-spinner"></div>
</div>
</div>
{% if hosted_sticky %}
<div class="sticky-tab" id="hosted-sticky">
<a href="https://changedetection.io/?ref={{guid}}">Let us host your instance!</a>

1
changedetectionio/templates/edit.html
Unescape View File

@ -434,7 +434,6 @@ Unavailable") }}
</div>
</div>
</div>
<div class="spinner" style="display: none;" id="text-preview-spinner"></div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save