From 94b9fe10998977bad618451b9347136e3207228b Mon Sep 17 00:00:00 2001
From: Matthew Harrison-Jones <matthojo@gmail.com>
Date: Mon, 13 May 2013 20:12:40 +0100
Subject: [PATCH] Simple conversion of designed 'users' section.

Still needs search functionality.
---
 core/admin/assets/sass/layouts/settings.scss | 83 ++++++++++++++++++++
 core/admin/views/settings.hbs                | 34 +++++++-
 2 files changed, 116 insertions(+), 1 deletion(-)

diff --git a/core/admin/assets/sass/layouts/settings.scss b/core/admin/assets/sass/layouts/settings.scss
index ae0a6aa5b0..3f495c3fd4 100644
--- a/core/admin/assets/sass/layouts/settings.scss
+++ b/core/admin/assets/sass/layouts/settings.scss
@@ -219,6 +219,89 @@
             padding:40px;
             @include breakpoint($netbook) { padding-left:15px; }
             @include breakpoint($letterbox) { top: 0; }
+
+            .sub{
+              color: rgb(158, 157, 149);
+              padding-bottom: 20px;
+              -moz-border-bottom-colors: none;
+              -moz-border-left-colors: none;
+              -moz-border-right-colors: none;
+              -moz-border-top-colors: none;
+              border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
+              border-image: none;
+              border-right: 0 none;
+              border-style: none none solid;
+              border-width: 0 0 1px;
+              margin-bottom: 0px;
+            }
+            ul.users{
+              list-style: none;
+              padding: 0px;
+              margin-top: 0px;
+              width: 75%;
+              clear: both;
+              li{
+                display: block;
+                width: 100%;
+                padding: 20px;
+                @include box-sizing(border-box);
+                -moz-border-bottom-colors: none;
+                -moz-border-left-colors: none;
+                -moz-border-right-colors: none;
+                -moz-border-top-colors: none;
+                border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
+                border-image: none;
+                border-right: 0 none;
+                border-style: none none solid;
+                border-width: 0 0 1px;
+
+                &:last-child{
+                  border: none;
+                }
+                .user_image{
+                  float: left;
+                  width: 40px;
+                  height: 40px;
+                  margin-right: 17px;
+                  background-color: #ccc;
+                  @include border-radius(20px);
+
+                  img{
+                    width: 40px;
+                    height: 40px;
+                    @include border-radius(20px);
+                  }
+                }
+
+                .user_info{
+                  float: left;
+                  span{
+                    display: block;
+                    line-height: 1em;
+                    &.name{
+                      margin-top: 0.4em;
+                      font-weight: bold;
+                      font-size: 1.2em;
+                    }
+                  }
+                }
+
+                label{
+                  float: right;
+                  color: #fff;
+                  padding: 4px 8px;
+                  margin-right: 20px;
+                  &.admin{
+                    background-color: #DE523A;
+                  }
+
+                  &.editor{
+                    background-color: #4A8CBD;
+                  }
+                }
+              }
+
+            }
         }
 
     }//.settings-content
diff --git a/core/admin/views/settings.hbs b/core/admin/views/settings.hbs
index e1c1e42dd3..7105f608ad 100644
--- a/core/admin/views/settings.hbs
+++ b/core/admin/views/settings.hbs
@@ -162,7 +162,39 @@
         </section>
       </header>
       <section class="content">
-        <img src="/core/admin/assets/img/users.png" alt="users" style="width:900px;height:auto" />
+        <h6 class="sub">Invited Users</h6>
+        <ul class="users">
+            <li class="clearfix">
+                <div class="user_image"></div>
+                <div class="user_info">
+                    <span class="name">Some Name</span>
+                    <span class"timestamp">Invitation Sent: 7 hours ago</span>
+                </div>
+            </li>
+        </ul>
+        <h6 class="sub">Active Users</h6>
+        <ul class="users">
+            <li class="clearfix">
+                <div class="user_image">
+                    <img src="/core/admin/assets/img/user.jpg" alt="user"/>
+                </div>
+                <div class="user_info">
+                    <span class="name">Some Name</span>
+                    <span class"timestamp">Last Seen: 7 hours ago</span>
+                </div>
+                <label class="admin">Admin</label>
+            </li>
+            <li class="clearfix">
+                <div class="user_image">
+                      <img src="/core/admin/assets/img/user.jpg" alt="user"/>
+                </div>
+                <div class="user_info">
+                    <span class="name">Some Name</span>
+                    <span class"timestamp">Last Seen: 2 days ago</span>
+                </div>
+                <label class="editor">Editor</label>
+            </li>
+        </ul>
       </section>
     </section>
   </div>