From 0092c8bb33ee80dc2ede6f623869ece7986d46ee Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 17 Aug 2017 14:30:53 +0100
Subject: [PATCH] Change manage team layout to fit extra option
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We’ve moved from three to four permissions. Four permissions don’t fit
in the exiting horizontal layout.

This commit makes the permissions stack vertically instead.

This approach has some downsides:
- makes the permissions less easy to scan vertically
- makes them take up a lot more space (and at lives services, most of
  them have somewhere around 15 team members)

But I think for now it’s better than any horizontal alternative that I
tried.
---
 app/assets/stylesheets/components/tick-cross.scss | 12 ++++++++----
 app/assets/stylesheets/views/users.scss           |  2 +-
 app/templates/views/manage-users.html             |  4 ++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/components/tick-cross.scss b/app/assets/stylesheets/components/tick-cross.scss
index 74fc461ab..3601b0ad4 100644
--- a/app/assets/stylesheets/components/tick-cross.scss
+++ b/app/assets/stylesheets/components/tick-cross.scss
@@ -4,8 +4,8 @@
   display: inline-block;
   background-size: 19px 19px;
   background-repeat: no-repeat;
-  background-position: 0 0;
-  padding: 1px 0 0 25px;
+  background-position: 0 6px;
+  padding: 6px 0 5px 25px;
 
   @include ie-lte(8) {
     background-position: 0 3px;
@@ -31,6 +31,7 @@
     @extend %tick-cross;
     color: $secondary-text-colour;
     background-image: file-url('cross-grey.png');
+    box-shadow: inset 20px 0 0 0 rgba(255, 255, 255, 0.6);
 
     @include ie-lte(8) {
       background-image: file-url('cross-grey-16px.png');
@@ -42,21 +43,24 @@
 
     @extend %grid-row;
     margin-top: 5px;
+    position: relative;
 
     &-permissions {
 
       @include grid-column(3/4);
 
       li {
-        display: inline-block;
+        display: block;
         margin-right: 0.5em;
       }
 
     }
 
     &-edit-link {
-      @include grid-column(1/4);
       text-align: right;
+      position: absolute;
+      top: -1.6em;
+      right: -135px;
     }
 
   }
diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss
index b04cd671d..57b3a2da4 100644
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -5,7 +5,7 @@
 
   &-item {
 
-    padding: $gutter-half 0;
+    padding: $gutter-half 150px $gutter-half 0;
     border-top: 1px solid $border-colour;
 
     &:last-child {
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index 1b4b1fc19..fb79b3b8a 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -37,7 +37,7 @@
     {% for user in users %}
       <div class="user-list-item">
         <h3>
-          {{ user.name }}&ensp;<span class="hint">
+          <span class="heading-small">{{ user.name }}</span>&ensp;<span class="hint">
             {%- if user.email_address == current_user.email_address -%}
               (you)
             {% else %}
@@ -84,7 +84,7 @@
       {% for user in invited_users %}
         <div class="user-list-item">
           <h3>
-            {{ user.email_address }}
+            <span style="font-weight: bold">{{ user.email_address }}</span>
           </h3>
           <ul class="tick-cross-list">
             <div class="tick-cross-list-permissions">