Styled Nav Editor
Created new CSS styles for dash nav editor and updated the appropriate controller scripts. Also updated the icons for the main nav.
This commit is contained in:
parent
1b89d1d072
commit
78bfe4596b
8 changed files with 92 additions and 72 deletions
|
@ -5,35 +5,26 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=sdsdsds">
|
<link rel="stylesheet" type="text/css" href="/assets/css/dash/start.css?=sdsdsds">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block mainContent %}
|
{% block mainContent %}
|
||||||
<div id="nav-index">
|
<article role="navigation">
|
||||||
<div id="nav-index-wrapper">
|
<section id="nav-items">
|
||||||
<div id="nav-pages">
|
|
||||||
{% for item in menu %}
|
{% for item in menu %}
|
||||||
<div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
|
<div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
|
||||||
<svg id="item-arrows">
|
<i class="ti ti-arrows-move-vertical"></i>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
|
|
||||||
</svg>
|
|
||||||
<label>{{ item.title }}</label>
|
<label>{{ item.title }}</label>
|
||||||
<div id="nav-btns">
|
<div id="nav-btns">
|
||||||
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
|
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
|
||||||
<svg>
|
<i class="ti ti-edit"></i>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
<button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
|
<button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
|
||||||
<svg>
|
<i class="ti ti-x"></i>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</article>
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -6,23 +6,17 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a id="settings" href="/dashboard/settings" title="settings">
|
<a id="settings" href="/dashboard/settings" title="settings">
|
||||||
<button>
|
<button>
|
||||||
<svg role="icon">
|
<i class="ti ti-home-cog"></i>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
|
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
|
||||||
<button>
|
<button>
|
||||||
<svg role="icon">
|
<i class="ti ti-menu-2"></i>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
<a id="navigation" href="/dashboard/logout" title="log out">
|
<a id="navigation" href="/dashboard/logout" title="log out">
|
||||||
<button>
|
<button>
|
||||||
<svg role="icon">
|
<i class="ti ti-logout"></i>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -88,6 +88,8 @@ header > nav > div[role="nav-right"] button {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
header > nav > div[role="nav-right"] div[role="submenu"] {
|
header > nav > div[role="nav-right"] div[role="submenu"] {
|
||||||
|
|
34
public/assets/css/dash/navigation.css
Normal file
34
public/assets/css/dash/navigation.css
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
article[role="navigation"] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 100px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[role="navigation"] > section > div.nav-item {
|
||||||
|
display: block;
|
||||||
|
width: 98%;
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--highlight);
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[role="navigation"] > section > div.nav-item > label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 12px 0 0 10px;
|
||||||
|
vertical-align: top;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[role="navigation"] > section > div.nav-item > div#nav-btns {
|
||||||
|
float: right;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
article[role="navigation"] > section > div.nav-item > div#nav-btns button {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
|
@ -9,3 +9,4 @@
|
||||||
@import url("page-editor.css");
|
@import url("page-editor.css");
|
||||||
@import url("page-editor-highlights.css");
|
@import url("page-editor-highlights.css");
|
||||||
@import url("settings.css");
|
@import url("settings.css");
|
||||||
|
@import url("navigation.css");
|
||||||
|
|
|
@ -7482,7 +7482,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
syncMenu() {
|
syncMenu() {
|
||||||
let navData = [];
|
let navData = [];
|
||||||
let items = document.getElementById("nav-pages").children;
|
let items = document.getElementById("nav-items").children;
|
||||||
for(let index = 0; index < items.length; index++)navData.push({
|
for(let index = 0; index < items.length; index++)navData.push({
|
||||||
title: items[index].getElementsByTagName("label")[0].innerHTML,
|
title: items[index].getElementsByTagName("label")[0].innerHTML,
|
||||||
id: items[index].id,
|
id: items[index].id,
|
||||||
|
@ -7499,7 +7499,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
removeItem(id) {
|
removeItem(id) {
|
||||||
document.getElementById("nav-pages").removeChild(document.getElementById(id));
|
document.getElementById("nav-items").removeChild(document.getElementById(id));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7523,7 +7523,7 @@ class $18c0afb4f3b7cd5c$export$2e2bcd8739ae039 {
|
||||||
start() {
|
start() {
|
||||||
//grabs elements and makes them sortables
|
//grabs elements and makes them sortables
|
||||||
let self = this;
|
let self = this;
|
||||||
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-pages"), {
|
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-items"), {
|
||||||
onUpdate: ()=>{
|
onUpdate: ()=>{
|
||||||
new (0, $24d614592ba94b67$export$2e2bcd8739ae039)().syncMenu().then((data)=>{
|
new (0, $24d614592ba94b67$export$2e2bcd8739ae039)().syncMenu().then((data)=>{
|
||||||
$18c0afb4f3b7cd5c$var$notify.alert("Updating Menu", null);
|
$18c0afb4f3b7cd5c$var$notify.alert("Updating Menu", null);
|
||||||
|
|
|
@ -8,14 +8,14 @@ export default class NavActions {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
syncMenu() {
|
syncMenu() {
|
||||||
let navData = [];
|
let navData = [];
|
||||||
let items = document.getElementById("nav-pages").children;
|
let items = document.getElementById('nav-items').children;
|
||||||
for (let index = 0; index < items.length; index++) {
|
for (let index = 0; index < items.length; index++) {
|
||||||
navData.push({
|
navData.push({
|
||||||
title: items[index].getElementsByTagName("label")[0].innerHTML,
|
title: items[index].getElementsByTagName('label')[0].innerHTML,
|
||||||
id: items[index].id,
|
id: items[index].id,
|
||||||
slug: items[index].getAttribute("data-slug"),
|
slug: items[index].getAttribute('data-slug'),
|
||||||
uuid: items[index].getAttribute("data-uuid"),
|
uuid: items[index].getAttribute('data-uuid'),
|
||||||
path: items[index].getAttribute("data-path")
|
path: items[index].getAttribute('data-path')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -26,9 +26,7 @@ export default class NavActions {
|
||||||
}
|
}
|
||||||
|
|
||||||
removeItem(id) {
|
removeItem(id) {
|
||||||
document
|
document.getElementById('nav-items').removeChild(document.getElementById(id));
|
||||||
.getElementById("nav-pages")
|
|
||||||
.removeChild(document.getElementById(id));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
|
@ -20,7 +20,7 @@ export default class NavIndex {
|
||||||
start() {
|
start() {
|
||||||
//grabs elements and makes them sortables
|
//grabs elements and makes them sortables
|
||||||
let self = this;
|
let self = this;
|
||||||
Sortable.create(document.getElementById('nav-pages'), {
|
Sortable.create(document.getElementById('nav-items'), {
|
||||||
onUpdate: () => {
|
onUpdate: () => {
|
||||||
new NavActions().syncMenu().then(data => {
|
new NavActions().syncMenu().then(data => {
|
||||||
notify.alert('Updating Menu', null);
|
notify.alert('Updating Menu', null);
|
||||||
|
|
Loading…
Reference in a new issue