Simple conversion of designed 'users' section.

Still needs search functionality.
This commit is contained in:
Matthew Harrison-Jones 2013-05-13 20:12:40 +01:00
parent 7ea1f2a7dc
commit 94b9fe1099
2 changed files with 116 additions and 1 deletions

View File

@ -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

View File

@ -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>