From afdc20d31e2890974ad62cf342683102a484fd21 Mon Sep 17 00:00:00 2001 From: John O'Nolan Date: Mon, 27 Feb 2017 13:31:01 +0700 Subject: [PATCH] Update design screen styles, fix login bugs Refs https://github.com/TryGhost/Ghost/issues/8021 --- ghost/admin/app/components/gh-theme-table.js | 3 +- ghost/admin/app/styles/components/badges.css | 2 + ghost/admin/app/styles/layouts/apps.css | 54 ++----- ghost/admin/app/styles/layouts/auth.css | 15 +- ghost/admin/app/styles/layouts/settings.css | 133 +++++------------- ghost/admin/app/styles/layouts/users.css | 7 - ghost/admin/app/styles/patterns/buttons.css | 10 +- ghost/admin/app/styles/patterns/global.css | 35 +++++ .../templates/components/gh-theme-table.hbs | 49 ++++--- ghost/admin/app/templates/settings/design.hbs | 68 ++++----- .../admin/app/templates/settings/general.hbs | 12 +- ghost/admin/app/templates/team/index.hbs | 6 +- 12 files changed, 168 insertions(+), 226 deletions(-) diff --git a/ghost/admin/app/components/gh-theme-table.js b/ghost/admin/app/components/gh-theme-table.js index 183a8671da..c2f4cb68be 100644 --- a/ghost/admin/app/components/gh-theme-table.js +++ b/ghost/admin/app/components/gh-theme-table.js @@ -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; diff --git a/ghost/admin/app/styles/components/badges.css b/ghost/admin/app/styles/components/badges.css index c03f6e739e..4bcb4ac9d3 100644 --- a/ghost/admin/app/styles/components/badges.css +++ b/ghost/admin/app/styles/components/badges.css @@ -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; } diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css index 0c274e5fe0..cf7a4b1520 100644 --- a/ghost/admin/app/styles/layouts/apps.css +++ b/ghost/admin/app/styles/layouts/apps.css @@ -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; - } -} diff --git a/ghost/admin/app/styles/layouts/auth.css b/ghost/admin/app/styles/layouts/auth.css index 8c8c210acb..47bf4c2a9d 100644 --- a/ghost/admin/app/styles/layouts/auth.css +++ b/ghost/admin/app/styles/layouts/auth.css @@ -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; } diff --git a/ghost/admin/app/styles/layouts/settings.css b/ghost/admin/app/styles/layouts/settings.css index 7dd5f862af..1c94668e34 100644 --- a/ghost/admin/app/styles/layouts/settings.css +++ b/ghost/admin/app/styles/layouts/settings.css @@ -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; diff --git a/ghost/admin/app/styles/layouts/users.css b/ghost/admin/app/styles/layouts/users.css index a4c91a9427..c7b7e4a090 100644 --- a/ghost/admin/app/styles/layouts/users.css +++ b/ghost/admin/app/styles/layouts/users.css @@ -51,13 +51,6 @@ opacity: 0; } -.user-list-action { - margin-right: 15px; - text-decoration: underline; - text-transform: uppercase; - font-size: 11px; -} - /* Role Labels /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index d9f5b588ce..ac77d3a97c 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -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 */ diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css index e5d839e7a0..91fef490a7 100644 --- a/ghost/admin/app/styles/patterns/global.css +++ b/ghost/admin/app/styles/patterns/global.css @@ -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 /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/templates/components/gh-theme-table.hbs b/ghost/admin/app/templates/components/gh-theme-table.hbs index c69f03e98a..d015c57f37 100644 --- a/ghost/admin/app/templates/components/gh-theme-table.hbs +++ b/ghost/admin/app/templates/components/gh-theme-table.hbs @@ -1,32 +1,45 @@ +
{{#if sortedThemes}} -
- {{#each sortedThemes as |theme|}} -
-
- {{theme.label}} + + {{#each sortedThemes as |theme|}} +
+
+
+
+

{{theme.label}}

+

Version {{theme.version}}

-
+
+
+
+ {{!--Delete--}} {{#if theme.isDeletable}} - - Delete - + Delete {{/if}} - - - Download - - + {{!--Download--}} + Download + {{!--Active Label / Activate Button--}} {{#if theme.active}} - Active + Active {{else}} - + Activate {{/if}}
- {{/each}} +
+ {{/each}} + {{else}} - No theme found! +
+
+
+

No themes found

+

Please upload a theme to continue

+
+
+
{{/if}} +
diff --git a/ghost/admin/app/templates/settings/design.hbs b/ghost/admin/app/templates/settings/design.hbs index f7032f4dd6..1ff151d16a 100644 --- a/ghost/admin/app/templates/settings/design.hbs +++ b/ghost/admin/app/templates/settings/design.hbs @@ -8,49 +8,43 @@
Navigation
-
-
-
- {{#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"}} -
-
+
+
+ {{#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"}} +
Themes
-
-
-
- {{gh-theme-table - themes=themes - activeTheme=model.activeTheme - activateTheme=(action "setTheme") - downloadTheme=(action "downloadTheme") - deleteTheme=(action "deleteTheme")}} +
+ {{gh-theme-table + themes=themes + activeTheme=model.activeTheme + activateTheme=(action "setTheme") + downloadTheme=(action "downloadTheme") + deleteTheme=(action "deleteTheme")}} -
- {{#link-to "settings.design.uploadtheme" class="gh-btn gh-btn-green" data-test-upload-theme-button=true}} - Upload a theme - {{/link-to}} -
+ {{#link-to "settings.design.uploadtheme" class="gh-btn gh-btn-green gh-themes-uploadbtn" data-test-upload-theme-button=true}} + Upload a theme + {{/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}} -
-
+ + {{#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}}
+
diff --git a/ghost/admin/app/templates/settings/general.hbs b/ghost/admin/app/templates/settings/general.hbs index 0a66323294..f29316453d 100644 --- a/ghost/admin/app/templates/settings/general.hbs +++ b/ghost/admin/app/templates/settings/general.hbs @@ -30,7 +30,7 @@ {{/liquid-if}}
- +
@@ -47,7 +47,7 @@ {{/liquid-if}}
- +
@@ -57,7 +57,7 @@
Publication icon
A square, social icon used in the UI of your publication, at least 60x60px
-
+
{{#if model.icon}} icon {{else}} @@ -77,7 +77,7 @@
Publication logo
The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px
-
+
{{#if model.logo}} {{else}} @@ -97,7 +97,7 @@
Publication cover
An optional large background image for your site
-
+
{{#if model.cover}} cover photo {{else}} @@ -134,7 +134,7 @@ {{/liquid-if}}
- +
diff --git a/ghost/admin/app/templates/team/index.hbs b/ghost/admin/app/templates/team/index.hbs index 6cef9e466f..72b36e21c7 100644 --- a/ghost/admin/app/templates/team/index.hbs +++ b/ghost/admin/app/templates/team/index.hbs @@ -56,14 +56,14 @@ {{#if component.isSending}} Sending Invite... {{else}} - + Revoke - + Resend - {{invite.role.name}} + {{invite.role.name}} {{/if}}