Categories refactor (#517)

* 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

* feat: update filter/selector tpls

* feat: change multi to regular input

entire category list is no longer returned on group page

* feat: add pagination to user/:slug/categories

* feat: flags category selector

* feat: left/right filter

* feat: move filter right

* feat: add selector to /categories and /category

only when categories dont fit on one page

* fix: show title if only one page
main
Barış Soner Uşaklı 4 years ago committed by GitHub
parent 12f122ee37
commit 5d8ca1f27f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -22,6 +22,7 @@
<!-- IMPORT partials/account/category-item.tpl -->
{{{end}}}
</ul>
<!-- IMPORT partials/paginator.tpl -->
</div>
</div>
</div>

@ -6,7 +6,11 @@
</div>
<div class="row">
<div class="<!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
{{{ if pagination.pages.length }}}
<div><!-- IMPORT partials/category-selector.tpl --></div>
{{{ else }}}
<h1 class="categories-title">[[pages:categories]]</h1>
{{{ end }}}
<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
{{{each categories}}}
<!-- IMPORT partials/categories/item.tpl -->

@ -8,7 +8,7 @@
<!-- IF hasFilter -->
<div class="alert alert-warning">
<p class="pull-right">
<a href="{config.relative_path}/flags?reset=1">[[flags:filter-reset]]</a>
<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
</p>
[[flags:filter-active]]
</div>

@ -164,14 +164,14 @@
<hr />
<div class="form-group">
<label for="memberPostCids">[[groups:details.member-post-cids]]</label>
<select multiple="true" name="memberPostCids" id="memberPostCids" class="form-control" size="15">
{{{each group.categories}}}
<option value="{categories.cid}"{{{ if ../selected }}} selected{{{ end }}}>
{../level}{../name}
</option>
{{{end}}}
</select>
<p class="help-block">[[groups:details.member-post-cids-help]]</p>
<div class="row">
<div class="col-md-6">
<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
</div>
<div class="col-md-6 member-post-cids-selector">
<!-- IMPORT partials/category-selector.tpl -->
</div>
</div>
</div>
<hr />

@ -0,0 +1,19 @@
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>{{{ else }}}
<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
</button>
<div component="category-selector-search" class="hidden">
<input type="text" class="form-control" autocomplete="off">
</div>
<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
{{{ if allCategoriesUrl }}}
<li role="presentation" class="category" data-all="all">
<a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
</li>
{{{ end }}}
{{{each categoryItems}}}
<li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
<a role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i><span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ../icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {../icon}" style="color: {../color};"></i></span>{{{ end }}} {../name}</span></a>
</li>
{{{end}}}
</ul>

@ -0,0 +1,3 @@
<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet">
<!-- IMPORT partials/category-filter-content.tpl -->
</div>

@ -1,19 +1,3 @@
<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet {{{ if !categories.length }}}hidden{{{end}}}">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>{{{ else }}}
<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
</button>
<div component="category-selector-search" class="hidden">
<input type="text" class="form-control" autocomplete="off">
</div>
<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
<li role="presentation" class="category">
<a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
</li>
{{{each categories}}}
<li role="presentation" class="category {{{ if categories.disabledClass }}}disabled{{{ end }}}" data-cid="{categories.cid}" data-parent-cid="{categories.parentCid}" data-name="{categories.name}">
<a role="menu-item" href="#">{categories.level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !categories.selected }}}invisible{{{ end }}}"></i><span component="category-markup">{{{ if categories.icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {categories.icon}" style="color: {categories.color};"></i></span>{{{ end }}} {categories.name}</span></a>
</li>
{{{end}}}
</ul>
<div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
<!-- IMPORT partials/category-filter-content.tpl -->
</div>

