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: {
+    selectCategory() {
       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: "",
+  actions: {
+    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 @@
+<span class="knowledge-base-search-wrapper">
   {{input
     type="text"
     value=(readonly searchTerm)
     input=(action "onSearchTermChange" value="target.value")
     class="knowledge-explorer-search-bar"
     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,16 +6,20 @@
   {{#conditional-loading-spinner condition=isLoading}}
     <div class="knowledge-explorer-browse">
       <div class="knowledge-explorer-filters">
-        <div class="knowledge-explorer-categories">
+        {{#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")
+                selectCategory=(action "updateSelectedCategories"
+                tagName="")
               }}
             {{/each}}
           </div>
-        <div class="knowledge-explorer-tags">
+        {{/if}}
+        {{#if tags}}
+          <div class="knowledge-explorer-items knowledge-explorer-tags">
             <h3>{{i18n 'knowledge_explorer.tags'}}</h3>
             {{#each tags as |tag|}}
               {{knowledge-explorer-tag
@@ -24,6 +28,7 @@
               }}
             {{/each}}
           </div>
+        {{/if}}
       </div>
       {{#if selectedTopic}}
         {{#conditional-loading-spinner condition=isTopicLoading}}

assets/stylesheets/common/knowledge-explorer.scss

@@ -1,15 +1,34 @@
-.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 {
   align-items: center;
   background-color: $primary-very-low;
   display: flex;
   justify-content: center;
   padding: 1.5em 1em;
+  @include breakpoint(mobile-extra-large, min-width) {
+    // More breathing room on larger screens
+    margin-bottom: 2em;
+  }
   .knowledge-explorer-search-bar {
     height: 50px;
     margin-bottom: 0px;
-      width: 500px;
+    width: 100%;
   }
 }
 .knowledge-explorer-browse {
@@ -17,7 +36,7 @@
   .loading-container {
     display: flex;
     flex-basis: 100%;
-     padding: 10px 0 10px 10px;
+    padding: 0.625em 0 0.625em 0.625em;
   }
   .knowledge-explorer-results {
     display: flex;
@@ -25,57 +44,84 @@
     flex-basis: 100%;
     .result-count {
       padding-top: 15px;
-       padding-left: 10px;
+      padding-left: 0.625em;
     }
   }
   .knowledge-explorer-filters {
-     flex-basis: 25%;
+    margin-top: 0.15em;
+    flex: 0 1 20%;
+    @include breakpoint(tablet, min-width) {
+      padding-right: 2em;
     }
-   .knowledge-explorer-tags, .knowledge-explorer-categories {
+    // min-width on flex allows container to
-      padding: 10px 10px 10px 0;
+    // 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;
     }
-      .knowledge-explorer-tag, .knowledge-explorer-category {
+
+    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;
-        height: 30px;
+      padding: 0.25em 0.5em;
-        padding-left: 10px;
+
       .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;
         }
-          &.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 {
+      .tag-id,
+      .category-id {
         margin-right: 3px;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
-
     .selected {
       font-weight: bold;
     }
   }
   .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;
-        cursor: pointer;
     }
     .discourse-tag {
       padding-right: 5px;
@@ -94,16 +140,14 @@
         }
       }
       &.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

@@ -8,6 +8,7 @@ en:
         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"