Responsive P 4 - Dash, Index, Editor, Nav, Menu
Cleaned up resonsive for the rest of the remaining pages: the dash index, page index, page editor, navigation editor and plugged in a mobile nav that activates when the viewport gets skinny. Whew.toggle-buttons-#109
parent
e7fd91c152
commit
3f9506ac6b
GPG Key ID:
29B551CDBD4D3B50
@ -1,42 +1,38 @@
|
||||
<div role="text-editor-control">
|
||||
<button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">B</button>
|
||||
<button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">I</button>
|
||||
<button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough">D</button>
|
||||
<button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
|
||||
<i class="ti ti-bold"></i>
|
||||
</button>
|
||||
<button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">
|
||||
<i class="ti ti-italic"></i>
|
||||
</button>
|
||||
<button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough">
|
||||
<i class="ti ti-strikethrough"></i>
|
||||
</button>
|
||||
<button id="edit-link" class="content-editor-btn-icon editor-button" title="insert link">
|
||||
<svg id="edit-link" role="icon">
|
||||
<use id="edit-link" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
|
||||
</svg>
|
||||
<i class="ti ti-link"></i>
|
||||
</button>
|
||||
<button id="edit-header1" class="content-editor-btn-text editor-button" title="header 1">
|
||||
<i class="ti ti-h-1"></i>
|
||||
</button>
|
||||
<button id="edit-header2" class="content-editor-btn-text editor-button" title="header 2">
|
||||
<i class="ti ti-h-2"></i>
|
||||
</button>
|
||||
<button id="edit-header3" class="content-editor-btn-text editor-button" title="header 3">
|
||||
<i class="ti ti-h-3"></i>
|
||||
</button>
|
||||
<button id="edit-header1" class="content-editor-btn-text editor-button" title="header 1">H1</button>
|
||||
<button id="edit-header2" class="content-editor-btn-text editor-button" title="header 2">H2</button>
|
||||
<button id="edit-header3" class="content-editor-btn-text editor-button" title="header 3">H3</button>
|
||||
<button id="edit-image" class="content-editor-btn-icon editor-button" title="insert image">
|
||||
<svg id="edit-image" role="icon">
|
||||
<use id="edit-image" xlink:href="/assets/images/global/sprite.svg#entypo-image"/>
|
||||
</svg>
|
||||
<i class="ti ti-photo"></i>
|
||||
</button>
|
||||
{% if mode == "edit" %}
|
||||
<button id="edit-update" class="post-sumbit-btn submit-start editor-button" data-action='blog-update' data-id="{{ page['uuid'] }} type='submit' title=" bold">
|
||||
<svg id="submit-update" role="icon">
|
||||
<use id="submit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save" data-action='blog-update' data-id="{{ page['uuid'] }}"/>
|
||||
</svg>
|
||||
<svg id="submit-good" class="icon-hide" role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-thumbs-up"/>
|
||||
</svg>
|
||||
<svg id="submit-error" class="icon-hide" role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-thumbs-down"/>
|
||||
</svg>
|
||||
<i class="ti ti-device-floppy"></i>
|
||||
</button>
|
||||
<button id="edit-delete" class="content-editor-btn-icon editor-button submit-delete" for="post-delete" title='delete post'>
|
||||
<svg id="edit-delete" role="icon">
|
||||
<use id="edit-delete" xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
|
||||
</svg>
|
||||
<i class="ti ti-x"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<button id="edit-save" class="post-sumbit-btn submit-start editor-button" data-action='blog-add' type='submit'>
|
||||
<svg id="submit-save" role="icon">
|
||||
<use id="submit-save" xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
|
||||
</svg>
|
||||
<i class="ti ti-file-plus"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
<div role="submenu">
|
||||
<a href='/dashboard/pages' title="view pages">
|
||||
<button>
|
||||
<i class="ti ti-book-2"></i>
|
||||
</button>
|
||||
</a>
|
||||
<a href='/dashboard/page/add/new' title="add new page">
|
||||
<button>
|
||||
<i class="ti ti-square-plus"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
@ -0,0 +1,28 @@
|
||||
export default class Menu {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor() {
|
||||
this.mobile = false;
|
||||
this.mobileMenu = document.querySelector('[role="mobile-menu"]');
|
||||
document
|
||||
.querySelector('[role="menu-toggle"]')
|
||||
.addEventListener('click', e => this.handleMobile(e));
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
start() {}
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
handleMobile(e) {
|
||||
if (this.mobile) {
|
||||
this.mobile = false;
|
||||
this.mobileMenu.style.display = 'none';
|
||||
} else {
|
||||
this.mobile = true;
|
||||
this.mobileMenu.style.display = 'inline';
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue