From 3af0fcb50b7318abe41ecd7bed72d47ef45bbb2a Mon Sep 17 00:00:00 2001
From: Justin DiRose <justin@justindirose.com>
Date: Fri, 13 Sep 2019 13:43:23 -0500
Subject: [PATCH] Desktop and mobile styling improvements

---
 .../components/knowledge-explorer-search.hbs  |  2 +-
 .../templates/knowledge-explorer.hbs          |  8 +++---
 .../common/knowledge-explorer.scss            | 26 ++++++++++++++++++-
 .../mobile/knowledge-explorer.scss            | 25 ++++++++++++++++++
 plugin.rb                                     |  1 +
 5 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 assets/stylesheets/mobile/knowledge-explorer.scss

diff --git a/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs b/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs
index 18185b1..2b69478 100644
--- a/assets/javascripts/discourse/templates/components/knowledge-explorer-search.hbs
+++ b/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">
diff --git a/assets/javascripts/discourse/templates/knowledge-explorer.hbs b/assets/javascripts/discourse/templates/knowledge-explorer.hbs
index fb8a7f7..e81594f 100644
--- a/assets/javascripts/discourse/templates/knowledge-explorer.hbs
+++ b/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>
diff --git a/assets/stylesheets/common/knowledge-explorer.scss b/assets/stylesheets/common/knowledge-explorer.scss
index 994d644..9911627 100644
--- a/assets/stylesheets/common/knowledge-explorer.scss
+++ b/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;
+      }
     }
  } 
 }
diff --git a/assets/stylesheets/mobile/knowledge-explorer.scss b/assets/stylesheets/mobile/knowledge-explorer.scss
new file mode 100644
index 0000000..ea7ba9c
--- /dev/null
+++ b/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%;
+      }
+    }
+  }
+}
diff --git a/plugin.rb b/plugin.rb
index a66a505..674f4e6 100644
--- a/plugin.rb
+++ b/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__)