From 94454333d58dfe7b1ced3b170970277a9c6f8e98 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 20 Oct 2017 17:38:38 +0100
Subject: [PATCH] CSS to improve MyGroups in general, and add placeholder

---
 .../structures/_MyGroups.scss                 | 64 ++++++++++++-------
 src/skins/vector/css/themes/_base.scss        |  3 +
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
index 979a21a8e..ddcf46fb4 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MyGroups.scss
@@ -24,14 +24,38 @@ limitations under the License.
     margin-left: 0px;
 }
 
-.mx_MyGroups_joinCreateBox {
-    display: table;
-    margin-bottom: 30px;
+.mx_MyGroups_header {
+    /* Keep mid-point of create button aligned with icon in page header */
+    margin-left: 2px;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.mx_MyGroups_createBox, .mx_MyGroups_joinBox {
-    display: table-cell;
-    width: 40%;
+.mx_MyGroups_headerCard {
+    flex: 1 0 50%;
+    margin-bottom: 30px;
+    min-width: 400px;
+    display: flex;
+    align-items: center;
+}
+
+.mx_MyGroups_headerCard .mx_MyGroups_headerCard_button {
+    margin-right: 13px;
+    height: 50px;
+}
+
+.mx_MyGroups_headerCard_button object {
+    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
+    pointer-events: none;
+}
+
+.mx_MyGroups_headerCard_header {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.mx_MyGroups_headerCard_content {
+    padding-right: 15px;
 }
 
 /* Until the button is wired up */
@@ -39,23 +63,16 @@ limitations under the License.
     visibility: hidden;
 }
 
-.mx_MyGroups_joinCreateHeader {
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.mx_MyGroups_joinCreateButton {
-    float: left;
-    margin: 10px;
-}
-
-.mx_MyGroups_joinCreateButton object {
-    /* Otherwise the SVG object absorbs clicks and the button doesn't work */
-    pointer-events: none;
-}
-
 .mx_MyGroups_content {
-    clear: left;
+    margin-left: 2px;
+}
+
+.mx_MyGroups_placeholder {
+    background-color: $group-my-groups-placeholder-bg;
+    color: $group-my-groups-placeholder-fg;
+    line-height: 400px;
+    border-radius: 10px;
+    text-align: center;
 }
 
 .mx_MyGroups_joinedGroups {
@@ -66,7 +83,8 @@ limitations under the License.
 }
 
 .mx_MyGroups_joinedGroups .mx_GroupTile {
-    width: 300px;
+    min-width: 300px;
+    flex: 1 0 25%;
     height: 75px;
     margin-bottom: 15px;
     margin-right: 10px;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index a13c517bd..f1117a7a0 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -22,7 +22,10 @@ $warning-color: #ff0064;
 $mention-user-pill-bg-color: #ff0064;
 $other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
 
+// groups
 $group-alert-color: #774f7e;
+$group-my-groups-placeholder-bg: #f7f7f7;
+$group-my-groups-placeholder-fg: #888;
 
 $preview-bar-bg-color: #f7f7f7;