Mobile improvements

Added group name to members row
Fixed saving group member

2 files changed, 41 insertions, 9 deletions

diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index dfdfe4a3c89..272d37763c1 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -128,6 +128,10 @@ ul.content-list {
       color: $gl-dark-link-color;
     }
 
+    .member-group-link {
+      color: $blue-normal;
+    }
+
     .description {
       p {
         @include str-truncated;
@@ -166,8 +170,8 @@ ul.content-list {
 
     .member-controls {
       float: none;
-      
-      @media (min-width: $screen-md-min) {
+
+      @media (min-width: $screen-sm-min) {
         float: right;
       }
     }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 4bc34ac15df..a69af862348 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -8,24 +8,52 @@
   .list-item-name {
     float: none;
 
-    @media (min-width: $screen-md-min) {
+    @media (min-width: $screen-sm-min) {
       float: left;
       width: 50%;
     }
   }
 
   .controls {
-    display: flex;
-    width: 400px;
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      width: 400px;
+      max-width: 50%;
+    }
   }
 
   .form-horizontal {
-    display: flex;
-    flex: 1;
-    margin-top: 3px;
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      display: flex;
+      flex: 1;
+      margin-top: 3px;
+    }
+  }
+
+  .btn-remove {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: auto;
+    }
+  }
+}
+
+.member-form-control {
+  @media (max-width: $screen-xs-max) {
+    padding: 5px 0;
+    margin-left: 0;
+    margin-right: 0;
   }
 
-  .member-form-control {
+  @media (min-width: $screen-sm-min) {
     width: 50%;
   }
 }
+
+.member-access-text {
+  margin-left: auto;
+  line-height: 43px;
+}