mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Card menu styles and editor tweaks
This commit is contained in:
John O'Nolan
Kevin Ansfield
parent
4ceb547db7
commit
49a15a70c5
4 changed files with 258 additions and 31 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
@import "koenig-toolbar.css";
|
@import "koenig-toolbar.css";
|
||||||
@import "koenig-menu.css";
|
@import "koenig-menu.css";
|
||||||
|
@import "cardmenu.css";
|
||||||
|
|
||||||
.editor-holder {
|
.editor-holder {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -47,38 +48,38 @@
|
||||||
|
|
||||||
.__mobiledoc-card .card-handle {
|
.__mobiledoc-card .card-handle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right:0px;
|
right: 0px;
|
||||||
top:0px;
|
top: 0px;
|
||||||
margin-top:-25px;
|
margin-top: -25px;
|
||||||
height:20px;
|
height: 20px;
|
||||||
display:none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.__mobiledoc-card:hover .card-handle {
|
.__mobiledoc-card: hover .card-handle {
|
||||||
display:block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.__mobiledoc-card .card-handle label {
|
.__mobiledoc-card .card-handle label {
|
||||||
font-size:10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.__mobiledoc-card .card-handle button {
|
.__mobiledoc-card .card-handle button {
|
||||||
background-color: var(--lightgrey);
|
background-color: var(--lightgrey);
|
||||||
border:1px solid var(--lightgrey);
|
border: 1px solid var(--midgrey);
|
||||||
font-size:10px;
|
font-size: 10px;
|
||||||
min-width: 80px;
|
min-width: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.__mobiledoc-card textarea {
|
.__mobiledoc-card textarea {
|
||||||
min-height:333px;
|
min-height: 333px;
|
||||||
max-width:900px;
|
max-width: 900px;
|
||||||
outline:none;
|
outline: none;
|
||||||
border:none;
|
border: none;
|
||||||
resize: none;
|
resize: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-handle button:hover {
|
.card-handle button: hover {
|
||||||
background-color: #718087;
|
background-color: #718087;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
@ -91,7 +92,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-handle button.move {
|
.card-handle button.move {
|
||||||
background-image: url('http://localhost:4200/assets/move.png');
|
background-image: url('http: //localhost: 4200/assets/move.png');
|
||||||
background-color: #9fbb58;
|
background-color: #9fbb58;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
@ -103,9 +104,9 @@
|
||||||
|
|
||||||
|
|
||||||
textarea.ed_code {
|
textarea.ed_code {
|
||||||
width:100%;
|
width: 100%;
|
||||||
height:100%;
|
height: 100%;
|
||||||
border:none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -125,7 +126,7 @@ textarea.ed_code {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: #5ba4e5;
|
background-color: #5ba4e5;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
padding:5px 10px 5px 10px;
|
padding: 5px 10px 5px 10px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
-webkit-animation: tooltip-fadein 0.333s;
|
-webkit-animation: tooltip-fadein 0.333s;
|
||||||
animation: tooltip-fadein 0.333s;
|
animation: tooltip-fadein 0.333s;
|
||||||
|
|
@ -133,7 +134,7 @@ textarea.ed_code {
|
||||||
.__mobiledoc-tooltip a {
|
.__mobiledoc-tooltip a {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
}
|
}
|
||||||
.__mobiledoc-tooltip:before {
|
.__mobiledoc-tooltip: before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
|
|
@ -146,4 +147,3 @@ textarea.ed_code {
|
||||||
border-left: 10px solid transparent;
|
border-left: 10px solid transparent;
|
||||||
border-right: 10px solid transparent;
|
border-right: 10px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
68
ghost/admin/app/styles/addons/ghost-editor/cardmenu.css
Normal file
68
ghost/admin/app/styles/addons/ghost-editor/cardmenu.css
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
|
||||||
|
.gh-cardmenu {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 15px;
|
||||||
|
width: 350px;
|
||||||
|
max-height: 460px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: #fff;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 0 1px rgba(99,114,130,0.16), 0 8px 16px rgba(27,39,51,0.08);
|
||||||
|
text-transform: none;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-search {
|
||||||
|
position: relative;
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
margin: -12px 0 -12px -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-search-input {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 10px 0 10px 15px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px 4px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: color(var(--lightgrey) l(+5%));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-label {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-cardmenu-divider {
|
||||||
|
position: sticky;
|
||||||
|
top: -12px;
|
||||||
|
width: 350px;
|
||||||
|
padding: 5px 0;
|
||||||
|
margin: 12px -15px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
background: color(var(--lightgrey) l(+3%) s(-10%));
|
||||||
|
}
|
||||||
|
|
@ -58,20 +58,20 @@
|
||||||
|
|
||||||
{{#if showDeletePostModal}}
|
{{#if showDeletePostModal}}
|
||||||
{{gh-fullscreen-modal "delete-post"
|
{{gh-fullscreen-modal "delete-post"
|
||||||
model=(hash post=model onSuccess=(route-action 'redirectToContentScreen'))
|
model=(hash post=model onSuccess=(route-action 'redirectToContentScreen'))
|
||||||
close=(action "toggleDeletePostModal")
|
close=(action "toggleDeletePostModal")
|
||||||
modifier="action wide"}}
|
modifier="action wide"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if showLeaveEditorModal}}
|
{{#if showLeaveEditorModal}}
|
||||||
{{gh-fullscreen-modal "leave-editor"
|
{{gh-fullscreen-modal "leave-editor"
|
||||||
confirm=(action "leaveEditor")
|
confirm=(action "leaveEditor")
|
||||||
close=(action "toggleLeaveEditorModal")
|
close=(action "toggleLeaveEditorModal")
|
||||||
modifier="action wide"}}
|
modifier="action wide"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if showReAuthenticateModal}}
|
{{#if showReAuthenticateModal}}
|
||||||
{{gh-fullscreen-modal "re-authenticate"
|
{{gh-fullscreen-modal "re-authenticate"
|
||||||
close=(action "toggleReAuthenticateModal")
|
close=(action "toggleReAuthenticateModal")
|
||||||
modifier="action wide"}}
|
modifier="action wide"}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,165 @@
|
||||||
<section class="view-container settings-debug">
|
<section class="view-container settings-debug">
|
||||||
<p class="gh-box gh-box-info"><i class="icon-idea"></i>This is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.</p>
|
<p class="gh-box gh-box-info"><i class="icon-idea"></i>This is a testing ground for experimental features which aren't quite ready for primetime. They may change, break or inexplicably disappear at any time.</p>
|
||||||
|
|
||||||
|
{{!-- START: Card Menu Tamplate --}}
|
||||||
|
<div class="gh-setting-header">Card menu</div>
|
||||||
|
<div class="gh-setting">
|
||||||
|
<div class="gh-cardmenu">
|
||||||
|
<div class="gh-cardmenu-search">
|
||||||
|
<input class="gh-input gh-cardmenu-search-input" type="text" placeholder="Search for a card..."/>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-divider">
|
||||||
|
Section
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
<div class="gh-cardmenu-card">
|
||||||
|
<div class="gh-cardmenu-icon">Icon</div>
|
||||||
|
<div class="gh-cardmenu-label">Image</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{!-- END: Card Menu Tamplate --}}
|
||||||
|
|
||||||
<div class="gh-setting-header">Migration options</div>
|
<div class="gh-setting-header">Migration options</div>
|
||||||
<div class="gh-setting">
|
<div class="gh-setting">
|
||||||
<div class="gh-setting-content">
|
<div class="gh-setting-content">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue