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

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

brain/views/dash/partials/editor.twig

@@ -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-bold" class="content-editor-btn-text editor-button" title="bold">
-	<button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">I</button>
+		<i class="ti ti-bold"></i>
-	<button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough">D</button>
+	</button>
-	<button id="edit-link" class="content-editor-btn-icon editor-button" title="insert link">
+	<button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">
-		<svg id="edit-link" role="icon">
+		<i class="ti ti-italic"></i>
-			<use id="edit-link" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
+	</button>
-		</svg>
+	<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">
+		<i class="ti ti-photo"></i>
-			<use id="edit-image" xlink:href="/assets/images/global/sprite.svg#entypo-image"/>
-		</svg>
 	</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">
+			<i class="ti ti-device-floppy"></i>
-				<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>
 		</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">
+			<i class="ti ti-x"></i>
-				<use id="edit-delete" xlink:href="/assets/images/global/sprite.svg#entypo-cross"/>
-			</svg>
 		</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">
+			<i class="ti ti-file-plus"></i>
-				<use id="submit-save" xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
-			</svg>
 		</button>
 	{% endif %}
 </div>

brain/views/dash/partials/index.twig

@@ -2,23 +2,7 @@
 	<div role="index-header-left">
 		<h1>Recent</h1>
 	</div>
-	<div role="index-header-right">
+	<div role="index-header-right"></div>
-		<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>
 </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

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 %}
 	<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">

brain/views/dash/partials/recent-meta.twig

@@ -24,20 +24,14 @@
 	</strong>
 	<hr/>
 	<button data-active="{{ menu }}">
-		<svg role="icon">
+		<i class="ti ti-navigation"></i>
-			<use xlink:href="/assets/images/global/sprite.svg#entypo-add-to-list"/>
-		</svg>
 	</button>
 	<button data-active="{{ published }}">
-		<svg role="icon">
+		<i class="ti ti-world"></i>
-			<use xlink:href="/assets/images/global/sprite.svg#entypo-globe"/>
-		</svg>
 	</button>
 
 	<button data-active="{{ featured }}">
-		<svg role="icon">
+		<i class="ti ti-star"></i>
-			<use xlink:href="/assets/images/global/sprite.svg#entypo-star"/>
-		</svg>
 	</button>
 
 </aside>

brain/views/dash/partials/submenu_start.twig

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

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;
+  }
+}

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 {
+section[role="index-recent-pages"] button[data-active="true"] i {
-  fill: var(--tertiary);
+  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;
+  }
+}

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;
+  }
+}

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;
+  }
+}

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

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') ||

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

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';
+		}
+	}
+}