From b6bd57a85d685b8c37493ec303f955ddc0ca8315 Mon Sep 17 00:00:00 2001 From: ntmmfts Date: Wed, 29 Dec 2021 17:29:07 -1000 Subject: [PATCH] latest fixes and improvements --- changedetectionio/__init__.py | 48 +- changedetectionio/static/images/notviewed.svg | 28 +- changedetectionio/static/images/pause.svg | 45 +- changedetectionio/static/images/play.svg | 13 +- changedetectionio/static/images/search.svg | 18 +- changedetectionio/static/images/sortable.svg | 10 +- changedetectionio/static/images/viewed.svg | 31 +- changedetectionio/static/js/tbltools.js | 414 +++++---- changedetectionio/static/styles/styles.css | 878 +++++++++--------- changedetectionio/templates/base.html | 6 +- 10 files changed, 676 insertions(+), 815 deletions(-) diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py index f5dbd2c6..3be55b5f 100644 --- a/changedetectionio/__init__.py +++ b/changedetectionio/__init__.py @@ -30,7 +30,7 @@ import datetime import pytz from copy import deepcopy -__version__ = '0.39.4' +__version__ = '0.39.5' datastore = None @@ -294,17 +294,16 @@ def changedetection_app(config=None, datastore_o=None): if pause_uuid: try: - validate = uuid.UUID(str(pause_uuid)) - datastore.data['watching'][pause_uuid]['paused'] ^= True - except ValueError: - - action = True if pause_uuid == 'pause-all' else False - - for watch_uuid, watch in datastore.data['watching'].items(): - if datastore.data['watching'][watch_uuid]['tag'] == limit_tag or limit_tag is None : - datastore.data['watching'][watch_uuid]['paused'] = action - - datastore.needs_write = True + if pause_uuid == 'pause-all' or pause_uuid == 'resume-all': + action = True if pause_uuid == 'pause-all' else False + for watch_uuid, watch in datastore.data['watching'].items(): + if datastore.data['watching'][watch_uuid]['tag'] == limit_tag or limit_tag is None : + datastore.data['watching'][watch_uuid]['paused'] = action + else : + datastore.data['watching'][pause_uuid]['paused'] ^= True + datastore.needs_write = True + except KeyError: + flash("No watch by that UUID found, or error setting paused state.", 'error'); return redirect(url_for('index', tag = limit_tag)) # Sort by last_changed and add the uuid which is usually the key.. @@ -655,19 +654,13 @@ def changedetection_app(config=None, datastore_o=None): pass # process selected - @app.route("/api/process-selected", methods=['GET', "POST"]) + @app.route("/api/process-selected", methods=["POST"]) @login_required def process_selected(): - if request.method == 'POST' : - func = request.form.get('func') - limit_tag = request.form.get('tag') - uuids = request.form.get('uuids') - - if request.method == 'GET' : - func = request.args.get('func') - limit_tag = request.args.get('tag') - uuids = request.args.get('uuids') + func = request.form.get('func') + limit_tag = request.form.get('tag') + uuids = request.form.get('uuids') if uuids == '' : flash("No watches selected.") @@ -766,14 +759,9 @@ def changedetection_app(config=None, datastore_o=None): else : flash("Invalid parameter received.") - - render_template('index') #ensure flash msgs are seen - - if limit_tag == None or limit_tag == 'None' : - return redirect(url_for('index')) - else : - return redirect(url_for('index', tag = limit_tag)) - + + render_template(url_for('index'), tag = limit_tag) + @app.route("/diff/", methods=['GET']) @login_required def diff_history_page(uuid): diff --git a/changedetectionio/static/images/notviewed.svg b/changedetectionio/static/images/notviewed.svg index 15edb65d..91fa193e 100644 --- a/changedetectionio/static/images/notviewed.svg +++ b/changedetectionio/static/images/notviewed.svg @@ -1,27 +1 @@ - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/changedetectionio/static/images/pause.svg b/changedetectionio/static/images/pause.svg index 49a2d35d..b2d4ce39 100644 --- a/changedetectionio/static/images/pause.svg +++ b/changedetectionio/static/images/pause.svg @@ -1,44 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/changedetectionio/static/images/play.svg b/changedetectionio/static/images/play.svg index f040b184..84c6f1fe 100644 --- a/changedetectionio/static/images/play.svg +++ b/changedetectionio/static/images/play.svg @@ -1,12 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/changedetectionio/static/images/search.svg b/changedetectionio/static/images/search.svg index 4113b3fb..13d25813 100644 --- a/changedetectionio/static/images/search.svg +++ b/changedetectionio/static/images/search.svg @@ -1,17 +1 @@ - - - - - - - - - + \ No newline at end of file diff --git a/changedetectionio/static/images/sortable.svg b/changedetectionio/static/images/sortable.svg index 469938bd..fbd8fdc4 100644 --- a/changedetectionio/static/images/sortable.svg +++ b/changedetectionio/static/images/sortable.svg @@ -1,9 +1 @@ - - - - - - + \ No newline at end of file diff --git a/changedetectionio/static/images/viewed.svg b/changedetectionio/static/images/viewed.svg index 804ad9e1..e63c2f79 100644 --- a/changedetectionio/static/images/viewed.svg +++ b/changedetectionio/static/images/viewed.svg @@ -1,30 +1 @@ - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/changedetectionio/static/js/tbltools.js b/changedetectionio/static/js/tbltools.js index 4959292d..c9de4a40 100644 --- a/changedetectionio/static/js/tbltools.js +++ b/changedetectionio/static/js/tbltools.js @@ -5,23 +5,25 @@ var CONSTANT_ESCAPE_KEY = 27; var CONSTANT_S_KEY = 83; var CONSTANT_s_KEY = 115; -// global sorting vars (new window is always last_changed, descending) +// globals var loading; -var sort_column; -var sort_order; +var sort_column; // new window or tab is always last_changed +var sort_order; // new window or tab is always descending +var coordX; +var coordY; // restore scroll position on submit/reload -document.addEventListener("DOMContentLoaded", function(event) { +document.addEventListener("DOMContentLoaded", function(event) { var scrollpos = sessionStorage.getItem('scrollpos'); if (scrollpos) window.scrollTo(0, scrollpos); }); + // mobile scroll position retention -if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { +if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { document.addEventListener("visibilitychange", function() { storeScrollAndSearch(); }); -} -else { +} else { // non-mobile scroll position retention window.onbeforeunload = function(e) { storeScrollAndSearch(); @@ -31,18 +33,26 @@ function storeScrollAndSearch() { sessionStorage.setItem('scrollpos', window.pageYOffset); sessionStorage.setItem('searchtxt', document.getElementById("txtInput").value); } + // (ctl)-alt-s search hotkey -document.onkeyup=function(e){ - var e = e || window.event; // for IE to cover IEs window event-object - if(e.altKey && (e.which == CONSTANT_S_KEY || e.which == CONSTANT_s_KEY)) { - document.getElementById("txtInput").focus(); - return false; - } +document.onkeyup = function(e) { + var e = e || window.event; // for IE to cover IEs window event-object + if (e.altKey && (e.which == CONSTANT_S_KEY || e.which == CONSTANT_s_KEY)) { + document.getElementById("txtInput").focus(); + return false; + } +} + +// keep track of click position for placement of checkbox-functions grid display +document.addEventListener("click", clickPos); +function clickPos(event) { + coordX = event.clientX; + coordY = event.clientY; } // page load functions window.addEventListener('DOMContentLoaded', (event) => { - load_functions(); + load_functions(); }); function load_functions() { @@ -57,7 +67,7 @@ function load_functions() { // search if (isSessionStorageSupported()) { // retrieve search - if ( sessionStorage.getItem("searchtxt") != null ) { + if (sessionStorage.getItem("searchtxt") != null) { document.getElementById("txtInput").value = sessionStorage.getItem("searchtxt"); tblSearch(this); } @@ -66,229 +76,223 @@ function load_functions() { // sorting function sortTable(n) { - var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, sortimgs, sortableimgs; - table = document.getElementById("watch-table"); - switching = true; - //Set the sorting direction, either default 9, 1 or saved - if (loading) { - getSort(); - dir = (sort_order == 0) ? "asc" : "desc"; - loading = false; - } - else { - dir = "asc"; - } - /*Make a loop that will continue until - no switching has been done:*/ - while (switching) { - //start by saying: no switching is done: - switching = false; - rows = table.rows; - /*Loop through all table rows (except the - first, which contains table headers):*/ - for (i = 1; i < (rows.length - 1); i++) { - //start by saying there should be no switching: - shouldSwitch = false; - /*Get the two elements you want to compare, - one from current row and one from the next:*/ - x = rows[i].getElementsByTagName("TD")[n]; - y = rows[i + 1].getElementsByTagName("TD")[n]; - x = x.innerHTML.toLowerCase(); - y = y.innerHTML.toLowerCase(); - if (!isNaN(x)) { // handle numeric columns - x = parseFloat(x); - y = parseFloat(y); - } - if (n == 1) { // handle play/pause column - x = rows[i].getElementsByTagName("TD")[n].getElementsByTagName("img")[0].src; - y = rows[i + 1].getElementsByTagName("TD")[n].getElementsByTagName("img")[0].src; - } - /*check if the two rows should switch place, - based on the direction, asc or desc:*/ - if (dir == "asc") { - if (x > y) { - //if so, mark as a switch and break the loop: - shouldSwitch= true; - break; - } - } else if (dir == "desc") { - if (x < y) { - //if so, mark as a switch and break the loop: - shouldSwitch = true; - break; - } - } - } - if (shouldSwitch) { - /*If a switch has been marked, make the switch - and mark that a switch has been done:*/ - rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); - switching = true; - //Each time a switch is done, increase this count by 1: - switchcount ++; - } else { - /*If no switching has been done AND the direction is "asc", - set the direction to "desc" and run the while loop again.*/ - if (switchcount == 0 && dir == "asc") { - dir = "desc"; - switching = true; - } - } - } - // hide all asc/desc sort arrows - sortimgs = document.querySelectorAll('[id^="sort-"]'); - for (i = 0; i < sortimgs.length; i++) { - sortimgs[i].style.display = "none"; - } - // show current asc/desc sort arrow and set sort_order var - if (dir == "asc") { - document.getElementById("sort-" + n + "a").style.display = ""; - } - else { - document.getElementById("sort-" + n + "d").style.display = ""; - } - // show all sortable indicators - sortableimgs = document.querySelectorAll('[id^="sortable-"]'); - for (i = 0; i < sortableimgs.length; i++) { - sortableimgs[i].style.display = ""; - } - // hide sortable indicator from current column - document.getElementById("sortable-" + n).style.display = "none"; - // save sorting - sessionStorage.setItem("sort_column", n); - sessionStorage.setItem("sort_order", (dir == "asc") ? 0 : 1); - // restripe rows - restripe(); + var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0, + sortimgs, sortableimgs; + table = document.getElementById("watch-table"); + switching = true; + //Set the sorting direction, either default 9, 1 or saved + if (loading) { + getSort(); + dir = (sort_order == 0) ? "asc" : "desc"; + loading = false; + } else { + dir = "asc"; + } + /*Make a loop that will continue until + no switching has been done:*/ + while (switching) { + //start by saying: no switching is done: + switching = false; + rows = table.rows; + /*Loop through all table rows (except the + first, which contains table headers):*/ + for (i = 1; i < (rows.length - 1); i++) { + //start by saying there should be no switching: + shouldSwitch = false; + /*Get the two elements you want to compare, + one from current row and one from the next:*/ + x = rows[i].getElementsByTagName("TD")[n]; + y = rows[i + 1].getElementsByTagName("TD")[n]; + x = x.innerHTML.toLowerCase(); + y = y.innerHTML.toLowerCase(); + if (!isNaN(x)) { // handle numeric columns + x = parseFloat(x); + y = parseFloat(y); + } + if (n == 1) { // handle play/pause column + x = rows[i].getElementsByTagName("TD")[n].getElementsByTagName("img")[0].src; + y = rows[i + 1].getElementsByTagName("TD")[n].getElementsByTagName("img")[0].src; + } + /*check if the two rows should switch place, + based on the direction, asc or desc:*/ + if (dir == "asc") { + if (x > y) { + //if so, mark as a switch and break the loop: + shouldSwitch = true; + break; + } + } else if (dir == "desc") { + if (x < y) { + //if so, mark as a switch and break the loop: + shouldSwitch = true; + break; + } + } + } + if (shouldSwitch) { + /*If a switch has been marked, make the switch + and mark that a switch has been done:*/ + rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); + switching = true; + //Each time a switch is done, increase this count by 1: + switchcount++; + } else { + /*If no switching has been done AND the direction is "asc", + set the direction to "desc" and run the while loop again.*/ + if (switchcount == 0 && dir == "asc") { + dir = "desc"; + switching = true; + } + } + } + // hide all asc/desc sort arrows + sortimgs = document.querySelectorAll('[id^="sort-"]'); + for (i = 0; i < sortimgs.length; i++) { + sortimgs[i].style.display = "none"; + } + // show current asc/desc sort arrow and set sort_order var + if (dir == "asc") { + document.getElementById("sort-" + n + "a").style.display = ""; + } else { + document.getElementById("sort-" + n + "d").style.display = ""; + } + // show all sortable indicators + sortableimgs = document.querySelectorAll('[id^="sortable-"]'); + for (i = 0; i < sortableimgs.length; i++) { + sortableimgs[i].style.display = ""; + } + // hide sortable indicator from current column + document.getElementById("sortable-" + n).style.display = "none"; + // save sorting + sessionStorage.setItem("sort_column", n); + sessionStorage.setItem("sort_order", (dir == "asc") ? 0 : 1); + // restripe rows + restripe(); } // check/uncheck all checkboxes function checkAll(e) { var i; var checkboxes = document.getElementsByName('check'); - var checkboxFunctions = document.querySelectorAll('[id=checkbox-functions]'); + var checkboxFunctions = document.getElementById('checkbox-functions'); if (e.checked) { - for (i = 0; i < checkboxes.length; i++) { + for (i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } - for (i = 0; i < checkboxFunctions.length; i++) { - checkboxFunctions[i].style.display = ""; - } - } - else { + checkboxFunctions.style.left = coordX + 25 + "px"; + checkboxFunctions.style.top = coordY + "px"; + checkboxFunctions.style.display = ""; + } else { for (i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } - for (i = 0; i < checkboxFunctions.length; i++) { - checkboxFunctions[i].style.display = "none"; - } + checkboxFunctions.style.display = "none"; } } // check/uncheck checkall checkbox if all other checkboxes are checked/unchecked -function checkChange(){ +function checkChange() { var i; var totalCheckbox = document.querySelectorAll('input[name="check"]').length; var totalChecked = document.querySelectorAll('input[name="check"]:checked').length; - var checkboxFunctions = document.querySelectorAll('[id=checkbox-functions]'); - if(totalCheckbox == totalChecked) { - document.getElementsByName("showhide")[0].checked=true; - } - else { - document.getElementsByName("showhide")[0].checked=false; + var checkboxFunctions = document.getElementById('checkbox-functions'); //document.querySelectorAll('[id=checkbox-functions]'); + if (totalCheckbox == totalChecked) { + document.getElementsByName("showhide")[0].checked = true; + } else { + document.getElementsByName("showhide")[0].checked = false; } - if(totalChecked == 0) { - for (i = 0; i < checkboxFunctions.length; i++) { - checkboxFunctions[i].style.display = "none"; + if (totalChecked > 0) { + checkboxFunctions.style.display = ""; + checkboxFunctions.style.left = coordX + 25 + "px"; + if ( coordY > ( window.innerHeight - checkboxFunctions.offsetHeight) ) { + checkboxFunctions.style.top = (window.innerHeight - checkboxFunctions.offsetHeight) + "px"; } - } - else { - for (i = 0; i < checkboxFunctions.length; i++) { - checkboxFunctions[i].style.display = ""; + else { + checkboxFunctions.style.top = coordY + "px"; } + } else { + checkboxFunctions.style.display = "none"; } } // search watches in Title column function tblSearch(evt) { - var code = evt.charCode || evt.keyCode; - if (code == CONSTANT_ESCAPE_KEY) { - document.getElementById("txtInput").value = ''; - } - var input, filter, table, tr, td, i, txtValue; - input = document.getElementById("txtInput"); - filter = input.value.toUpperCase(); - table = document.getElementById("watch-table"); - tr = table.getElementsByTagName("tr"); - for (i = 1; i < tr.length; i++) { // skip header - td = tr[i].getElementsByTagName("td")[3]; // col 3 is the hidden title/url column - if (td) { - txtValue = td.textContent || td.innerText; - if (txtValue.toUpperCase().indexOf(filter) > -1) { - tr[i].style.display = ""; - } - else { - tr[i].style.display = "none"; - } - } - } - // restripe rows - restripe(); - if (code == CONSTANT_ESCAPE_KEY) { - document.getElementById("watch-table-wrapper").focus(); - } + var code = evt.charCode || evt.keyCode; + if (code == CONSTANT_ESCAPE_KEY) { + document.getElementById("txtInput").value = ''; + } + var input, filter, table, tr, td, i, txtValue; + input = document.getElementById("txtInput"); + filter = input.value.toUpperCase(); + table = document.getElementById("watch-table"); + tr = table.getElementsByTagName("tr"); + for (i = 1; i < tr.length; i++) { // skip header + td = tr[i].getElementsByTagName("td")[3]; // col 3 is the hidden title/url column + if (td) { + txtValue = td.textContent || td.innerText; + if (txtValue.toUpperCase().indexOf(filter) > -1) { + tr[i].style.display = ""; + } else { + tr[i].style.display = "none"; + } + } + } + // restripe rows + restripe(); + if (code == CONSTANT_ESCAPE_KEY) { + document.getElementById("watch-table-wrapper").focus(); + } } // restripe after searching or sorting -function restripe () { +function restripe() { var i, visrows = []; var table = document.getElementById("watch-table"); var rows = table.getElementsByTagName("tr"); - + for (i = 1; i < rows.length; i++) { // skip header - if (rows[i].style.display !== "none") { + if (rows[i].style.display !== "none") { visrows.push(rows[i]); } } - for (i=0 ; i 0 ) { + if (checkedArr.length > 0) { let output = []; - for (i = 0; i < checkedArr.length; i++ ) { - output.push( checkedArr[i].parentNode.parentNode.getAttribute("id") ); + for (i = 0; i < checkedArr.length; i++) { + output.push(checkedArr[i].parentNode.parentNode.getAttribute("id")); } - for (i = 0; i < checkedArr.length; i++ ) { - if (i < checkedArr.length - 1 ) { + for (i = 0; i < checkedArr.length; i++) { + if (i < checkedArr.length - 1) { uuids += output[i] + ","; } else { uuids += output[i]; @@ -301,42 +305,41 @@ function getChecked(items) { // process selected watches function processChecked(func, tag) { var uuids, result; - - if ( func == 'mark_all_notviewed' ) { + + if (func == 'mark_all_notviewed') { uuids = getChecked('all'); - } - else { + } else { uuids = getChecked(); } // confirm if deleting - if ( func == 'delete_selected' && uuids.length > 0 ) { + if (func == 'delete_selected' && uuids.length > 0) { result = confirm('Deletions cannot be undone.\n\nAre you sure you want to continue?'); - if ( result == false) { + if (result == false) { return; } } // href locations var currenturl = window.location; - var posturl = location.protocol + '//' + location.host + '/api/process-selected'; + var posturl = location.protocol + '//' + location.host + '/api/process-selected'; // posting vars const XHR = new XMLHttpRequest(), - FD = new FormData(); + FD = new FormData(); // fill form data FD.append('func', func); FD.append('tag', tag); FD.append('uuids', uuids); // success - XHR.addEventListener( 'load', function( event ) { + XHR.addEventListener('load', function(event) { window.location = currenturl; }); // error - XHR.addEventListener(' error', function( event ) { - alert( 'Error posting request.' ); + XHR.addEventListener(' error', function(event) { + alert('Error posting request.'); }); // set up request - XHR.open( 'POST', posturl ); + XHR.open('POST', posturl); // send - XHR.send( FD ); + XHR.send(FD); } function clearSearch() { @@ -345,27 +348,26 @@ function clearSearch() { } function isSessionStorageSupported() { - var storage = window.sessionStorage; - try { - storage.setItem('test', 'test'); - storage.removeItem('test'); - return true; - } catch (e) { - return false; - } + var storage = window.sessionStorage; + try { + storage.setItem('test', 'test'); + storage.removeItem('test'); + return true; + } catch (e) { + return false; + } } function getSort() { if (isSessionStorageSupported()) { // retrieve sort settings if set - if ( sessionStorage.getItem("sort_column") != null ) { - sort_column = sessionStorage.getItem("sort_column"); - sort_order = sessionStorage.getItem("sort_order"); - } - else { + if (sessionStorage.getItem("sort_column") != null) { + sort_column = sessionStorage.getItem("sort_column"); + sort_order = sessionStorage.getItem("sort_order"); + } else { sort_column = 7; // last changed - sort_order = 1; // desc + sort_order = 1; // desc //alert("Your web browser does not support retaining sorting and page position."); } } -} +} \ No newline at end of file diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index 1a9f7db9..17f764dd 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -1,35 +1,35 @@ body { - color: #333; - background: #262626; + color: #333; + background: #262626; } .pure-table-even { - background: #f2f2f2; + background: #f2f2f2; } .pure-table-odd { - background: #fff; + background: #fff; } a { - text-decoration: none; - color: #1b98f8; + text-decoration: none; + color: #1b98f8; } a.github-link { - color: #fff; + color: #fff; } .pure-menu-horizontal { - background: #fff; - padding: 5px; - display: flex; - justify-content: space-between; - border-bottom: 2px solid #ed5900; - align-items: center; + background: #fff; + padding: 5px; + display: flex; + justify-content: space-between; + border-bottom: 2px solid #ed5900; + align-items: center; } section.content { - padding-top: 5em; - padding-bottom: 5em; - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + padding-top: 5em; + padding-bottom: 5em; + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; } .search-box input { width: 32px; @@ -63,10 +63,10 @@ section.content { color: #333; } .search-box input::placeholder { - opacity: 0; + opacity: 0; } .search-box input:focus::placeholder { - opacity: 1; + opacity: 1; } .search-box input:not(:-ms-input-placeholder) { width: 150px; @@ -94,13 +94,13 @@ section.content { color: #333; } .box { - width: 80%; + width: 80%; flex-direction: column; - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .watch-table { - width: 100%; + width: 100%; } #header { vertical-align: middle; @@ -110,7 +110,7 @@ section.content { -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently - supported by Chrome, Edge, Opera and Firefox */ + supported by Chrome, Edge, Opera and Firefox */ } #add-paused > label { color: #fff; @@ -126,39 +126,39 @@ section.content { display: none; } .watch-table tr.unviewed { - font-weight: bold; + font-weight: bold; } .watch-table .error { - color: #a00; + color: #a00; } .watch-table td { - font-size: 80%; - white-space: nowrap; + font-size: 80%; + white-space: nowrap; } .watch-table td.title-col { - word-break: break-all; - white-space: normal; + word-break: break-all; + white-space: normal; } .watch-table th { - white-space: nowrap; + white-space: nowrap; } .watch-table .title-col a[target="_blank"]::after, .watch-table .current-diff-url::after { - content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); - margin: 0 3px 0 5px; + content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); + margin: 0 3px 0 5px; } .watch-tag-list { - color: #e70069; - white-space: nowrap; + color: #e70069; + white-space: nowrap; } #watch-actions { display: inline-block; } .box { - max-width: 80%; - flex-direction: column; - display: flex; - justify-content: center; + max-width: 80%; + flex-direction: column; + display: flex; + justify-content: center; } #flexlayout { float: right; @@ -171,8 +171,6 @@ section.content { text-align: right; margin-top: auto; } - - #post-list-buttons { text-align:right; padding:0; @@ -181,6 +179,12 @@ section.content { #post-list-buttons li { display:inline-block } +#post-list-buttons-top-grid { + margin: 0px; +} +#post-list-buttons-top-grid li { + list-style-type: none; +} #post-list-buttons a { border-top-left-radius:initial; border-top-right-radius:initial; @@ -192,7 +196,7 @@ section.content { } #checkbox-functions { position: fixed; - left: 10%; + z-index: 1; text-align: left; font-family: monospace; display: grid; @@ -234,389 +238,389 @@ section.content { direction: rtl; } body:after { - content: ""; - background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%); + content: ""; + background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%); } body:after, body:before { - display: block; - height: 600px; - position: absolute; - top: 0; - left: 0; - width: 100%; - z-index: -1; + display: block; + height: 600px; + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: -1; } body::after { - opacity: 0.91; + opacity: 0.91; } body::before { - content: ""; - background-image: url(../images/gradient-border.png); + content: ""; + background-image: url(../images/gradient-border.png); } body:before { - background-size: cover; + background-size: cover; } body:after, body:before { - -webkit-clip-path: polygon( - 100% 0, - 0 0, - 0 77.5%, - 1% 77.4%, - 2% 77.1%, - 3% 76.6%, - 4% 75.9%, - 5% 75.05%, - 6% 74.05%, - 7% 72.95%, - 8% 71.75%, - 9% 70.55%, - 10% 69.3%, - 11% 68.05%, - 12% 66.9%, - 13% 65.8%, - 14% 64.8%, - 15% 64%, - 16% 63.35%, - 17% 62.85%, - 18% 62.6%, - 19% 62.5%, - 20% 62.65%, - 21% 63%, - 22% 63.5%, - 23% 64.2%, - 24% 65.1%, - 25% 66.1%, - 26% 67.2%, - 27% 68.4%, - 28% 69.65%, - 29% 70.9%, - 30% 72.15%, - 31% 73.3%, - 32% 74.35%, - 33% 75.3%, - 34% 76.1%, - 35% 76.75%, - 36% 77.2%, - 37% 77.45%, - 38% 77.5%, - 39% 77.3%, - 40% 76.95%, - 41% 76.4%, - 42% 75.65%, - 43% 74.75%, - 44% 73.75%, - 45% 72.6%, - 46% 71.4%, - 47% 70.15%, - 48% 68.9%, - 49% 67.7%, - 50% 66.55%, - 51% 65.5%, - 52% 64.55%, - 53% 63.75%, - 54% 63.15%, - 55% 62.75%, - 56% 62.55%, - 57% 62.5%, - 58% 62.7%, - 59% 63.1%, - 60% 63.7%, - 61% 64.45%, - 62% 65.4%, - 63% 66.45%, - 64% 67.6%, - 65% 68.8%, - 66% 70.05%, - 67% 71.3%, - 68% 72.5%, - 69% 73.6%, - 70% 74.65%, - 71% 75.55%, - 72% 76.35%, - 73% 76.9%, - 74% 77.3%, - 75% 77.5%, - 76% 77.45%, - 77% 77.25%, - 78% 76.8%, - 79% 76.2%, - 80% 75.4%, - 81% 74.45%, - 82% 73.4%, - 83% 72.25%, - 84% 71.05%, - 85% 69.8%, - 86% 68.55%, - 87% 67.35%, - 88% 66.2%, - 89% 65.2%, - 90% 64.3%, - 91% 63.55%, - 92% 63%, - 93% 62.65%, - 94% 62.5%, - 95% 62.55%, - 96% 62.8%, - 97% 63.3%, - 98% 63.9%, - 99% 64.75%, - 100% 65.7% - ); - clip-path: polygon( - 100% 0, - 0 0, - 0 77.5%, - 1% 77.4%, - 2% 77.1%, - 3% 76.6%, - 4% 75.9%, - 5% 75.05%, - 6% 74.05%, - 7% 72.95%, - 8% 71.75%, - 9% 70.55%, - 10% 69.3%, - 11% 68.05%, - 12% 66.9%, - 13% 65.8%, - 14% 64.8%, - 15% 64%, - 16% 63.35%, - 17% 62.85%, - 18% 62.6%, - 19% 62.5%, - 20% 62.65%, - 21% 63%, - 22% 63.5%, - 23% 64.2%, - 24% 65.1%, - 25% 66.1%, - 26% 67.2%, - 27% 68.4%, - 28% 69.65%, - 29% 70.9%, - 30% 72.15%, - 31% 73.3%, - 32% 74.35%, - 33% 75.3%, - 34% 76.1%, - 35% 76.75%, - 36% 77.2%, - 37% 77.45%, - 38% 77.5%, - 39% 77.3%, - 40% 76.95%, - 41% 76.4%, - 42% 75.65%, - 43% 74.75%, - 44% 73.75%, - 45% 72.6%, - 46% 71.4%, - 47% 70.15%, - 48% 68.9%, - 49% 67.7%, - 50% 66.55%, - 51% 65.5%, - 52% 64.55%, - 53% 63.75%, - 54% 63.15%, - 55% 62.75%, - 56% 62.55%, - 57% 62.5%, - 58% 62.7%, - 59% 63.1%, - 60% 63.7%, - 61% 64.45%, - 62% 65.4%, - 63% 66.45%, - 64% 67.6%, - 65% 68.8%, - 66% 70.05%, - 67% 71.3%, - 68% 72.5%, - 69% 73.6%, - 70% 74.65%, - 71% 75.55%, - 72% 76.35%, - 73% 76.9%, - 74% 77.3%, - 75% 77.5%, - 76% 77.45%, - 77% 77.25%, - 78% 76.8%, - 79% 76.2%, - 80% 75.4%, - 81% 74.45%, - 82% 73.4%, - 83% 72.25%, - 84% 71.05%, - 85% 69.8%, - 86% 68.55%, - 87% 67.35%, - 88% 66.2%, - 89% 65.2%, - 90% 64.3%, - 91% 63.55%, - 92% 63%, - 93% 62.65%, - 94% 62.5%, - 95% 62.55%, - 96% 62.8%, - 97% 63.3%, - 98% 63.9%, - 99% 64.75%, - 100% 65.7% - ); + -webkit-clip-path: polygon( + 100% 0, + 0 0, + 0 77.5%, + 1% 77.4%, + 2% 77.1%, + 3% 76.6%, + 4% 75.9%, + 5% 75.05%, + 6% 74.05%, + 7% 72.95%, + 8% 71.75%, + 9% 70.55%, + 10% 69.3%, + 11% 68.05%, + 12% 66.9%, + 13% 65.8%, + 14% 64.8%, + 15% 64%, + 16% 63.35%, + 17% 62.85%, + 18% 62.6%, + 19% 62.5%, + 20% 62.65%, + 21% 63%, + 22% 63.5%, + 23% 64.2%, + 24% 65.1%, + 25% 66.1%, + 26% 67.2%, + 27% 68.4%, + 28% 69.65%, + 29% 70.9%, + 30% 72.15%, + 31% 73.3%, + 32% 74.35%, + 33% 75.3%, + 34% 76.1%, + 35% 76.75%, + 36% 77.2%, + 37% 77.45%, + 38% 77.5%, + 39% 77.3%, + 40% 76.95%, + 41% 76.4%, + 42% 75.65%, + 43% 74.75%, + 44% 73.75%, + 45% 72.6%, + 46% 71.4%, + 47% 70.15%, + 48% 68.9%, + 49% 67.7%, + 50% 66.55%, + 51% 65.5%, + 52% 64.55%, + 53% 63.75%, + 54% 63.15%, + 55% 62.75%, + 56% 62.55%, + 57% 62.5%, + 58% 62.7%, + 59% 63.1%, + 60% 63.7%, + 61% 64.45%, + 62% 65.4%, + 63% 66.45%, + 64% 67.6%, + 65% 68.8%, + 66% 70.05%, + 67% 71.3%, + 68% 72.5%, + 69% 73.6%, + 70% 74.65%, + 71% 75.55%, + 72% 76.35%, + 73% 76.9%, + 74% 77.3%, + 75% 77.5%, + 76% 77.45%, + 77% 77.25%, + 78% 76.8%, + 79% 76.2%, + 80% 75.4%, + 81% 74.45%, + 82% 73.4%, + 83% 72.25%, + 84% 71.05%, + 85% 69.8%, + 86% 68.55%, + 87% 67.35%, + 88% 66.2%, + 89% 65.2%, + 90% 64.3%, + 91% 63.55%, + 92% 63%, + 93% 62.65%, + 94% 62.5%, + 95% 62.55%, + 96% 62.8%, + 97% 63.3%, + 98% 63.9%, + 99% 64.75%, + 100% 65.7% + ); + clip-path: polygon( + 100% 0, + 0 0, + 0 77.5%, + 1% 77.4%, + 2% 77.1%, + 3% 76.6%, + 4% 75.9%, + 5% 75.05%, + 6% 74.05%, + 7% 72.95%, + 8% 71.75%, + 9% 70.55%, + 10% 69.3%, + 11% 68.05%, + 12% 66.9%, + 13% 65.8%, + 14% 64.8%, + 15% 64%, + 16% 63.35%, + 17% 62.85%, + 18% 62.6%, + 19% 62.5%, + 20% 62.65%, + 21% 63%, + 22% 63.5%, + 23% 64.2%, + 24% 65.1%, + 25% 66.1%, + 26% 67.2%, + 27% 68.4%, + 28% 69.65%, + 29% 70.9%, + 30% 72.15%, + 31% 73.3%, + 32% 74.35%, + 33% 75.3%, + 34% 76.1%, + 35% 76.75%, + 36% 77.2%, + 37% 77.45%, + 38% 77.5%, + 39% 77.3%, + 40% 76.95%, + 41% 76.4%, + 42% 75.65%, + 43% 74.75%, + 44% 73.75%, + 45% 72.6%, + 46% 71.4%, + 47% 70.15%, + 48% 68.9%, + 49% 67.7%, + 50% 66.55%, + 51% 65.5%, + 52% 64.55%, + 53% 63.75%, + 54% 63.15%, + 55% 62.75%, + 56% 62.55%, + 57% 62.5%, + 58% 62.7%, + 59% 63.1%, + 60% 63.7%, + 61% 64.45%, + 62% 65.4%, + 63% 66.45%, + 64% 67.6%, + 65% 68.8%, + 66% 70.05%, + 67% 71.3%, + 68% 72.5%, + 69% 73.6%, + 70% 74.65%, + 71% 75.55%, + 72% 76.35%, + 73% 76.9%, + 74% 77.3%, + 75% 77.5%, + 76% 77.45%, + 77% 77.25%, + 78% 76.8%, + 79% 76.2%, + 80% 75.4%, + 81% 74.45%, + 82% 73.4%, + 83% 72.25%, + 84% 71.05%, + 85% 69.8%, + 86% 68.55%, + 87% 67.35%, + 88% 66.2%, + 89% 65.2%, + 90% 64.3%, + 91% 63.55%, + 92% 63%, + 93% 62.65%, + 94% 62.5%, + 95% 62.55%, + 96% 62.8%, + 97% 63.3%, + 98% 63.9%, + 99% 64.75%, + 100% 65.7% + ); } .arrow { - border: solid #000; - border-width: 0 3px 3px 0; - display: inline-block; - padding: 3px; + border: solid #000; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; } .arrow.right { - transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); } .arrow.left { - transform: rotate(135deg); - -webkit-transform: rotate(135deg); + transform: rotate(135deg); + -webkit-transform: rotate(135deg); } .arrow.up { - transform: rotate(-135deg); - -webkit-transform: rotate(-135deg); + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); } .arrow.down { - transform: rotate(45deg); - -webkit-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transform: rotate(45deg); } .button-small { - font-size: 85%; + font-size: 85%; } .fetch-error { - padding-top: 1em; - font-size: 60%; - max-width: 400px; - display: block; + padding-top: 1em; + font-size: 60%; + max-width: 400px; + display: block; } .button-secondary { - color: #fff; - border-radius: 4px; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + color: #fff; + border-radius: 4px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success { - background: #1cb841; + background: #1cb841; } .button-tag { - background: #636363; - color: #fff; - font-size: 65%; - border-bottom-left-radius: initial; - border-bottom-right-radius: initial; + background: #636363; + color: #fff; + font-size: 65%; + border-bottom-left-radius: initial; + border-bottom-right-radius: initial; } #checkbox-functions .pure-button.button-tag.danger { background: #e70069; } .button-tag.active { - background: #9c9c9c; - font-weight: bold; + background: #9c9c9c; + font-weight: bold; } .button-error { - background: #ca3c3c; + background: #ca3c3c; } .button-warning { - background: #df7514; + background: #df7514; } .button-secondary { - background: #42b8dd; + background: #42b8dd; } .button-cancel { - background: #c8c8c8; + background: #c8c8c8; } .messages li { - list-style: none; - padding: 1em; - border-radius: 10px; - color: #fff; - font-weight: bold; + list-style: none; + padding: 1em; + border-radius: 10px; + color: #fff; + font-weight: bold; } .messages li.message { - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.2); } .messages li.error { - background: rgba(255, 1, 1, 0.5); + background: rgba(255, 1, 1, 0.5); } .messages li.notice { - background: rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.5); } #notification-customisation { - border: 1px solid #ccc; - padding: 1rem; - border-radius: 5px; + border: 1px solid #ccc; + padding: 1rem; + border-radius: 5px; } #token-table.pure-table td, #token-table.pure-table th { - font-size: 80%; + font-size: 80%; } #new-watch-form { - background: rgba(0, 0, 0, 0.05); - padding: 1em; - border-radius: 10px; - margin-bottom: 1em; + background: rgba(0, 0, 0, 0.05); + padding: 1em; + border-radius: 10px; + margin-bottom: 1em; } #new-watch-form .label { - display: none; + display: none; } #new-watch-form legend { - color: #fff; + color: #fff; } #diff-col { - padding-left: 40px; + padding-left: 40px; } #diff-jump { - position: fixed; - left: 0; - top: 120px; - background: #fff; - padding: 10px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow: 5px 0 5px -2px #888; + position: fixed; + left: 0; + top: 120px; + background: #fff; + padding: 10px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + box-shadow: 5px 0 5px -2px #888; } #diff-jump a { - color: #1b98f8; - cursor: grabbing; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -o-user-select: none; + color: #1b98f8; + cursor: grabbing; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + -o-user-select: none; } footer { - padding: 10px; - background: #fff; - color: #444; + padding: 10px; + background: #fff; + color: #444; } #feed-icon { - vertical-align: middle; + vertical-align: middle; } .sticky-tab { - position: absolute; - top: 80px; - font-size: 11px; - background: #fff; - padding: 10px; + position: absolute; + top: 80px; + font-size: 11px; + background: #fff; + padding: 10px; } .sticky-tab#left-sticky { - left: 0; + left: 0; } .sticky-tab#right-sticky { - right: 0; + right: 0; } #new-version-text a { - color: #e07171; + color: #e07171; } .chkbox, .chkbox-header { padding-right: 0px !important; @@ -634,60 +638,60 @@ footer { text-align: center; } .pause-resume img { - opacity: 0.2; + opacity: 0.2; } .pause-resume:hover img { - opacity: 0.8; + opacity: 0.8; } .monospaced-textarea textarea { - width: 100%; - font-family: monospace; - white-space: pre; - overflow-wrap: normal; - overflow-x: scroll; + width: 100%; + font-family: monospace; + white-space: pre; + overflow-wrap: normal; + overflow-x: scroll; } .pure-form .pure-control-group, .pure-form .pure-group, .pure-form .pure-controls { - padding-bottom: 1em; + padding-bottom: 1em; } .pure-form .pure-control-group div, .pure-form .pure-group div, .pure-form .pure-controls div { - margin: 0; + margin: 0; } .pure-form .error input { - background-color: #ffebeb; + background-color: #ffebeb; } .pure-form ul.errors { - padding: 0.5em 0.6em; - border: 1px solid #d00; - border-radius: 4px; - vertical-align: middle; - -webkit-box-sizing: border-box; - box-sizing: border-box; + padding: 0.5em 0.6em; + border: 1px solid #d00; + border-radius: 4px; + vertical-align: middle; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .pure-form ul.errors li { - margin-left: 1em; - color: #d00; + margin-left: 1em; + color: #d00; } .pure-form label { - font-weight: bold; + font-weight: bold; } .pure-form textarea { - width: 100%; + width: 100%; } .pure-form ul#fetch_backend { - margin: 0; - list-style: none; + margin: 0; + list-style: none; } .pure-form ul#fetch_backend > li > * { - display: inline-block; + display: inline-block; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { - .box { - max-width: 95%; - } + .box { + max-width: 95%; + } .watch-table { display: inline-block; } @@ -697,13 +701,13 @@ footer { .pure-form fieldset { padding: 0; } - .edit-form { - padding: 0.5em; - margin: 0; - } - #nav-menu { - overflow-x: scroll; - } + .edit-form { + padding: 0.5em; + margin: 0; + } + #nav-menu { + overflow-x: scroll; + } .pause-resume img { opacity: 0.8; } @@ -719,27 +723,27 @@ footer { } } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { - input[type="text"] { - width: 100%; - } + input[type="text"] { + width: 100%; + } .search-box input { width: 32px; } - .watch-table thead, - .watch-table tbody, - .watch-table th, - .watch-table td, - .watch-table tr { - display: block; - } - .watch-table .last-checked::before { - color: #555; - content: "Checked "; - } - .watch-table .last-changed::before { - color: #555; - content: "Changed "; - } + .watch-table thead, + .watch-table tbody, + .watch-table th, + .watch-table td, + .watch-table tr { + display: block; + } + .watch-table .last-checked::before { + color: #555; + content: "Checked "; + } + .watch-table .last-changed::before { + color: #555; + content: "Changed "; + } .watch-table th:nth-child(0) { display: none; } @@ -777,76 +781,76 @@ footer { display: none; } .watch-table .pure-table td, - .watch-table .pure-table th { - border: none; - } + .watch-table .pure-table th { + border: none; + } .watch-table td { - border: none; - border-bottom: 1px solid #eee; - } - .watch-table td:before { - top: 6px; - left: 6px; - width: 45%; - padding-right: 10px; - white-space: nowrap; - } + border: none; + border-bottom: 1px solid #eee; + } + .watch-table td:before { + top: 6px; + left: 6px; + width: 45%; + padding-right: 10px; + white-space: nowrap; + } } @media only screen and (min-width: 761px) { - .m-d { - min-width: 80%; - } + .m-d { + min-width: 80%; + } } .tabs ul { - margin: 0; - padding: 0; - display: block; + margin: 0; + padding: 0; + display: block; } .tabs ul li { - margin-right: 3px; - display: inline-block; - color: #fff; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - background-color: rgba(255, 255, 255, 0.2); + margin-right: 3px; + display: inline-block; + color: #fff; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + background-color: rgba(255, 255, 255, 0.2); } .tabs ul li.active, .tabs ul li :target { - background-color: #fff; + background-color: #fff; } .tabs ul li.active a, .tabs ul li :target a { - color: #222; - font-weight: bold; + color: #222; + font-weight: bold; } .tabs ul li a { - display: block; - padding: 0.8em; - color: #fff; + display: block; + padding: 0.8em; + color: #fff; } .pure-form-stacked > div:first-child { - display: block; + display: block; } .edit-form { - min-width: 70%; + min-width: 70%; } .edit-form .tab-pane-inner { - padding: 0; + padding: 0; } .edit-form .tab-pane-inner:not(:target) { - display: none; + display: none; } .edit-form .tab-pane-inner:target { - display: block; + display: block; } .edit-form .box-wrap { - position: relative; + position: relative; } .edit-form .inner { - background: #fff; - padding: 20px; + background: #fff; + padding: 20px; } .edit-form #actions { - display: block; - background: #fff; + display: block; + background: #fff; } diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html index 92f2c995..a6d363e0 100644 --- a/changedetectionio/templates/base.html +++ b/changedetectionio/templates/base.html @@ -34,9 +34,9 @@
    {% if current_user.is_authenticated or not has_password %} {% if not current_diff_url %} -
  • - -
    • +
  • + +
  • BACKUP