From 38e9b8192203728c6542d54a48450b6a86fd145d Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Tue, 8 Oct 2024 11:37:07 +0200 Subject: [PATCH] Use fancy scroller for showing that AJAX is active --- changedetectionio/static/js/plugins.js | 15 ----------- changedetectionio/static/js/toggle-theme.js | 5 ++++ .../static/styles/scss/styles.scss | 26 ++++++++++++++++++- changedetectionio/static/styles/styles.css | 19 +++++++++++++- changedetectionio/templates/base.html | 9 ++++++- changedetectionio/templates/edit.html | 1 - 6 files changed, 56 insertions(+), 19 deletions(-) diff --git a/changedetectionio/static/js/plugins.js b/changedetectionio/static/js/plugins.js index e6758a96..b620312e 100644 --- a/changedetectionio/static/js/plugins.js +++ b/changedetectionio/static/js/plugins.js @@ -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); diff --git a/changedetectionio/static/js/toggle-theme.js b/changedetectionio/static/js/toggle-theme.js index 774729d0..b4fc40a6 100644 --- a/changedetectionio/static/js/toggle-theme.js +++ b/changedetectionio/static/js/toggle-theme.js @@ -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 + }); diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index 2916b0e0..81904409 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -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); } diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index f9c9ddc5..8885eced 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -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); } diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html index 7f10d3bd..5218eb0b 100644 --- a/changedetectionio/templates/base.html +++ b/changedetectionio/templates/base.html @@ -35,7 +35,9 @@
- + + {% if hosted_sticky %}
Let us host your instance! diff --git a/changedetectionio/templates/edit.html b/changedetectionio/templates/edit.html index fd1695de..44ec3a00 100644 --- a/changedetectionio/templates/edit.html +++ b/changedetectionio/templates/edit.html @@ -434,7 +434,6 @@ Unavailable") }}
-