projects/fipamo
projects/fipamo
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 24 Packages Wiki Activity Actions

reorganized text editor

Browse source 
moved page meta data to it's own ui to clean up the page editing
experience as it was becoming a bit crowded.

also moved to saving and deleting buttons to title bar so they are
always available

added a note to web routes to reorganize them within the web routes file
to reduce the confusion present by having them in their own Controllers.
it's just an extra layer that's not needed
This commit is contained in:
RXP 2025-05-12 13:12:58 -06:00
parent 16856f6c25
commit 9c200ea78d
Signed by: ro
GPG key ID: 976711B5057688B7
11 changed files with 322 additions and 232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.prettierrc
View file

@ -1,5 +1,4 @@
{ {
"plugins": ["@shufo/prettier-plugin-blade"],
"overrides": [ "overrides": [
{ "files": ".prettierrc", "options": { "parser": "json" } }, { "files": ".prettierrc", "options": { "parser": "json" } },
{ {

81
app/Http/Controllers/DashController.php
View file

@ -89,53 +89,56 @@ class DashController extends Controller
$page = []; $page = [];
$views = []; $views = [];
$mode == 'edit' ? $page = $this->pages->getByUuid($uuid) : $page = []; $mode == 'edit' ? $page = $this->pages->getByUuid($uuid) : $page = [];
$mode == 'edit' ? $title = $page['title'] : $title = 'Add New'; $mode == 'edit' ? $title = 'Edit Page' : $title = 'Add New';
$mode == 'edit' ? $views = $this->themes->getCustomViews($page['layout']) : $views[] = 'page'; $mode == 'edit' ? $views = $this->themes->getCustomViews($page['layout']) : $views[] = 'page';
//just a patch for now to get this out of the template //just a patch for now to get this out of the template
if ($mode == 'edit') { if ($mode == 'edit') {
$id = $page['id']; $id = $page['id'];
$uuid = $page['uuid']; $uuid = $page['uuid'];
$slug = $page['slug']; $slug = $page['slug'];
$feature = $page['feature']; $feature = $page['feature'];
$layout = $page['layout']; $layout = $page['layout'];
$tags = $page['tags']; $tags = $page['tags'];
$content = $page['content']; $content = $page['content'];
$date = $page['created']; $date = $page['created'];
$updated = $page['updated']; $updated = $page['updated'];
$media = $page['media']; $media = $page['media'];
$files = $page['docs']; $files = $page['docs'];
$editTitle = $page['title'];
} else { } else {
$id = ""; $id = "";
$uuid = ""; $uuid = "";
$slug = ""; $slug = "";
$feature = ""; $feature = "";
$layout = ""; $layout = "";
$tags = ""; $tags = "";
$content = ""; $content = "";
$date = ""; $date = "";
$updated = ""; $updated = "";
$media = ""; $media = "";
$files = ""; $files = "";
$editTitle = "";
}; };
return view('back.page', [ return view('back.page', [
"status" => $this->member::status(), "status" => $this->member::status(),
"mode" => $mode, "mode" => $mode,
"page" => $page, "page" => $page,
"views" => $views, "views" => $views,
"id" => $id, "id" => $id,
"uuid" => $uuid, "uuid" => $uuid,
"slug" => $slug, "slug" => $slug,
"feature" => $feature, "feature" => $feature,
"layout" => $layout, "layout" => $layout,
"tags" => $tags, "tags" => $tags,
"content" => $content, "content" => $content,
"date" => $date, "date" => $date,
"updated" => $updated, "updated" => $updated,
"media" => $media, "media" => $media,
"files" => $files, "files" => $files,
"title" => urldecode($title), "title" => urldecode($title),
"editTitle" => urldecode($editTitle),
]); ]);
} }

111
public/assets/css/dash/atomic.css
View file

@ -4,69 +4,116 @@
* Small, reusable classes * Small, reusable classes
*/ */
/* /*
* Padding * Padding
*/ */
.p1 { padding: 5px; } .p1 {
.pt1 { padding-top: 5px; } padding: 5px;
.pl1 { padding-left: 5px; } }
.pr1 { padding-right: 5px; } .pt1 {
.pb1 { padding-bottom: 5px; } padding-top: 5px;
}
.p2 { padding: 10px; } .pl1 {
.pt2 { padding-top: 10px; } padding-left: 5px;
.pl2 { padding-left: 10px; } }
.pr2 { padding-right: 10px; } .pr1 {
.pb2 { padding-bottom: 10px; } padding-right: 5px;
}
.pb1 {
padding-bottom: 5px;
}
.p2 {
padding: 10px;
}
.pt2 {
padding-top: 10px;
}
.pl2 {
padding-left: 10px;
}
.pr2 {
padding-right: 10px;
}
.pb2 {
padding-bottom: 10px;
}
/* /*
* Margin * Margin
*/ */
.mt1 { margin-top: 5px; } .mt1 {
.ml1 { margin-left: 5px; } margin-top: 5px;
.mr1 { margin-right: 5px; } }
.mb1 { margin-bottom: 5px; } .ml1 {
margin-left: 5px;
.mt2 { margin-top: 10px; } }
.ml2 { margin-left: 10px; } .mr1 {
.mr2 { margin-right: 10px; } margin-right: 5px;
.mb2 { margin-bottom: 10px; } }
.mb1 {
margin-bottom: 5px;
}
.mt2 {
margin-top: 10px;
}
.ml2 {
margin-left: 10px;
}
.mr2 {
margin-right: 10px;
}
.mb2 {
margin-bottom: 10px;
}
/* /*
* Layout * Layout
*/ */
.row { .row {
display: flex; display: flex;
} }
.col { .col {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.items-center { .items-center {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.justify-center { .justify-center {
display: flex; display: flex;
justify-content: flex; justify-content: flex;
} }
.grow { .grow {
flex-grow: 1; flex-grow: 1;
} }
/* /*
* Borders and rounding * Borders and rounding
*/ */
.rounded { .rounded {
overflow: hidden; overflow: hidden;
border-radius: 5px; border-radius: 5px;
} }
/*
* Show/Hide
*/
.hide-el {
display: none;
visibility: hidden;
opacity: 0;
}
.show-grid {
display: grid;
visibility: visible;
opacity: 1;
}

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

@ -1,12 +1,27 @@
/* FILE MANAGER */ section.meta {
main > section.file-manager {
width: 100%;
background: var(--primary-highlight); background: var(--primary-highlight);
padding: 20px 0; display: grid;
margin-top: 75px; grid-template-columns: 70% 1fr;
width: 90%;
max-width: 800px;
margin: 50px auto 0;
position: absolute;
top: 215px;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
z-index: 500;
border-radius: 3px;
transition: all 0.2s linear;
/* JUST FOR TESTING, ADD FINAL TO ATOMIC */
} }
main > section.file-manager label.list-title { /* FILE MANAGER */
main > section > div.file-manager {
width: 100%;
}
main > section > div.file-manager label.list-title {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
@ -14,22 +29,22 @@ main > section.file-manager label.list-title {
color: var(--primary); color: var(--primary);
} }
main > section.file-manager > div.file-drop { main > section > div.file-manager > div.file-drop {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
min-height: 100px; min-height: 100px;
background: var(--white); color: var(--white);
color: var(--primary); background: var(--primary);
vertical-align: middle; vertical-align: middle;
border-radius: 5px; border-radius: 5px;
max-width: 900px; max-width: 900px;
margin: 10px auto; margin: 10px auto;
} }
main > section.file-manager > div.page-images-list, main > section > div.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list { main > section > div.file-manager > div.page-files-list {
max-width: 900px; max-width: 900px;
width: 100%; width: 100%;
margin: 10px auto; margin: 10px auto;
@ -38,8 +53,8 @@ main > section.file-manager > div.page-files-list {
gap: 10px; gap: 10px;
} }
main > section.file-manager > div.page-images-list > div, main > section > div.file-manager > div.page-images-list > div,
main > section.file-manager > div.page-files-list > div { main > section > div.file-manager > div.page-files-list > div {
width: 100%; width: 100%;
height: 150px; height: 150px;
border-radius: 3px; border-radius: 3px;
@ -48,7 +63,7 @@ main > section.file-manager > div.page-files-list > div {
cursor: pointer; cursor: pointer;
} }
main > section.file-manager > div.page-images-list > div > div.item-progress { main > section > div.file-manager > div.page-images-list > div > div.item-progress {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--primary); background: var(--primary);
@ -70,80 +85,70 @@ main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
main > section.file-manager > div.page-images-list > div > button.media-remove, main > section > div.file-manager > div.page-images-list > div > button.media-remove,
main > section.file-manager > div.page-files-list > div > button.media-remove { main > section > div.file-manager > div.page-files-list > div > button.media-remove {
color: var(--white); color: var(--white);
margin: 5px; margin: 5px;
padding: 10px 15px 7px; padding: 10px 15px 7px;
font-size: 1.5em; font-size: 1.5em;
} }
main > section.file-manager > div.page-images-list > div.video-item > video { main > section > div.file-manager > div.page-images-list > div.video-item > video {
object-fit: cover; object-fit: cover;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
main > section.file-manager > div.page-images-list > div.video-item > button, main > section > div.file-manager > div.page-images-list > div.video-item > button,
main > section.file-manager > div.page-files-list > div.audio-item > button, main > section > div.file-manager > div.page-files-list > div.audio-item > button,
main > section.file-manager > div.page-files-list > div.file-item > button { main > section > div.file-manager > div.page-files-list > div.file-item > button {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
main > section.file-manager > div.page-files-list > div.audio-item { main > section > div.file-manager > div.page-files-list > div.audio-item {
background: url("/assets/images/global/upload-audio.png") no-repeat center center / background: url("/assets/images/global/upload-audio.png") no-repeat center center /
cover; cover;
} }
main > section.file-manager > div.page-files-list > div.file-item { main > section > div.file-manager > div.page-files-list > div.file-item {
background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover; background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
} }
main > section.file-manager > div.page-files-list > div.file-item > a { main > section > div.file-manager > div.page-files-list > div.file-item > a {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
background: var(--secondary); background: var(--secondary);
padding: 2px; padding: 2px;
} }
main > section.file-manager > div.page-files-list > div.audio-item > audio { main > section > div.file-manager > div.page-files-list > div.audio-item > audio {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* PAGE META */ /* PAGE META */
main > section.page-meta { main > section > div.page-meta {
width: 100%; padding: 10px;
background: var(--secondary-highlight); font-size: 0.8em;
color: var(--primary);
} }
main > section.page-meta > div.page-meta-wrapper { main div.page-meta textarea#post-title-text {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%;
max-width: 900px;
margin: 0 auto;
color: var(--secondary);
}
main section.page-meta textarea#post-title-text {
font-family: var(--base-type); font-family: var(--base-type);
width: 100%; width: 100%;
height: 80px; height: 80px;
font-size: 2em; font-size: 2em;
} }
main section.page-meta textarea#post-tags { main div.page-meta textarea#post-tags {
font-family: var(--base-type); font-family: var(--base-type);
width: 100%; width: 100%;
height: 80px;
} }
main section.page-meta select { main div.page-meta select {
background: var(--primary); background: var(--primary);
color: var(--secondary); color: var(--secondary);
border-radius: 3px; border-radius: 3px;
@ -154,11 +159,11 @@ main section.page-meta select {
font-size: 1.5em; font-size: 1.5em;
} }
main section.page-meta div.page-options { main div.page-meta div.page-options {
width: 100%; width: 100%;
} }
main section.page-meta div.page-meta-wrapper div.page-options button { main div.page-meta div.page-options button {
width: 25%; width: 25%;
height: 45px; height: 45px;
transition: all 0.3s linear; transition: all 0.3s linear;
@ -169,19 +174,15 @@ main section.page-meta div.page-meta-wrapper div.page-options button {
text-align: center; text-align: center;
} }
main main > div.page-meta > div.page-options > button.post-option-btn:nth-child(3) {
> section.page-meta
> div.page-meta-wrapper
> div.page-options
> button.post-option-btn:nth-child(3) {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
} }
main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button { main > section > div.page-meta > div.page-options > a > button {
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
} }
main section.page-meta div.page-meta-wrapper div.page-created input { main div.page-meta div.page-created input {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
@ -191,7 +192,18 @@ main section.page-meta div.page-meta-wrapper div.page-created input {
main > section.text-editor { main > section.text-editor {
width: 100%; width: 100%;
max-width: 900px; max-width: 900px;
margin: 10px auto; margin: 90px auto;
}
main > section.text-editor .page-title #post-title-text {
font-size: 2em;
font-family: var(--base-type);
width: 99%;
padding: 5px;
font-weight: 550;
height: 48px;
border-bottom: 1px solid var(--primary-highlight);
border-radius: 0;
} }
main section.text-editor .icon-hide { main section.text-editor .icon-hide {
@ -270,10 +282,10 @@ main section.text-editor div.edit-post-wrapper pre code {
/* RESPONSIVE */ /* RESPONSIVE */
@media only screen and (max-width: 900px) { @media only screen and (max-width: 900px) {
main > section.file-manager > div.file-drop, main > div.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list, main > div.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list, main > div.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper, main > div.page-meta > div.page-meta-wrapper,
main > section.text-editor { main > section.text-editor {
width: 97%; width: 97%;
} }
@ -284,20 +296,20 @@ main section.text-editor div.edit-post-wrapper pre code {
} }
@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) {
main > section.file-manager > div.page-images-list, main > div.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list { main > div.file-manager > div.page-files-list {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
main > section.file-manager > div.file-drop, main > div.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list, main > div.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list, main > div.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper, main > div.page-meta > div.page-meta-wrapper,
main > section.text-editor { main > section.text-editor {
width: 95%; width: 95%;
} }
main > section.page-meta > div.page-meta-wrapper { main > div.page-meta > div.page-meta-wrapper {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }

12
public/assets/scripts/dash/app/controllers/PageEditor.js
View file

@ -105,6 +105,18 @@ export default class PostEditor {
); );
} }
} }
let metabtn = document.getElementById('meta-info-toggle');
let meta = document.querySelector('.meta');
metabtn.addEventListener('click', e => {
let metaO = window.getComputedStyle(meta).getPropertyValue('opacity');
if (metaO == 0) {
meta.classList.remove('hide-el');
meta.classList.add('show-grid');
} else {
meta.classList.add('hide-el');
meta.classList.remove('show-grid');
}
});
} }
//-------------------------- //--------------------------
// event handlers // event handlers

76
resources/views/back/page.blade.php
View file

@ -1,42 +1,34 @@
@extends('frame') @extends('frame')
@section('title', 'The Dash | Editing '. $title) @section('title', 'The Dash | Editing '. $editTitle)
@section('main-content') @section('main-content')
<section data-index="{{$id}}" data-uuid="{{$uuid}}" data-slug="{{$slug}}" data-layout="{{$layout}}" class="file-manager"> <section class="meta hide-el">
@if($feature == '') <div data-index="{{$id}}" data-uuid="{{$uuid}}" data-slug="{{$slug}}" data-layout="{{$layout}}" class="file-manager">
<div class="file-drop"> @if($feature == '')
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label> <div class="file-drop">
</div> <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
<label class="list-title">IMAGES AND VIDEO</label> </div>
<div id="page-images-list" class="page-images-list"></div> <label class="list-title">IMAGES AND VIDEO</label>
<label class="list-title">FILES</label> <div id="page-images-list" class="page-images-list"></div>
<div class="page-files-list"></div> <label class="list-title">FILES</label>
@else <div class="page-files-list"></div>
<div class="file-drop"> @else
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label> <div class="file-drop">
</div> <label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
<label class="list-title">IMAGES AND VIDEO</label> </div>
<div id="page-images-list" class="page-images-list"> <label class="list-title">IMAGES AND VIDEO</label>
@include('includes.media-list') <div id="page-images-list" class="page-images-list">
</div> @include('includes.media-list')
<label class="list-title">FILES</label> </div>
<div class="page-files-list"> <label class="list-title">FILES</label>
@include('includes.files-list') <div class="page-files-list">
</div> @include('includes.files-list')
@endif </div>
</section> @endif
<section class="page-meta"> </div>
<div class="page-meta-wrapper"> <div class="page-meta">
<div class="page-title">
<strong>TITLE</strong>
<textarea id="post-title-text" class="input-dark" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{$title}}</textarea>
</div>
<div class="page-tags">
<strong>TAGS</strong>
<textarea id="post-tags" class="input-dark" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{$tags}}</textarea>
</div>
<div class="page-layouts"> <div class="page-layouts">
<strong>LAYOUTS</strong> LAYOUTS
<select id="page-templates"> <select id="page-templates">
@foreach($views as $view) @foreach($views as $view)
@if($view == $layout) @if($view == $layout)
@ -47,18 +39,22 @@
@endforeach @endforeach
</select> </select>
</div> </div>
<div class="page-tags">
TAGS
<textarea id="post-tags" class="input-dark" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{$tags}}</textarea>
</div>
<div class="page-options"> <div class="page-options">
<strong>OPTIONS</strong> OPTIONS
@include('includes.options') @include('includes.options')
</div> </div>
<div class="page-updated"> <div class="page-updated">
<strong>UPDATED</strong> UPDATED
<span id="post-date" type="text"> <span id="post-date" type="text">
{{$updated}} {{$updated}}
</span> </span>
</div> </div>
<div class="page-created"> <div class="page-created">
<strong>CREATED</strong> CREATED
<span id="post-date" type="text"> <span id="post-date" type="text">
{{$date}} {{$date}}
</span> </span>
@ -67,9 +63,11 @@
<input id="form_token" name="token" type="hidden" value="needtoaddtoken"> <input id="form_token" name="token" type="hidden" value="needtoaddtoken">
</div> </div>
</div> </div>
</div>
</section> </section>
<section class="text-editor"> <section class="text-editor">
<div class="page-title">
<textarea id="post-title-text" class="input-dark" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{$editTitle}}</textarea>
</div>
@include('includes.editor') @include('includes.editor')
<div class="edit-post-wrapper"> <div class="edit-post-wrapper">
<textarea id="edit" spellcheck="false" class="language-md">{{$content}}</textarea> <textarea id="edit" spellcheck="false" class="language-md">{{$content}}</textarea>

52
resources/views/includes/editor.blade.php
View file

@ -1,60 +1,42 @@
<div class="text-editor-control"> <div class="text-editor-control">
<button id="edit-bold" class="content-editor-btn-text editor-button" title="bold"> <button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
<svg id="edit-bold" class="icon"> <svg id="edit-bold" class="icon">
<use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold"/> <use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold" />
</svg> </svg>
</button> </button>
<button id="edit-italic" class="content-editor-btn-text editor-button" title="italic"> <button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">
<svg id="edit-italic" class="icon"> <svg id="edit-italic" class="icon">
<use id="edit-italic" xlink:href="/assets/images/global/sprite.svg#tabler-italic"/> <use id="edit-italic" xlink:href="/assets/images/global/sprite.svg#tabler-italic" />
</svg> </svg>
</button> </button>
<button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough"> <button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough">
<svg id="edit-strikethrough" class="icon"> <svg id="edit-strikethrough" class="icon">
<use id="edit-strikethrough" xlink:href="/assets/images/global/sprite.svg#tabler-strikethrough"/> <use id="edit-strikethrough" xlink:href="/assets/images/global/sprite.svg#tabler-strikethrough" />
</svg> </svg>
</button> </button>
<button id="edit-link" class="content-editor-btn-icon editor-button" title="insert link"> <button id="edit-link" class="content-editor-btn-icon editor-button" title="insert link">
<svg id="edit-link" class="icon"> <svg id="edit-link" class="icon">
<use id="edit-link" xlink:href="/assets/images/global/sprite.svg#entypo-link"/> <use id="edit-link" xlink:href="/assets/images/global/sprite.svg#entypo-link" />
</svg> </svg>
</button> </button>
<button id="edit-header1" class="content-editor-btn-text editor-button" title="header 1"> <button id="edit-header1" class="content-editor-btn-text editor-button" title="header 1">
<svg id="edit-header1" class="icon"> <svg id="edit-header1" class="icon">
<use id="edit-header1" xlink:href="/assets/images/global/sprite.svg#tabler-heading-1"/> <use id="edit-header1" xlink:href="/assets/images/global/sprite.svg#tabler-heading-1" />
</svg> </svg>
</button> </button>
<button id="edit-header2" class="content-editor-btn-text editor-button" title="header 2"> <button id="edit-header2" class="content-editor-btn-text editor-button" title="header 2">
<svg id="edit-header2" class="icon"> <svg id="edit-header2" class="icon">
<use id="edit-header2" xlink:href="/assets/images/global/sprite.svg#tabler-heading-2"/> <use id="edit-header2" xlink:href="/assets/images/global/sprite.svg#tabler-heading-2" />
</svg> </svg>
</button> </button>
<button id="edit-header3" class="content-editor-btn-text editor-button" title="header 3"> <button id="edit-header3" class="content-editor-btn-text editor-button" title="header 3">
<svg id="edit-header3" class="icon"> <svg id="edit-header3" class="icon">
<use id="edit-header3" xlink:href="/assets/images/global/sprite.svg#tabler-heading-3"/> <use id="edit-header3" xlink:href="/assets/images/global/sprite.svg#tabler-heading-3" />
</svg> </svg>
</button> </button>
<button id="edit-image" class="content-editor-btn-icon editor-button" title="insert image"> <button id="edit-image" class="content-editor-btn-icon editor-button" title="insert image">
<svg id="edit-image" class="icon"> <svg id="edit-image" class="icon">
<use id="edit-image" xlink:href="/assets/images/global/sprite.svg#entypo-image"/> <use id="edit-image" xlink:href="/assets/images/global/sprite.svg#entypo-image" />
</svg> </svg>
</button> </button>
@if($mode == "edit") </div>
<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="edit-update" class="icon">
<use id="edit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save"/>
</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" class="icon">
<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="edit-save" class="icon">
<use id="edit-save" xlink:href="/assets/images/global/sprite.svg#entypo-plus"/>
</svg>
</button>
@endif
</div>

52
resources/views/includes/nav.blade.php
View file

@ -1,52 +1,64 @@
<div class="menu"> <div class="menu">
@if($title == "Settings" ) @switch($title)
@include('includes.submenu-settings') @case("Settings")
@elseif($title == "Start" ) @include('includes.submenu-settings')
@include('includes.submenu-start') @break
@endif
@case("Start")
@include('includes.submenu-start')
@break
@case("Edit Page")
@include('includes.submenu-edit-page')
@break
@endswitch
<a id="settings" class="main-nav-secondary-highlight" href="/dashboard/settings" title="settings"> <a id="settings" class="main-nav-secondary-highlight" href="/dashboard/settings" title="settings">
<svg id="nav-settings-icon" class="icon"> <svg id="nav-settings-icon" class="icon">
<use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/> <use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog" />
</svg> </svg>
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
<svg id="nav-menu-icon" class="icon"> <svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/> <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link" />
</svg> </svg>
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">
<svg id="nav-logout-icon" class="icon"> <svg id="nav-logout-icon" class="icon">
<use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/> <use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out" />
</svg> </svg>
</a> </a>
</div> </div>
<label id='menu-toggle-label' for="mobile-toggle"> <label id='menu-toggle-label' for="mobile-toggle">
<svg id="nav-menu-icon" class="icon"> <svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/> <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu" />
</svg> </svg>
</label> </label>
<input id="mobile-toggle" type="checkbox" /> <input id="mobile-toggle" type="checkbox" />
<div class="mobile-menu"> <div class="mobile-menu">
@if($title == "Settings" ) @switch($title)
@include('includes.submenu-settings') @case("Settings")
@elseif($title == "Start" ) @include('includes.submenu-settings')
@include('includes.submenu-start') @break
@endif
@case("Start")
@include('includes.submenu-start')
@break
@endswitch
<a id="settings" class="main-nav-secondary-highlight" href="/dashboard/settings" title="settings"> <a id="settings" class="main-nav-secondary-highlight" href="/dashboard/settings" title="settings">
<svg id="nav-settings-icon" class="icon"> <svg id="nav-settings-icon" class="icon">
<use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog"/> <use id="nav-settings-icon" xlink:href="/assets/images/global/sprite.svg#entypo-cog" />
</svg> </svg>
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
<svg id="nav-menu-icon" class="icon"> <svg id="nav-menu-icon" class="icon">
<use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/> <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link" />
</svg> </svg>
</a> </a>
<a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out"> <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">
<svg id="nav-logout-icon" class="icon"> <svg id="nav-logout-icon" class="icon">
<use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out"/> <use id="nav-logout-icon" xlink:href="/assets/images/global/sprite.svg#entypo-log-out" />
</svg> </svg>
</a> </a>
</div> </div>

25
resources/views/includes/submenu-edit-page.blade.php Normal file
View file

@ -0,0 +1,25 @@
<div class="submenu">
<button id="meta-info-toggle" title="page meta">
<svg id="meta-info-toggle" class="icon">
<use id="meta-info-toggle" xlink:href="/assets/images/global/sprite.svg#entypo-layers" />
</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']}}" title="update page">
<svg id="edit-update" class="icon">
<use id="edit-update" xlink:href="/assets/images/global/sprite.svg#entypo-save" />
</svg>
</button>
<button id="edit-delete" class="content-editor-btn-icon editor-button submit-delete" for="post-delete" title='delete page'>
<svg id="edit-delete" class="icon">
<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="edit-save" class="icon">
<use id="edit-save" xlink:href="/assets/images/global/sprite.svg#entypo-plus" />
</svg>
</button>
@endif
</div>

6
resources/views/includes/submenu-start.blade.php
View file

@ -1,12 +1,12 @@
<div class="submenu"> <div class="submenu">
<a class="main-nav-primary" href='/dashboard/pages' title="view pages"> <a class="main-nav-primary" href='/dashboard/pages' title="view pages">
<svg id="option-menu-pin" class="icon"> <svg id="option-menu-pin" class="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#minicute-book"/> <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#minicute-book" />
</svg> </svg>
</a> </a>
<a class="main-nav-primary" href='/dashboard/page/add/new' title="add new page"> <a class="main-nav-primary" href='/dashboard/page/add/new' title="add new page">
<svg id="option-menu-pin" class="icon"> <svg id="option-menu-pin" class="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus"/> <use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-squared-plus" />
</svg> </svg>
</a> </a>
</div> </div>

2
routes/web.php
View file

@ -18,7 +18,7 @@ use App\Http\Middleware\VerifyCsrfToken;
| |
*/ */
//routing needs a bit more nuance, so requests are sent to a controller to sort traffic //REFACTOR: Reorganize routes here intstead of controllers to reduce confusion
Route::get("/{first?}/{second?}/{third?}/{four?}", [RouteGetController::class, 'handleRequest']); Route::get("/{first?}/{second?}/{third?}/{four?}", [RouteGetController::class, 'handleRequest']);
Route::post("/{first?}/{second?}/{third?}", [RoutePostController::class, 'handleRequest']) Route::post("/{first?}/{second?}/{third?}", [RoutePostController::class, 'handleRequest'])
->middleware(VerifyCsrfToken::class); ->middleware(VerifyCsrfToken::class);