From 248c5af55642b2fbb31299fa3d00f9fe954c8b2e Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Mon, 5 Dec 2016 16:53:58 +0800
Subject: [PATCH] UX: Restyle group pages a little.

---
 .../javascripts/discourse/templates/group.hbs | 62 +++++++++----------
 app/assets/stylesheets/common/base/group.scss | 10 ++-
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/group.hbs b/app/assets/javascripts/discourse/templates/group.hbs
index 1fa500cc97c..a8b8771230e 100644
--- a/app/assets/javascripts/discourse/templates/group.hbs
+++ b/app/assets/javascripts/discourse/templates/group.hbs
@@ -1,4 +1,35 @@
 <div class="container group">
+  <div class='group-details-container'>
+    <div class='group-details'>
+      <span>
+        <h1 class='group-header'>
+          {{#if model.flair_url}}
+            <span class='group-avatar-flair'>
+              {{avatar-flair
+                flairURL=model.flair_url
+                flairBgColor=model.flair_bg_color
+                flairColor=model.flair_color
+                groupName=model.name}}
+            </span>
+          {{/if}}
+          <span class='group-name'>{{groupName}}</span>
+        </h1>
+      </span>
+
+      {{#if canEditGroup}}
+        <span>
+          {{d-button action="showGroupEditor" label="group.edit.title" class="group-edit-btn" icon="pencil"}}
+        </span>
+      {{/if}}
+    </div>
+
+    {{#if model.bio_cooked}}
+      <div class='group-bio'>
+        <p>{{{model.bio_cooked}}}</p>
+      </div>
+    {{/if}}
+  </div>
+
   <div class='pull-left group-nav'>
     <ul class='nav-stacked'>
       {{#each getTabs as |tab|}}
@@ -13,37 +44,6 @@
   </div>
 
   <div class='pull-left group-outlet'>
-    <div class='group-details-container'>
-      <div class='group-details'>
-        <span>
-          <h1 class='group-header'>
-            {{#if model.flair_url}}
-              <span class='group-avatar-flair'>
-                {{avatar-flair
-                  flairURL=model.flair_url
-                  flairBgColor=model.flair_bg_color
-                  flairColor=model.flair_color
-                  groupName=model.name}}
-              </span>
-            {{/if}}
-            <span class='group-name'>{{groupName}}</span>
-          </h1>
-        </span>
-
-        {{#if canEditGroup}}
-          <span>
-            {{d-button action="showGroupEditor" class="group-edit-btn btn-small" icon="pencil"}}
-          </span>
-        {{/if}}
-      </div>
-
-      {{#if model.bio_cooked}}
-        <div class='group-bio'>
-          <p>{{{model.bio_cooked}}}</p>
-        </div>
-      {{/if}}
-    </div>
-
     <div class='user-main'>
       {{outlet}}
     </div>
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 5b360ede9ce..b9a0e2878f7 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -4,8 +4,9 @@
 }
 
 .group-details-container {
-  background: rgba(204, 204, 204, 0.2);
+  background: rgba(230, 230, 230, 0.3);
   padding: 20px;
+  margin-bottom: 30px;
 }
 
 table.group-members {
@@ -35,6 +36,10 @@ table.group-members {
   color: $primary;
 }
 
+.group-details {
+  width: 100%;
+}
+
 .group-header, .group-details {
   display: table;
 
@@ -58,6 +63,7 @@ table.group-members {
 
 .group-edit-btn {
   margin-left: 5px;
+  float: right;
 }
 
 .groups.edit-group .form-horizontal {
@@ -100,6 +106,8 @@ table.group-members {
 }
 
 #add-user-to-group {
+  margin: 0px;
+
   .ac-wrap {
     width: 100% !important;
   }