forked from projects/fipamo
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.
This commit is contained in:
Ro
parent
e7fd91c152
commit
3f9506ac6b
14 changed files with 327 additions and 64 deletions
|
|
@ -196,7 +196,7 @@ class DashControl
|
|||
$template = 'dash/start.twig';
|
||||
if (Session::active()) {
|
||||
$pageOptions = [
|
||||
'title' => 'Welcome Back',
|
||||
'title' => 'Start',
|
||||
'status' => Session::active(),
|
||||
'data' => (new Book())->getPages(1, 4),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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-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>
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -2,23 +2,7 @@
|
|||
<div role="index-header-left">
|
||||
<h1>Recent</h1>
|
||||
</div>
|
||||
<div role="index-header-right">
|
||||
<a href='/dashboard/pages' title="view pages">
|
||||
<button>
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-archive"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<a href='/dashboard/page/add/new' title="add new page">
|
||||
<button>
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div role="index-header-right"></div>
|
||||
</section>
|
||||
<section role="index-recent-pages">
|
||||
{% if data["entryCount"] != 0 %}
|
||||
|
|
@ -29,19 +13,15 @@
|
|||
{{ include("dash/partials/recent-meta.twig") }}
|
||||
<video class="post-video" loop muted autoplay>
|
||||
<source src="{{ page.media[0].file }}" type="video/mp4">
|
||||
|
||||
Sorry, your browser doesn't support embedded videos.
|
||||
</video>
|
||||
</a>
|
||||
|
||||
{% else %}
|
||||
<a href="/dashboard/page/edit/{{ page.uuid }}" id="{{ page.uuid }}" class="post-link recent-link" style="background: url({{ page.media[0].file }}) no-repeat center center / cover">
|
||||
|
||||
|
||||
{{ include("dash/partials/recent-meta.twig") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
There are no pages
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
{% apply spaceless %}
|
||||
{{ include("dash/partials/submenu_settings.twig") }}
|
||||
{% endapply %}
|
||||
{% elseif title=="Start" %}
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/submenu_start.twig") }}
|
||||
{% endapply %}
|
||||
{% endif %}
|
||||
<a id="settings" href="/dashboard/settings" title="settings">
|
||||
<button>
|
||||
|
|
@ -11,7 +15,38 @@
|
|||
</a>
|
||||
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
|
||||
<button>
|
||||
<i class="ti ti-menu-2"></i>
|
||||
<i class="ti ti-arrow-autofit-height"></i>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/logout" title="log out">
|
||||
<button>
|
||||
<i class="ti ti-logout"></i>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button role="menu-toggle">
|
||||
<i class="ti ti-menu-2"></i>
|
||||
</button>
|
||||
|
||||
<div role="mobile-menu">
|
||||
{% if title == "Settings" %}
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/submenu_settings.twig") }}
|
||||
{% endapply %}
|
||||
{% elseif title=="Start" %}
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/submenu_start.twig") }}
|
||||
{% endapply %}
|
||||
{% endif %}
|
||||
<a id="settings" href="/dashboard/settings" title="settings">
|
||||
<button>
|
||||
<i class="ti ti-home-cog"></i>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/navigation" title="edit navigation">
|
||||
<button>
|
||||
<i class="ti ti-arrow-autofit-height"></i>
|
||||
</button>
|
||||
</a>
|
||||
<a id="navigation" href="/dashboard/logout" title="log out">
|
||||
|
|
|
|||
|
|
@ -24,20 +24,14 @@
|
|||
</strong>
|
||||
<hr/>
|
||||
<button data-active="{{ menu }}">
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
|
||||
</svg>
|
||||
<i class="ti ti-navigation"></i>
|
||||
</button>
|
||||
<button data-active="{{ published }}">
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
|
||||
</svg>
|
||||
<i class="ti ti-world"></i>
|
||||
</button>
|
||||
|
||||
<button data-active="{{ featured }}">
|
||||
<svg role="icon">
|
||||
<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
|
||||
</svg>
|
||||
<i class="ti ti-star"></i>
|
||||
</button>
|
||||
|
||||
</aside>
|
||||
|
|
|
|||
12
brain/views/dash/partials/submenu_start.twig
Normal file
12
brain/views/dash/partials/submenu_start.twig
Normal file
|
|
@ -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>
|
||||
|
|
@ -87,6 +87,14 @@ header > nav > div[role="nav-right"] {
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
header > nav > div > div[role="mobile-menu"] {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
|
||||
header > nav > div[role="nav-right"] button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
@ -95,6 +103,10 @@ header > nav > div[role="nav-right"] button {
|
|||
color: var(--white);
|
||||
}
|
||||
|
||||
header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header > nav > div[role="nav-right"] div[role="submenu"] {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -121,3 +133,13 @@ header
|
|||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 530px) {
|
||||
header > nav > div[role="nav-right"] > button[role="menu-toggle"] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
header > nav > div > div[role="menu"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,19 +64,23 @@ section[role="index-recent-pages"] a button {
|
|||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button i {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="true"] {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="true"] svg {
|
||||
fill: var(--tertiary);
|
||||
section[role="index-recent-pages"] button[data-active="true"] i {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="false"] {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] button[data-active="false"] svg {
|
||||
section[role="index-recent-pages"] button[data-active="false"] i {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
|
|
@ -93,3 +97,53 @@ section[role="index-recent-pages"] hr {
|
|||
border: 0.1px solid;
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
section[role="index-header"],
|
||||
section[role="index-recent-pages"] {
|
||||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 520px) {
|
||||
section[role="index-recent-pages"] {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(1) {
|
||||
grid-column: 1/3;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(2) {
|
||||
grid-row: 2/3;
|
||||
grid-column: 1/2;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(3) {
|
||||
grid-column: 2/3;
|
||||
grid-row: 2/3;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
section[role="index-recent-pages"] a:nth-child(2) {
|
||||
grid-column: 1/3;
|
||||
grid-row: 2/3;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(3) {
|
||||
grid-column: 1/3;
|
||||
grid-row: 3/4;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(4) {
|
||||
grid-column: 1/3;
|
||||
grid-row: 4/5;
|
||||
}
|
||||
|
||||
section[role="index-recent-pages"] a:nth-child(5) {
|
||||
grid-column: 1/3;
|
||||
grid-row: 5/6;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,3 +32,15 @@ article[role="navigation"] > section > div.nav-item > div#nav-btns {
|
|||
article[role="navigation"] > section > div.nav-item > div#nav-btns button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
article[role="navigation"] > section > div.nav-item > label {
|
||||
width: 55%;
|
||||
margin: 0;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
article[role="navigation"] > section i {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,6 +58,32 @@ main
|
|||
background: var(--primary);
|
||||
}
|
||||
|
||||
main > section[role="text-editor"] > div[role="text-editor-control"] button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
button
|
||||
> i {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
> button:nth-child(1) {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
> button:nth-child(10) {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="file-manager"]
|
||||
> div[role="page-images-list"]
|
||||
|
|
@ -276,7 +302,6 @@ main section[role="text-editor"] .icon-hide {
|
|||
main > section[role="text-editor"] > div[role="text-editor-control"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
|
||||
|
|
@ -343,3 +368,72 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
main > section[role="file-manager"] > div[role="file-drop"],
|
||||
main > section[role="file-manager"] > div[role="page-images-list"],
|
||||
main > section[role="file-manager"] > div[role="page-files-list"],
|
||||
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
|
||||
main > section[role="text-editor"] {
|
||||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
main > section[role="file-manager"] > div[role="page-images-list"],
|
||||
main > section[role="file-manager"] > div[role="page-files-list"] {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
main > section[role="file-manager"] > div[role="file-drop"],
|
||||
main > section[role="file-manager"] > div[role="page-images-list"],
|
||||
main > section[role="file-manager"] > div[role="page-files-list"],
|
||||
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
|
||||
main > section[role="text-editor"] {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
main > section[role="text-editor"] > div[role="text-editor-control"] {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
> button:nth-child(1) {
|
||||
border-radius: 3px 0;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
> button:nth-child(5) {
|
||||
border-radius: 0 3px;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
> button:nth-child(6) {
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
|
||||
main
|
||||
> section[role="text-editor"]
|
||||
> div[role="text-editor-control"]
|
||||
> button:nth-child(10) {
|
||||
border-radius: 0 0 3px;
|
||||
}
|
||||
|
||||
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
|
||||
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7592,6 +7592,34 @@ class $18c0afb4f3b7cd5c$export$2e2bcd8739ae039 {
|
|||
}
|
||||
|
||||
|
||||
class $f32c20539eb29606$export$2e2bcd8739ae039 {
|
||||
//--------------------------
|
||||
// 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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class $129a4dc28afb9101$export$2e2bcd8739ae039 {
|
||||
//--------------------------
|
||||
// constructor
|
||||
|
|
@ -7600,6 +7628,8 @@ class $129a4dc28afb9101$export$2e2bcd8739ae039 {
|
|||
this.currentDisplay = "";
|
||||
this.urlPieces = document.URL.split("/");
|
||||
this.chooseDisplay(this.urlPieces[4], this.urlPieces[5]);
|
||||
//start main menu handler
|
||||
new (0, $f32c20539eb29606$export$2e2bcd8739ae039)();
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
|
|
@ -7639,6 +7669,7 @@ class $5ec7c34d3cbf8bc6$export$2e2bcd8739ae039 {
|
|||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
//TODO: Move init functions and set up to their own class
|
||||
start() {
|
||||
if (document.getElementById("login") || document.querySelector('[role="site-restore"]')) {
|
||||
var options = document.getElementsByClassName("init-option");
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ export default class Base {
|
|||
//--------------------------
|
||||
// methods
|
||||
//--------------------------
|
||||
|
||||
//TODO: Move init functions and set up to their own class
|
||||
start() {
|
||||
if (
|
||||
document.getElementById('login') ||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import PostIndex from './PostIndex';
|
||||
import SettingsIndex from './SettingsIndex';
|
||||
import NaviIndex from './NavIndex';
|
||||
import Menu from '../ui/Menu';
|
||||
|
||||
export default class DashManager {
|
||||
//--------------------------
|
||||
|
|
@ -10,6 +11,8 @@ export default class DashManager {
|
|||
this.currentDisplay = '';
|
||||
this.urlPieces = document.URL.split('/');
|
||||
this.chooseDisplay(this.urlPieces[4], this.urlPieces[5]);
|
||||
//start main menu handler
|
||||
new Menu();
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
|
|
|
|||
28
src/com/ui/Menu.js
Normal file
28
src/com/ui/Menu.js
Normal file
|
|
@ -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 a new issue