Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Card menu styles and editor tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnONolan @kevinansfield
JohnONolan authored and kevinansfield committed Mar 2, 2017
1 parent bad4754 commit e98c7be
Show file tree
Hide file tree
Showing 4 changed files with 258 additions and 31 deletions.
44 changes: 22 additions & 22 deletions app/styles/addons/gh-koenig/gh-koenig.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "koenig-toolbar.css";
@import "koenig-menu.css";
@import "cardmenu.css";

.editor-holder {
height: 100%;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -103,9 +104,9 @@


textarea.ed_code {
width:100%;
height:100%;
border:none;
width: 100%;
height: 100%;
border: none;
}


Expand All @@ -125,15 +126,15 @@ 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;
}
.__mobiledoc-tooltip a {
color: #FFF;
}
.__mobiledoc-tooltip:before {
.__mobiledoc-tooltip: before {
content: '';
position: absolute;

Expand All @@ -146,4 +147,3 @@ textarea.ed_code {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

68 changes: 68 additions & 0 deletions app/styles/addons/ghost-editor/cardmenu.css
View file
Original file line number Diff line number Diff line change
@@ -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%));
}
16 changes: 8 additions & 8 deletions app/templates/editor/edit.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
161 changes: 160 additions & 1 deletion app/templates/settings/labs.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -85,4 +244,4 @@
{{gh-fullscreen-modal "delete-all"
close=(action "toggleDeleteAllModal")
modifier="action wide"}}
{{/if}}
{{/if}}

0 comments on commit e98c7be

Please sign in to comment.