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:
Ro
parent
1b89d1d072
commit
78bfe4596b
8 changed files with 92 additions and 72 deletions
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"] {
|
||||
|
|
|
|||
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-highlights.css");
|
||||
@import url("settings.css");
|
||||
@import url("navigation.css");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
//--------------------------
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue