From af03f8f516d913bc2dbeaeee8c3f6d776c55eb8c Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Tue, 24 Apr 2018 11:15:54 +0200 Subject: [PATCH] Koenig - Improve styles (#1008) refs https://github.com/TryGhost/Ghost/issues/9505 - Tweaking UI of link input - Tweaking toolbar menu - Tweaking image toolbar style - Applying image width styles - Tweaking list typography - Fixing empty post placeholder --- .../app/styles/components/koenig-content.css | 31 ++++++++++++----- ghost/admin/app/styles/components/koenig.css | 13 +++++-- ghost/admin/app/styles/patterns/_shame.css | 12 +++---- .../addon/components/koenig-card-html.js | 2 +- .../addon/components/koenig-card-image.js | 10 +++--- .../addon/components/koenig-card-markdown.js | 2 +- .../templates/components/koenig-card.hbs | 6 ++-- .../components/koenig-link-input.hbs | 4 +-- .../components/koenig-link-toolbar.hbs | 2 +- .../templates/components/koenig-toolbar.hbs | 34 +++++++++---------- 10 files changed, 69 insertions(+), 47 deletions(-) diff --git a/ghost/admin/app/styles/components/koenig-content.css b/ghost/admin/app/styles/components/koenig-content.css index 504d89cb3a..221a9200d9 100644 --- a/ghost/admin/app/styles/components/koenig-content.css +++ b/ghost/admin/app/styles/components/koenig-content.css @@ -26,6 +26,7 @@ .koenig-editor__editor h6, .koenig-editor__editor blockquote { margin: 1.6rem 0 0; + min-width: 100%; } @@ -226,16 +227,19 @@ font-size: 2rem; } -.koenig-editor__editor h1 + p, +.koenig-editor__editor h1 + p { + margin: 1.2rem 0 0; +} + .koenig-editor__editor h2 + p { - margin: .8rem 0 0; + margin: 0.8rem 0 0; } .koenig-editor__editor h3 + p, .koenig-editor__editor h4 + p, .koenig-editor__editor h5 + p, .koenig-editor__editor h6 + p { - margin: .4rem 0 0; + margin: .8rem 0 0; } .koenig-editor__editor p + p, @@ -257,17 +261,27 @@ .koenig-editor__editor ul:not(.kg-action-bar), .koenig-editor__editor ol { padding: 0; + min-width: 100%; } -.koenig-editor__editor ul:not(.kg-action-bar) li, -.koenig-editor__editor ol li { - margin: 0.8rem 0 0 2.8rem; +.koenig-editor__editor ul:not(.kg-action-bar) li { + margin: 1.6rem 0 0 2.4rem; + padding: 0 0 0 0.6rem; + line-height: 3.2rem; +} + +.koenig-editor__editor ul:not(.kg-action-bar) li:first-child { + margin: 0 0 0 2.4rem; +} + +.koenig-editor__editor ol li { + margin: 1.6rem 0 0 2.2rem; + padding: 0 0 0 0.8rem; line-height: 3.2rem; } -.koenig-editor__editor ul:not(.kg-action-bar) li:first-child, .koenig-editor__editor ol li:first-child { - margin: 0 0 0 2.8rem; + margin: 0 0 0 2.2rem; } .koenig-editor__editor p + ul:not(.kg-action-bar), @@ -310,6 +324,7 @@ .koenig-editor__editor > div { line-height: 0; + min-width: 100%; } .koenig-editor__editor > div + div { diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css index f74daebf66..8dc9cf2391 100644 --- a/ghost/admin/app/styles/components/koenig.css +++ b/ghost/admin/app/styles/components/koenig.css @@ -317,6 +317,9 @@ /* TODO: update to match Ghost styles */ .__mobiledoc-editor { + display: flex; + flex-direction: column; + align-items: center; position: relative; font-family: var(--font-family); font-size: 1.7rem; @@ -335,11 +338,17 @@ } .__mobiledoc-editor.__has-no-content:after { + font-family: georgia,serif; + font-weight: 300; + letter-spacing: .02rem; + line-height: 1.6em; + font-size: 2rem; + min-width: 100%; content: attr(data-placeholder); - color: #bbb; + color: var(--midgrey-l2); cursor: text; position: absolute; - top: 0; + top: 16px; } /* override of global.css block display */ diff --git a/ghost/admin/app/styles/patterns/_shame.css b/ghost/admin/app/styles/patterns/_shame.css index 8197795cb1..2c76f40054 100644 --- a/ghost/admin/app/styles/patterns/_shame.css +++ b/ghost/admin/app/styles/patterns/_shame.css @@ -1,9 +1,10 @@ /* Shame /* ---------------------------------------------------------- */ -/* TODO: Kill with fire */ +/* TODO: Kill with fire 🔥 */ .kg-card-selected { border: 1px solid var(--blue); + box-shadow: 0 0 0 1px #3eb0ef; } /* force a 16:10 aspect ratio */ @@ -19,12 +20,9 @@ } /* similar to .kg-action-bar to add a positionable triangle to a popup */ -.kg-input-bar:after, +/* .kg-input-bar:after, .kg-input-bar:before { position: absolute; - /* bottom: 150%; */ - /* left: 50%; */ - /* margin-left: -5px; */ top: 34px; left: calc(50% - 8px); width: 0; @@ -39,10 +37,10 @@ border-left: 7px solid transparent; } .kg-input-bar:before { - border-top: 8px solid var(--darkgrey-d2); + border-top: 8px solid var(--blue); border-right: 8px solid transparent; border-left: 8px solid transparent; -} +} */ .kg-input-bar-close { position: absolute; diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js index db7bed6c96..eef6918607 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js @@ -27,7 +27,7 @@ export default Component.extend({ icon: 'koenig/kg-edit-v2', iconClass: 'stroke-white', title: 'Edit', - text: 'Edit', + text: '', action: run.bind(this, this.get('editCard')) }] }; diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js index 22cb045cec..42af804038 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js @@ -35,7 +35,7 @@ export default Component.extend({ return 'image-wide'; } - if (imageStyle === 'wide') { + if (imageStyle === 'full') { return 'image-full'; } @@ -49,21 +49,21 @@ export default Component.extend({ items.push({ title: 'Regular', icon: 'koenig/kg-img-regular', - iconClass: `${!imageStyle ? 'stroke-blue-l2' : 'stroke-white'} nudge-top--1`, + iconClass: `${!imageStyle ? 'stroke-blue-l2' : 'stroke-white'}`, action: run.bind(this, this._changeImageStyle, '') }); items.push({ title: 'Wide', icon: 'koenig/kg-img-wide', - iconClass: `${imageStyle === 'wide' ? 'stroke-blue-l2' : 'stroke-white'} nudge-top--1`, + iconClass: `${imageStyle === 'wide' ? 'stroke-blue-l2' : 'stroke-white'}`, action: run.bind(this, this._changeImageStyle, 'wide') }); items.push({ title: 'Full', icon: 'koenig/kg-img-full', - iconClass: `${imageStyle === 'full' ? 'stroke-blue-l2' : 'stroke-white'} nudge-top--1`, + iconClass: `${imageStyle === 'full' ? 'stroke-blue-l2' : 'stroke-white'}`, action: run.bind(this, this._changeImageStyle, 'full') }); @@ -73,7 +73,7 @@ export default Component.extend({ items.push({ title: 'Replace image', icon: 'koenig/kg-replace', - iconClass: 'nudge-top--1', + iconClass: '', action: run.bind(this, this._triggerFileDialog) }); } diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js index b5c7d1b828..ba962d750c 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js @@ -33,7 +33,7 @@ export default Component.extend({ icon: 'koenig/kg-edit-v2', iconClass: 'stroke-white', title: 'Edit', - text: 'Edit', + text: '', action: run.bind(this, this.get('editCard')) }] }; diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs index 921b72f554..a9633b1163 100644 --- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs +++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card.hbs @@ -3,16 +3,16 @@ {{yield}} {{#if toolbar}} -