mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Refactored users settings page
Improved standards of CSS and also refactored HTML markup. Search bar also is implemented, with a prototype animation for displaying input field.
This commit is contained in:
Matthew Harrison-Jones
parent
f2e913ddfd
commit
0d75b737b8
2 changed files with 168 additions and 120 deletions
|
|
@ -14,7 +14,6 @@
|
||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
.settings {
|
.settings {
|
||||||
|
|
||||||
// The main white bg for the page
|
// The main white bg for the page
|
||||||
.wrapper {
|
.wrapper {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -42,7 +41,7 @@
|
||||||
/* =============================================================================
|
/* =============================================================================
|
||||||
Sidebar
|
Sidebar
|
||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
//The whole left column sidebar, duh.
|
//The whole left column sidebar, duh.
|
||||||
.settings-sidebar {
|
.settings-sidebar {
|
||||||
width:20%;
|
width:20%;
|
||||||
|
|
@ -68,7 +67,7 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}//.settings-sidebar
|
}//.settings-sidebar
|
||||||
|
|
||||||
//Main settings-menu styles, apply to every item
|
//Main settings-menu styles, apply to every item
|
||||||
.settings-menu {
|
.settings-menu {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
|
|
@ -112,8 +111,8 @@
|
||||||
position:relative;
|
position:relative;
|
||||||
z-index: 300;
|
z-index: 300;
|
||||||
border-top: #edece4 1px solid;
|
border-top: #edece4 1px solid;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
#fff 1px 0 0,
|
#fff 1px 0 0,
|
||||||
#edece4 0 1px 0;
|
#edece4 0 1px 0;
|
||||||
@include transition;
|
@include transition;
|
||||||
|
|
||||||
|
|
@ -151,7 +150,7 @@
|
||||||
/* =============================================================================
|
/* =============================================================================
|
||||||
Content
|
Content
|
||||||
============================================================================= */
|
============================================================================= */
|
||||||
|
|
||||||
// The main content panel on the right
|
// The main content panel on the right
|
||||||
.settings-content {
|
.settings-content {
|
||||||
padding:0;
|
padding:0;
|
||||||
|
|
@ -164,7 +163,7 @@
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
&.active {display:block;}
|
&.active {display:block;}
|
||||||
|
|
||||||
> header {
|
> header {
|
||||||
height: 17px;
|
height: 17px;
|
||||||
padding: 30px 220px 29px 40px;
|
padding: 30px 220px 29px 40px;
|
||||||
|
|
@ -217,95 +216,130 @@
|
||||||
right:0;
|
right:0;
|
||||||
left:0;
|
left:0;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
overflow:auto;
|
|
||||||
padding:40px;
|
padding:40px;
|
||||||
|
overflow:auto;
|
||||||
|
|
||||||
@include breakpoint($netbook) { padding-left:15px; }
|
@include breakpoint($netbook) { padding-left:15px; }
|
||||||
@include breakpoint($letterbox) { top: 0; }
|
@include breakpoint($letterbox) { top: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
.sub{
|
|
||||||
color: rgb(158, 157, 149);
|
.user-group-header {
|
||||||
padding-bottom: 20px;
|
margin-bottom: 0px;
|
||||||
-moz-border-bottom-colors: none;
|
padding-bottom: 20px;
|
||||||
-moz-border-left-colors: none;
|
border: 0 none;
|
||||||
-moz-border-right-colors: none;
|
border-bottom: 1px solid darken($lightbrown, 10%);
|
||||||
-moz-border-top-colors: none;
|
|
||||||
border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
|
h3 {
|
||||||
border-image: none;
|
display: inline-block;
|
||||||
border-right: 0 none;
|
margin: 0;
|
||||||
border-style: none none solid;
|
color: $midbrown;
|
||||||
border-width: 0 0 1px;
|
font-weight: normal;
|
||||||
margin-bottom: 0px;
|
font-size: 1.1em;
|
||||||
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
ul.users{
|
|
||||||
list-style: none;
|
}
|
||||||
padding: 0px;
|
|
||||||
margin-top: 0px;
|
.user-search {
|
||||||
width: 75%;
|
display: inline-block;
|
||||||
clear: both;
|
float: right;
|
||||||
li{
|
|
||||||
display: block;
|
label { margin: 0}
|
||||||
width: 100%;
|
|
||||||
padding: 20px;
|
&:hover .user-search-input, .user-search-input:focus {
|
||||||
|
width: 260px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-search-input {
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
-moz-border-bottom-colors: none;
|
width: 0px;
|
||||||
-moz-border-left-colors: none;
|
padding: 0;
|
||||||
-moz-border-right-colors: none;
|
border: none;
|
||||||
-moz-border-top-colors: none;
|
border-bottom: lighten($lightbrown, 2%) 1px solid;
|
||||||
border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
|
@include transition(width 0.2s ease-in-out);
|
||||||
border-image: none;
|
box-shadow: 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;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.search-icon {
|
||||||
|
@include icon($i-search, 1em, $midbrown);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.users {
|
||||||
|
padding: 0px;
|
||||||
|
margin-top: 0px;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
border: 0 none;
|
||||||
|
border-top: 1px solid $lightgrey;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-image {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 17px;
|
||||||
|
vertical-align: middle;
|
||||||
|
background-color: $lightbrown;
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
&.invite {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
padding-top: 8px;
|
||||||
|
text-align: center;
|
||||||
|
@include icon($i-mail, 1em, $brown);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-meta {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 0.4em;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.2em;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-last-seen {
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-role {
|
||||||
|
padding: 2px 8px;
|
||||||
|
float: right;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&.admin {
|
||||||
|
background-color: #DE523A;
|
||||||
|
}
|
||||||
|
&.editor {
|
||||||
|
background-color: #4A8CBD;
|
||||||
|
}
|
||||||
|
}
|
||||||
}//.settings-content
|
}//.settings-content
|
||||||
|
|
||||||
}//.settings
|
}//.settings
|
||||||
|
|
|
||||||
|
|
@ -157,43 +157,57 @@
|
||||||
<header>
|
<header>
|
||||||
<h2 class="title">Users</h2>
|
<h2 class="title">Users</h2>
|
||||||
<section class="page-actions">
|
<section class="page-actions">
|
||||||
<button class="button-add">Add User</button>
|
<button class="button-add">New User</button>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
</header>
|
||||||
<section class="content">
|
<section class="content">
|
||||||
<h6 class="sub">Invited Users</h6>
|
<section id="users-pending" class="user-group">
|
||||||
<ul class="users">
|
<header class="user-group-header"><h3>Invited Users</h3></header>
|
||||||
<li class="clearfix">
|
<ul class="users">
|
||||||
<div class="user_image"></div>
|
<li class="user">
|
||||||
<div class="user_info">
|
<figure class="user-image invite"></figure>
|
||||||
<span class="name">Some Name</span>
|
<section class="user-meta">
|
||||||
<span class="timestamp">Invitation Sent: 7 hours ago</span>
|
<h4 class="user-name">Some Name</h4>
|
||||||
</div>
|
<span class="user-last-seen">Invitation Sent: 7 hours ago</span>
|
||||||
</li>
|
</section>
|
||||||
</ul>
|
</li>
|
||||||
<h6 class="sub">Active Users</h6>
|
</ul>
|
||||||
<ul class="users">
|
</section>
|
||||||
<li class="clearfix">
|
<section id="users-active" class="user-group">
|
||||||
<div class="user_image">
|
<header class="user-group-header">
|
||||||
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
|
<h3>Active Users</h3>
|
||||||
</div>
|
|
||||||
<div class="user_info">
|
<form class="user-search">
|
||||||
<span class="name">Some Name</span>
|
<label>
|
||||||
<span class="timestamp">Last Seen: 7 hours ago</span>
|
<i class="search-icon"></i>
|
||||||
</div>
|
<input class="user-search-input" type="text"/>
|
||||||
<label class="admin">Admin</label>
|
</label>
|
||||||
</li>
|
</form>
|
||||||
<li class="clearfix">
|
</header>
|
||||||
<div class="user_image">
|
|
||||||
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
|
<ul class="users">
|
||||||
</div>
|
<li class="user">
|
||||||
<div class="user_info">
|
<figure class="user-image">
|
||||||
<span class="name">Some Name</span>
|
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
|
||||||
<span class="timestamp">Last Seen: 2 days ago</span>
|
</figure>
|
||||||
</div>
|
<section class="user-meta">
|
||||||
<label class="editor">Editor</label>
|
<h4 class="user-name">Some Name</h4>
|
||||||
</li>
|
<span class="user-last-seen">Last Seen: 7 hours ago</span>
|
||||||
</ul>
|
</section>
|
||||||
|
<span class="user-role admin">Admin</span>
|
||||||
|
</li>
|
||||||
|
<li class="user">
|
||||||
|
<figure class="user-image">
|
||||||
|
<img src="/core/admin/assets/img/user.jpg" alt="user"/>
|
||||||
|
</figure>
|
||||||
|
<section class="user-meta">
|
||||||
|
<h4 class="user-name">Some Name</h4>
|
||||||
|
<span class="user-last-seen">Last Seen: 2 days ago</span>
|
||||||
|
</section>
|
||||||
|
<span class="user-role editor">Editor</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<section id="appearance" class="settings-content">
|
<section id="appearance" class="settings-content">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue