From b5c2e13285c9c0afc8bfd47040955ea00225ff39 Mon Sep 17 00:00:00 2001
From: ntmmfts <jay.x.lewis@gmail.com>
Date: Tue, 28 Dec 2021 03:15:54 -1000
Subject: [PATCH] ui-improvement changes and fixes 12/28

---
 changedetectionio/static/images/search.png    | Bin 2133 -> 0 bytes
 changedetectionio/static/js/tbltools.js       |  45 +++++--
 changedetectionio/static/styles/styles.css    | 119 ++++++++++--------
 changedetectionio/templates/base.html         |   2 +-
 .../templates/watch-overview.html             | 107 ++++++----------
 5 files changed, 143 insertions(+), 130 deletions(-)
 delete mode 100644 changedetectionio/static/images/search.png

diff --git a/changedetectionio/static/images/search.png b/changedetectionio/static/images/search.png
deleted file mode 100644
index 69755f0085d8a4a99273951bb68091904d995d5c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2133
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
LNkvXXu0mjf25=EV

diff --git a/changedetectionio/static/js/tbltools.js b/changedetectionio/static/js/tbltools.js
index 71f910c2..859cccc3 100644
--- a/changedetectionio/static/js/tbltools.js
+++ b/changedetectionio/static/js/tbltools.js
@@ -2,6 +2,8 @@
 
 // must be a var for keyChar and keyCode use
 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)
 var loading;
