From 3f9506ac6b9b6868373ed018aa8b9755cf115475 Mon Sep 17 00:00:00 2001 From: Ro Date: Wed, 5 Apr 2023 14:40:14 -0700 Subject: [PATCH] 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. --- brain/controller/DashControl.php | 2 +- brain/views/dash/partials/editor.twig | 52 +++++------ brain/views/dash/partials/index.twig | 22 +---- brain/views/dash/partials/navigation.twig | 37 +++++++- brain/views/dash/partials/recent-meta.twig | 12 +-- brain/views/dash/partials/submenu_start.twig | 12 +++ public/assets/css/dash/frame.css | 22 +++++ public/assets/css/dash/index.css | 60 +++++++++++- public/assets/css/dash/navigation.css | 12 +++ public/assets/css/dash/page-editor.css | 96 +++++++++++++++++++- public/assets/scripts/Start.js | 31 +++++++ src/com/Base.js | 2 + src/com/controllers/DashManager.js | 3 + src/com/ui/Menu.js | 28 ++++++ 14 files changed, 327 insertions(+), 64 deletions(-) create mode 100644 brain/views/dash/partials/submenu_start.twig create mode 100644 src/com/ui/Menu.js diff --git a/brain/controller/DashControl.php b/brain/controller/DashControl.php index 2b479b6..521900a 100644 --- a/brain/controller/DashControl.php +++ b/brain/controller/DashControl.php @@ -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), ]; diff --git a/brain/views/dash/partials/editor.twig b/brain/views/dash/partials/editor.twig index 9e33e38..a76e653 100644 --- a/brain/views/dash/partials/editor.twig +++ b/brain/views/dash/partials/editor.twig @@ -1,42 +1,38 @@
- - - - + + + + + + - - - {% if mode == "edit" %} {% else %} {% endif %}
diff --git a/brain/views/dash/partials/index.twig b/brain/views/dash/partials/index.twig index 61b1576..a665cd3 100644 --- a/brain/views/dash/partials/index.twig +++ b/brain/views/dash/partials/index.twig @@ -2,23 +2,7 @@

Recent

-
- - - - - - - -
+
{% if data["entryCount"] != 0 %} @@ -29,19 +13,15 @@ {{ include("dash/partials/recent-meta.twig") }} {% else %} - - {{ include("dash/partials/recent-meta.twig") }} {% endif %} - {% endfor %} {% else %} There are no pages diff --git a/brain/views/dash/partials/navigation.twig b/brain/views/dash/partials/navigation.twig index e793db0..b0afcdb 100644 --- a/brain/views/dash/partials/navigation.twig +++ b/brain/views/dash/partials/navigation.twig @@ -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 %} + + + + + + + + +
+ {% 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 %} + + + + + diff --git a/brain/views/dash/partials/recent-meta.twig b/brain/views/dash/partials/recent-meta.twig index 0160efe..e4dd4c9 100644 --- a/brain/views/dash/partials/recent-meta.twig +++ b/brain/views/dash/partials/recent-meta.twig @@ -24,20 +24,14 @@
diff --git a/brain/views/dash/partials/submenu_start.twig b/brain/views/dash/partials/submenu_start.twig new file mode 100644 index 0000000..38d3637 --- /dev/null +++ b/brain/views/dash/partials/submenu_start.twig @@ -0,0 +1,12 @@ +
+ + + + + + +
diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css index b3a723f..e52dbe9 100644 --- a/public/assets/css/dash/frame.css +++ b/public/assets/css/dash/frame.css @@ -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; + } +} diff --git a/public/assets/css/dash/index.css b/public/assets/css/dash/index.css index 005d131..7182b07 100644 --- a/public/assets/css/dash/index.css +++ b/public/assets/css/dash/index.css @@ -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; + } +} diff --git a/public/assets/css/dash/navigation.css b/public/assets/css/dash/navigation.css index f4f26f4..fa5e0d6 100644 --- a/public/assets/css/dash/navigation.css +++ b/public/assets/css/dash/navigation.css @@ -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; + } +} diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css index 7338c1f..2e555d5 100644 --- a/public/assets/css/dash/page-editor.css +++ b/public/assets/css/dash/page-editor.css @@ -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; + } +} diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index ee65801..bb91165 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -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"); diff --git a/src/com/Base.js b/src/com/Base.js index 8a7a0bb..64c8991 100644 --- a/src/com/Base.js +++ b/src/com/Base.js @@ -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') || diff --git a/src/com/controllers/DashManager.js b/src/com/controllers/DashManager.js index 6ca7adb..375012f 100644 --- a/src/com/controllers/DashManager.js +++ b/src/com/controllers/DashManager.js @@ -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 diff --git a/src/com/ui/Menu.js b/src/com/ui/Menu.js new file mode 100644 index 0000000..53087be --- /dev/null +++ b/src/com/ui/Menu.js @@ -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'; + } + } +}