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 %}
|
||||
|
||||
{% 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 %}
|
||||
|
||||
{% block mainContent %}
|
||||
<div id="nav-index">
|
||||
<div id="nav-index-wrapper">
|
||||
<div id="nav-pages">
|
||||
{% for item in menu %}
|
||||
<div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
|
||||
<svg id="item-arrows">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
|
||||
</svg>
|
||||
<label>{{ item.title }}</label>
|
||||
<div id="nav-btns">
|
||||
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
|
||||
<svg>
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
|
||||
<svg>
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<article role="navigation">
|
||||
<section id="nav-items">
|
||||
{% for item in menu %}
|
||||
<div id="{{ item.id }}" class="nav-item" data-slug="{{ item.slug }}" data-uuid="{{ item.uuid }}" data-path="{{ item.path }}">
|
||||
<i class="ti ti-arrows-move-vertical"></i>
|
||||
<label>{{ item.title }}</label>
|
||||
<div id="nav-btns">
|
||||
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
|
||||
<i class="ti ti-edit"></i>
|
||||
</button>
|
||||
<button id="remove-item" class="nav-btn" data-uuid="{{ item.uuid }}" data-id="{{ item.id }}" title="delete from menu">
|
||||
<i class="ti ti-x"></i>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
</article>
|
||||
{% endblock %}
|
||||
|
|
|
@ -6,23 +6,17 @@
|
|||
{% endif %}
|
||||
<a id="settings" href="/dashboard/settings" title="settings">
|
||||
<button>
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
|
||||
</svg>
|
||||
<i class="ti ti-home-cog"></i>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
|
||||
<button>
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
|
||||
</svg>
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/logout" title="log out">
|
||||
<button>
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
|
||||
</svg>
|
||||
<i class="ti ti-logout"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
@ -88,6 +88,8 @@ header > nav > div[role="nav-right"] button {
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: 5px;
|
||||
font-size: 0.8em;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
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-highlights.css");
|
||||
@import url("settings.css");
|
||||
@import url("navigation.css");
|
||||
|
|
|
@ -7482,7 +7482,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
|
|||
//--------------------------
|
||||
syncMenu() {
|
||||
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({
|
||||
title: items[index].getElementsByTagName("label")[0].innerHTML,
|
||||
id: items[index].id,
|
||||
|
@ -7499,7 +7499,7 @@ class $24d614592ba94b67$export$2e2bcd8739ae039 {
|
|||
});
|
||||
}
|
||||
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() {
|
||||
//grabs elements and makes them sortables
|
||||
let self = this;
|
||||
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-pages"), {
|
||||
(0, $64afbd09cd65a300$export$2e2bcd8739ae039).create(document.getElementById("nav-items"), {
|
||||
onUpdate: ()=>{
|
||||
new (0, $24d614592ba94b67$export$2e2bcd8739ae039)().syncMenu().then((data)=>{
|
||||
$18c0afb4f3b7cd5c$var$notify.alert("Updating Menu", null);
|
||||
|
|
|
@ -1,37 +1,35 @@
|
|||
export default class NavActions {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
syncMenu() {
|
||||
let navData = [];
|
||||
let items = document.getElementById("nav-pages").children;
|
||||
for (let index = 0; index < items.length; index++) {
|
||||
navData.push({
|
||||
title: items[index].getElementsByTagName("label")[0].innerHTML,
|
||||
id: items[index].id,
|
||||
slug: items[index].getAttribute("data-slug"),
|
||||
uuid: items[index].getAttribute("data-uuid"),
|
||||
path: items[index].getAttribute("data-path")
|
||||
});
|
||||
}
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
syncMenu() {
|
||||
let navData = [];
|
||||
let items = document.getElementById('nav-items').children;
|
||||
for (let index = 0; index < items.length; index++) {
|
||||
navData.push({
|
||||
title: items[index].getElementsByTagName('label')[0].innerHTML,
|
||||
id: items[index].id,
|
||||
slug: items[index].getAttribute('data-slug'),
|
||||
uuid: items[index].getAttribute('data-uuid'),
|
||||
path: items[index].getAttribute('data-path')
|
||||
});
|
||||
}
|
||||
|
||||
let data = { menu: navData, remove: null };
|
||||
return new Promise(function (resolve) {
|
||||
resolve(data);
|
||||
});
|
||||
}
|
||||
let data = { menu: navData, remove: null };
|
||||
return new Promise(function (resolve) {
|
||||
resolve(data);
|
||||
});
|
||||
}
|
||||
|
||||
removeItem(id) {
|
||||
document
|
||||
.getElementById("nav-pages")
|
||||
.removeChild(document.getElementById(id));
|
||||
}
|
||||
removeItem(id) {
|
||||
document.getElementById('nav-items').removeChild(document.getElementById(id));
|
||||
}
|
||||
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
}
|
||||
|
|
|
@ -20,7 +20,7 @@ export default class NavIndex {
|
|||
start() {
|
||||
//grabs elements and makes them sortables
|
||||
let self = this;
|
||||
Sortable.create(document.getElementById('nav-pages'), {
|
||||
Sortable.create(document.getElementById('nav-items'), {
|
||||
onUpdate: () => {
|
||||
new NavActions().syncMenu().then(data => {
|
||||
notify.alert('Updating Menu', null);
|
||||
|
|
Loading…
Reference in a new issue