projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

Styled Nav Editor

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

45
brain/views/dash/navigation.twig
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 }}"> <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 %}

12
brain/views/dash/partials/navigation.twig
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>

2
public/assets/css/dash/frame.css
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"] {

34
public/assets/css/dash/navigation.css Normal file
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;
}

1
public/assets/css/dash/start.css
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");

6
public/assets/scripts/Start.js
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);

62
src/com/actions/NavActions.js
View file

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

2
src/com/controllers/NavIndex.js
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);