From a2568129f6cd3d869dd38dcfef50dd327bcc3cd3 Mon Sep 17 00:00:00 2001 From: ntmmfts Date: Fri, 24 Dec 2021 08:35:34 -1000 Subject: [PATCH] ui-imporovement adjustments --- changedetectionio/__init__.py | 4 +- changedetectionio/static/js/tbltools.js | 21 +++++-- changedetectionio/static/styles/styles.css | 42 +++++++------- changedetectionio/store.py | 3 + .../templates/watch-overview.html | 56 +++++-------------- 5 files changed, 55 insertions(+), 71 deletions(-) diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py index 0331a866..3d1cf6f7 100644 --- a/changedetectionio/__init__.py +++ b/changedetectionio/__init__.py @@ -335,7 +335,9 @@ def changedetection_app(config=None, datastore_o=None): tags=existing_tags, active_tag=limit_tag, app_rss_token=datastore.data['settings']['application']['rss_access_token'], - has_unviewed=datastore.data['has_unviewed']) + has_unviewed=datastore.data['has_unviewed'], + extra_title="{}".format(" ({})".format(str(datastore.data['unviewed_count'])) if datastore.data['unviewed_count'] > 0 else "") + ) return output diff --git a/changedetectionio/static/js/tbltools.js b/changedetectionio/static/js/tbltools.js index 2c58f1c2..5c90932b 100644 --- a/changedetectionio/static/js/tbltools.js +++ b/changedetectionio/static/js/tbltools.js @@ -38,8 +38,10 @@ function load_functions() { checkChange(); // retrieve saved sorting getSort(); - // sort + // sort if not default + //if (sort_column != 9 || sort_order != 1) { sortTable(sort_column); + //} // search if (isSessionStorageSupported()) { // retrieve search @@ -58,7 +60,6 @@ function sortTable(n) { //Set the sorting direction, either default 9, 1 or saved if (loading) { getSort(); - n = sort_column; dir = (sort_order == 0) ? "asc" : "desc"; loading = false; } @@ -82,11 +83,18 @@ function sortTable(n) { y = rows[i + 1].getElementsByTagName("TD")[n]; x = x.innerHTML.toLowerCase(); y = y.innerHTML.toLowerCase(); - /* handle # columns */ - if (!isNaN(x)) { + if (!isNaN(x)) { // handle numeric columns x = parseFloat(x); y = parseFloat(y); } + if (n == 1) { // handle the checkbox column + x = rows[i].querySelector('input[type=checkbox]').checked; + y = rows[i + 1].querySelector('input[type=checkbox]').checked; + } + if (n == 2 || n == 3) { // handle the play/pause and viewed/unviewed columns + 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") { @@ -216,13 +224,13 @@ function tblSearch(evt) { restripe(); } -// restripe after searching +// restripe after searching or sorting function restripe () { var visrows = []; var table = document.getElementById("watch-table"); var rows = table.getElementsByTagName("tr"); - for (i = 0; i < rows.length; i++) { + for (i = 0; i < rows.length; i++) { // skip thead row 0 if (rows[i].style.display !== "none") { visrows.push(rows[i]); } @@ -237,6 +245,7 @@ function restripe () { cells[j].style.background = "#f2f2f2"; } } + //cells[0].innerText = i+1; } } diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index a0be9cf3..3b8e72bb 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -91,7 +91,7 @@ section.content { color: #333; } .box { - width: 80%; /*changed to width to prevent resizing during search */ + width: 80%; flex-direction: column; display: flex; justify-content: center; @@ -117,11 +117,23 @@ section.content { #play-pause { line-height: .8em; } -#checkbox-functions .pure-button { +#checkbox-functions { + position: fixed; + left: 10%; + text-align: left; + display: inline-grid; +} +#checkbox-functions .pure-button { background: #0078e7; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +#danger .pure-button { + background: #e7096e; } .watch-table td.title-col, #actions { - /*text-align: left;*/ text-align: center; } .watch-table #clickable { @@ -681,9 +693,6 @@ footer { #watch-actions { margin-top: 3px; } - #checkbox-functions { - display: inline-block; - } } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { input[type="text"] { @@ -707,28 +716,20 @@ footer { color: #555; content: "Changed "; } -/* .watch-table td.inline { - display: inline-block; - } - .watch-table thead tr { - position: absolute; - top: -9999px; - left: -9999px; - }*/ .watch-table th:nth-child(0) { - display: none; + display: inline-block; } .watch-table th:nth-child(1) { - display: none; + display: inline-block; } .watch-table th:nth-child(2) { - display: none; + display: inline-block; } .watch-table th:nth-child(3) { - display: none; + display: inline-block; } .watch-table th:nth-child(4) { - display: none; + display: inline-block; } .watch-table th:nth-child(5) { display: inline-block; @@ -766,9 +767,6 @@ footer { padding-right: 10px; white-space: nowrap; } - .watch-table.pure-table-striped tr { - background-color: #fff; - } .watch-table.pure-table-striped tr:nth-child(2n-1) { background-color: #eee; } diff --git a/changedetectionio/store.py b/changedetectionio/store.py index 5728cbb5..31fc689c 100644 --- a/changedetectionio/store.py +++ b/changedetectionio/store.py @@ -201,6 +201,7 @@ class ChangeDetectionStore: @property def data(self): has_unviewed = False + unviewed_count = 0 for uuid, v in self.__data['watching'].items(): self.__data['watching'][uuid]['newest_history_key'] = self.get_newest_history_key(uuid) if int(v['newest_history_key']) <= int(v['last_viewed']): @@ -209,6 +210,7 @@ class ChangeDetectionStore: else: self.__data['watching'][uuid]['viewed'] = False has_unviewed = True + unviewed_count += 1 # #106 - Be sure this is None on empty string, False, None, etc # Default var for fetch_backend @@ -221,6 +223,7 @@ class ChangeDetectionStore: self.__data['settings']['application']['base_url'] = env_base_url.strip('" ') self.__data['has_unviewed'] = has_unviewed + self.__data['unviewed_count'] = unviewed_count return self.__data diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html index 2c514226..b456427c 100644 --- a/changedetectionio/templates/watch-overview.html +++ b/changedetectionio/templates/watch-overview.html @@ -27,31 +27,27 @@ {% endif %} {% endfor %} -   -   -
+ -->