mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
Refactor blog-navigation settings screen
- Better markup - Cleaner CSS - Fixed icon implementation - New grab handle icon - Better mobile styles
This commit is contained in:
John O'Nolan
parent
cecf34217a
commit
66e9a95fe7
12 changed files with 107 additions and 114 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import Ember from 'ember';
|
||||
var NavItemComponent = Ember.Component.extend({
|
||||
classNames: 'navigation-item',
|
||||
classNames: 'gh-blognav-item',
|
||||
|
||||
attributeBindings: ['order:data-order'],
|
||||
order: Ember.computed.readOnly('navItem.order'),
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
height: 60px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--darkgrey);
|
||||
text-indent: 20px;
|
||||
letter-spacing: -1px;
|
||||
font-size: 3.2rem;
|
||||
|
|
|
|||
|
|
@ -5,119 +5,103 @@
|
|||
/* Navigation
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.navigation-item {
|
||||
.gh-blognav {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.gh-blognav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.navigation-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item:last-child {
|
||||
padding-left: 17px;
|
||||
/* simulate .navigation-item-drag-handle width + horizontal padding */
|
||||
}
|
||||
|
||||
.navigation-item:last-child .navigation-item-drag-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-item-drag-handle {
|
||||
padding: 6px 17px 0 0;
|
||||
width: 17px;
|
||||
.gh-blognav-grab {
|
||||
padding: 0 16px 0 0;
|
||||
width: 16px;
|
||||
color: #d1d1d1;
|
||||
text-indent: -4px;
|
||||
font-size: 16px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item-drag-handle:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
margin-top: -9px;
|
||||
}
|
||||
.gh-blognav-url .fake-placeholder {
|
||||
color: #c1c1c1;
|
||||
}
|
||||
|
||||
.navigation-inputs {
|
||||
.gh-blognav-line {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navigation-item-url .fake-placeholder {
|
||||
color: lightgrey;
|
||||
.gh-blognav-label {
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.navigation-item-label {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.navigation-item-label,
|
||||
.navigation-item-url {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.gh-blognav-url {
|
||||
flex-grow: 3;
|
||||
}
|
||||
|
||||
@media (min-width: 601px) {
|
||||
.navigation-inputs {
|
||||
display: flex;
|
||||
}
|
||||
.navigation-item-label {
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.navigation-item-url {
|
||||
flex-grow: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-item-action {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-left: 10px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.navigation-item-action button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-trash:before {
|
||||
color: var(--midbrown);
|
||||
font-size: 16px;
|
||||
.gh-blognav-delete {
|
||||
padding: 8px 0 8px 10px;
|
||||
color: #c1c1c1;
|
||||
font-size: 14px;
|
||||
transition: color 0.1s linear;
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-trash:hover:before {
|
||||
.gh-blognav-delete:hover,
|
||||
.gh-blognav-delete:focus {
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-add:before {
|
||||
padding: 3px;
|
||||
.gh-blognav-add {
|
||||
margin-right: -2px;
|
||||
margin-left: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--green);
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
line-height: 8px;
|
||||
transition: background 0.1s linear;
|
||||
}
|
||||
|
||||
.navigation-item-action .icon-add:hover:before {
|
||||
.gh-blognav-add:hover,
|
||||
.gh-blognav-add:focus {
|
||||
background: color(var(--green) lightness(-10%));
|
||||
}
|
||||
|
||||
.gh-blognav-item:last-child {
|
||||
padding-left: calc(16px + 20px);
|
||||
/* icon-grab + nav-item padding) */
|
||||
}
|
||||
|
||||
.gh-blognav-item:last-child .gh-blognav-grab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Remove space between inputs on smaller screens */
|
||||
@media (max-width: 800px) {
|
||||
.gh-blognav-label {
|
||||
margin-right: -1px;
|
||||
}
|
||||
.gh-blognav-label input {
|
||||
border-right-color: #eaeaea;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.gh-blognav-url input {
|
||||
border-left-color: #eaeaea;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.gh-blognav-item input:focus {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Code Injection
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ legend {
|
|||
margin: 2em 0;
|
||||
width: 100%;
|
||||
border-bottom: #e1e1e1 1px solid;
|
||||
color: var(--brown);
|
||||
color: #b1b1b1;
|
||||
font-size: 1.2em;
|
||||
line-height: 2.0em;
|
||||
}
|
||||
|
|
@ -50,7 +50,7 @@ input {
|
|||
|
||||
.form-group p {
|
||||
margin: 4px 0 0 0;
|
||||
color: #b3b2a8;
|
||||
color: #b1b1b1;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
|
|
@ -107,9 +107,9 @@ select {
|
|||
display: block;
|
||||
padding: 8px 10px;
|
||||
width: 100%;
|
||||
border: 1px solid #e0dfd7;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--darkgrey);
|
||||
color: #666;
|
||||
font-size: 1.4rem;
|
||||
font-weight: normal;
|
||||
user-select: text;
|
||||
|
|
@ -128,7 +128,7 @@ select.error {
|
|||
.gh-select:focus,
|
||||
select:focus {
|
||||
outline: 0;
|
||||
border-color: var(--brown);
|
||||
border-color: #b1b1b1;
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -160,7 +160,7 @@ textarea {
|
|||
|
||||
.for-radio label:hover input:not(:checked) + .input-toggle-component,
|
||||
.for-checkbox label:hover input:not(:checked) + .input-toggle-component {
|
||||
border-color: var(--midbrown);
|
||||
border-color: #e1e1e1;
|
||||
}
|
||||
|
||||
.for-radio input,
|
||||
|
|
@ -321,6 +321,6 @@ textarea {
|
|||
padding: 7px 10px 7px 8px;
|
||||
}
|
||||
.gh-select:focus {
|
||||
border-color: var(--brown);
|
||||
border-color: #b1b1b1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -247,3 +247,9 @@
|
|||
.icon-check:before {
|
||||
content: "\e043";
|
||||
}
|
||||
.icon-grab:before {
|
||||
content: "\e044";
|
||||
}
|
||||
.icon-add2:before {
|
||||
content: "\e045";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
{{#unless navItem.last}}
|
||||
<span class="navigation-item-drag-handle icon-grab">
|
||||
<span class="sr-only">Reorder</span>
|
||||
</span>
|
||||
<span class="gh-blognav-grab icon-grab">
|
||||
<span class="sr-only">Reorder</span>
|
||||
</span>
|
||||
{{/unless}}
|
||||
<div class="navigation-inputs">
|
||||
<span class="navigation-item-label">
|
||||
|
||||
<div class="gh-blognav-line">
|
||||
<span class="gh-blognav-label">
|
||||
{{gh-trim-focus-input class="gh-input" focus=navItem.last placeholder="Label" value=navItem.label}}
|
||||
</span>
|
||||
<span class="navigation-item-url">
|
||||
<span class="gh-blognav-url">
|
||||
{{gh-navitem-url-input class="gh-input" baseUrl=baseUrl url=navItem.url last=navItem.last change="updateUrl"}}
|
||||
</span>
|
||||
</div>
|
||||
<span class="navigation-item-action">
|
||||
{{#if navItem.last}}
|
||||
<button type="button" class="add-navigation-link icon-add" {{action "addItem"}}>
|
||||
<span class="sr-only">Add</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="navigation-delete icon-trash" {{action "deleteItem" navItem}}>
|
||||
<span class="sr-only">Delete</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
</span>
|
||||
|
||||
{{#if navItem.last}}
|
||||
<button type="button" class="gh-blognav-add" {{action "addItem"}}>
|
||||
<i class="icon-add2"><span class="sr-only">Add</span></i>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-blognav-delete" {{action "deleteItem" navItem}}>
|
||||
<i class="icon-trash"><span class="sr-only">Delete</span></i>
|
||||
</button>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
</section>
|
||||
</header>
|
||||
|
||||
<section class="view-content settings-navigation">
|
||||
<form id="settings-navigation" class="js-settings-navigation" novalidate="novalidate">
|
||||
<section class="view-container">
|
||||
<form id="settings-navigation" class="gh-blognav js-gh-blognav" novalidate="novalidate">
|
||||
{{#each navItem in navigationItems}}
|
||||
{{gh-navitem navItem=navItem baseUrl=blogUrl addItem="addItem" deleteItem="deleteItem" updateUrl="updateUrl"}}
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ import BaseView from 'ghost/views/settings/content-base';
|
|||
var SettingsNavigationView = BaseView.extend({
|
||||
|
||||
didInsertElement: function () {
|
||||
var navContainer = Ember.$('.js-settings-navigation'),
|
||||
navElements = '.navigation-item:not(.navigation-item:last-child)',
|
||||
var navContainer = Ember.$('.js-gh-blognav'),
|
||||
navElements = '.gh-blognav-item:not(.gh-blognav-item:last-child)',
|
||||
self = this;
|
||||
|
||||
navContainer.sortable({
|
||||
handle: '.navigation-item-drag-handle',
|
||||
handle: '.gh-blognav-grab',
|
||||
items: navElements,
|
||||
|
||||
start: function (event, ui) {
|
||||
|
|
@ -28,7 +28,7 @@ var SettingsNavigationView = BaseView.extend({
|
|||
},
|
||||
|
||||
willDestroyElement: function () {
|
||||
Ember.$('.js-settings-navigation').sortable('destroy');
|
||||
Ember.$('.js-gh-blognav').sortable('destroy');
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -75,4 +75,6 @@
|
|||
<glyph unicode="" d="M501 427l-32 0 0 32c0 6-4 10-10 10l-128 0c-31 0-52-10-64-29-12 19-34 29-64 29l-128 0c-6 0-11-4-11-10l0-32-32 0c-6 0-11-5-11-11l0-341c0-6 5-11 11-11l128 0c19 0 64-5 64-53 0-6 5-11 11-11l64 0c6 0 10 5 10 11 0 48 45 53 64 53l128 0c6 0 11 5 11 11l0 341c0 6-5 11-11 11z m-170 21l117 0 0-320-117 0c-23 0-41-6-54-17l0 284c0 37 17 53 54 53z m-246 0l118 0c37 0 53-16 53-53l0-284c-12 11-30 17-53 17l-118 0z m406-363l-118 0c-47 0-79-24-84-64l-44 0c-5 40-37 64-85 64l-117 0 0 320 21 0 0-288c0-6 5-10 11-10l128 0c37 0 53-17 53-54 0-6 5-10 11-10 6 0 10 4 10 10 0 37 17 54 54 54l128 0c6 0 10 4 10 10l0 288 22 0z"/>
|
||||
<glyph unicode="" d="M481 395c-13-18-28-34-46-47 0-3 0-7 0-12 0-25-3-50-11-74-7-25-18-49-33-71-14-23-32-43-52-61-21-17-45-31-74-41-29-11-60-16-92-16-52 0-99 14-142 42 7-1 14-2 22-2 43 0 81 14 115 40-20 0-38 6-54 18-16 12-27 27-33 46 7-1 13-2 18-2 8 0 16 1 24 4-21 4-39 15-53 31-14 17-21 37-21 59l0 1c13-7 27-11 42-11-13 8-23 19-30 32-8 14-11 29-11 44 0 17 4 33 12 47 23-28 51-51 84-68 33-17 69-27 107-29-2 8-3 15-3 22 0 25 9 47 27 65 18 18 40 27 66 27 26 0 49-10 67-29 21 4 40 11 59 22-7-22-21-39-41-51 18 2 35 7 53 14z"/>
|
||||
<glyph unicode="" d="M355 338l-152-142-46 46c-4 4-11 4-15 0-4-4-4-11 0-15l53-53c2-2 5-3 8-3 2 0 5 1 7 3l160 149c4 4 4 11 0 15-4 4-10 4-15 0z m-99 174c-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256 0 141-115 256-256 256z m0-491c-129 0-235 106-235 235 0 129 106 235 235 235 129 0 235-106 235-235 0-129-106-235-235-235z"/>
|
||||
<glyph unicode="" d="M146 73l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 146l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 147l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z m-147 146l73 0 0-73-73 0z m147 0l73 0 0-73-73 0z"/>
|
||||
<glyph unicode="" d="M491 277l-213 0 0 214c0 11-10 21-21 21 0 0 0 0 0 0-12 0-22-10-22-21l0-214-214 0c-11 0-21-9-21-21 0-12 10-21 21-21l214 0 0-214c0-11 9-21 21-21l0 0c12 0 21 10 21 21l1 214 213 0c12 0 21 9 21 21 0 12-9 21-21 21z"/>
|
||||
</font></defs></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Reference in a new issue