Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Cleanup User List styles

Browse source 
No issue

* Cleans up the Sass a bit
* Uses the same basic markup as other settings pages. Before, we had extra elements which required 'reseting'
This commit is contained in:
Paul Adam Davis 2014-11-04 22:00:32 +00:00
parent 25cd8f4194
commit eef6fccca2
2 changed files with 35 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
core/client/assets/sass/layouts/users.scss
View file

@ -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,7 +246,6 @@ a.user-list-item {
input {
width: 100%;
}
}//.form-group
.button-add {
@ -251,5 +254,4 @@ a.user-list-item {
font-size: 14px;
line-height: 16px;
}
}//.invite-new-user

7
core/client/templates/settings/users/index.hbs
View file

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