@ -1,7 +1,7 @@
<div component="category-selector" class="btn-group <!-- IF pullRight -->pull-right<!-- ENDIF pullRight -->">
<div component="category-selector" class="btn-group {{{ if pullRight }}}pull-right{{{ end }}}">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span component="category-selector-selected"><!-- IF selectedCategory --><span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}<!-- ELSE -->
[[topic:thread_tools.select_category]]<!-- ENDIF selectedCategory --></span> <span class="caret"></span>
<span component="category-selector-selected">{{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}{{{ else }}}
{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}{{{ end }}}</span> <span class="caret"></span>
</button>
<div component="category-selector-search" class="hidden">
<input type="text" class="form-control" autocomplete="off">
@ -10,10 +10,10 @@
<li component="category/no-matches" role="presentation" class="category hidden">
<a role="menu-item">[[search:no-matches]]</a>
</li>
{{{each categories}}}
<li role="presentation" class="category <!-- IF categories.disabledClass -->disabled<!-- ENDIF categories.disabledClass -->" data-cid="{categories.cid}" data-name="{categories.name}" data-parent-cid="{categories.parentCid}">
<a role="menu-item">{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><!-- ENDIF categories.icon --> {categories.name}</span></a>
{{{each categoryItems}}}
<li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
<a role="menu-item">{../level}<span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ./icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {../color};" class="fa fa-stack-1x fa-fw {../icon}"></i></span>{{{ end }}} {../name}</span></a>
</li>
{{{end}}}
{{{ end }}}
</ul>
</div>

@ -1,6 +1,10 @@
{{{ if children.length }}}
<div class="subcategory">
{{{ if hasMoreSubCategories }}}
<div><!-- IMPORT partials/category-selector.tpl --></div>
{{{ else }}}
<p>[[category:subcategories]]</p>
{{{ end }}}
<ul component="category/subcategory/container" class="categories" itemscope itemtype="http://www.schema.org/ItemList">
{{{each children}}}

@ -25,6 +25,10 @@
<div class="panel-body">
<form role="form" component="flags/filters">
<fieldset>
<div class="form-group">
<label for="filter-cid">[[flags:filter-cid]]</label>
<!-- IMPORT partials/category-filter.tpl -->
</div>
<div class="form-group">
<label for="sort">[[flags:sort]]</label>
<select class="form-control" id="sort" name="sort">
@ -59,16 +63,6 @@
<option value="user">[[flags:filter-type-user]]</option>
</select>
</div>
<div class="form-group">
<label for="filter-cid">[[flags:filter-cid]]</label>
<select class="form-control" id="filter-cid" name="cid" multiple="true">
<option value="">[[flags:filter-cid-all]]</option>
{{{each categories}}}
<option value="{@key}">{@value}</option>
{{{end}}}
</select>
</div>
</fieldset>
<fieldset class="collapse" id="more-filters" aria-expanded="false">

@ -18,7 +18,7 @@
<!-- IMPORT partials/category/tools.tpl -->
</div>
<!-- IMPORT partials/category-filter.tpl -->
<!-- IMPORT partials/category-filter-right.tpl -->
<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

@ -1,6 +1,6 @@
<!-- IMPORT partials/breadcrumbs.tpl -->
<div class="btn-toolbar">
<!-- IMPORT partials/category-filter.tpl -->
<!-- IMPORT partials/category-filter-right.tpl -->
</div>
<hr/>
<div class="row">

@ -21,7 +21,7 @@
<!-- IMPORT partials/category/tools.tpl -->
</div>
<!-- IMPORT partials/category-filter.tpl -->
<!-- IMPORT partials/category-filter-right.tpl -->
<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

@ -18,7 +18,7 @@
<!-- IMPORT partials/category/tools.tpl -->
</div>
<!-- IMPORT partials/category-filter.tpl -->
<!-- IMPORT partials/category-filter-right.tpl -->
<div class="btn-group pull-right bottom-sheet <!-- IF !filters.length -->hidden<!-- ENDIF !filters.length -->">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

@ -39,7 +39,7 @@
</ul>
</div>
<!-- IMPORT partials/category-filter.tpl -->
<!-- IMPORT partials/category-filter-right.tpl -->
<div class="btn-group pull-right bottom-sheet">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

Loading…
Cancel
Save