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:
Ro 2023-03-25 20:28:38 -07:00
parent 1b89d1d072
commit 78bfe4596b
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
8 changed files with 92 additions and 72 deletions

View file

@ -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 %}

View file

@ -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>

View file

@ -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"] {

View 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;
}

View file

@ -9,3 +9,4 @@
@import url("page-editor.css");
@import url("page-editor-highlights.css");
@import url("settings.css");
@import url("navigation.css");

View file

@ -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);

View file

@ -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
//--------------------------
}

View file

@ -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);