From 7e3e09d0ea8ffadffd3bdfa5348584a06cfacdfc Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Fri, 16 Mar 2018 14:56:10 +0800
Subject: [PATCH] Fix group messages style on mobile.

---
 .../controllers/group-messages.js.es6         |  3 ++
 .../discourse/controllers/group.js.es6        |  2 +-
 .../routes/group-messages-index.js.es6        |  5 +++
 .../discourse/templates/group/messages.hbs    | 34 +++++++++----------
 app/assets/stylesheets/desktop/group.scss     |  6 ++--
 app/assets/stylesheets/desktop/user.scss      |  2 +-
 app/assets/stylesheets/mobile/group.scss      | 12 ++++---
 7 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/controllers/group-messages.js.es6
 create mode 100644 app/assets/javascripts/discourse/routes/group-messages-index.js.es6

diff --git a/app/assets/javascripts/discourse/controllers/group-messages.js.es6 b/app/assets/javascripts/discourse/controllers/group-messages.js.es6
new file mode 100644
index 0000000000..63bf54eb78
--- /dev/null
+++ b/app/assets/javascripts/discourse/controllers/group-messages.js.es6
@@ -0,0 +1,3 @@
+export default Ember.Controller.extend({
+  application: Ember.inject.controller(),
+});
diff --git a/app/assets/javascripts/discourse/controllers/group.js.es6 b/app/assets/javascripts/discourse/controllers/group.js.es6
index 3cd976b59a..755e6fecde 100644
--- a/app/assets/javascripts/discourse/controllers/group.js.es6
+++ b/app/assets/javascripts/discourse/controllers/group.js.es6
@@ -31,7 +31,7 @@ export default Ember.Controller.extend({
 
     if (showMessages) {
       defaultTabs.push(Tab.create({
-        name: 'messages.inbox', i18nKey: 'messages'
+        name: 'messages', i18nKey: 'messages'
       }));
     }
 
diff --git a/app/assets/javascripts/discourse/routes/group-messages-index.js.es6 b/app/assets/javascripts/discourse/routes/group-messages-index.js.es6
new file mode 100644
index 0000000000..68750d154a
--- /dev/null
+++ b/app/assets/javascripts/discourse/routes/group-messages-index.js.es6
@@ -0,0 +1,5 @@
+export default Ember.Route.extend({
+  beforeModel: function() {
+    this.transitionTo("group.messages.inbox");
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/group/messages.hbs b/app/assets/javascripts/discourse/templates/group/messages.hbs
index b5ef7e7e06..5d86ab3df4 100644
--- a/app/assets/javascripts/discourse/templates/group/messages.hbs
+++ b/app/assets/javascripts/discourse/templates/group/messages.hbs
@@ -1,22 +1,20 @@
-<div class="group-table">
-  <div class="wrapper">
-    {{#d-section class="user-navigation" pageClass="group-messages"}}
-      {{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=currentPath}}
-        <li>
-          {{#link-to 'group.messages.inbox' model.name}}
-            {{i18n 'user.messages.inbox'}}
-          {{/link-to}}
-        </li>
-        <li>
-          {{#link-to 'group.messages.archive' model.name}}
-            {{i18n 'user.messages.archive'}}
-          {{/link-to}}
-        </li>
-      {{/mobile-nav}}
-    {{/d-section}}
+<div class='group-activity container'>
+  {{#mobile-nav class='group-messages-nav' desktopClass='pull-left nav nav-stacked' currentPath=application.currentPath}}
+    <li>
+      {{#link-to 'group.messages.inbox' model.name}}
+        {{i18n 'user.messages.inbox'}}
+      {{/link-to}}
+    </li>
+    <li>
+      {{#link-to 'group.messages.archive' model.name}}
+        {{i18n 'user.messages.archive'}}
+      {{/link-to}}
+    </li>
+  {{/mobile-nav}}
 
-    <section class='messages'>
+  <div class="{{if site.mobileView "" "pull-left"}} group-messages-outlet">
+    <div class='user-main'>
       {{outlet}}
-    </section>
+    </div>
   </div>
 </div>
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index ea1378fd1e..a2d9b2f0cf 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -21,7 +21,7 @@
   margin-bottom: 20px;
 }
 
-.group-activity-nav {
+.group-activity-nav, .group-messages-nav {
   width: 15%;
   background-color: transparent;
 
@@ -44,12 +44,12 @@
   }
 }
 
-.group-activity-outlet {
+.group-activity-outlet, .group-messages-outlet {
   width: 85%;
 }
 
 .group-edit {
-  border: 1px solid $primary-low; 
+  border: 1px solid $primary-low;
   padding: 10px;
 
   .form-horizontal {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 78edd4385e..a7ac7803c3 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -31,7 +31,7 @@
   margin-top: 18px;
 }
 
-.user-table, .group-table {
+.user-table {
   width: 100%;
   display: table;
   table-layout: fixed;
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index 626f33b889..766e277cee 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -27,13 +27,15 @@
   position: relative;
 }
 
-.group-activity-nav.mobile-nav {
-  position: absolute;
-  right: 0;
-  top: -55px;
+.group-activity-nav, .group-messages-nav {
+  &.mobile-nav {
+    position: absolute;
+    right: 0;
+    top: -57px;
+  }
 }
 
-.group-activity-outlet {
+.group-activity-outlet, .group-messages-outlet {
   float: none;
 }