projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

Responsive P 4 - Dash, Index, Editor, Nav, Menu

Browse source 
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 2023-04-05 14:40:14 -07:00
parent e7fd91c152
commit 3f9506ac6b
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
14 changed files with 327 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
brain/controller/DashControl.php
View file

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

52
brain/views/dash/partials/editor.twig
View file

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

22
brain/views/dash/partials/index.twig
View file

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

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

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

12
brain/views/dash/partials/recent-meta.twig
View file

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

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

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

60
public/assets/css/dash/index.css
View file

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

12
public/assets/css/dash/navigation.css
View file

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

96
public/assets/css/dash/page-editor.css
View file

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

31
public/assets/scripts/Start.js
View file

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

2
src/com/Base.js
View file

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

3
src/com/controllers/DashManager.js
View file

@ -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
View 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';
}
}
}