Merge branch 'members-ui' into 'master'

Project members UI

## What does this MR do?

New UI for project members that includes groups.

## Screenshots (if relevant)


### Project members

![Screen_Shot_2016-09-02_at_15.13.27](/uploads/b9d4a634d44b7b7bbb6eddb10aee86bd/Screen_Shot_2016-09-02_at_15.13.27.png)

### Group members

![Screen_Shot_2016-09-02_at_15.13.36](/uploads/c15c173e68b2c0b49bcd06ca560269d3/Screen_Shot_2016-09-02_at_15.13.36.png)

## What are the relevant issue numbers?

Part of #19868 

Closes #21320 

See merge request !6148

6 files changed, 117 insertions, 20 deletions

diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 05e8ee0190d..3d01179f074 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -125,7 +125,3 @@ label {
     border-right: 0;
   }
 }
-
-.help-block {
-  margin-bottom: 0;
-}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index efc348214c2..9114425cfdd 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;
@@ -168,6 +172,14 @@ ul.content-list {
       }
     }
 
+    .member-controls {
+      float: none;
+
+      @media (min-width: $screen-sm-min) {
+        float: right;
+      }
+    }
+
     // When dragging a list item
     &.ui-sortable-helper {
       border-bottom: none;
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index c6f30e144fd..5ba0486177f 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -13,6 +13,11 @@
     .dropdown-menu-toggle {
       line-height: 20px;
     }
+
+    .badge {
+      margin-top: -2px;
+      margin-left: 5px;
+    }
   }
 
   .panel-body {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 79cd26714a3..bf9208f83f3 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -93,7 +93,7 @@
     background: none;
 
     .select2-search-field input {
-      padding: $gl-padding / 2;
+      padding: 5px $gl-padding / 2;
       font-size: 13px;
       height: auto;
       font-family: inherit;
@@ -101,7 +101,7 @@
     }
 
     .select2-search-choice {
-      margin: 8px 0 0 8px;
+      margin: 5px 0 0 8px;
       box-shadow: none;
       border-color: $input-border;
       color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 185ce970e71..edc9592f564 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -1,17 +1,3 @@
-.member-search-form {
-  float: left;
-
-  input[type='search'] {
-    width: 225px;
-    vertical-align: bottom;
-
-    @media (max-width: $screen-xs-max) {
-      width: 100px;
-      vertical-align: bottom;
-    }
-  }
-}
-
 .milestone-row {
   @include str-truncated(90%);
 }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
new file mode 100644
index 00000000000..756efa9c7fa
--- /dev/null
+++ b/app/assets/stylesheets/pages/members.scss
@@ -0,0 +1,98 @@
+.project-members-title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid $border-color;
+}
+
+.member {
+  .list-item-name {
+    @media (min-width: $screen-sm-min) {
+      float: left;
+      width: 50%;
+    }
+
+    strong {
+      font-weight: 600;
+    }
+  }
+
+  .controls {
+    @media (min-width: $screen-sm-min) {
+      display: -webkit-flex;
+      display: flex;
+      width: 400px;
+      max-width: 50%;
+    }
+  }
+
+  .form-horizontal {
+    margin-top: 5px;
+
+    @media (min-width: $screen-sm-min) {
+      display: -webkit-flex;
+      display: flex;
+      width: 100%;
+      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;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    width: 50%;
+  }
+}
+
+.member-access-text {
+  margin-left: auto;
+  line-height: 43px;
+}
+
+.member.existing-title {
+  @media (min-width: $screen-sm-min) {
+    float: left;
+  }
+}
+
+.member-search-form {
+  position: relative;
+
+  @media (min-width: $screen-sm-min) {
+    float: right;
+  }
+
+  .form-control {
+    width: 100%;
+    padding-right: 35px;
+
+    @media (min-width: $screen-sm-min) {
+      width: 350px;
+    }
+  }
+}
+
+.member-search-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 35px;
+  padding-left: 10px;
+  padding-right: 10px;
+  color: $gray-darkest;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}