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

25
brain/views/dash/navigation.twig
View file

@ -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">
<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 }}">
<svg id="item-arrows">
<use xlink:href="/assets/images/global/sprite.svg#entypo-select-arrows"/>
</svg>
<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">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-edit"/>
</svg>
<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">
<svg>
<use xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
</svg>
<i class="ti ti-x"></i>
</button>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</section>
</article>
{% endblock %}

12
brain/views/dash/partials/navigation.twig
View file

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

2
public/assets/css/dash/frame.css
View file

@ -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
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-highlights.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() {
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);

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

@ -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"),
uuid: items[index].getAttribute("data-uuid"),
path: items[index].getAttribute("data-path")
slug: items[index].getAttribute('data-slug'),
uuid: items[index].getAttribute('data-uuid'),
path: items[index].getAttribute('data-path')
});
}
@ -26,9 +26,7 @@ export default class NavActions {
}
removeItem(id) {
document
.getElementById("nav-pages")
.removeChild(document.getElementById(id));
document.getElementById('nav-items').removeChild(document.getElementById(id));
}
//--------------------------

2
src/com/controllers/NavIndex.js
View file

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