Commit 5968d658 authored by Curtis Adam's avatar Curtis Adam

Move the filter navigation into a dropdown menu

parent cce1efd7
......@@ -3,6 +3,7 @@
@import '../imports/ui/main/buttons.scss';
@import '../imports/ui/main/navigation/navbar.scss';
@import '../imports/ui/main/item/searchResult.scss';
@import '../imports/ui/filter/navigation/navigation.scss';
@import '../imports/ui/impressum/impressum.scss';
@import '../imports/ui/welcome/welcome.scss';
@import '../imports/ui/wordcloud/wordcloud.scss';
......@@ -17,7 +18,6 @@
@import '../imports/ui/card/sidebar/item/aspectRatio.scss';
@import '../imports/ui/markdeep/editor/content/content.scss';
@import '../imports/ui/markdeep/editor/navigation/navigation.scss';
@import '../imports/ui/filter/navigation/navigation.scss';
@import '../imports/ui/forms/bonusForm.scss';
@import '../imports/ui/forms/cardsetForm.scss';
@import '../imports/ui/profile/profile.scss';
......
......@@ -250,8 +250,25 @@ $themes: (
$info_content_body_background: map-get($map, "info_content_body_background");
//editor navigation colors
$item_selection_border: map-get($map, "item_selection_border");
//filter colors
$filter_navigation_background: map-get($map, "filter_navigation_background");
$filter_navigation_text: map-get($map, "filter_navigation_text");
$filter_navigation_background_hover: map-get($map, "filter_navigation_background_hover");
$filter_navigation_icon_active: map-get($map, "filter_navigation_icon_active");
$filter_navigation_text_hover: map-get($map, "filter_navigation_text_hover");
$filter_button_background: map-get($map, "filter_button_background");
$filter_button_icon: map-get($map, "filter_button_icon");
$filter_button_background_active: map-get($map, "filter_button_background_active");
$filter_button_icon_active: map-get($map, "filter_button_icon_active");
$filter_button_background_hover: map-get($map, "filter_button_background_hover");
$filter_button_icon_hover: map-get($map, "filter_button_icon_hover");
$filter_border: map-get($map, "filter_border");
//display mode
$display_mode_background: map-get($map, "display_mode_background");
$display_mode_text: map-get($map, "display_mode_text");
$display_mode_background_hover: map-get($map, "display_mode_background_hover");
$display_mode_text_hover: map-get($map, "display_mode_text_hover");
//item lists colors
$filter_navigation_icon: map-get($map, "filter_navigation_icon");
$item_separator_border_bottom: map-get($map, "item_separator_border_bottom");
$infinite_scroll_background: map-get($map, "infinite_scroll_background");
$infinite_scroll_icon: map-get($map, "infinite_scroll_icon");
......@@ -2580,26 +2597,9 @@ $themes: (
}
//filter
#filter-nav-wrapper, #filter-nav {
.navbar-cards-filter-dropdown {
background-color: $thm_gray !important;
.dropdown-toggle, .navbar-text {
color: $white !important;
}
.dropdown-toggle:hover, a:hover, .dropdown-toggle:focus, a:focus {
background-color: $button_background_hover !important;
color: $button_text_hover !important;
}
#displayModeBtn {
color: $white !important;
}
#displayModeBtn:hover, #displayModeBtn:focus {
background-color: $button_background_hover !important;
color: $button_text_hover !important;
}
border-color: $filter_border !important;
.btn-demo, .btn-warning, .btn-info, .btn-success, .btn-danger {
background-color: $disabled_background !important;
......@@ -2619,16 +2619,16 @@ $themes: (
border-color: $success_background !important;
}
.btn-danger.active, #resetBtn, #resetBtnMobile {
.btn-danger.active, .resetBtn {
color: $danger_text !important;
background-color: $danger_background !important;
border-color: $danger_background !important;
}
#resetBtn.btn-default, #resetBtnMobile.btn-default {
color: white !important;
background-color: $primary !important;
border-color: $primary !important;
.resetBtn.btn-default {
color: $filter_button_icon !important;
background-color: $filter_button_background !important;
border-color: $filter_button_background !important;
}
.btn-demo.active {
......@@ -2643,8 +2643,8 @@ $themes: (
border-color: $warning_background !important;
}
.btn-demo:hover, .btn-warning:hover, .btn-info:hover, .btn-success:hover, .btn-danger:hover, #resetBtn:hover, #resetBtnMobile:hover,
.btn-demo:focus, .btn-warning:focus, .btn-info:focus, .btn-success:focus, .btn-danger:focus, #resetBtn:focus, #resetBtnMobile:focus {
.btn-demo:hover, .btn-warning:hover, .btn-info:hover, .btn-success:hover, .btn-danger:hover, .resetBtn:hover,
.btn-demo:focus, .btn-warning:focus, .btn-info:focus, .btn-success:focus, .btn-danger:focus, .resetBtn:focus {
color: $button_text_hover !important;
background-color: $button_background_hover !important;
border-color: $button_background_hover !important;
......@@ -2663,8 +2663,13 @@ $themes: (
color: $infinite_scroll_text !important;
}
.navigationFilterIcon {
color: $filter_navigation_icon !important;
//filter navigation
.navigationFilterIcon{
color: $filter_navigation_icon_active !important;
}
.navbar-cards-filter-dropdown ul {
background-color: $filter_navigation_background !important;
color: $filter_navigation_text !important;
}
//forms - cardsetForm
#setDifficulty .btn, #cardType .btn {
......@@ -2728,6 +2733,30 @@ $themes: (
}
}
}
@media (min-width: 768px) {
.filter-bottom-row {
ul > li {
background-color: $cardset_form_list_background !important;
border-bottom-color: $cardset_form_border !important;
a {
color: $cardset_form_list_text !important;
}
}
ul > li:hover, ul > li:focus {
background-color: $cardset_form_list_background_hover !important;
a {
color: $cardset_form_list_text_hover !important;
}
}
ul > li.active {
background-color: $cardset_form_list_background_active !important;
a {
color: $cardset_form_list_text_active !important;
}
}
}
}
//learn
.learn-cardHelptext {
color: $storm_dust_approx !important;
......@@ -3345,5 +3374,43 @@ $themes: (
background-color: $use_cases_table_header_background !important;
color: $use_cases_table_header_text !important;
}
//filter
.toggle-filter-dropdown {
background-color: $filter_button_background !important;
color: $filter_button_icon !important;
}
.toggle-filter-dropdown:hover {
background-color: $filter_button_background_hover !important;
color: $filter_button_icon_hover !important;
}
.toggle-filter-dropdown.active {
background-color: $filter_button_background_active !important;
color: $filter_button_icon_active !important;
}
.displayModeBtn {
background-color: $display_mode_background !important;
color: $display_mode_text !important;
}
.displayModeBtn:hover {
background-color: $display_mode_background_hover !important;
color: $display_mode_text_hover !important;
}
.filter-bottom-row {
border-color: $filter_border !important;
}
.filter-bottom-row > a {
background-color: $filter_navigation_background !important;
color: $filter_navigation_text !important;
}
.filter-bottom-row > a:hover {
background-color: $filter_navigation_background_hover !important;
color: $filter_navigation_text_hover !important;
}
}
}
......@@ -286,8 +286,25 @@
"info_content_body_background": LightGoldenRodYellow,
//editor navigation colors
"item_selection_border": $item_separator,
//filter colors
"filter_navigation_background": WhiteSmoke,
"filter_navigation_text": $thm_gray,
"filter_navigation_icon_active": $thm_orange,
"filter_navigation_background_hover": $button_background_hover,
"filter_navigation_text_hover": $button_text_hover,
"filter_button_background": white,
"filter_button_icon": $button_background_hover,
"filter_button_background_active": $thm_orange,
"filter_button_icon_active": white,
"filter_button_background_hover": $button_background_hover,
"filter_button_icon_hover": white,
"filter_border": $thm_gray,
//display mode colors
"display_mode_background": white,
"display_mode_text": $button_background_hover,
"display_mode_background_hover" : $button_background_hover,
"display_mode_text_hover": $button_text_hover,
//item lists colors
"filter_navigation_icon": $thm_orange,
"item_separator_border_bottom": $thm_gray,
"infinite_scroll_background": $thm_gray,
"infinite_scroll_icon": $thm_orange,
......@@ -622,18 +639,18 @@
"wozniak_rating_5_background_hover": $button_background_hover,
"wozniak_rating_5_text": white,
"wozniak_rating_5_text_hover": $button_text_hover,
//landing page
//landing page
"landing_page_wordcloud_button": $thm_green,
"landing_page_wordcloud_button_opacity": 1.0,
"landing_page_wordcloud_button_hover": midnightblue,
"landing_page_wordcloud_button_opacity_hover": 1,
"landing_page_label": white,
//wordcloud
//wordcloud
"wordcloud_background": "unset",
"wordcloud_border": "unset",
"wordcloud_hover_box_background":transparent,
"wordcloud_hover_box_border": white,
//useCases
//useCases
"use_cases_button_background": $thm_green,
"use_cases_button_icon": white,
"use_cases_button_background_hover": $button_background_hover,
......
......@@ -278,7 +278,7 @@
},
"navbar-collapse": {
"all": {
"all": "Alle",
"all": "Alle",
"cardsets": "Karteien",
"repetitorien": "Repetitorien"
},
......@@ -289,9 +289,9 @@
},
"personal": {
"personal": {
"zero": "Anlegen",
"one": "Mein Kartensatz",
"multiple": "Meine Kartensätze"
"zero": "Anlegen",
"one": "Meine Karten",
"multiple": "Meine Karten"
},
"cardsets": {
"zero": "Kartei anlegen",
......@@ -323,6 +323,13 @@
"repetitorien": "Suche nach egeinen Repetitorien…"
}
},
"tooltip": {
"search": "Öffne die Suche",
"useCases": "Zeige die Use Cases",
"displayWordcloud": "Zeige die Einträge in einer Wortwolke",
"displayList": "Zeige die Einträge als Liste",
"filter": "Filter die Einträge"
},
"frontend": "Frontend",
"backend": "Backend",
"none": "Ohne",
......@@ -1109,10 +1116,7 @@
"from": "Ab",
"noResults": "Keine Kartei oder Repetitorium ausgewählt oder Filtern liefert kein Ergebnis.",
"sort": "Sortieren ",
"displayMode": {
"wordcloud": "Wolke",
"list": "Liste"
}
"reset": "Filter zurücksetzen"
},
"infinite-scroll": {
"remainingCardsets": "__current__ von __total__ Karteien",
......
......@@ -279,7 +279,7 @@
},
"navbar-collapse": {
"all": {
"all": "Alle",
"all": "Alle",
"cardsets": "Alle Karteien",
"repetitorien": "Alle Repetitorien"
},
......@@ -291,8 +291,8 @@
"personal": {
"personal": {
"zero": "Anlegen",
"one": "Mein",
"multiple": "Meine"
"one": "Meine Karten",
"multiple": "Meine Karten"
},
"cardsets": {
"zero": "Kartei anlegen",
......@@ -324,6 +324,13 @@
"repetitorien": "Suche nach egeinen Repetitorien…"
}
},
"tooltip": {
"search": "Öffne die Suche",
"useCases": "Zeige die Use Cases",
"displayWordcloud": "Zeige die Einträge in einer Wortwolke",
"displayList": "Zeige die Einträge als Liste",
"filter": "Filter die Einträge"
},
"frontend": "Frontend",
"backend": "Backend",
"none": "Ohne",
......@@ -1110,10 +1117,7 @@
"from": "Ab",
"noResults": "Keine Kartei oder Repetitorium ausgewählt oder Filtern liefert kein Ergebnis.",
"sort": "Sortieren ",
"displayMode": {
"wordcloud": "Wolke",
"list": "Liste"
}
"reset": "Filter zurücksetzen"
},
"infinite-scroll": {
"remainingCardsets": "__current__ von __total__ Karteien",
......
......@@ -2,6 +2,7 @@ import {Route} from "./route.js";
import {Session} from "meteor/session";
import {Filter} from "./filter";
import * as config from "../config/filter.js";
import {NavigatorCheck} from "./navigatorCheck";
export let FilterNavigation = class FilterNavigation {
static gotAuthorFilter (filterType) {
......@@ -127,13 +128,29 @@ export let FilterNavigation = class FilterNavigation {
let activeFilter = Filter.getActiveFilter();
let defaultFilter = Filter.getDefaultFilter();
if (JSON.stringify(activeFilter) === JSON.stringify(defaultFilter)) {
$('#resetBtn').removeClass('btn-warning').addClass('btn-default');
$('#resetBtnMobile').removeClass('btn-warning').addClass('btn-default');
$('.resetBtn').removeClass('btn-warning').addClass('btn-default');
$('.toggle-filter-dropdown').removeClass('active');
return {disabled: 'disabled'};
} else {
$('#resetBtn').removeClass('btn-default').addClass('btn-warning');
$('#resetBtnMobile').removeClass('btn-default').addClass('btn-warning');
$('.resetBtn').removeClass('btn-default').addClass('btn-warning');
$('.toggle-filter-dropdown').addClass('active');
return {};
}
}
static setMaxDropdownHeight () {
if (NavigatorCheck.isSmartphone()) {
let filterNavigationCollapse = $('.navbar-cards-filter-collapse');
let navigationHeader = $('.navbar-header:visible');
if (filterNavigationCollapse.length && navigationHeader.length) {
filterNavigationCollapse.css('max-height', $(window).height() - navigationHeader.height());
}
} else {
let navigationHeader = $('.navbar-fixed-top.navbar-cards:visible');
let filterDropdown = $('.navbar-cards-filter-dropdown:visible');
if (filterDropdown.length && navigationHeader.length) {
$('.navbar-cards-filter-dropdown .filter-bottom-row > li > ul').css('max-height', $(window).height() - navigationHeader.height() - filterDropdown.height());
}
}
}
};
......@@ -34,4 +34,12 @@ export let Icons = class Icons {
return config.landingPageNavigation.wordcloud;
}
}
static displayMode (type) {
switch (type) {
case "wordcloud":
return config.topNavigation.displayMode.wordcloud;
case "list":
return config.topNavigation.displayMode.list;
}
}
};
......@@ -13,7 +13,7 @@ let itemIncrementValue = 20;
//6: Alle repetitorien / All repetitorien
//7: Meine repetitorien / Personal repetitorien
let filtersWithResetButton = [0, 1, 2, 3, 4, 5, 6, 7];
let filtersWithDisplayModeButton = [0, 2, 4, 6, 7];
let filtersWithDisplayModeButton = [0, 2];
let filtersWithSortButton = [0, 1, 2, 3, 4, 5, 6, 7];
let filtersWithDefaultSortName = [0, 2, 3, 5, 6, 7];
let filtersWithDefaultSortDateUpdated = [4];
......
......@@ -41,7 +41,11 @@ let topNavigation = {
"profileSettings": "<i class='fa fa-user'></i>&nbsp;",
"profileRequests": "<i class='fa fa-check'></i>&nbsp;",
"backend": "<i class='fa fa-server'></i>&nbsp;",
"useCases": "<i class='fa fa-map-signs'></i>"
"useCases": "<i class='fa fa-map-signs'></i>",
"displayMode": {
"wordcloud": "<i class='fa fa-cloud'></i>",
"list": "<i class='fa fa-list'></i>"
}
};
//Only used for the active route display on mobile. Will be carried over to desktop after the main template got refactored.
......
......@@ -23,6 +23,7 @@ import {CardVisuals} from "../../api/cardVisuals";
import {AspectRatio} from "../../api/aspectRatio";
import {CardNavigation} from "../../api/cardNavigation";
import {Icons} from "../../api/icons";
import {FilterNavigation} from "../../api/filterNavigation";
Meteor.subscribe("collegesCourses");
......@@ -64,6 +65,47 @@ Template.registerHelper('isMemo', function () {
return Route.isMemo();
});
Template.registerHelper('gotResetButton', function () {
return FilterNavigation.gotResetButton(FilterNavigation.getRouteId());
});
Template.registerHelper('gotDisplayModeButton', function () {
return FilterNavigation.gotDisplayModeButton(FilterNavigation.getRouteId());
});
Template.registerHelper('gotSortButton', function () {
return FilterNavigation.gotSortButton(FilterNavigation.getRouteId());
});
Template.registerHelper('gotAuthorFilter', function () {
return FilterNavigation.gotAuthorFilter(FilterNavigation.getRouteId());
});
Template.registerHelper('gotCardTypeFilter', function () {
return FilterNavigation.gotCardTypeFilter(FilterNavigation.getRouteId());
});
Template.registerHelper('gotDifficultyFilter', function () {
return FilterNavigation.gotDifficultyFilter(FilterNavigation.getRouteId());
});
Template.registerHelper('gotBonusFilter', function () {
return FilterNavigation.gotBonusFilter(FilterNavigation.getRouteId());
});
Template.registerHelper('gotWordcloudFilter', function () {
return FilterNavigation.gotWordCloudFilter(FilterNavigation.getRouteId());
});
Template.registerHelper('gotKindFilter', function () {
return FilterNavigation.gotKindFilter(FilterNavigation.getRouteId());
});
Template.registerHelper('isFilterIndex', function () {
return Route.isFilterIndex();
});
Template.registerHelper('isFixedSidebar', function () {
return CardVisuals.isFixedSidebar();
});
......@@ -325,6 +367,11 @@ Template.registerHelper("getUseCasesIcon", function (type) {
return Icons.useCases(type);
});
Template.registerHelper("getDisplayModeIcons", function (type) {
return Icons.displayMode(type);
});
Template.registerHelper("getKind", function (kind, displayType = 0) {
if (displayType === 0) {
switch (DOMPurify.sanitize(kind, DOMPurifyConfig)) {
......
<template name="cardTypesList">
{{#if this.filter}}
<li>
<a href="#" class="noFilterCardType active" data-id="">{{_ "set-list.everyone"}}</a>
<a href="#" class="noFilterCardType active cards-filter-element" data-id="">{{_ "set-list.everyone"}}</a>
</li>
{{#each getCardTypes}}
{{#if filterCardTypes this.cardType}}
<li>
<a href="#" class="filterCardType"
<a href="#" class="filterCardType cards-filter-element"
data-id="{{this.cardType}}">{{getCardTypeLongName}}
{{#if resultsFilterCardType this.cardType}}
<span class="glyphicon glyphicon-filter"></span>
<span class="glyphicon glyphicon-filter cards-filter-element"></span>
{{/if}}
</a>
</li>
......
......@@ -40,7 +40,6 @@
<div class="empty-button-placeholder"></div>
{{/unless}}
{{#if getDecks 0}}
{{> filterNavigation}}
{{#if displayWordcloud}}
{{> wordcloud}}
{{else}}
......@@ -62,7 +61,6 @@
{{#if canShuffle}}
<div class="container" id="set-list-region">
{{> filterItemShuffleRepetitoriumCallout}}
{{> filterNavigation}}
{{#if shuffleList 1}}
{{#each shuffleList 2}}
{{#unless isActiveCardset}}
......@@ -78,14 +76,13 @@
</template>
<template name="filterIndexCreate">
{{#if isActiveRoute 'create'}}
<span class="filter-index-buttons">
<span class="filter-index-buttons empty-button-placeholder">
{{#if isActiveRoute 'create'}}
{{> filterItemCreateCardsetButton}}
{{> filterItemImportCardsetButton}}
{{> filterItemImportCardsetButton}}
{{/if}}
</span>
{{/if}}
{{#if cardsetList 0}}
{{> filterNavigation}}
{{#if displayWordcloud}}
{{> wordcloud}}
{{else}}
......@@ -106,7 +103,7 @@
<template name="filterIndexRepetitorium">
{{#unless isSelectingCardsetToLearn}}
{{#if isPersonalRepetitorienRoute}}
<span class="filter-index-buttons">
<span class="filter-index-buttons empty-button-placeholder">
{{> filterItemCreateRepetitoriumButton}}
</span>
{{else}}
......@@ -114,7 +111,6 @@
{{/if}}
{{/unless}}
{{#if cardsetList 0}}
{{> filterNavigation}}
{{#if displayWordcloud}}
{{> wordcloud}}
{{else}}
......@@ -133,12 +129,11 @@
</template>
<template name="filterIndexWorkload">
<span class="filter-index-buttons">
{{> filterItemSelectCardsetButton}}
{{> filterItemSelectRepetitoriumButton}}
</span>
<span class="filter-index-buttons empty-button-placeholder">
{{> filterItemSelectCardsetButton}}
{{> filterItemSelectRepetitoriumButton}}
</span>
{{#if learnList 0}}
{{> filterNavigation}}
{{#if learnList 1}}
{{#each learnList 2}}
{{> filterIndexItemCardset extendContext 'index' @index}}
......
......@@ -176,7 +176,9 @@ input, textarea {
}
.empty-button-placeholder {
height: 56px;
display: block !important;
min-height: 50px !important;
width: 100% !important;
}
#newCardSet, #newRepetitorium {
......
......@@ -12,6 +12,6 @@
{{/if}}
</span>
</div>
<br>
<br class="visible-xs">
{{/if}}
</template>
<template name="filterItemDisplayModeButton">
{{#if gotFeatureSupport 2}}
<li class="dropdown hidden-xs">
<a id="displayModeBtn"
role="button">
{{#if isWordcloudActive}}
{{_ "filter-pool.displayMode.list"}}
{{else}}
{{_ "filter-pool.displayMode.wordcloud"}}
{{/if}}
</a>
</li>
{{/if}}
</template>
<template name="filterItemFilterAuthors">
<li class="dropdown">
<a href="#" class="dropdown-toggle authorBtn" data-toggle="dropdown" role="button"
<li class="dropdown cards-filter-element">
<a href="#" class="dropdown-toggle authorBtn cards-filter-element" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
{{#if isActiveRoute regex="learn"}}
{{_ "set-list.authorPublisher"}}
......@@ -12,20 +12,20 @@
{{/if}}
{{/if}}
{{#if hasAuthorFilter}}
<span class="glyphicon glyphicon-filter navigationFilterIcon"></span>
<i class="fa fa-filter navigationFilterIcon cards-filter-element"></i>
{{/if}}
</a>
<ul class="dropdown-menu">
<li>
<a href="#" class="noFilterAuthor active" data-id="">{{_ "set-list.everyone"}}</a>
<ul class="dropdown-menu cards-filter-element">
<li class="cards-filter-element">
<a href="#" class="noFilterAuthor active cards-filter-element" data-id="">{{_ "set-list.everyone"}}</a>
</li>
{{#each getAuthors}}
{{#if filterAuthors this._id}}
<li>
<a href="#" class="filterAuthor"
<li class="cards-filter-element">
<a href="#" class="filterAuthor cards-filter-element"
data-id="{{this._id}}">{{getAuthorName}}
{{#if resultsFilterAuthor this._id}}
<span class="glyphicon glyphicon-filter navigationFilterIcon"></span>
<i class="fa fa-filter navigationFilterIcon cards-filter-element"></i>
{{/if}}
</a>
</li>
......
<template name="filterItemFilterBonus">
<li class="dropdown">
<a href="#" id="bonusFilter" class="dropdown-toggle" data-toggle="dropdown"
<li class="dropdown cards-filter-element">
<a href="#" class="dropdown-toggle bonusFilter cards-filter-element" data-toggle="dropdown"
role="button"
aria-haspopup="true" aria-expanded="false">
{{_ "set-list.learnphase"}}
{{#if hasBonusFilter}}
<span class="glyphicon glyphicon-filter navigationFilterIcon"></span>
<i class="fa fa-filter navigationFilterIcon cards-filter-element"></i>
{{/if}}
</a>
<ul class="dropdown-menu">
<li>
<a href="#" class="noFilterBonus active" data-id="reset">{{_
<ul class="dropdown-menu cards-filter-element">
<li class="cards-filter-element">
<a href="#" class="noFilterBonus active cards-filter-element" data-id="reset">{{_
"set-list.everything"}}</a>
</li>
{{#if gotBonusCardsets}}
<li><a href="#" class="filterActiveBonus">
<li class="cards-filter-element"><a href="#" class="filterActiveBonus cards-filter-element">
{{_ "set-list.activeLearnphase"}}
{{#if resultsFilterBonus 0}}
<span class="glyphicon glyphicon-filter"></span>
<i class="fa fa-filter navigationFilterIcon cards-filter-element"></i>
{{/if}}
</a></li>
{{/if}}
{{#if gotFinishedBonusCardsets}}
<li><a href="#" class="filterFinishedBonus">
<li class="cards-filter-element"><a href="#" class="filterFinishedBonus cards-filter-element">
{{_ "set-list.inactiveLearnphase"}}
{{#if resultsFilterBonus 1}}
<span class="glyphicon glyphicon-filter"></span>
<i class="fa fa-filter navigationFilterIcon cards-filter-element"></i>
{{/if}}
</a></li>
{{/if}}
......
<template name="filterItemFilterCardType">
<li class="dropdown">
<a href="#" class="dropdown-toggle cardTypeBtn" data-toggle="dropdown" role="button"
<li class="dropdown cards-filter-element">
<a href="#" class="dropdown-toggle cardTypeBtn cards-filter-element" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
{{_ "cardType"}}
{{#if hasCardTypeFilter}}
<span class="glyphicon glyphicon-filter navigationFilterIcon"></span>
<i class="fa fa-filter navigationFilterIcon cards-filter-element"></i>
{{/if}}
</a>
<ul class="dropdown-menu">
<ul class="dropdown-menu cards-filter-element">
{{> cardTypesList filter=true}}
</ul>
</li>
......
<template name="filterItemFilterDifficulty">
<li class="dropdown">
<a href="#" id="difficultyFilter" class="dropdown-toggle moduleBtn"
<li class="dropdown cards-filter-element">
<a href="#" class=<