diff --git a/brain/views/dash/navigation.twig b/brain/views/dash/navigation.twig index ef0598f..a77d540 100644 --- a/brain/views/dash/navigation.twig +++ b/brain/views/dash/navigation.twig @@ -5,35 +5,26 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} - diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css index b963f65..fe5b39f 100644 --- a/public/assets/css/dash/frame.css +++ b/public/assets/css/dash/frame.css @@ -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"] { diff --git a/public/assets/css/dash/navigation.css b/public/assets/css/dash/navigation.css new file mode 100644 index 0000000..f4f26f4 --- /dev/null +++ b/public/assets/css/dash/navigation.css @@ -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; +} diff --git a/public/assets/css/dash/start.css b/public/assets/css/dash/start.css index 1e57f42..7ce8492 100644 --- a/public/assets/css/dash/start.css +++ b/public/assets/css/dash/start.css @@ -9,3 +9,4 @@ @import url("page-editor.css"); @import url("page-editor-highlights.css"); @import url("settings.css"); +@import url("navigation.css"); diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index 28244f8..aee7a9f 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -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); diff --git a/src/com/actions/NavActions.js b/src/com/actions/NavActions.js index 5f6bdd9..638e35b 100644 --- a/src/com/actions/NavActions.js +++ b/src/com/actions/NavActions.js @@ -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 + //-------------------------- } diff --git a/src/com/controllers/NavIndex.js b/src/com/controllers/NavIndex.js index b1ed680..9ce29b1 100644 --- a/src/com/controllers/NavIndex.js +++ b/src/com/controllers/NavIndex.js @@ -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);