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-menu.css";
|
||||
@import "cardmenu.css";
|
||||
|
||||
.editor-holder {
|
||||
height: 100%;
|
||||
|
|
@ -47,38 +48,38 @@
|
|||
|
||||
.__mobiledoc-card .card-handle {
|
||||
position: absolute;
|
||||
right:0px;
|
||||
top:0px;
|
||||
margin-top:-25px;
|
||||
height:20px;
|
||||
display:none;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
margin-top: -25px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.__mobiledoc-card:hover .card-handle {
|
||||
display:block;
|
||||
.__mobiledoc-card: hover .card-handle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.__mobiledoc-card .card-handle label {
|
||||
font-size:10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
||||
.__mobiledoc-card .card-handle button {
|
||||
background-color: var(--lightgrey);
|
||||
border:1px solid var(--lightgrey);
|
||||
font-size:10px;
|
||||
border: 1px solid var(--midgrey);
|
||||
font-size: 10px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.__mobiledoc-card textarea {
|
||||
min-height:333px;
|
||||
max-width:900px;
|
||||
outline:none;
|
||||
border:none;
|
||||
min-height: 333px;
|
||||
max-width: 900px;
|
||||
outline: none;
|
||||
border: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.card-handle button:hover {
|
||||
.card-handle button: hover {
|
||||
background-color: #718087;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -91,7 +92,7 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
margin-left: -10px;
|
||||
margin-right: 20px;
|
||||
|
|
@ -103,9 +104,9 @@
|
|||
|
||||
|
||||
textarea.ed_code {
|
||||
width:100%;
|
||||
height:100%;
|
||||
border:none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -125,7 +126,7 @@ textarea.ed_code {
|
|||
position: absolute;
|
||||
background-color: #5ba4e5;
|
||||
border-radius: 3px;
|
||||
padding:5px 10px 5px 10px;
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: #FFF;
|
||||
-webkit-animation: tooltip-fadein 0.333s;
|
||||
animation: tooltip-fadein 0.333s;
|
||||
|
|
@ -133,7 +134,7 @@ textarea.ed_code {
|
|||
.__mobiledoc-tooltip a {
|
||||
color: #FFF;
|
||||
}
|
||||
.__mobiledoc-tooltip:before {
|
||||
.__mobiledoc-tooltip: before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
|
|
@ -146,4 +147,3 @@ textarea.ed_code {
|
|||
border-left: 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}}
|
||||
{{gh-fullscreen-modal "delete-post"
|
||||
model=(hash post=model onSuccess=(route-action 'redirectToContentScreen'))
|
||||
close=(action "toggleDeletePostModal")
|
||||
modifier="action wide"}}
|
||||
model=(hash post=model onSuccess=(route-action 'redirectToContentScreen'))
|
||||
close=(action "toggleDeletePostModal")
|
||||
modifier="action wide"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showLeaveEditorModal}}
|
||||
{{gh-fullscreen-modal "leave-editor"
|
||||
confirm=(action "leaveEditor")
|
||||
close=(action "toggleLeaveEditorModal")
|
||||
modifier="action wide"}}
|
||||
confirm=(action "leaveEditor")
|
||||
close=(action "toggleLeaveEditorModal")
|
||||
modifier="action wide"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showReAuthenticateModal}}
|
||||
{{gh-fullscreen-modal "re-authenticate"
|
||||
close=(action "toggleReAuthenticateModal")
|
||||
modifier="action wide"}}
|
||||
close=(action "toggleReAuthenticateModal")
|
||||
modifier="action wide"}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,165 @@
|
|||
<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>
|
||||
|
||||
{{!-- 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">
|
||||
<div class="gh-setting-content">
|
||||
|
|
@ -85,4 +244,4 @@
|
|||
{{gh-fullscreen-modal "delete-all"
|
||||
close=(action "toggleDeleteAllModal")
|
||||
modifier="action wide"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue