forked from projects/fipamo
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 %}
|
{% 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 }}">
|
<i class="ti ti-arrows-move-vertical"></i>
|
||||||
<svg id="item-arrows">
|
<label>{{ item.title }}</label>
|
||||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
|
<div id="nav-btns">
|
||||||
</svg>
|
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
|
||||||
<label>{{ item.title }}</label>
|
<i class="ti ti-edit"></i>
|
||||||
<div id="nav-btns">
|
</button>
|
||||||
<button id="edit-item" class="nav-btn" data-id="{{ item.uuid }}" title="edit page">
|
<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-edit"/>
|
</button>
|
||||||
</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>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
</div>
|
||||||
</div>
|
{% endfor %}
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</article>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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"] {
|
||||||
|
|
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.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");
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -1,37 +1,35 @@
|
||||||
export default class NavActions {
|
export default class NavActions {
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// constructor
|
// constructor
|
||||||
//--------------------------
|
//--------------------------
|
||||||
constructor() {}
|
constructor() {}
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// methods
|
// methods
|
||||||
//--------------------------
|
//--------------------------
|
||||||
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')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
let data = { menu: navData, remove: null };
|
let data = { menu: navData, remove: null };
|
||||||
return new Promise(function (resolve) {
|
return new Promise(function (resolve) {
|
||||||
resolve(data);
|
resolve(data);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
removeItem(id) {
|
removeItem(id) {
|
||||||
document
|
document.getElementById('nav-items').removeChild(document.getElementById(id));
|
||||||
.getElementById("nav-pages")
|
}
|
||||||
.removeChild(document.getElementById(id));
|
|
||||||
}
|
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
// event handlers
|
// event handlers
|
||||||
//--------------------------
|
//--------------------------
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue