From 54023cad5138569432f7c18cf67916fdf70ef80d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Zanghelini?= <an_dz@simutrans-forum>
Date: Thu, 6 Jul 2017 12:29:37 -0300
Subject: [PATCH] better noscript support

---
 less/header.less                          | 74 +++++++++++++++++++++++
 less/noscript.less                        | 34 -----------
 lib/modules/quickreply.js                 |  1 +
 templates/category.tpl                    |  3 +-
 templates/header.tpl                      |  1 -
 templates/partials/menu.tpl               | 22 ++-----
 templates/partials/topic/reply-button.tpl |  3 +-
 7 files changed, 82 insertions(+), 56 deletions(-)

diff --git a/less/header.less b/less/header.less
index 160e825..2bf0dbf 100644
--- a/less/header.less
+++ b/less/header.less
@@ -373,3 +373,77 @@ body.skin-default .header {
 		}
 	}
 }
+
+label.dropdown-toggle {
+	cursor: pointer;
+	margin: 0;
+}
+
+#user-control-list-check:checked + #user-control-list {
+	display: block;
+}
+
+.navbar-default {
+	.navbar-nav {
+		> li > label {
+			color: @navbar-default-link-color;
+
+			&:hover,
+			&:focus {
+				color: @navbar-default-link-hover-color;
+				background-color: @navbar-default-link-hover-bg;
+			}
+		}
+		> .active > label {
+			&,
+			&:hover,
+			&:focus {
+				color: @navbar-default-link-active-color;
+				background-color: @navbar-default-link-active-bg;
+			}
+		}
+		> .disabled > label {
+			&,
+			&:hover,
+			&:focus {
+				color: @navbar-default-link-disabled-color;
+				background-color: @navbar-default-link-disabled-bg;
+			}
+		}
+		> .open > label {
+			&,
+			&:hover,
+			&:focus {
+				background-color: @navbar-default-link-active-bg;
+				color: @navbar-default-link-active-color;
+			}
+		}
+	}
+}
+
+.dropdown-menu > li > form > button {
+	text-align: left;
+	width: 100%;
+	background: none;
+	border: none;
+	display: block;
+	padding: 3px 20px;
+	clear: both;
+	font-weight: normal;
+	line-height: @line-height-base;
+	color: @dropdown-link-color;
+	white-space: nowrap; // prevent links from randomly breaking onto new lines
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+		color: @dropdown-link-hover-color;
+		background-color: @dropdown-link-hover-bg;
+	}
+}
+
+html[data-dir="rtl"] {
+	.dropdown-menu > li > form > button {
+		text-align: right;
+	}
+}
diff --git a/less/noscript.less b/less/noscript.less
index d1f3d2b..ce74098 100644
--- a/less/noscript.less
+++ b/less/noscript.less
@@ -81,37 +81,3 @@ noscript {
 		}
 	}
 }
