Use buttons instead of links for "mark as read"

See https://github.com/marienfressinaud/FreshRSS/issues/599

7 files changed, 57 insertions, 18 deletions

diff --git a/app/layout/nav_menu.phtml b/app/layout/nav_menu.phtml
index 76ead5762..a997a7d54 100644
--- a/app/layout/nav_menu.phtml
+++ b/app/layout/nav_menu.phtml
@@ -184,9 +184,15 @@
 		Minz_Session::_param('markReadUrl', $markReadUrl);
 	?>
 
+	<form id="mark-read" method="post" style="display: none"></form>
+
 	<div class="stick" id="nav_menu_read_all">
-		<?php $confirm = $this->conf->reading_confirm ? ' confirm' : ''; ?>
-		<a class="read_all btn<?php echo $confirm; ?>" href="<?php echo $markReadUrl; ?>"><?php echo _t('mark_read'); ?></a>
+		<?php $confirm = $this->conf->reading_confirm ? 'confirm' : ''; ?>
+		<button class="read_all btn <?php echo $confirm; ?>"
+		        form="mark-read"
+		        formaction="<?php echo $markReadUrl; ?>"
+		        type="submit"><?php echo _t('mark_read'); ?></button>
+
 		<div class="dropdown">
 			<div id="dropdown-read" class="dropdown-target"></div>
 
@@ -194,14 +200,29 @@
 			<ul class="dropdown-menu">
 				<li class="dropdown-close"><a href="#close">❌</a></li>
 
-				<li class="item"><a class="<?php echo $confirm; ?>" href="<?php echo $markReadUrl; ?>"><?php echo $string_mark; ?></a></li>
+				<li class="item">
+					<button class="as-link <?php echo $confirm; ?>"
+					        form="mark-read"
+					        formaction="<?php echo $markReadUrl; ?>"
+					        type="submit"><?php echo $string_mark; ?></button>
+				</li>
 				<li class="separator"></li>
 <?php
 	$today = $this->today;
 	$one_week = $today - 604800;
 ?>
-				<li class="item"><a class="<?php echo $confirm; ?>" href="<?php echo _url('entry', 'read', 'is_read', 1, 'get', $get, 'idMax', $today . '000000'); ?>"><?php echo _t('before_one_day'); ?></a></li>
-				<li class="item"><a class="<?php echo $confirm; ?>" href="<?php echo _url('entry', 'read', 'is_read', 1, 'get', $get, 'idMax', $one_week . '000000'); ?>"><?php echo _t('before_one_week'); ?></a></li>
+				<li class="item">
+					<button class="as-link <?php echo $confirm; ?>"
+					        form="mark-read"
+					        formaction="<?php echo _url('entry', 'read', 'is_read', 1, 'get', $get, 'idMax', $today . '000000'); ?>"
+					        type="submit"><?php echo _t('before_one_day'); ?></button>
+				</li>
+				<li class="item">
+					<button class="as-link <?php echo $confirm; ?>"
+					        form="mark-read"
+					        formaction="<?php echo _url('entry', 'read', 'is_read', 1, 'get', $get, 'idMax', $one_week . '000000'); ?>"
+					        type="submit"><?php echo _t('before_one_week'); ?></button>
+				</li>
 			</ul>
 		</div>
 	</div>
diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css
index 2ef48c406..669f4ce42 100644
--- a/p/themes/Dark/dark.css
+++ b/p/themes/Dark/dark.css
@@ -16,9 +16,9 @@ html, body {
 }
 
 /*=== Links */
-a {
-	outline: none;
+a, button.as-link {
 	color: #6986B2;
+	outline: none;
 }
 
 /*=== Images */
@@ -338,7 +338,8 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css
index a75ed2713..a942df0e8 100644
--- a/p/themes/Flat/flat.css
+++ b/p/themes/Flat/flat.css
@@ -15,7 +15,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	color: #2980b9;
 	outline: none;
 }
@@ -338,17 +338,21 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
+.dropdown-menu > .item:hover {
+	background: #2980b9;
+	color: #fff;
+}
 .dropdown-menu > .item[aria-checked="true"] > a:before {
 	font-weight: bold;
 	margin: 0 0 0 -14px;
 }
 .dropdown-menu > .item:hover > a {
 	text-decoration: none;
-	background: #2980b9;
 	color: #fff;
 }
 .dropdown-menu .input select,
diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index 0d1d95bad..5ec6f1339 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -15,7 +15,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	color: #0062be;
 	outline: none;
 }
@@ -364,7 +364,8 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css
index 665f89c71..1d84753c7 100644
--- a/p/themes/Screwdriver/screwdriver.css
+++ b/p/themes/Screwdriver/screwdriver.css
@@ -16,7 +16,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	color: #D18114;
 	outline: none;
 }
@@ -390,11 +390,13 @@ a.btn {
 .dropdown-menu > .item > a {
 	padding: 0 25px;
 	line-height: 2.5em;
-	color:#ccc;
+	color: #ccc;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
+	color: #ccc;
 }
 .dropdown-menu > .item:hover {
 	background: #171717;
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index 76ac37933..b49cd79ea 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -14,7 +14,7 @@ html, body {
 }
 
 /*=== Links */
-a {
+a, button.as-link {
 	outline: none;
 }
 
@@ -255,7 +255,8 @@ a.btn {
 	padding: 0 25px;
 	line-height: 2.5em;
 }
-.dropdown-menu > .item > span {
+.dropdown-menu > .item > span,
+.dropdown-menu > .item > .as-link {
 	padding: 0 25px;
 	line-height: 2em;
 }
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 466ec4603..9d81b6180 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -88,6 +88,15 @@ input[type="checkbox"] {
 input.extend:focus {
 	width: 300px;
 }
+button.as-link,
+button.as-link:hover,
+button.as-link:active {
+	background: transparent;
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	font-size: 1.1em;
+}
 
 /*=== COMPONENTS */
 /*===============*/