tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Update design screen styles, fix login bugs 

Refs https://github.com/TryGhost/Ghost/issues/8021
This commit is contained in:
John O'Nolan 2017-02-27 13:31:01 +07:00
parent 0f46d214e0
commit ae1007c58d
12 changed files with 168 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/components/gh-theme-table.js
View File

@ -14,7 +14,8 @@ export default Component.extend({
let themePackage = get(t, 'package');
theme.name = get(t, 'name');
theme.label = themePackage ? `${themePackage.name} - ${themePackage.version}` : theme.name;
theme.label = themePackage ? `${themePackage.name}` : theme.name;
theme.version = themePackage ? `${themePackage.version}` : '1.0';
theme.package = themePackage;
theme.active = theme.name === activeTheme;
theme.isDeletable = !theme.active;

2
app/styles/components/badges.css
View File

@ -11,6 +11,7 @@
font-weight: 400;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
text-decoration: none;
white-space: nowrap;
user-select: none;
background: linear-gradient(
@ -50,4 +51,5 @@
font-weight: 400;
background: transparent;
box-shadow: none;
text-shadow: none;
}

54
app/styles/layouts/apps.css
View File

@ -87,6 +87,16 @@
color: var(--midgrey);
}
.apps-configured a {
text-decoration: underline;
}
.apps-configured-action {
margin-left: 15px;
text-transform: uppercase;
font-size: 11px;
}
.apps-card-app-icon {
flex: 0 0 47px;
margin: 0 15px 0 0;
@ -201,47 +211,3 @@
.app-config-form > .gh-btn-grey:focus {
border-color: rgb(223, 225, 227);
}
/* Media Queries
/* ---------------------------------------------------------- */
@media (max-width: 800px) {
.apps-grid-apps {
overflow: hidden;
margin: 0 0 4vw 0;
border: #dfe1e3 1px solid;
border-radius: 5px;
}
.apps-card-app {
margin: 0;
border: none;
border-top: #dfe1e3 1px solid;
border-radius: 0;
}
.apps-grid-cell:first-of-type .apps-card-app {
border-top: none;
}
}
@media (max-width: 760px) {
.apps-card-app {
padding: 15px;
}
.apps-card-app .apps-card-footer {
justify-content: flex-end;
}
.apps-card-theme .apps-card-footer {
margin: 0;
padding: 15px;
}
}
@media (max-width: 540px) {
.apps-card-footer {
justify-content: flex-end;
}
.apps-card-app .apps-card-footer {
flex-direction: column;
align-items: flex-start;
}
}

15
app/styles/layouts/auth.css
View File

@ -19,7 +19,6 @@
.gh-signin .gh-btn {
margin: 0;
padding: 12px;
}
.forgotten-wrap {
@ -35,17 +34,19 @@
top: 10px;
right: 1px;
bottom: 10px;
padding: 0 11px 0 12px;
border-left: #dae1e3 1px solid;
border-left: color(var(--lightgrey) l(-5%) s(-10%)) 1px solid;
border-radius: 0;
text-transform: none;
}
.forgotten-link span {
height: 24px;
font-size: 1.1rem;
line-height: 1.2rem;
line-height: 24px;
padding: 0 11px 0 12px;
}
.forgotten-link:hover {
border-left: #dae1e3 1px solid;
color: color(var(--blue) lightness(-20%));
border-left: color(var(--lightgrey) l(-15%) s(-10%)) 1px solid;
color: color(var(--blue) l(-10%));
text-decoration: none;
}

133
app/styles/layouts/settings.css
View File

@ -38,6 +38,20 @@
margin: 1px 0 0 0;
}
/* Images */
.gh-setting-action-smallimg img {
max-height: 50px;
max-width: 250px;
}
.gh-setting-action-largeimg img {
max-height: 130px;
max-width: 250px;
}
/* Checkboxes */
.gh-setting-action .input-toggle-component {
float: none;
margin-right: 0;
@ -61,8 +75,16 @@
/* Navigation
/* ---------------------------------------------------------- */
.gh-blognav-container {
padding: 25px 0;
border-top: var(--lightgrey) 1px solid;
}
.gh-blognav {
margin: 20px 0;
margin: 0 -24px 0 -16px;
}
@media (max-width: 600px) {
.gh-blognav { margin: 20px 0; }
}
.gh-blognav-item {
@ -83,7 +105,7 @@
.gh-blognav-grab {
padding: 0 16px 0 0;
width: 16px;
color: #d1d1d1;
color: color(var(--midgrey) l(+15%));
text-indent: -4px;
font-size: 16px;
cursor: move;
@ -105,7 +127,7 @@
.gh-blognav-delete {
padding: 8px 0 8px 10px;
color: #c1c1c1;
color: color(var(--midgrey) l(+15%));
font-size: 14px;
transition: color 0.1s linear;
}
@ -116,8 +138,8 @@
}
.gh-blognav-add {
margin-right: -2px;
margin-left: 10px;
margin-right: -1px;
margin-left: 9px;
width: 16px;
height: 16px;
background: var(--green);
@ -144,11 +166,11 @@
margin-right: -1px;
}
.gh-blognav-label input {
border-right-color: #eaeaea;
border-right-color: color(var(--lightgrey) l(-5%) s(-10%));
border-radius: 4px 0 0 4px;
}
.gh-blognav-url input {
border-left-color: #eaeaea;
border-left-color: color(var(--lightgrey) l(-5%) s(-10%));
border-radius: 0 4px 4px 0;
}
.gh-blognav-item input:focus {
@ -220,100 +242,15 @@
/* Themes
/* ---------------------------------------------------------- */
.settings-themes {
max-width: 500px;
.gh-themes-container {
padding: 25px 0;
border-top: var(--lightgrey) 1px solid;
}
.settings-themes h3 {
margin-bottom: 1.6em;
font-size: 16px;
}
.theme-list-item {
display: flex;
justify-content: start;
align-items: center;
padding: 13px 15px;
border-top: 1px solid #dfe1e3;
}
.theme-list-item--active {
background: color(#dfe1e3 lightness(+10%));
}
.theme-list-item-body .name {
display: inline-block;
color: var(--darkgrey);
font-weight: 400;
user-select: all;
}
.theme-list-item:last-of-type {
margin-bottom: 1em;
border-bottom: 1px solid #dfe1e3;
}
.theme-list-item-body {
flex: 1;
align-items: stretch;
line-height: 1;
}
.theme-list-item-aside {
flex: 1;
display: flex;
justify-content: flex-end;
}
.theme-list-action:last-child {
margin-right: 0;
}
.theme-list-action {
float: left;
margin-right: 20px;
text-transform: uppercase;
font-size: 11px;
}
a.theme-list-action {
text-decoration: underline;
}
/* account for length difference between Active and Activate */
.theme-list-action-activate {
min-width: 52px;
}
.theme-list-item--active .theme-list-action-activate {
color: var(--green);
}
@media (max-width: 550px) {
.theme-list-item {
flex-direction: column;
align-items: flex-start;
height: auto;
}
.theme-list-item-body .name {
font-size: 15px;
}
.theme-list-item-aside {
display: flex;
flex-direction: row-reverse;
}
.theme-list-item-body {
margin-bottom: 0.35em;
width: 100%;
}
.theme-list-action:last-child {
margin-right: 20px;
}
.gh-themes-uploadbtn {
margin-top: 25px;
}
/*Errors */
.theme-validation-errors {
padding-left: 0;

7
app/styles/layouts/users.css
View File

@ -51,13 +51,6 @@
opacity: 0;
}
.user-list-action {
margin-right: 15px;
text-decoration: underline;
text-transform: uppercase;
font-size: 11px;
}
/* Role Labels
/* ---------------------------------------------------------- */

10
app/styles/patterns/buttons.css
View File

@ -91,7 +91,7 @@ fieldset[disabled] .gh-btn {
color(var(--blue) l(-5%) saturation(-8%)) 90%,
color(var(--blue) l(-3%) saturation(-8%))
);
box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
/* When clicked or focused with keyboard */
@ -131,7 +131,7 @@ fieldset[disabled] .gh-btn {
color(var(--green) l(-3%) saturation(-7%)) 90%,
color(var(--green) l(-3%) saturation(-9%))
);
box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
/* When clicked or focused with keyboard */
@ -172,7 +172,7 @@ fieldset[disabled] .gh-btn {
color(var(--red) l(-7%) saturation(-10%)) 90%,
color(var(--red) l(-4%) saturation(-10%))
);
box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
/* When clicked or focused with keyboard */
@ -212,7 +212,7 @@ fieldset[disabled] .gh-btn {
color(var(--darkgrey) l(-7%) saturation(-10%)) 90%,
color(var(--darkgrey) l(-4%) saturation(-10%))
);
box-shadow: 0 1px 0 inset rgba(255,255,255,0.1);
box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
}
/* When clicked or focused with keyboard */
@ -250,7 +250,7 @@ fieldset[disabled] .gh-btn {
color(var(--lightgrey) l(+10%)),
color(var(--lightgrey) l(+4%))
);
box-shadow: inset 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff inset;
}
/* When clicked or focused with keyboard */

35
app/styles/patterns/global.css
View File

@ -22,6 +22,7 @@
/* Colour classes
/* ---------------------------------------------------------- */
.darkgrey {
color: var(--darkgrey);
}
@ -50,6 +51,40 @@
color: var(--green);
}
/* Colour classes (hover)
/* ---------------------------------------------------------- */
.darkgrey-hover:hover {
color: var(--darkgrey);
}
.midgrey-hover:hover {
color: var(--midgrey);
}
.lightgrey-hover:hover {
color: var(--lightgrey);
}
.blue-hover:hover {
color: var(--blue);
}
.red-hover:hover {
color: var(--red);
}
.orange-hover:hover {
color: var(--orange);
}
.green-hover:hover {
color: var(--green);
}
/* Layout
/* ---------------------------------------------------------- */

49
app/templates/components/gh-theme-table.hbs
View File

@ -1,32 +1,45 @@
<div class="apps-grid">
{{#if sortedThemes}}
<div class="theme-list">
{{#each sortedThemes as |theme|}}
<div class="theme-list-item {{if theme.active "theme-list-item--active"}}">
<div class="theme-list-item-body">
<span class="name">{{theme.label}}</span>
{{#each sortedThemes as |theme|}}
<div class="apps-grid-cell">
<div class="apps-card-app {{if theme.active "theme-list-item--active"}}">
<div class="apps-card-left">
<div class="apps-card-meta">
<h3 class="apps-card-app-title">{{theme.label}}</h3>
<p class="apps-card-app-desc"><span class="description">Version {{theme.version}}</span></p>
</div>
<div class="theme-list-item-aside">
</div>
<div class="apps-card-right">
<div class="apps-configured">
{{!--Delete--}}
{{#if theme.isDeletable}}
<a href="#" {{action deleteTheme theme}} disabled={{theme.active}} class="theme-list-action">
Delete
</a>
<a href="#" {{action deleteTheme theme}} disabled={{theme.active}} class="apps-configured-action red-hover">Delete</a>
{{/if}}
<a href="#" {{action downloadTheme theme}} class="theme-list-action">
Download
</a>
{{!--Download--}}
<a href="#" {{action downloadTheme theme}} class="apps-configured-action darkgrey-hover">Download</a>
{{!--Active Label / Activate Button--}}
{{#if theme.active}}
<span class="theme-list-action theme-list-action-activate">Active</span>
<span class="gh-badge gh-badge-black apps-configured-action">Active</span>
{{else}}
<a href="#" {{action activateTheme theme}} class="theme-list-action theme-list-action-activate">
<a href="#" {{action activateTheme theme}} class="apps-configured-action apps-configured-action-activate green-hover">
Activate
</a>
{{/if}}
</div>
</div>
{{/each}}
</div>
</div>
{{/each}}
{{else}}
No theme found!
<div class="apps-card-app">
<div class="apps-card-left">
<div class="apps-card-meta">
<h3 class="apps-card-app-title">No themes found</h3>
<p class="apps-card-app-desc"><span class="description">Please upload a theme to continue</span></p>
</div>
</div>
</div>
{{/if}}
</div>

68
app/templates/settings/design.hbs
View File

@ -8,49 +8,43 @@
<section class="view-container">
<div class="gh-setting-header">Navigation</div>
<div class="gh-setting">
<div class="gh-setting-content">
<form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
{{#sortable-group onChange=(action 'reorderItems') as |group|}}
{{#each model.navigation as |navItem|}}
{{gh-navitem navItem=navItem baseUrl=blogUrl addItem="addNavItem" deleteItem="deleteNavItem" updateUrl="updateUrl" group=group}}
{{/each}}
{{/sortable-group}}
{{gh-navitem navItem=newNavItem baseUrl=blogUrl addItem="addNavItem" updateUrl="updateUrl"}}
</form>
</div>
<div class="gh-blognav-container">
<form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
{{#sortable-group onChange=(action 'reorderItems') as |group|}}
{{#each model.navigation as |navItem|}}
{{gh-navitem navItem=navItem baseUrl=blogUrl addItem="addNavItem" deleteItem="deleteNavItem" updateUrl="updateUrl" group=group}}
{{/each}}
{{/sortable-group}}
{{gh-navitem navItem=newNavItem baseUrl=blogUrl addItem="addNavItem" updateUrl="updateUrl"}}
</form>
</div>
<div class="gh-setting-header">Themes</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="settings-themes">
{{gh-theme-table
themes=themes
activeTheme=model.activeTheme
activateTheme=(action "setTheme")
downloadTheme=(action "downloadTheme")
deleteTheme=(action "deleteTheme")}}
<div class="gh-themes-container">
{{gh-theme-table
themes=themes
activeTheme=model.activeTheme
activateTheme=(action "setTheme")
downloadTheme=(action "downloadTheme")
deleteTheme=(action "deleteTheme")}}
<div class="form-group">
{{#link-to "settings.design.uploadtheme" class="gh-btn gh-btn-green" data-test-upload-theme-button=true}}
<span>Upload a theme</span>
{{/link-to}}
</div>
{{#link-to "settings.design.uploadtheme" class="gh-btn gh-btn-green gh-themes-uploadbtn" data-test-upload-theme-button=true}}
<span>Upload a theme</span>
{{/link-to}}
{{#if showDeleteThemeModal}}
{{gh-fullscreen-modal "delete-theme"
model=(hash
theme=themeToDelete
download=(action "downloadTheme" themeToDelete)
)
close=(action "hideDeleteThemeModal")
confirm=(action "deleteTheme")
modifier="action wide"}}
{{/if}}
</div>
</div>
{{#if showDeleteThemeModal}}
{{gh-fullscreen-modal "delete-theme"
model=(hash
theme=themeToDelete
download=(action "downloadTheme" themeToDelete)
)
close=(action "hideDeleteThemeModal")
confirm=(action "deleteTheme")
modifier="action wide"}}
{{/if}}
</div>
</section>
</section>

12
app/templates/settings/general.hbs
View File

@ -30,7 +30,7 @@
{{/liquid-if}}
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "pubInfoOpen" this)}} data-test-toggle-pub-info><span>{{if pubInfoOpen "Close" "Open"}}</span></button>
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "pubInfoOpen" this)}} data-test-toggle-pub-info><span>{{if pubInfoOpen "Close" "Expand"}}</span></button>
</div>
</div>
<div class="gh-setting">
@ -47,7 +47,7 @@
{{/liquid-if}}
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "timezoneOpen" this)}} data-test-toggle-timezone><span>{{if timezoneOpen "Close" "Open"}}</span></button>
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "timezoneOpen" this)}} data-test-toggle-timezone><span>{{if timezoneOpen "Close" "Expand"}}</span></button>
</div>
</div>
@ -57,7 +57,7 @@
<div class="gh-setting-title">Publication icon</div>
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
</div>
<div class="gh-setting-action">
<div class="gh-setting-action gh-setting-action-smallimg">
{{#if model.icon}}
<img class="blog-icon" src="{{model.icon}}" alt="icon" role="button" {{action "toggleUploadIconModal"}}>
{{else}}
@ -77,7 +77,7 @@
<div class="gh-setting-title">Publication logo</div>
<div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
</div>
<div class="gh-setting-action">
<div class="gh-setting-action gh-setting-action-smallimg">
{{#if model.logo}}
<img class="blog-logo" src="{{model.logo}}" alt="logo" role="button" {{action "toggleUploadLogoModal"}}>
{{else}}
@ -97,7 +97,7 @@
<div class="gh-setting-title">Publication cover</div>
<div class="gh-setting-desc">An optional large background image for your site</div>
</div>
<div class="gh-setting-action">
<div class="gh-setting-action gh-setting-action-largeimg">
{{#if model.cover}}
<img class="blog-cover" src="{{model.cover}}" alt="cover photo" role="button" {{action "toggleUploadCoverModal"}}>
{{else}}
@ -134,7 +134,7 @@
{{/liquid-if}}
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "socialOpen" this)}} data-test-toggle-social><span>{{if socialOpen "Close" "Open"}}</span></button>
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "socialOpen" this)}} data-test-toggle-social><span>{{if socialOpen "Close" "Expand"}}</span></button>
</div>
</div>

6
app/templates/team/index.hbs
View File

@ -56,14 +56,14 @@
{{#if component.isSending}}
<span>Sending Invite...</span>
{{else}}
<a class="user-list-action" href="#revoke" {{action "revoke" target=component}} data-test-revoke-button>
<a class="apps-configured-action red-hover" href="#revoke" {{action "revoke" target=component}} data-test-revoke-button>
Revoke
</a>
<a class="user-list-action" href="#resend" {{action "resend" target=component}} data-test-resend-button>
<a class="apps-configured-action green-hover" href="#resend" {{action "resend" target=component}} data-test-resend-button>
Resend
</a>
<span class="gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
<span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
{{/if}}
</div>
</div>