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.

brain/views/dash/navigation.twig

@@ -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">
+		<article role="navigation">
-			<div id="nav-index-wrapper">
+			<section id="nav-items">
-				<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">
+						<i class="ti ti-arrows-move-vertical"></i>
-								<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>
+								<i class="ti ti-edit"></i>
-										<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>
+								<i class="ti ti-x"></i>
-										<use xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
-									</svg>
 							</button>
 						</div>
-
 					</div>
 				{% endfor %}
-				</div>
+			</section>
-			</div>
+		</article>
-		</div>
 	{% endblock %}

brain/views/dash/partials/navigation.twig

@@ -6,23 +6,17 @@
 	{% endif %}
 	<a id="settings" href="/dashboard/settings" title="settings">
 		<button>
-			<svg role="icon">
+			<i class="ti ti-home-cog"></i>
-				<use xlink:href="/assets/images/global/sprite.svg#entypo-sound-mix"/>
-			</svg>
 		</button>
 	</a>
 	<a id="navigation" href="/dashboard/navigation" title="edit navigation">
 		<button>
-			<svg role="icon">
+			<i class="ti ti-menu-2"></i>
-				<use xlink:href="/assets/images/global/sprite.svg#entypo-list"/>
-			</svg>
 		</button>
 	</a>
 	<a id="navigation" href="/dashboard/logout" title="log out">
 		<button>
-			<svg role="icon">
+			<i class="ti ti-logout"></i>
-				<use xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/>
-			</svg>
 		</button>
 	</a>
 </div>

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

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

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

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

src/com/actions/NavActions.js

@@ -8,14 +8,14 @@ export default class NavActions {
 	//--------------------------
 	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,
+				title: items[index].getElementsByTagName('label')[0].innerHTML,
 				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) {
-    document
+		document.getElementById('nav-items').removeChild(document.getElementById(id));
-      .getElementById("nav-pages")
-      .removeChild(document.getElementById(id));
 	}
 
 	//--------------------------

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