mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
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
This commit is contained in:
Peter Zimon
Kevin Ansfield
parent
ec01d8093b
commit
af03f8f516
10 changed files with 69 additions and 47 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
}]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
}]
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
{{yield}}
|
||||
|
||||
{{#if toolbar}}
|
||||
<ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
|
||||
<ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
|
||||
{{#each toolbar.items as |item|}}
|
||||
{{#if item.divider}}
|
||||
<li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5"></li>
|
||||
{{else}}
|
||||
<li class="ma0">
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title={{item.title}}
|
||||
class="dib dim-lite pa3 pt2 pb2 link {{item.buttonClass}}"
|
||||
class="dib dim-lite pa2 link h8 {{item.buttonClass}}"
|
||||
onmousedown={{action item.action}}
|
||||
>
|
||||
{{#if item.icon}}{{svg-jar item.icon class=(concat item.iconClass (if item.text " mr2") " w4 h4")}} {{/if}}{{item.text}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<input
|
||||
placeholder="Enter url"
|
||||
value={{href}}
|
||||
class="miw-100 pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0"
|
||||
class="miw-100 pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue"
|
||||
autofocus="true"
|
||||
oninput={{action (mut href) value="target.value"}}
|
||||
onkeydown={{action "inputKeydown"}}
|
||||
|
|
@ -9,6 +9,6 @@
|
|||
|
||||
{{#if href}}
|
||||
<button class="kg-input-bar-close" type="button" {{action "clear"}}>
|
||||
{{svg-jar "close" class="ih2"}}
|
||||
{{svg-jar "close" class="ih2 stroke-midlightgrey-l2"}}
|
||||
</button>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
{{svg-jar "koenig/kg-thin-edit" class="stroke-white w4 h4 nudge-top--1"}}
|
||||
</button>
|
||||
</li>
|
||||
<li class="ma0 lh-solid">
|
||||
<li class="ma0">
|
||||
<button
|
||||
type="button"
|
||||
title="Remove"
|
||||
|
|
|
|||
|
|
@ -1,42 +1,42 @@
|
|||
<ul class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
|
||||
<ul class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Bold"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleMarkup" "strong"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-bold" class=(concat (if activeMarkupTagNames.isStrong "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-bold" class=(concat (if activeMarkupTagNames.isStrong "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Italic"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleMarkup" "em"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-italic" class=(concat (if (or activeMarkupTagNames.isEm activeMarkupTagNames.isI) "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-italic" class=(concat (if (or activeMarkupTagNames.isEm activeMarkupTagNames.isI) "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Heading One"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleSection" "h1"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-heading-1" class=(concat (if activeSectionTagNames.isH1 "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-heading-1" class=(concat (if activeSectionTagNames.isH1 "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Heading Two"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleSection" "h2"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-heading-2" class=(concat (if activeSectionTagNames.isH2 "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-heading-2" class=(concat (if activeSectionTagNames.isH2 "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
|
|
@ -46,30 +46,30 @@
|
|||
<button
|
||||
type="button"
|
||||
title="Quote"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleSection" "blockquote"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-quote" class=(concat (if activeSectionTagNames.isBlockquote "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-quote" class=(concat (if activeSectionTagNames.isBlockquote "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Unordered List"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleSection" "ul"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-bullet-list" class=(concat (if activeSectionTagNames.isUl "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-bullet-list" class=(concat (if activeSectionTagNames.isUl "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
<li class="ma0 lh-solid">
|
||||
<button
|
||||
type="button"
|
||||
title="Ordered List"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "toggleSection" "ol"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-numbered-list" class=(concat (if activeSectionTagNames.isOl "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-numbered-list" class=(concat (if activeSectionTagNames.isOl "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
|
|
@ -79,10 +79,10 @@
|
|||
<button
|
||||
type="button"
|
||||
title="Link"
|
||||
class="dib dim-lite pa3 pt2 pb2 link"
|
||||
class="dib dim-lite pa2 link h8"
|
||||
{{action "editLink"}}
|
||||
>
|
||||
{{svg-jar "koenig/kg-link" class=(concat (if activeMarkupTagNames.isA "stroke-blue-l2" "stroke-white") " w4 h4 nudge-top--1")}}
|
||||
{{svg-jar "koenig/kg-link" class=(concat (if activeMarkupTagNames.isA "stroke-blue-l2" "stroke-white") " w4 h4")}}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue