Categories refactor (#516)

* feat: pagination on /categories and /category page for sub categories

* feat: show subcategories left

* fix: rename categories to allCategories on /search

* feat: add component for subcategory container

less/category.less

@@ -109,6 +109,10 @@
 			font-weight: bold;
 		}
 	}
+
+	.subcategory {
+		margin-bottom: 10px;
+	}
 }
 
 .category, .categories, .subcategory {

templates/categories.tpl

@@ -12,6 +12,7 @@
 			<!-- IMPORT partials/categories/item.tpl -->
 			{{{end}}}
 		</ul>
+		<!-- IMPORT partials/paginator.tpl -->
 	</div>
 	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 <!-- IF !widgets.sidebar.length -->hidden<!-- ENDIF !widgets.sidebar.length -->">
 		{{{each widgets.sidebar}}}

templates/partials/category/subcategory.tpl

@@ -1,9 +1,14 @@
+{{{ if children.length }}}
 <div class="subcategory">
-	<!-- IF children.length --><p>[[category:subcategories]]</p><!-- ENDIF children.length -->
+	<p>[[category:subcategories]]</p>
 
-	<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+	<ul component="category/subcategory/container" class="categories" itemscope itemtype="http://www.schema.org/ItemList">
 		{{{each children}}}
 		<!-- IMPORT partials/categories/item.tpl -->
 		{{{end}}}
 	</ul>
+	{{{ if hasMoreSubCategories}}}
+	<button class="btn btn-default" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
+	{{{ end }}}
 </div>
+{{{ end }}}

templates/search.tpl

@@ -48,9 +48,9 @@
 							<div class="row">
 								<div class="col-md-6">
 									<label>[[search:in-categories]]</label>
-									<select multiple class="form-control" id="posted-in-categories" size="{categoriesCount}">
+									<select multiple class="form-control" id="posted-in-categories" size="{allCategoriesCount}">
-										{{{each categories}}}
+										{{{each allCategories}}}
-										<option value="{categories.value}">{categories.text}</option>
+										<option value="{allCategories.value}">{allCategories.text}</option>
 										{{{end}}}
 									</select>
 									<input type="checkbox" id="search-children"> [[search:search-child-categories]]