From dda78f2fd025bb590639a9fc17311f7d83a34aea Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Wed, 21 Mar 2018 14:22:34 +0800
Subject: [PATCH] UX: Improve layout of groups filter on groups page.

---
 .../javascripts/discourse/templates/groups.hbs | 18 ++++++++++--------
 app/assets/stylesheets/common/base/groups.scss |  3 ++-
 app/assets/stylesheets/mobile/groups.scss      |  7 ++++++-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/groups.hbs b/app/assets/javascripts/discourse/templates/groups.hbs
index 7cc273fe78..2bfc5d1f5a 100644
--- a/app/assets/javascripts/discourse/templates/groups.hbs
+++ b/app/assets/javascripts/discourse/templates/groups.hbs
@@ -1,15 +1,17 @@
 {{#d-section pageClass="groups"}}
   <h1>{{i18n "groups.index.title"}}</h1>
 
-  {{text-field value=filterInput
-      placeholderKey="groups.filter_name"
-      class="groups-name-filter no-blur"}}
+  <div class="groups-filter">
+    {{combo-box value=type
+                content=types
+                clearable=true
+                none="groups.index.all_groups"
+                class="groups-type-filter"}}
 
-  {{combo-box value=type
-              content=types
-              clearable=true
-              none="groups.index.all_groups"
-              class="groups-type-filter"}}
+    {{text-field value=filterInput
+        placeholderKey="groups.filter_name"
+        class="groups-name-filter no-blur"}}
+  </div>
 
   {{#if model}}
     {{#conditional-loading-spinner condition=model.loading}}
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 0ac9ce93d3..7740978859 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -5,7 +5,8 @@
   }
 }
 
-.groups-name-filter, .groups-type-filter {
+.groups-filter {
+  display: inline-block;
   float: right;
 }
 
diff --git a/app/assets/stylesheets/mobile/groups.scss b/app/assets/stylesheets/mobile/groups.scss
index 1f733f425f..71d3caa4f9 100644
--- a/app/assets/stylesheets/mobile/groups.scss
+++ b/app/assets/stylesheets/mobile/groups.scss
@@ -3,7 +3,12 @@
     margin-top: 20px;
   }
 
+  .groups-filter {
+    display: block;
+    float: none;
+  }
+
   .groups-name-filter {
-    margin-top: 20px;
+    margin-top: 10px;
   }
 }