Desktop and mobile styling improvements

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

@@ -2,6 +2,6 @@
   type="text"
   value={{searchTerm}}
   oninput={{action "onSearchTermChange"}}
-  class="kb-search-bar"
+  class="knowledge-explorer-search-bar"
   autocorrect="off"
   autocapitalize="off">

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

@@ -1,5 +1,5 @@
 <div class="knowledge-explorer">
-  <div class="knowledge-explorer-filter">
+  <div class="knowledge-explorer-search">
     {{knowledge-explorer-search searchResults=searchResults searchTerm=searchTerm filterTags=filterTags}}
   </div>
   <div class="knowledge-explorer-browse">
@@ -7,15 +7,17 @@
         tags=tags
         filterTags=filterTags
     }}
+    <div class="knowledge-explorer-results">
     {{#if hasSearchResults}}
       {{#if emptySearchResults}}
-        <div class="no-result">{{i18n 'search.no_results'}}</div>
+        <div class="result-count no-result">{{i18n 'search.no_results'}}</div>
       {{else}}
-        <div>{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
+        <div class="result-count">{{i18n 'knowledge_explorer.search.results' count=searchCount}}</div>
         {{knowledge-explorer-topic-list topics=searchResults}}
       {{/if}}
     {{else}}
       {{knowledge-explorer-topic-list topics=topics}}
     {{/if}}
+    </div>
   </div>
 </div>

assets/stylesheets/common/knowledge-explorer.scss

@@ -1,6 +1,27 @@
 .knowledge-explorer {
+ .knowledge-explorer-search {
+  align-items: center;
+  background-color: $primary-very-low;
+  display: flex;
+  justify-content: center;
+  padding: 1.5em 1em;
+  .knowledge-explorer-search-bar {
+      height: 50px;
+      margin-bottom: 0px;
+      width: 500px;
+  }
+ }
  .knowledge-explorer-browse {
    display: flex;
+   .knowledge-explorer-results {
+     display: flex;
+     flex-direction: column;
+     flex-basis: 100%;
+     .result-count {
+       padding-top: 15px;
+       padding-left: 10px;
+     }
+   }
    .knowledge-explorer-tags {
      flex-basis: 25%;
       padding: 10px 10px 10px 0;
@@ -43,7 +64,10 @@
       }
     }
     .knowledge-explorer-topic-list {
-      flex-basis: 75%;
+      flex-basis: 100%;
+      .discourse-tag {
+        padding-right: 5px;
+      }
     }
  } 
 }

assets/stylesheets/mobile/knowledge-explorer.scss

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

plugin.rb

@@ -6,6 +6,7 @@
 enabled_site_setting :knowledge_explorer_enabled
 
 register_asset 'stylesheets/common/knowledge-explorer.scss'
+register_asset 'stylesheets/mobile/knowledge-explorer.scss'
 
 load File.expand_path('../lib/knowledge_explorer/engine.rb', __FILE__)