-.noscript {
-	display: none !important;
-}
-#user-control-list-check:checked + #user-control-list {
-	display: block;
-}
-label.dropdown-toggle {
-	cursor: pointer;
-}
-.dropdown-menu > li > form > button {
-	text-align: left;
-	width: 100%;
-	background: none;
-	border: none;
-	display: block;
-	padding: 3px 20px;
-	clear: both;
-	font-weight: normal;
-	line-height: @line-height-base;
-	color: @dropdown-link-color;
-	white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-	&:hover,
-	&:focus {
-		text-decoration: none;
-		color: @dropdown-link-hover-color;
-		background-color: @dropdown-link-hover-bg;
-	}
-}
-html[data-dir="rtl"] {
-	.dropdown-menu > li > form > button {
-		text-align: right;
-	}
-}
\ No newline at end of file
diff --git a/lib/modules/quickreply.js b/lib/modules/quickreply.js
index 9083ded..a79ae83 100644
--- a/lib/modules/quickreply.js
+++ b/lib/modules/quickreply.js
@@ -26,6 +26,7 @@ define('persona/quickreply', ['components'], function(components) {
 		$('.textcomplete-wrapper').css('height', '100%').find('textarea').css('height', '100%');
 		
 		components.get('topic/quickreply/button').on('click', function(e) {
+			e.preventDefault();
 			var replyMsg = components.get('topic/quickreply/text').val();
 			var replyData = {
 				tid: ajaxify.data.tid,
diff --git a/templates/category.tpl b/templates/category.tpl
index 4b55e9c..8a5928b 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -8,8 +8,7 @@
 
 		<div class="clearfix">
 			<!-- IF privileges.topics:create -->
-			<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic_no_script" class="btn btn-primary noscript">[[category:new_topic_button]]</a>
-			<button component="category/post" id="new_topic" class="btn btn-primary yescript">[[category:new_topic_button]]</button>
+			<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
 			<!-- ELSE -->
 				<!-- IF !loggedIn -->
 				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
diff --git a/templates/header.tpl b/templates/header.tpl
index fd9f385..555159a 100644
--- a/templates/header.tpl
+++ b/templates/header.tpl
@@ -5,7 +5,6 @@
 	<!-- BEGIN metaTags -->{function.buildMetaTag}<!-- END metaTags -->
 	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
 	<!-- IF bootswatchCSS --><link id="bootswatchCSS" href="{bootswatchCSS}" rel="stylesheet" media="screen"><!-- ENDIF bootswatchCSS -->
-	<noscript><style type="text/css">.noscript{display:block!important}.noscript.btn{display:inline-block!important}.yescript{display:none!important}</style></noscript>
 	<!-- BEGIN linkTags -->{function.buildLinkTag}<!-- END linkTags -->
 
 	<script>
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index d0b1977..3a6e08c 100644
--- a/templates/partials/menu.tpl
+++ b/templates/partials/menu.tpl
@@ -26,10 +26,7 @@
 
 				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
 					<li class="notifications dropdown text-center hidden-xs" component="notifications">
-						<a href="{relative_path}/notifications" title="[[global:header.notifications]]" class="dropdown-toggle noscript" data-toggle="dropdown" id="notif_dropdown_no_script">
-							<i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i>
-						</a>
-						<a href="#" title="[[global:header.notifications]]" class="dropdown-toggle yescript" data-toggle="dropdown" id="notif_dropdown">
+						<a href="{relative_path}/notifications" title="[[global:header.notifications]]" class="dropdown-toggle" data-toggle="dropdown" id="notif_dropdown" data-ajaxify="false" role="button">
 							<i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="notif_dropdown">
@@ -47,10 +44,7 @@
 
 					<!-- IF !config.disableChat -->
 					<li class="chats dropdown">
-						<a class="dropdown-toggle noscript" data-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" title="[[global:header.chats]]" id="chat_dropdown_no_script" component="chat/dropdown">
-							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
-						</a>
-						<a class="dropdown-toggle yescript" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown" data-ajaxify="false" role="button">
 							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
@@ -68,17 +62,12 @@
 					<!-- ENDIF !config.disableChat -->
 
 					<li id="user_label" class="dropdown">
-						<a class="dropdown-toggle yescript" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
-							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> />
-							<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div>
-							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
-						</a>
-						<label class="dropdown-toggle noscript" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" for="user-control-list-check">
+						<label for="user-control-list-check" class="dropdown-toggle" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" role="button">
 							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> />
 							<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div>
 							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
 						</label>
-						<input type="checkbox" class="hidden" id="user-control-list-check">
+						<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
 						<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
 							<li>
 								<a component="header/profilelink" href="{relative_path}/user/{user.userslug}">
@@ -135,12 +124,11 @@
 							<!-- ENDIF showModMenu -->
 							<li role="presentation" class="divider"></li>
 							<li component="user/logout">
-								<form class="noscript" method="post" action="{relative_path}/logout">
+								<form method="post" action="{relative_path}/logout">
 									<input type="hidden" name="_csrf" value="{config.csrf_token}">
 									<input type="hidden" name="noscript" value="true">
 									<button type="submit"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></button>
 								</form>
-								<a href="#" class="yescript"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></a>
 							</li>
 						</ul>
 					</li>
diff --git a/templates/partials/topic/reply-button.tpl b/templates/partials/topic/reply-button.tpl
index c3ee61d..b200a5c 100644
--- a/templates/partials/topic/reply-button.tpl
+++ b/templates/partials/topic/reply-button.tpl
@@ -1,6 +1,5 @@
 <div component="topic/reply/container" class="btn-group action-bar <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">
-	<a href="{config.relative_path}/compose?tid={tid}&title={title}" component="topic/reply" class="btn btn-primary noscript">[[topic:reply]]</a>
-	<button class="btn btn-primary yescript" component="topic/reply">[[topic:reply]]</button>
+	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-primary" component="topic/reply" data-ajaxify="false" role="button">[[topic:reply]]</a>
 	<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 		<span class="caret"></span>
 	</button>