Merge pull request #4397 from PaulAdamDavis/cleanup-users

Cleanup User List styles

core/client/assets/sass/layouts/users.scss

@@ -1,19 +1,20 @@
-//
+// ------------------------------------------------------------
 // Users
-// --------------------------------------------------
+//
+// Styles for the Users list page
 // Slug: /ghost/settings/users/
+//
+// * Users List
+// * Role Labels
+// * User Actions
+// * Invite User Modal
+// ------------------------------------------------------------
+
+
+//
+// Users List
 // --------------------------------------------------
 
-.user-list-header {
-    padding-left: 0;
-}
-
-.content.settings-users {
-    padding: 0 40px;
-    overflow: auto;
-    height: 100%;
-}
-
 .invited-users {
     margin-bottom: 34px;
 }
@@ -27,32 +28,34 @@
 
 .user-list-item {
 
-    @media (max-width: 500px) {
+    border-top: 1px solid $lightbrown;
+
+    @media (max-width: 550px) {
         display: block;
         padding: 15px 0;
         @include clearfix;
     }
 
-    @media (min-width: 501px) {
+    @media (min-width: 551px) {
         display: flex;
         justify-content: start;
         align-items: center;
         padding: 0 15px;
         height: 68px;
     }
-
-    border-top: 1px solid $lightbrown;
-
 }
 
+// Only apply these styles to anchor tags (pending invited are divs)
 a.user-list-item {
     text-decoration: none;
 
     // Hover states only for large viewports
     @media (min-width: 601px) {
+
         &:hover {
             background: lighten($lightbrown, 5%);
         }
+
         &:last-of-type:hover {
             box-shadow: inset 0px -1px 0px $lightbrown;
         }
@@ -94,7 +97,8 @@ a.user-list-item {
 
 .user-list-item-icon,
 .user-list-item-figure {
-    @media (max-width: 500px) {
+
+    @media (max-width: 550px) {
         float: left;
         margin-right: 15px;
     }
@@ -106,7 +110,7 @@ a.user-list-item {
     padding-left: 15px;
     line-height: 1;
 
-    @media (max-width: 500px) {
+    @media (max-width: 550px) {
         margin-top: 3px;
     }
 
@@ -116,6 +120,7 @@ a.user-list-item {
         font-weight: 400;
         color: $darkgrey;
     }
+
     .description {
         display: inline-block;
         font-size: 12px;
@@ -127,7 +132,8 @@ a.user-list-item {
 }//.user-list-item-body
 
 .user-list-item-aside {
-    @media (max-width: 500px) {
+
+    @media (max-width: 550px) {
         float: left;
         width: 100%;
         margin: 12px 0 0 50px;
@@ -135,7 +141,8 @@ a.user-list-item {
 
     .user-list-action:not(:first-of-type) {
         margin-left: 20px;
-        @media (min-width: 501px) {
+
+        @media (min-width: 551px) {
             margin-left: 50px;
         }
     }
@@ -154,9 +161,6 @@ a.user-list-item {
     font-size: 11px;
     text-transform: uppercase;
     text-decoration: underline;
-    &:hover {
-
-    }
 }
 
 
@@ -189,9 +193,9 @@ a.user-list-item {
         color: rgba(255,255,255,0.8);
         background: $blue;
     }
-
 }//.role-label
 
+
 //
 // User Actions
 // --------------------------------------------------
@@ -242,11 +246,9 @@ a.user-list-item {
         input {
             width: 100%;
         }
-
     }//.form-group
 
     .btn-green {
         width: 100%;
     }
-
 }//.invite-new-user

core/client/templates/settings/users/index.hbs

@@ -1,4 +1,4 @@
-{{#view "settings/users/users-list-view" tagName="section" class="content settings-users" }}
+{{#view "settings/users/users-list-view"}}
     <header class="settings-view-header user-list-header">
         {{#link-to "settings" class="btn btn-default btn-back"}}Back{{/link-to}}
         <h2 class="page-title">Users</h2>
@@ -7,6 +7,8 @@
         </section>
     </header>
 
+    <section class="content settings-users">
+
     {{#if invitedUsers}}
 
         <section class="user-list invited-users">
@@ -64,4 +66,7 @@
         {{/each}}
 
     </section>
+
+    </section>{{! .content settings-users }}
+
 {{/view}}