From 0a567d01769833dae0004adaafa2bbfe014b0558 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Thu, 22 Mar 2018 16:55:03 +0800
Subject: [PATCH] UX: Add mobile template for group members page.

---
 .../templates/mobile/group-index.hbs          | 41 +++++++++++++++++++
 .../components/group-member-dropdown.scss     |  0
 .../components/group-member-dropdown.scss     |  9 ++++
 app/assets/stylesheets/mobile/group.scss      | 26 ++++++++----
 4 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/templates/mobile/group-index.hbs
 rename app/assets/stylesheets/{common => desktop}/components/group-member-dropdown.scss (100%)
 create mode 100644 app/assets/stylesheets/mobile/components/group-member-dropdown.scss

diff --git a/app/assets/javascripts/discourse/templates/mobile/group-index.hbs b/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
new file mode 100644
index 00000000000..cc0751fc366
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
@@ -0,0 +1,41 @@
+{{text-field value=filterInput
+    placeholderKey=filterPlaceholder
+    class="group-username-filter no-blur"}}
+
+{{#if hasMembers}}
+  {{#load-more selector=".group-members .user-info" action="loadMore"}}
+    <div class="group-members">
+      {{#each model.members as |user|}}
+        <div class="group-member">
+          {{#user-info user=user skipName=skipName}}
+            {{#if user.owner}}<strong class="group-owner-label">{{i18n "groups.owner"}}</strong>{{/if}}
+
+            <div class="group-member-info">
+              <label>{{i18n "last_post"}}</label>
+              <span class="text">{{bound-date user.last_posted_at}}</span>
+            </div>
+
+            <div class="group-member-info">
+              <label>{{i18n "last_seen"}}</label>
+              <span class="text">{{bound-date user.last_seen_at}}</span>
+            </div>
+
+            {{#if canManageGroup}}
+              {{group-member-dropdown
+                  removeMember="removeMember"
+                  makeOwner="makeOwner"
+                  removeOwner="removeOwner"
+                  member=user}}
+            {{/if}}
+          {{/user-info}}
+        </div>
+      {{/each}}
+    </div>
+  {{/load-more}}
+
+  {{conditional-loading-spinner condition=loading}}
+{{else}}
+  <br>
+
+  <div>{{i18n "groups.empty.members"}}</div>
+{{/if}}
diff --git a/app/assets/stylesheets/common/components/group-member-dropdown.scss b/app/assets/stylesheets/desktop/components/group-member-dropdown.scss
similarity index 100%
rename from app/assets/stylesheets/common/components/group-member-dropdown.scss
rename to app/assets/stylesheets/desktop/components/group-member-dropdown.scss
diff --git a/app/assets/stylesheets/mobile/components/group-member-dropdown.scss b/app/assets/stylesheets/mobile/components/group-member-dropdown.scss
new file mode 100644
index 00000000000..5cc3e21a253
--- /dev/null
+++ b/app/assets/stylesheets/mobile/components/group-member-dropdown.scss
@@ -0,0 +1,9 @@
+.group-member-dropdown {
+  ul {
+    position: absolute;
+    top: 27px;
+    width: 250px;
+    bottom: auto;
+    text-align: left;
+  }
+}
diff --git a/app/assets/stylesheets/mobile/group.scss b/app/assets/stylesheets/mobile/group.scss
index 766e277cee3..0ab1c39142d 100644
--- a/app/assets/stylesheets/mobile/group.scss
+++ b/app/assets/stylesheets/mobile/group.scss
@@ -55,18 +55,28 @@ table.group-logs {
   width: 130%;
 }
 
-table.group-members {
-  th {
-    text-align: center;
-  }
+.group-members {
+  .group-member {
+    border-top: 1px solid $primary-low;
 
-  tr {
     .user-info {
-      width: auto;
+      margin: 0;
+      padding: 0.5em;
+      width: 98%;
     }
 
-    td {
-      padding-left: 0.5em;
+    .btn-group {
+      margin-top: 0;
+    }
+
+    .group-member-info {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+
+      label {
+        margin-bottom: 0;
+        font-weight: bold;
+        display: inline-block;
+      }
     }
   }
 }