UX: Improving styles for narrow viewports, some general styling (#3)

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

@@ -1,12 +1,15 @@
 import { default as computed } from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
+  tagName: "",
   @computed("category")
   categoryName(category) {
     return this.site.categories.findBy("id", category.id).name;
   },
-  click() {
+  actions: {
-    this.selectCategory(this.category);
+    selectCategory() {
-    return false;
+      this.selectCategory(this.category);
+      return false;
+    }
   }
 });

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

@@ -1,6 +1,9 @@
 export default Ember.Component.extend({
-  click() {
+  tagName: "",
-    this.selectTag(this.tag);
+  actions: {
-    return false;
+    selectTag() {
+      this.selectTag(this.tag);
+      return false;
+    }
   }
 });

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

@@ -1,10 +1,10 @@
-<div class="knowledge-explorer-category {{if category.active 'selected'}}">
+<a  {{action "selectCategory"}} class="knowledge-explorer-item knowledge-explorer-category {{if category.active 'selected'}}">
   {{#unless category.active}}
     {{d-icon "plus"}}
   {{/unless}}
-  <span class="category-id">{{categoryName}}</span>
-  <span class="category-count">({{category.count}})</span>
   {{#if category.active}}
     {{d-icon "times-circle"}}
   {{/if}}
-</div>
+  <span class="knowledge-explorer-item-id category-id">{{categoryName}}</span>
+  <span class="knowledge-explorer-item-count category-count">{{category.count}}</span>
+</a>

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

@@ -1,8 +1,12 @@
-{{input
+<span class="knowledge-base-search-wrapper">
-  type="text"
+  {{input
-  value=(readonly searchTerm)
+    type="text"
-  input=(action "onSearchTermChange" value="target.value")
+    value=(readonly searchTerm)
-  class="knowledge-explorer-search-bar"
+    input=(action "onSearchTermChange" value="target.value")
-  autocorrect="off"
+    class="knowledge-explorer-search-bar"
-  autocapitalize="off"
+    autocorrect="off"
-}}
+    placeholder=(i18n "knowledge_explorer.search.placeholder")
+    autocapitalize="off"
+  }}
+  {{d-icon "search"}}
+</span>

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

@@ -1,10 +1,10 @@
-<div class="knowledge-explorer-tag {{if tag.active 'selected'}} {{if subtag 'subtag'}}">
+<a {{action "selectTag"}} class="knowledge-explorer-item knowledge-explorer-tag {{if tag.active 'selected'}} {{if subtag 'subtag'}}">
   {{#unless tag.active}}
     {{d-icon "plus"}}
   {{/unless}}
-  <span class="tag-id">{{tag.id}}</span>
-  <span class="tag-count">({{tag.count}})</span>
   {{#if tag.active}}
     {{d-icon "times-circle"}}
   {{/if}}
-</div>
+  <span class="knowledge-explorer-item-id tag-id">{{tag.id}}</span>
+  <span class="knowledge-explorer-item-count tag-count">{{tag.count}}</span>
+</a>

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

@@ -8,5 +8,5 @@
 </div>
 
 <a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">
-  {{i18n 'knowledge_explorer.topic.navigate_to_topic'}}
+  {{d-icon "far-comment"}} {{i18n 'knowledge_explorer.topic.navigate_to_topic'}}
 </a>

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

@@ -6,24 +6,29 @@
   {{#conditional-loading-spinner condition=isLoading}}
     <div class="knowledge-explorer-browse">
       <div class="knowledge-explorer-filters">
-        <div class="knowledge-explorer-categories">
+        {{#if categories}}
-          <h3>{{i18n 'knowledge_explorer.categories'}}</h3>
+          <div class="knowledge-explorer-items knowledge-explorer-categories">
-          {{#each categories as |category|}}
+            <h3>{{i18n 'knowledge_explorer.categories'}}</h3>
-            {{knowledge-explorer-category
+            {{#each categories as |category|}}
-              category=category
+              {{knowledge-explorer-category
-              selectCategory=(action "updateSelectedCategories")
+                category=category
-            }}
+                selectCategory=(action "updateSelectedCategories"
-          {{/each}}
+                tagName="")
-        </div>
+              }}
-        <div class="knowledge-explorer-tags">
+            {{/each}}
-          <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
+          </div>
-          {{#each tags as |tag|}}
+        {{/if}}
-            {{knowledge-explorer-tag
+        {{#if tags}}
-              tag=tag
+          <div class="knowledge-explorer-items knowledge-explorer-tags">
-              selectTag=(action "updateSelectedTags")
+            <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
-            }}
+            {{#each tags as |tag|}}
-          {{/each}}
+              {{knowledge-explorer-tag
-        </div>
+                tag=tag
+                selectTag=(action "updateSelectedTags")
+              }}
+            {{/each}}
+          </div>
+        {{/if}}
       </div>
       {{#if selectedTopic}}
         {{#conditional-loading-spinner condition=isTopicLoading}}

assets/stylesheets/common/knowledge-explorer.scss

@@ -1,86 +1,132 @@
-.knowledge-explorer {
+.knowledge-base-search-wrapper {
+  position: relative;
+  width: 500px;
+  .d-icon {
+    position: absolute;
+    right: 0.75em;
+    top: 25%;
+    font-size: 1.5em;
+    color: $primary-low-mid;
+    pointer-events: none;
+    @media screen and (max-width: 400px) {
+      // Just decoration, remove on small screens
+      display: none;
+    }
   }
- .knowledge-explorer-search {
+}
+
+.knowledge-explorer-search {
   align-items: center;
   background-color: $primary-very-low;
   display: flex;
   justify-content: center;
   padding: 1.5em 1em;
-  .knowledge-explorer-search-bar {
+  @include breakpoint(mobile-extra-large, min-width) {
-      height: 50px;
+    // More breathing room on larger screens
-      margin-bottom: 0px;
+    margin-bottom: 2em;
-      width: 500px;
   }
- }
+  .knowledge-explorer-search-bar {
- .knowledge-explorer-browse {
+    height: 50px;
-   display: flex;
+    margin-bottom: 0px;
-   .loading-container {
+    width: 100%;
-     display: flex;
+  }
-     flex-basis: 100%;
+}
-     padding: 10px 0 10px 10px;
+.knowledge-explorer-browse {
-   }
+  display: flex;
-   .knowledge-explorer-results {
+  .loading-container {
-     display: flex;
+    display: flex;
-     flex-direction: column;
+    flex-basis: 100%;
-     flex-basis: 100%;
+    padding: 0.625em 0 0.625em 0.625em;
-     .result-count {
+  }
-       padding-top: 15px;
+  .knowledge-explorer-results {
-       padding-left: 10px;
+    display: flex;
-     }
+    flex-direction: column;
-   }
+    flex-basis: 100%;
-   .knowledge-explorer-filters {
+    .result-count {
-     flex-basis: 25%;
+      padding-top: 15px;
-   }
+      padding-left: 0.625em;
-   .knowledge-explorer-tags, .knowledge-explorer-categories {
+    }
-      padding: 10px 10px 10px 0;
+  }
-      a {
+  .knowledge-explorer-filters {
-        color: $primary;
+    margin-top: 0.15em;
+    flex: 0 1 20%;
+    @include breakpoint(tablet, min-width) {
+      padding-right: 2em;
+    }
+    // min-width on flex allows container to
+    // be more narrow than content if needed
+    min-width: 175px;
+  }
+  .knowledge-explorer-items {
+    padding: 0.57em 1em 1em 0;
+
+    a {
+      color: $primary;
+      white-space: nowrap;
+    }
+
+    h3 {
+      padding-left: 0.35em;
+      font-size: $font-up-1;
+    }
+
+    .knowledge-explorer-item-count {
+      margin-left: auto;
+      color: $primary-high;
+      font-size: $font-down-1;
+    }
+
+    .knowledge-explorer-item {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      padding: 0.25em 0.5em;
+
+      .d-icon {
+        height: 1em;
+        padding-bottom: 0.15em;
+        margin-right: 0.25em;
+        color: $primary-high;
+        &.d-icon-plus {
+          height: 0.75em;
+          margin-right: 0.25em;
+        }
       }
-      .knowledge-explorer-tag, .knowledge-explorer-category {
+      &:hover {
-        display: flex;
+        background: $highlight-medium;
-        align-items: center;
+      }
-        cursor: pointer;
+      &.selected:hover {
-        height: 30px;
+        background: $danger-low;
-        padding-left: 10px;
         .d-icon {
-          height: 1em;
+          color: $danger;
-          &.d-icon-plus {
-            height: 0.75em;
-            margin-right: 0.25em;
-          }
-          &.d-icon-times-circle {
-            margin-left: 0.25em;
-          }
-        }
-        &:hover {
-          background: $highlight-medium;
-        }
-        &.selected:hover {
-          background: $danger-low;
-
-          .d-icon {
-            color: $danger;
-          }
-        }
-        .tag-id, .category-id {
-          margin-right: 3px;
         }
       }
-
+      .tag-id,
-      .selected {
+      .category-id {
-        font-weight: bold;
+        margin-right: 3px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
-    .knowledge-explorer-topic-list {
+    .selected {
-      flex-basis: 100%;
+      font-weight: bold;
-      .knowledge-explorer-topic-link {
-        color: $tertiary;
-        cursor: pointer;
-      }
-      .discourse-tag {
-        padding-right: 5px;
-      }
     }
+  }
+  .knowledge-explorer-topic-list {
+    flex-basis: 100%;
+
+    .badge-wrapper .badge-category .category-name {
+      // extra protection for ultra-long category names
+      max-width: 30vw;
+    }
+
+    .knowledge-explorer-topic-link {
+      color: $tertiary;
+    }
+    .discourse-tag {
+      padding-right: 5px;
+    }
+  }
   .knowledge-explorer-topic {
     display: flex;
     flex-direction: column;
@@ -94,17 +140,15 @@
         }
       }
       &.more {
-        margin-left: auto;
         font-size: $font-up-1;
         padding: 10px 0;
-        &::after {
-          content: "»";
-          margin-left: 5px;
-        }
       }
     }
     .topic-content {
+      h1 {
+        line-height: $line-height-medium;
+      }
       padding-top: 10px;
     }
- } 
+  }
 }

assets/stylesheets/mobile/knowledge-explorer.scss

@@ -1,25 +1,24 @@
 .mobile-view {
   .knowledge-explorer {
     .knowledge-explorer-topic {
-      width: calc(100vw - .75em);
+      width: calc(100vw - 0.75em);
-      margin: 10px 0;
+      margin: 0.625em 0;
     }
     .knowledge-explorer-search {
       font-size: $font-up-2;
-      padding: .5em 0;
+      padding: 0.5em 0;
 
       .knowledge-explorer-search-bar {
         width: calc(100vw - 2em);
       }
     }
     .knowledge-explorer-browse {
+      .knowledge-explorer-items {
+        padding-right: 0;
+      }
       flex-direction: column;
       .knowledge-explorer-results .result-count {
-        padding-left: 0px;
+        padding-left: 0;
-      }
-      .knowledge-explorer-tags {
-        flex-basis: 100%;
-        padding: 1em 0;
       }
       .knowledge-explorer-topic-list {
         flex-basis: 100%;

config/locales/client.en.yml

@@ -5,9 +5,10 @@ en:
       categories: "Categories"
       tags: "Tags"
       search:
-        results: 
+        results:
           one: "%{count} result found"
           other: "%{count} results found"
+        placeholder: "Search for topics"
       topic:
         back: "Go back"
         navigate_to_topic: "View the discussion on this topic"