FEATURE: Collapsable filters on mobile

assets/javascripts/discourse/components/knowledge-explorer-topic.js.es6

@@ -3,5 +3,19 @@ export default Ember.Component.extend({
 
   originalPostContent: Ember.computed.readOnly(
     "topic.post_stream.posts.firstObject.cooked"
-  )
+  ),
+
+  didInsertElement() {
+    this._super(...arguments);
+    document
+      .querySelector("body")
+      .classList.add("archetype-knowledge-explorer-topic");
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    document
+      .querySelector("body")
+      .classList.remove("archetype-knowledge-explorer-topic");
+  }
 });

assets/javascripts/discourse/controllers/knowledge-explorer.js.es6

@@ -1,4 +1,5 @@
 import { default as computed } from "ember-addons/ember-computed-decorators";
+import { on } from "discourse-common/utils/decorators";
 import KnowledgeExplorer from "discourse/plugins/discourse-knowledge-explorer/discourse/models/knowledge-explorer";
 
 function mergeCategories(results) {
@@ -33,6 +34,14 @@ export default Ember.Controller.extend({
   searchTerm: null,
   selectedTopic: null,
   topic: null,
+  expandedFilters: false,
+
+  @on("init")
+  _setupFilters() {
+    if (!this.site.mobileView) {
+      this.set("expandedFilters", true);
+    }
+  },
 
   @computed("loadMoreUrl")
   canLoadMore(loadMoreUrl) {
@@ -167,6 +176,14 @@ export default Ember.Controller.extend({
           isLoading: false
         });
       });
+    },
+
+    toggleFilters() {
+      if (!this.expandedFilters) {
+        this.set("expandedFilters", true);
+      } else {
+        this.set("expandedFilters", false);
+      }
     }
   }
 });

assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs

@@ -1,4 +1,4 @@
-<span class="knowledge-base-search-wrapper">
+<span class="knowledge-explorer-search-wrapper">
   {{input
     type="text"
     value=(readonly searchTerm)

assets/javascripts/discourse/templates/knowledge-explorer.hbs

@@ -5,29 +5,36 @@
   }}
   {{#conditional-loading-spinner condition=isLoading}}
     <div class="knowledge-explorer-browse">
+      {{#if site.mobileView}}
+        {{#unless selectedTopic}}
+          {{d-button class="knowledge-explorer-expander" icon=(if expandedFilters "angle-up" "angle-down") action=(action "toggleFilters") label="knowledge_explorer.filter_button"}}
+        {{/unless}}
+      {{/if}}
       <div class="knowledge-explorer-filters">
-        {{#if categories}}
-          <div class="knowledge-explorer-items knowledge-explorer-categories">
-            <h3>{{i18n 'knowledge_explorer.categories'}}</h3>
-            {{#each categories as |category|}}
-              {{knowledge-explorer-category
-                category=category
-                selectCategory=(action "updateSelectedCategories"
-                tagName="")
-              }}
-            {{/each}}
-          </div>
-        {{/if}}
-        {{#if tags}}
-          <div class="knowledge-explorer-items knowledge-explorer-tags">
-            <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
-            {{#each tags as |tag|}}
-              {{knowledge-explorer-tag
-                tag=tag
-                selectTag=(action "updateSelectedTags")
-              }}
-            {{/each}}
-          </div>
+        {{#if expandedFilters}}
+            {{#if categories}}
+              <div class="knowledge-explorer-items knowledge-explorer-categories">
+                <h3>{{i18n 'knowledge_explorer.categories'}}</h3>
+                {{#each categories as |category|}}
+                  {{knowledge-explorer-category
+                    category=category
+                    selectCategory=(action "updateSelectedCategories"
+                    tagName="")
+                  }}
+                {{/each}}
+              </div>
+            {{/if}}
+            {{#if tags}}
+              <div class="knowledge-explorer-items knowledge-explorer-tags">
+                <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
+                {{#each tags as |tag|}}
+                  {{knowledge-explorer-tag
+                    tag=tag
+                    selectTag=(action "updateSelectedTags")
+                  }}
+                {{/each}}
+              </div>
+            {{/if}}
         {{/if}}
       </div>
       {{#if selectedTopic}}

assets/stylesheets/common/knowledge-explorer.scss

@@ -1,4 +1,4 @@
-.knowledge-base-search-wrapper {
+.knowledge-explorer-search-wrapper {
   position: relative;
   width: 500px;
   .d-icon {

assets/stylesheets/mobile/knowledge-explorer.scss

@@ -4,6 +4,12 @@
       width: calc(100vw - 0.75em);
       margin: 0.625em 0;
     }
+
+    .knowledge-explorer-search-wrapper {
+      display: flex;
+      justify-content: center;
+    }
+
     .knowledge-explorer-search {
       font-size: $font-up-2;
       padding: 0.5em 0;
@@ -25,4 +31,27 @@
       }
     }
   }
+
+  .knowledge-explorer-filters {
+    margin-top: 0;
+    background: $primary-very-low;
+    padding: 0 0.5em;
+    .knowledge-explorer-items:first-of-type {
+      margin-top: 1em;
+    }
+    + .knowledge-explorer-results {
+      margin-top: 2em;
+    }
+  }
+
+  .archetype-knowledge-explorer-topic {
+    .knowledge-explorer-filters {
+      display: none;
+    }
+  }
+
+  .knowledge-explorer-expander {
+    margin: 1em 0 0 0;
+    width: 100%;
+  }
 }

config/locales/client.en.yml

@@ -12,3 +12,4 @@ en:
       topic:
         back: "Go back"
         navigate_to_topic: "View the discussion on this topic"
+      filter_button: "Filters"