TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Team / Apps app frame style update

Browse Source
This commit is contained in:
John O'Nolan 2017-02-17 00:12:13 +07:00 committed by Kevin Ansfield
parent db74744d2b
commit 87e48b2f45
11 changed files with 218 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ghost/admin/app/styles/components/modals.css
View File

@ -8,7 +8,6 @@
/* explicit modal container so that background and content can be animated individually */
.fullscreen-modal-container {
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
position: fixed;
@ -58,7 +57,7 @@
}
.fullscreen-modal-action {
margin: 2vh 0 10vh 0;
margin: 6vw 0;
}
@ -105,7 +104,7 @@
.modal-header h1 {
display: inline-block;
margin: 0 25px 0 0;
margin: -5px 25px 0 0;
font-size: 2.2rem;
line-height: 1.15em;
font-weight: 600;
@ -145,6 +144,9 @@
/* Content Modifiers
/* ---------------------------------------------------------- */
.modal-body fieldset {
margin: 0;
}
/* Login styles */
.modal-body .login-form {

58
ghost/admin/app/styles/layouts/apps.css
View File

@ -13,6 +13,10 @@
/* Main Layout
/* ---------------------------------------------------------- */
.apps-grid-container {
margin: 2vw 0;
}
.apps-grid-title {
display: block;
margin-bottom: 5px;
@ -47,6 +51,9 @@
}
.apps-card-app {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
padding: 14px;
height: 75px;
@ -54,43 +61,28 @@
transition: background 0.3s ease;
}
.apps-card-app:not(last-child) {
border-bottom: rgba(0,0,0,0.1) 1px solid;
}
.apps-card-app:first-of-type {
.apps-grid-cell:first-child .apps-card-app {
border-top: none;
}
.apps-card-content {
position: relative;
.apps-card-left {
display: flex;
align-items: center;
}
.apps-card-content > .gh-btn {
position: absolute;
top: 5px;
right: 20px;
}
.apps-card-content > .apps-configured {
position: absolute;
top: 13px;
right: 29px;
.apps-card-right {
display: flex;
align-items: center;
}
.apps-configured {
display: flex;
align-items: center;
}
.apps-configured i {
margin-left: 15px;
color: var(--midgrey);
white-space: nowrap;
}
.apps-configured > span {
padding-right: 14px;
font-size: 1.3rem;
}
.apps-configured > i {
position: absolute;
top: 2px;
right: 0;
font-size: 1.1rem;
}
.apps-card-app-icon {
@ -104,15 +96,14 @@
}
.apps-card-meta {
position: relative;
display: flex;
flex-direction: column;
padding: 0 70px 0 0;
}
.apps-card-app-title {
margin: 0;
overflow: hidden;
margin: 4px 0 0 0;
padding: 0 70px 0 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.7rem;
@ -251,7 +242,4 @@
flex-direction: column;
align-items: flex-start;
}
.apps-card-content > .apps-configured {
right: 15px;
}
}

5
ghost/admin/app/styles/layouts/main.css
View File

@ -380,11 +380,11 @@ body > .ember-view:not(.liquid-target-container) {
top: 0;
left: 0;
z-index: 1000;
width: 205px;
width: 250px;
height: 100%;
transition: transform 0.20s;
/* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */
transform: translate3d(-190px,0,0);
transform: translate3d(-235px,0,0);
}
/* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */
@ -462,6 +462,7 @@ body > .ember-view:not(.liquid-target-container) {
padding: 2.9vw 4vw 3vw 4vw;
margin: 0 auto;
overflow-y: auto;
max-width: 1200px;
}
.gh-canvas-header {

148
ghost/admin/app/styles/layouts/users.css
View File

@ -1,55 +1,17 @@
/* Users /ghost/settings/users/
/* ---------------------------------------------------------- */
.users-list-wrapper {
overflow: auto;
height: 100%;
}
/* User list
/* ---------------------------------------------------------- */
.invited-users {
margin-bottom: 34px;
}
.user-list-title {
margin-bottom: 14px;
color: #a1a1a1;
font-size: 13px;
font-weight: normal;
}
.user-list-item {
display: flex;
justify-content: start;
align-items: center;
padding: 0 15px;
height: 68px;
border-top: 1px solid #dfe1e3;
}
/* Only apply these styles to anchor tags (pending invited are divs) */
a.user-list-item {
text-decoration: none;
}
@media (min-width: 601px) {
a.user-list-item:hover {
background: color(#dfe1e3 lightness(+10%));
}
a.user-list-item:last-of-type:hover {
box-shadow: inset 0 -1px 0 #dfe1e3;
}
.gh-invited-users .apps-grid-cell:hover {
background: none;
}
.user-list-item-icon {
position: relative;
display: block;
overflow: hidden;
width: 35px;
height: 35px;
margin-right: 15px;
width: 40px;
height: 40px;
background: #dfe1e3;
border-radius: 100%;
color: transparent;
@ -70,11 +32,13 @@ a.user-list-item {
.user-list-item-figure {
position: relative;
display: block;
width: 35px;
height: 35px;
width: 40px;
height: 40px;
margin-right: 15px;
background-position: center center;
background-size: cover;
border-radius: 35px;
border-radius: 100%;
box-shadow: #fff 0 0 0 3px;
}
.user-list-item-figure img {
@ -86,51 +50,8 @@ a.user-list-item {
opacity: 0;
}
.user-list-item-body {
flex: 1 1 auto;
align-items: stretch;
padding-left: 15px;
line-height: 1;
}
.user-list-item-body .name {
display: inline-block;
color: var(--darkgrey);
font-size: 15px;
font-weight: 400;
}
.user-list-item-body .description {
display: inline-block;
margin-top: 3px;
color: #a1a1a1;
white-space: nowrap;
font-size: 12px;
}
.user-list-item-body .description-error {
display: inline-block;
margin-top: 3px;
color: var(--red);
white-space: nowrap;
font-size: 12px;
}
.user-list-item-aside .user-list-action {
float: left;
margin-right: 20px;
}
.user-list-item-aside .role-label {
float: left;
margin-top: -1px;
}
.user-list-item-aside .role-label + .role-label {
margin-left: 5px;
}
.user-list-action {
margin-right: 15px;
text-decoration: underline;
text-transform: uppercase;
font-size: 11px;
@ -140,36 +61,45 @@ a.user-list-item {
/* Role Labels
/* ---------------------------------------------------------- */
.role-label {
display: inline-block;
padding: 6px 8px;
background: #eee;
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 9px;
line-height: 1;
font-weight: 400;
.gh-badge.owner {
border: color(var(--darkgrey) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--darkgrey) whiteness(+10%)),
color(var(--darkgrey) blackness(+4%))
);
}
.role-label.owner {
background: var(--darkgrey);
color: rgba(255, 255, 255, 0.8);
.gh-badge.administrator {
border: color(var(--red) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--red) whiteness(+10%)),
color(var(--red) blackness(+4%))
);
}
.role-label.administrator {
background: var(--red);
color: rgba(255, 255, 255, 0.8);
.gh-badge.editor {
border: color(var(--blue) blackness(+8%)) 1px solid;
background: linear-gradient(
color(var(--blue) whiteness(+10%)),
color(var(--blue) blackness(+4%))
);
}
.role-label.editor {
background: var(--blue);
color: rgba(255, 255, 255, 0.8);
.gh-badge.author {
border: color(var(--lightgrey) blackness(+8%)) 1px solid;
color: color(var(--midgrey) l(+5%));
background: #fff;
}
/* User invitation modal
/* ---------------------------------------------------------- */
.invite-new-user .modal-content {
width: 100%;
max-width: 600px;
}
.invite-new-user .form-group {
margin-bottom: 0;
padding: 0;
@ -188,7 +118,7 @@ a.user-list-item {
.invite-new-user .form-group:nth-of-type(2) {
float: left;
margin-left: 5%;
margin-left: 10px;
width: 35%;
}

1
ghost/admin/app/styles/patterns/forms.css
View File

@ -272,7 +272,6 @@ textarea {
.gh-select {
position: relative;
display: block;
overflow: hidden;
padding: 0;
max-width: 100%;
width: 100%;

27
ghost/admin/app/templates/-user-list-item.hbs
View File

@ -1,18 +1,25 @@
<div class="apps-grid-cell">
{{#link-to 'team.user' user.slug}}
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-figure" style={{component.userImageBackground}}>
<span class="hidden">Photo of {{user.name}}</span>
</span>
<div class="user-list-item-body">
<span class="name">
{{user.name}}
</span>
<br>
<span class="description">Last seen: {{component.lastLoginUTC}}</span>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">{{user.name}}</h3>
<p class="apps-card-app-desc">Last seen: {{component.lastLoginUTC}}</p>
</div>
<aside class="user-list-item-aside">
</div>
<div class="apps-card-right">
<div class="apps-configured">
{{#unless session.user.isAuthor}}
{{#each user.roles as |role|}}
<span class="role-label {{role.lowerCaseName}}">{{role.name}}</span>
<span class="gh-badge {{role.lowerCaseName}}">{{role.name}}</span>
{{/each}}
{{/unless}}
</aside>
<i class="icon-arrow-right"></i>
</div>
</div>
</article>
{{/link-to}}
</div>

6
ghost/admin/app/templates/settings/apps-loading.hbs
View File

@ -1,6 +1,6 @@
<div class="gh-view">
<header class="view-header">
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span style="padding-left:1px">Apps</span>{{/gh-view-title}}
<div class="gh-canvas">
<header class="gh-canvas-header">
<h2 class="gh-canvas-title">Apps</h2>
</header>
<div class="view-content">

2
ghost/admin/app/templates/settings/apps.hbs
View File

@ -1,3 +1,3 @@
<section class="gh-view">
<section class="gh-canvas">
{{outlet}}
</section>

16
ghost/admin/app/templates/settings/apps/index.hbs
View File

@ -1,20 +1,21 @@
<header class="view-header">
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span style="padding-left:1px">Apps</span>{{/gh-view-title}}
<header class="gh-canvas-header">
<h2 class="gh-canvas-title">Apps</h2>
</header>
<section class="view-container">
<section class="view-content">
<section class="apps-grid-container">
<span class="apps-grid-title">Available integrations</span>
<div class="apps-grid">
<div class="apps-grid-cell">
{{#link-to "settings.apps.slack" id="slack-link"}}
<article class="apps-card-app">
<div class="apps-card-content">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url({{gh-path 'asset' '/img/slackicon.png'}})"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Slack</h3>
<p class="apps-card-app-desc">A team communication tool</p>
</div>
</div>
<div class="gh-card-right">
<div class="apps-configured">
{{#if slack.isActive}}
<span class="green">Active</span>
@ -31,12 +32,14 @@
<div class="apps-grid-cell">
{{#link-to "settings.apps.amp" id="amp-link"}}
<article class="apps-card-app">
<div class="apps-card-content">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url({{gh-path 'asset' '/img/ampicon.png'}})"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">AMP</h3>
<p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
</div>
</div>
<div class="gh-card-right">
<div class="apps-configured">
{{#if amp}}
<span class="green">Active</span>
@ -52,4 +55,3 @@
</div>
<p class="apps-grid-note">(More coming soon!)</p>
</section>
</section>

6
ghost/admin/app/templates/team/index-loading.hbs
View File

@ -1,10 +1,10 @@
<section class="gh-view">
<header class="view-header">
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Team</span>{{/gh-view-title}}
<header class="gh-canvas-header">
<h2 class="gh-canvas-title">Team Members</h2>
{{!-- Do not show Invite user button to authors --}}
{{#unless session.user.isAuthor}}
<section class="view-actions">
<button class="gh-btn gh-btn-green"><span>Invite People</span></button>
<button class="gh-btn gh-btn-green" {{action "toggleInviteUserModal"}} ><span>Invite People</span></button>
</section>
{{/unless}}
</header>

50
ghost/admin/app/templates/team/index.hbs
View File

@ -1,6 +1,6 @@
<section class="gh-view">
<header class="view-header">
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Team</span>{{/gh-view-title}}
<section class="gh-canvas">
<header class="gh-canvas-header">
<h2 class="gh-canvas-title">Team Members</h2>
{{!-- Do not show Invite user button to authors --}}
{{#unless session.user.isAuthor}}
<section class="view-actions">
@ -12,26 +12,32 @@
{{#if showInviteUserModal}}
{{gh-fullscreen-modal "invite-new-user"
close=(action "toggleInviteUserModal")
modifier="action"}}
modifier="action wide"}}
{{/if}}
{{#gh-infinite-scroll
fetch="loadNextPage"
isLoading=isLoading
tagName="section"
classNames="view-content team"
classNames="gh-team"
}}
{{!-- Do not show invited users to authors --}}
{{!-- Show invited users to everyone except authors --}}
{{#unless session.user.isAuthor}}
{{#if invites}}
<section class="user-list invited-users">
<h4 class="user-list-title">Invited users</h4>
<section class="apps-grid-container gh-invited-users">
<span class="apps-grid-title">Invited users</span>
<div class="apps-grid">
{{#each sortedInvites as |invite|}}
{{#gh-user-invited invite=invite reload="reload" as |component|}}
<div class="user-list-item">
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-icon icon-mail">ic</span>
<div class="user-list-item-body">
<span class="name">{{invite.email}}</span><br>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">{{invite.email}}</h3>
<p class="apps-card-app-desc">
{{#if invite.pending}}
<span class="description-error">
Invitation not sent - please try again
@ -42,8 +48,11 @@
expires {{component.expiresAt}}
</span>
{{/if}}
</p>
</div>
<aside class="user-list-item-aside">
</div>
<div class="apps-card-right">
<div class="apps-configured">
{{#if component.isSending}}
<span>Sending Invite...</span>
{{else}}
@ -54,25 +63,28 @@
Resend
</a>
<span class="role-label {{invite.role.lowerCaseName}}">{{invite.role.name}}</span>
<span class="gh-badge {{invite.role.lowerCaseName}}">{{invite.role.name}}</span>
{{/if}}
</aside>
</div>
</div>
</article>
</div>
{{/gh-user-invited}}
{{/each}}
</div>
</section>
{{/if}}
{{/unless}}
<section class="user-list active-users">
<h4 class="user-list-title">Active users</h4>
<section class="apps-grid-container gh-active-users">
<span class="apps-grid-title">Active users</span>
<div class="apps-grid">
{{#each users key="id" as |user|}}
{{!-- For authors only shows users as a list, otherwise show users with links to user page --}}
{{#unless session.user.isAuthor}}
{{#gh-user-active user=user as |component|}}
{{#link-to 'team.user' user.slug class="user-list-item"}}
{{partial 'user-list-item'}}
{{/link-to}}
{{/gh-user-active}}
{{else}}
{{#gh-user-active user=user as |component|}}
@ -80,6 +92,8 @@
{{/gh-user-active}}
{{/unless}}
{{/each}}
</div>
</section>
{{/gh-infinite-scroll}}
</section>