feat: functioning category dropdown in recent/unread/etc without js (#483)

* 10.1.0

* feat: WIP nojs category dropdown in recent

* feat: allowing new topic button to be clicked without js

It now opens a category dropdown which then sends user to
the discrete composer page.

WARNING: Does not work on tag.tpl. Needs core update to send
categories data through...

* fix: removed unneeded data-toggle attribute

less/category.less

@@ -169,6 +169,10 @@
 		font-size: 65%;
 		border-radius: 50%;
 	}
+
+	#category-dropdown-check:checked + .dropdown-menu {
+		display: block;
+	}
 }
 
 .category-dropdown-menu {

templates/partials/buttons/newTopic.tpl

@@ -0,0 +1,15 @@
+<noscript><div class="dropdown" component="category-selector"></noscript>
+<label component="category/post" for="category-dropdown-check" class="btn btn-primary" id="new_topic">
+	[[category:new_topic_button]]
+</label>
+<noscript>
+	<input type="checkbox" class="hidden" id="category-dropdown-check" aria-hidden="true">
+	<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+		{{{each categories}}}
+		<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}">
+			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}<span component="category-markup">{{{if categories.icon}}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {categories.color};" class="fa fa-stack-1x fa-fw {categories.icon}"></i></span>{{{end}}} {categories.name}</span></a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>
+</noscript>

templates/popular.tpl

@@ -8,7 +8,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF canPost -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF canPost -->

templates/recent.tpl

@@ -8,7 +8,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF canPost -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF canPost -->

templates/tag.tpl

@@ -4,7 +4,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF loggedIn -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF loggedIn -->

templates/top.tpl

@@ -8,7 +8,7 @@
 	<div class="btn-toolbar">
 		<div class="pull-left">
 			<!-- IF loggedIn -->
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<!-- ELSE -->
 			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
 			<!-- ENDIF loggedIn -->

templates/unread.tpl

@@ -7,7 +7,7 @@
 <div class="unread">
 	<div class="btn-toolbar">
 		<div class="pull-left">
-			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- IMPORT partials/buttons/newTopic.tpl -->
 			<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="inline-block">
 				<div class="alert alert-warning hide" id="new-topics-alert"></div>
 			</a>