@@ -29,6 +31,14 @@ 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;
+  }
+}
 
 // page load functions
 function load_functions() {
@@ -85,11 +95,7 @@ function sortTable(n) {
 		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
+	  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;
 	  }
@@ -147,7 +153,7 @@ function sortTable(n) {
   // save sorting
   sessionStorage.setItem("sort_column", n);
   sessionStorage.setItem("sort_order", (dir == "asc") ? 0 : 1);
-  // restripe
+  // restripe rows
   restripe();
 }
 
@@ -209,8 +215,8 @@ function tblSearch(evt) {
   filter = input.value.toUpperCase();
   table = document.getElementById("watch-table");
   tr = table.getElementsByTagName("tr");
-  for (i = 0; i < tr.length; i++) {
-    td = tr[i].getElementsByTagName("td")[5]; // col 5 is the hidden title/url column
+  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) {
@@ -219,9 +225,13 @@ function tblSearch(evt) {
 	  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
@@ -230,22 +240,31 @@ function restripe () {
 	var table = document.getElementById("watch-table");
 	var rows = table.getElementsByTagName("tr");
 	
-	for (i = 0; i < rows.length; i++) { // skip thead row 0
+	for (i = 1; i < rows.length; i++) { // skip header
  		if (rows[i].style.display !== "none") {
 			visrows.push(rows[i]);
 		}
 	}
 	for (i=0 ; i<visrows.length; i++) {
 		var row = visrows[i];
+		if( i%2==0 ) {
+			row.classList.remove('pure-table-odd');
+			row.classList.add('pure-table-even');
+		}
+		else {
+			row.classList.remove('pure-table-even');
+			row.classList.add('pure-table-odd');
+		}
 		var cells = row.getElementsByTagName("td");
 		for(var j=0; j<cells.length; j++) {
 			if( i%2==0 ) {
-				cells[j].style.background = "#ffffff";
-			} else {
 				cells[j].style.background = "#f2f2f2";
+			} else {
+				cells[j].style.background = "#ffffff";
 			}
 		}
-		//uncomment to re-number rows ascending: cells[0].innerText = i+1;
+		// uncomment to renumber rows ascending:	var cells = row.getElementsByTagName("td");
+ 		// uncomment to renumber rows ascending:	cells[0].innerText = i+1;
 	}
 }
 
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index a7bd3a1c..4a1d38ac 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -3,6 +3,9 @@ body {
     background: #262626;
 }
 .pure-table-even {
+    background: #f2f2f2;
+}
+.pure-table-odd {
     background: #fff;
 }
 a {
@@ -31,7 +34,7 @@ section.content {
 .search-box input {
 	width: 32px;
 	border: none;
-	background-image: url(/static/images/search.png);
+	background-image: url(/static/images/search.svg);
 	background-position: 10px 10px; 
 	background-repeat: no-repeat;
 	padding: 16px 0px 16px 16px;
@@ -100,7 +103,6 @@ section.content {
     width: 100%;
 }
 #header {
-	text-align: center;
 	vertical-align: middle;
 	-webkit-touch-callout: none; /* iOS Safari */
 	-webkit-user-select: none; /* Safari */
@@ -114,16 +116,13 @@ section.content {
 	color: #fff;
 	font-weight: normal;
 }
-.watch-table td.title-col, #actions {
-	text-align: center;
-}
 .watch-table .clickable {
 	cursor: pointer;
 }
 .watch-table .sortarrow {
 	color: #0078e7;
 }
-.watch-table .hidden {
+.watch-table .hidden-col {
 	display: none;
 }
 .watch-table tr.unviewed {
@@ -135,7 +134,6 @@ section.content {
 .watch-table td {
     font-size: 80%;
     white-space: nowrap;
-	text-align: center;
 }
 .watch-table td.title-col {
     word-break: break-all;
@@ -162,7 +160,7 @@ section.content {
     display: flex;
     justify-content: center;
 }
-#post-list-buttons {
+/* #post-list-buttons {
     padding: 0;
     margin: 0;
 }
@@ -173,11 +171,7 @@ section.content {
 #post-list-buttons li {
     display: inline-block;
 }
-#flexlayout {
-	display: flex;
-	justify-content: space-between;
-}
-#flexlayout-bottom {
+ */#flexlayout {
 	float: right;
 }
 #categories {
@@ -188,7 +182,28 @@ section.content {
 	text-align: right;
 	margin-top: auto;
 }
-#post-list-buttons-top a {
+
+
+#post-list-buttons {
+	text-align:right;
+	padding:0;
+	margin:0
+}
+#post-list-buttons li {
+	display:inline-block
+}
+#post-list-buttons a {
+	border-top-left-radius:initial;
+	border-top-right-radius:initial;
+	border-bottom-left-radius:5px;
+	border-bottom-right-radius:5px
+}
+
+
+
+
+
+/* #post-list-buttons-top a {
 	border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom-left-radius: initial;
@@ -204,13 +219,13 @@ section.content {
 	display: grid;
 	display: -ms-grid;
 }
-#checkbox-functions ul {
+ */#checkbox-functions ul {
 	padding-left: 0px;
 }
-#post-list-buttons-top-grid li {
+/* #post-list-buttons-top-grid li {
 	list-style-type: none;
 }
-#checkbox-functions {
+ */#checkbox-functions {
 	position: fixed;
 	left: 10%;
 	text-align: left;
@@ -253,10 +268,6 @@ section.content {
 	margin-bottom: auto;
 	direction: rtl;
  }
-.watch-table tfoot {
-	bottom: 0;
-	position: fixed;
-}
 body:after {
     content: "";
     background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
@@ -590,10 +601,6 @@ body:before {
     border-radius: 10px;
     margin-bottom: 1em;
 }
-#new-watch-form input {
-    width: auto !important;
-    display: inline-block;
-}
 #new-watch-form .label {
     display: none;
 }
@@ -626,7 +633,6 @@ footer {
     padding: 10px;
     background: #fff;
     color: #444;
-    text-align: center;
 }
 #feed-icon {
     vertical-align: middle;
@@ -647,10 +653,25 @@ footer {
 #new-version-text a {
     color: #e07171;
 }
-.paused-state.state-False img {
+.chkbox, .chkbox-header {
+	padding-right: 0px !important;
+}
+.chkbox {
+	text-align: center;
+	padding-left: 0px !important;
+}
+.pause-resume-header {
+	opacity: 0.8;
+}
+.pause-resume, .pause-resume-header {
+	padding-left: 0px !important;
+	padding-right: 0px !important;
+	text-align: center;
+}
+.pause-resume img {
     opacity: 0.2;
 }
-.paused-state.state-False:hover img {
+.pause-resume:hover img {
     opacity: 0.8;
 }
 .monospaced-textarea textarea {
@@ -702,7 +723,7 @@ footer {
     .box {
         max-width: 95%;
     }
-	.watch-table td.low-res {
+	.watch-table { 
 		display: inline-block;
 		padding: 5px;
 	}
@@ -719,15 +740,19 @@ footer {
     #nav-menu {
         overflow-x: scroll;
     }
-	.hover-img img {
-		opacity: 1;
-	}
-	.hover-img:hover img {
-		opacity: 1;
+	.pause-resume img {
+		opacity: 0.8;
 	}
 	#watch-actions {
 		margin-top: 3px;
 	}
+	.watch-table thead {
+		border-bottom: 1px solid #cbcbcb;
+	}
+	.chkbox, .chkbox-header, .pause-resume, .pause-resume-header{
+		padding: .5em 1em !important;
+		text-align: left;
+	}
 }
 @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
     input[type="text"] {
@@ -752,7 +777,7 @@ footer {
         content: "Changed ";
     }
 	.watch-table th:nth-child(0) {
-		display: inline-block;
+		display: none;
 	}
 	.watch-table th:nth-child(1) {
 		display: inline-block;
@@ -760,11 +785,17 @@ footer {
 	.watch-table th:nth-child(2) {
 		display: inline-block;
 	}
+	.watch-table td:nth-child(1) {
+		display: inline-block;
+	}
+	.watch-table td:nth-child(2) {
+		display: inline-block;
+	}
 	.watch-table th:nth-child(3) {
 		display: inline-block;
 	}
 	.watch-table th:nth-child(4) {
-		display: inline-block;
+		display: none;
 	}
 	.watch-table th:nth-child(5) {
 		display: inline-block;
@@ -779,19 +810,13 @@ footer {
 		display: none;
 	}
 	.watch-table th:nth-child(9) {
-		display: inline-block;
-	}
-	.watch-table th:nth-child(10) {
 		display: none;
 	}
-	.watch-table th:nth-child(11) {
-		display: none;
-	}
-    .watch-table .pure-table td,
+	.watch-table .pure-table td,
     .watch-table .pure-table th {
         border: none;
     }
-    .watch-table td {
+	.watch-table td {
         border: none;
         border-bottom: 1px solid #eee;
     }
@@ -802,12 +827,6 @@ footer {
         padding-right: 10px;
         white-space: nowrap;
     }
-    .watch-table.pure-table-striped tr:nth-child(2n-1) {
-        background-color: #eee;
-    }
-    .watch-table.pure-table-striped tr:nth-child(2n-1) td {
-        background-color: inherit;
-    }
 }
 @media only screen and (min-width: 761px) {
     .m-d {
diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html
index 5bd1a030..055cf4cc 100644
--- a/changedetectionio/templates/base.html
+++ b/changedetectionio/templates/base.html
@@ -23,7 +23,7 @@
         {% else %}
             <a class="pure-menu-heading" href="{{url_for('index')}}"><strong>Change</strong>Detection.io</a>
         {% endif %}
-		{% if current_diff_url %}
+        {% if current_diff_url %}
         <a class=current-diff-url href="{{ current_diff_url }}"><span style="max-width: 30%; overflow: hidden;">{{ current_diff_url }}</span></a>
         {% else %}
         {% if new_version_available and not (has_password and not current_user.is_authenticated) %}
diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html
index e6110419..95ae2bc5 100644
--- a/changedetectionio/templates/watch-overview.html
+++ b/changedetectionio/templates/watch-overview.html
@@ -17,28 +17,15 @@
 		<!-- add extra stuff, like do a http POST and send headers -->
 		<!-- user/pass r = requests.get('https://api.github.com/user', auth=('user', 'pass')) -->
 	</form>
-    <div id="watch-table-wrapper">
-		<div id="flexlayout">
-			<div id="categories">
-				<a href="{{url_for('index')}}" class="pure-button button-tag {{'active' if not active_tag }}">All</a>
-				{% for tag in tags %}
-					{% if tag != "" %}
-						<a href="{{url_for('index', tag=tag) }}" class="pure-button button-tag {{'active' if active_tag == tag }}">{{ tag }}</a>
-					{% endif %}
-				{% endfor %}
-			</div>
-			<div id="recheck-and-rss">
-				<ul id="post-list-buttons">
-					<li>
-						<a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
-						All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-					</li>
-					<li>
-						<a href="{{ url_for('index', tag=active_tag , rss=true)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
-					</li>
-				</ul>
-			</div>
-		</div>	
+    <div id="watch-table-wrapper" tabindex="-1">
+		<div id="categories">
+			<a href="{{url_for('index')}}" class="pure-button button-tag {{'active' if not active_tag }}">All</a>
+			{% for tag in tags %}
+				{% if tag != "" %}
+					<a href="{{url_for('index', tag=tag) }}" class="pure-button button-tag {{'active' if active_tag == tag }}">{{ tag }}</a>
+				{% endif %}
+			{% endfor %}
+		</div>
 			
 		<div id="controls-top">
 			<div id="checkbox-functions" style="display: none;">
@@ -63,16 +50,14 @@
 			<table class="pure-table pure-table-striped watch-table" id="watch-table">
 				<thead>
 				<tr id="header">
-					<th>#</th>
-					<th onclick="sortTable(1)"><span class="clickable" title="Sort by Checked"><input type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All">&nbsp;&nbsp;<span id="sortable-1"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-1a" style="display:none;">&#9650;</span><span id="sort-1d" style="display:none;">&#9660;</span></span></span></th>
-					<th onclick="sortTable(2)"><span class="clickable" title="Sort by Pause/Resume"><a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;&nbsp;<span id="sortable-2"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-2a" style="display:none;">&#9650;</span><span id="sort-2d" style="display:none;">&#9660;</span></span></span></th>
-					<th onclick="sortTable(3)"><span class="clickable" title="Sort by Viewed/Unviewed"><a href="javascript:processChecked('mark_all_notviewed', '{{ active_tag }}');"><img src="{{url_for('static_content', group='images', filename='notviewed.svg')}}" alt="Uniewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Unviewed"/></a>&nbsp;<a href="{{url_for('mark_all_viewed', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='viewed.svg')}}" alt="Viewed" title="Mark All{%if active_tag%} in &quot;{{active_tag}}&quot;{%endif%} as Viewed"/></a>&nbsp;&nbsp;<span id="sortable-3"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-3a" style="display:none;">&#9650;</span><span id="sort-3d" style="display:none;">&#9660;</span></span></span></th>
-					<th onclick="sortTable(5)"><span class="clickable" title="Sort by Title">Title&nbsp;&nbsp;<span id="sortable-5"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-5a" style="display:none;">&#9650;</span><span id="sort-5d" style="display:none;">&#9660;</span></span></span></th>
-					<th class="hidden"></th>
-					<th onclick="sortTable(7)"><span class="clickable" title="Sort by Last Checked">Checked&nbsp;&nbsp;<span id="sortable-7"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-7a" style="display:none;">&#9650;</span><span id="sort-7d" style="display:none;">&#9660;</span></span></span></th>
-					<th class="hidden"></th>
-					<th onclick="sortTable(9)"><span class="clickable" title="Sort by Last Changed">Changed&nbsp;&nbsp;<span id="sortable-9" style="display:none;"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-9a" style="display:none;">&#9650;</span><span id="sort-9d">&#9660;</span></span></span></th>
-					<th class="hidden"></th>
+					<th class="inline chkbox-header"><input type="checkbox" name="showhide" onchange="checkAll(this)" title="Check/Uncheck All">&nbsp;&nbsp;#</th>
+					<th class="pause-resume-header" onclick="sortTable(1)"><span class="clickable" title="Sort by Pause/Resume"><a href="{{url_for('index', pause='pause-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;<a href="{{url_for('index', pause='resume-all', tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume All {%if active_tag%}in &quot;{{active_tag}}&quot; {%endif%}"/></a>&nbsp;&nbsp;<span id="sortable-1"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-1a" style="display:none;">&#9650;</span><span id="sort-1d" style="display:none;">&#9660;</span></span></span></th>
+					<th onclick="sortTable(3)"><span class="clickable" title="Sort by Title">Title&nbsp;&nbsp;<span id="sortable-3"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-3a" style="display:none;">&#9650;</span><span id="sort-3d" style="display:none;">&#9660;</span></span></span></th>
+					<th class="hidden-col"></th>
+					<th onclick="sortTable(5)"><span class="clickable" title="Sort by Last Checked">Checked&nbsp;&nbsp;<span id="sortable-5"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-5a" style="display:none;">&#9650;</span><span id="sort-5d" style="display:none;">&#9660;</span></span></span></th>
+					<th class="hidden-col"></th>
+					<th onclick="sortTable(7)"><span class="clickable" title="Sort by Last Changed">Changed&nbsp;&nbsp;<span id="sortable-7" style="display:none;"><img src="{{url_for('static_content', group='images', filename='sortable.svg')}}" /></span><span class="sortarrow"><span id="sort-7a" style="display:none;">&#9650;</span><span id="sort-7d">&#9660;</span></span></span></th>
+					<th class="hidden-col"></th>
 					<th>Actions</th>
 				</tr>
 				</thead>
@@ -83,26 +68,17 @@
 							{% if watch.last_error is defined and watch.last_error != False %}error{% endif %}
 							{% if watch.paused is defined and watch.paused != False %}paused{% endif %}
 							{% if watch.newest_history_key| int > watch.last_viewed| int %}unviewed{% endif %}">
-							<td class="inline low-res">{{ loop.index }}</td> <!-- col 0, sort by index -->
-							<td class="inline low-res"><input id="{{watch.uuid}}" type="checkbox" name="check" onchange="checkChange();"></td>
-							<td class="inline low-res">
-								{% if watch.paused %}
-									<a href="{{url_for('index', pause=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume"/></a>
-								{% else %}
-									<a href="{{url_for('index', pause=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause"/></a>
-								{% endif %}
-							</td>
-							<td class="inline low-res">
-								{% if watch.newest_history_key| int > watch.last_viewed| int %}
-									<a href="{{url_for('process_selected', func='mark_selected_viewed', uuids=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='viewed.svg')}}" alt="Viewed" title="Mark as Viewed"/></a>
-								{% else %}
-									<a href="{{url_for('process_selected', func='mark_selected_notviewed', uuids=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='notviewed.svg')}}" alt="Unviewed" title="Mark as Unviewed"/></a>
-								{% endif %}
+							<td class="inline chkbox"><input id="{{watch.uuid}}" type="checkbox" name="check" onchange="checkChange();">&nbsp;&nbsp;{{ loop.index }}</td>
+							<td class="inline pause-resume">
+							{% if watch.paused %}
+								<a href="{{url_for('index', pause=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='play.svg')}}" alt="Resume" title="Resume"/></a>
+							{% else %}
+								<a href="{{url_for('index', pause=watch.uuid, tag=active_tag)}}"><img src="{{url_for('static_content', group='images', filename='pause.svg')}}" alt="Pause" title="Pause"/></a>
+							{% endif %}
 							</td>
 							<td class="title-col inline">{{watch.title if watch.title is not none and watch.title|length > 0 else watch.url}}
 								<a class="external inline-hover-img" target="_blank" rel="noopener" href="{{ watch.url }}"></a>
 								{%if watch.fetch_backend == "html_webdriver" %}<img style="height: 1em; display:inline-block;" src="/static/images/Google-Chrome-icon.png" />{% endif %}
-
 								{% if watch.last_error is defined and watch.last_error != False %}
 								<div class="fetch-error">{{ watch.last_error }}</div>
 								{% endif %}
@@ -110,16 +86,16 @@
 								<span class="watch-tag-list">{{ watch.tag}}</span>
 								{% endif %}
 							</td>
-							<td class="hidden">{{ watch.title if watch.title else watch.url }}</td> <!-- col 5, title sorting -->
+							<td class="hidden-col">{{ watch.title if watch.title else watch.url }}</td> <!-- col 5, title sorting -->
 							<td class="last-checked">{{watch|format_last_checked_time}}</td>
-							<td class="hidden">{{ watch.last_checked }}</td> <!-- col 7, last_checked sorting -->
+							<td class="hidden-col">{{ watch.last_checked }}</td> <!-- col 7, last_checked sorting -->
 							<td class="last-changed">{% if watch.history|length >= 2 and watch.last_changed %}
 								{{watch.last_changed|format_timestamp_timeago}}
 								{% else %}
 								Not yet
 								{% endif %}
 							</td>
-							<td class="hidden">{{ watch.last_changed }}</td> <!-- col 9, last_changed sorting -->
+							<td class="hidden-col">{{ watch.last_changed }}</td> <!-- col 9, last_changed sorting -->
 							<td id="actions">
 								<a href="{{ url_for('api_watch_checknow', uuid=watch.uuid, tag=request.args.get('tag')) }}"
 								   class="pure-button button-small pure-button-primary">Recheck</a>
@@ -136,22 +112,21 @@
 					{% endfor %}
 				</tbody>
 			</table>
+			<ul id="post-list-buttons">
+				{% if has_unviewed %}
+				<li>
+					<a href="{{url_for('mark_all_viewed', tag=request.args.get('tag')) }}" class="pure-button button-tag ">Mark all viewed</a>
+				</li>
+				{% endif %}
+				<li>
+				   <a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
+					all {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
+				</li>
+				<li>
+					<a href="{{ url_for('rss', tag=active_tag , token=app_rss_token)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
+				</li>
+			</ul>
 		</div>
-		
-		<div id="flexlayout-bottom">
-			<div id="controls-bottom">
-				<ul id="post-list-buttons">
-					<li>
-						<a href="{{ url_for('index', tag=active_tag , rss=true)}}"><img id="feed-icon" src="{{url_for('static_content', group='images', filename='Generic_Feed-icon.svg')}}" height="15px"></a>
-					</li>
-					<li>
-					   <a href="{{ url_for('api_watch_checknow', tag=active_tag) }}" class="pure-button button-tag ">Recheck
-						All {% if active_tag%}in "{{active_tag}}"{%endif%}</a>
-					</li>
-				</ul>
-			</div>
-		</div>
-
 	</div>
 
 </div>