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

View file

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

View file

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

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.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");

View file

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

View file

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

View file

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