From 9c200ea78df35c2faddfe78780c09b216ea27206 Mon Sep 17 00:00:00 2001 From: ro Date: Mon, 12 May 2025 13:12:58 -0600 Subject: [PATCH] reorganized text editor 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 --- .prettierrc | 1 - app/Http/Controllers/DashController.php | 81 ++++++----- public/assets/css/dash/atomic.css | 111 +++++++++----- public/assets/css/dash/page-editor.css | 136 ++++++++++-------- .../dash/app/controllers/PageEditor.js | 12 ++ resources/views/back/page.blade.php | 76 +++++----- resources/views/includes/editor.blade.php | 52 +++---- resources/views/includes/nav.blade.php | 52 ++++--- .../includes/submenu-edit-page.blade.php | 25 ++++ .../views/includes/submenu-start.blade.php | 6 +- routes/web.php | 2 +- 11 files changed, 322 insertions(+), 232 deletions(-) create mode 100644 resources/views/includes/submenu-edit-page.blade.php diff --git a/.prettierrc b/.prettierrc index dfe4522..5ede831 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,4 @@ { - "plugins": ["@shufo/prettier-plugin-blade"], "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } }, { diff --git a/app/Http/Controllers/DashController.php b/app/Http/Controllers/DashController.php index ac8ebac..2b506d3 100644 --- a/app/Http/Controllers/DashController.php +++ b/app/Http/Controllers/DashController.php @@ -89,53 +89,56 @@ class DashController extends Controller $page = []; $views = []; $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'; //just a patch for now to get this out of the template if ($mode == 'edit') { - $id = $page['id']; - $uuid = $page['uuid']; - $slug = $page['slug']; - $feature = $page['feature']; - $layout = $page['layout']; - $tags = $page['tags']; - $content = $page['content']; - $date = $page['created']; - $updated = $page['updated']; - $media = $page['media']; - $files = $page['docs']; + $id = $page['id']; + $uuid = $page['uuid']; + $slug = $page['slug']; + $feature = $page['feature']; + $layout = $page['layout']; + $tags = $page['tags']; + $content = $page['content']; + $date = $page['created']; + $updated = $page['updated']; + $media = $page['media']; + $files = $page['docs']; + $editTitle = $page['title']; } else { - $id = ""; - $uuid = ""; - $slug = ""; - $feature = ""; - $layout = ""; - $tags = ""; - $content = ""; - $date = ""; - $updated = ""; - $media = ""; - $files = ""; + $id = ""; + $uuid = ""; + $slug = ""; + $feature = ""; + $layout = ""; + $tags = ""; + $content = ""; + $date = ""; + $updated = ""; + $media = ""; + $files = ""; + $editTitle = ""; }; return view('back.page', [ - "status" => $this->member::status(), - "mode" => $mode, - "page" => $page, - "views" => $views, - "id" => $id, - "uuid" => $uuid, - "slug" => $slug, - "feature" => $feature, - "layout" => $layout, - "tags" => $tags, - "content" => $content, - "date" => $date, - "updated" => $updated, - "media" => $media, - "files" => $files, - "title" => urldecode($title), + "status" => $this->member::status(), + "mode" => $mode, + "page" => $page, + "views" => $views, + "id" => $id, + "uuid" => $uuid, + "slug" => $slug, + "feature" => $feature, + "layout" => $layout, + "tags" => $tags, + "content" => $content, + "date" => $date, + "updated" => $updated, + "media" => $media, + "files" => $files, + "title" => urldecode($title), + "editTitle" => urldecode($editTitle), ]); } diff --git a/public/assets/css/dash/atomic.css b/public/assets/css/dash/atomic.css index a55de47..f781182 100644 --- a/public/assets/css/dash/atomic.css +++ b/public/assets/css/dash/atomic.css @@ -4,69 +4,116 @@ * Small, reusable classes */ - /* * Padding */ -.p1 { padding: 5px; } -.pt1 { padding-top: 5px; } -.pl1 { padding-left: 5px; } -.pr1 { 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; } +.p1 { + padding: 5px; +} +.pt1 { + padding-top: 5px; +} +.pl1 { + padding-left: 5px; +} +.pr1 { + 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 */ -.mt1 { margin-top: 5px; } -.ml1 { margin-left: 5px; } -.mr1 { margin-right: 5px; } -.mb1 { margin-bottom: 5px; } - -.mt2 { margin-top: 10px; } -.ml2 { margin-left: 10px; } -.mr2 { margin-right: 10px; } -.mb2 { margin-bottom: 10px; } +.mt1 { + margin-top: 5px; +} +.ml1 { + margin-left: 5px; +} +.mr1 { + margin-right: 5px; +} +.mb1 { + margin-bottom: 5px; +} +.mt2 { + margin-top: 10px; +} +.ml2 { + margin-left: 10px; +} +.mr2 { + margin-right: 10px; +} +.mb2 { + margin-bottom: 10px; +} /* * Layout */ .row { - display: flex; + display: flex; } .col { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .items-center { - display: flex; - align-items: center; + display: flex; + align-items: center; } .justify-center { - display: flex; - justify-content: flex; + display: flex; + justify-content: flex; } .grow { - flex-grow: 1; + flex-grow: 1; } - /* * Borders and rounding */ .rounded { - overflow: hidden; - border-radius: 5px; + overflow: hidden; + border-radius: 5px; } +/* + * Show/Hide + */ + +.hide-el { + display: none; + visibility: hidden; + opacity: 0; +} + +.show-grid { + display: grid; + visibility: visible; + opacity: 1; +} diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css index 55f9c96..0f402c5 100644 --- a/public/assets/css/dash/page-editor.css +++ b/public/assets/css/dash/page-editor.css @@ -1,12 +1,27 @@ -/* FILE MANAGER */ -main > section.file-manager { - width: 100%; +section.meta { background: var(--primary-highlight); - padding: 20px 0; - margin-top: 75px; + display: grid; + 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%; max-width: 900px; margin: 0 auto; @@ -14,22 +29,22 @@ main > section.file-manager label.list-title { color: var(--primary); } -main > section.file-manager > div.file-drop { +main > section > div.file-manager > div.file-drop { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100px; - background: var(--white); - color: var(--primary); + color: var(--white); + background: var(--primary); vertical-align: middle; border-radius: 5px; max-width: 900px; margin: 10px auto; } -main > section.file-manager > div.page-images-list, -main > section.file-manager > div.page-files-list { +main > section > div.file-manager > div.page-images-list, +main > section > div.file-manager > div.page-files-list { max-width: 900px; width: 100%; margin: 10px auto; @@ -38,8 +53,8 @@ main > section.file-manager > div.page-files-list { gap: 10px; } -main > section.file-manager > div.page-images-list > div, -main > section.file-manager > div.page-files-list > div { +main > section > div.file-manager > div.page-images-list > div, +main > section > div.file-manager > div.page-files-list > div { width: 100%; height: 150px; border-radius: 3px; @@ -48,7 +63,7 @@ main > section.file-manager > div.page-files-list > div { 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%; height: 100%; 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; } -main > section.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-images-list > div > button.media-remove, +main > section > div.file-manager > div.page-files-list > div > button.media-remove { color: var(--white); margin: 5px; padding: 10px 15px 7px; 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; height: 100%; width: 100%; } -main > section.file-manager > div.page-images-list > div.video-item > button, -main > section.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-images-list > div.video-item > button, +main > section > div.file-manager > div.page-files-list > div.audio-item > button, +main > section > div.file-manager > div.page-files-list > div.file-item > button { position: absolute; top: 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 / 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; } -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; bottom: 0; background: var(--secondary); 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%; width: 100%; } /* PAGE META */ -main > section.page-meta { - width: 100%; - background: var(--secondary-highlight); +main > section > div.page-meta { + padding: 10px; + font-size: 0.8em; + color: var(--primary); } -main > section.page-meta > div.page-meta-wrapper { - 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 { +main div.page-meta textarea#post-title-text { font-family: var(--base-type); width: 100%; height: 80px; font-size: 2em; } -main section.page-meta textarea#post-tags { +main div.page-meta textarea#post-tags { font-family: var(--base-type); width: 100%; - height: 80px; } -main section.page-meta select { +main div.page-meta select { background: var(--primary); color: var(--secondary); border-radius: 3px; @@ -154,11 +159,11 @@ main section.page-meta select { font-size: 1.5em; } -main section.page-meta div.page-options { +main div.page-meta div.page-options { width: 100%; } -main section.page-meta div.page-meta-wrapper div.page-options button { +main div.page-meta div.page-options button { width: 25%; height: 45px; transition: all 0.3s linear; @@ -169,19 +174,15 @@ main section.page-meta div.page-meta-wrapper div.page-options button { text-align: center; } -main - > section.page-meta - > div.page-meta-wrapper - > div.page-options - > button.post-option-btn:nth-child(3) { +main > div.page-meta > div.page-options > button.post-option-btn:nth-child(3) { 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; } -main section.page-meta div.page-meta-wrapper div.page-created input { +main div.page-meta div.page-created input { display: none; visibility: hidden; } @@ -191,7 +192,18 @@ main section.page-meta div.page-meta-wrapper div.page-created input { main > section.text-editor { width: 100%; 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 { @@ -270,10 +282,10 @@ main section.text-editor div.edit-post-wrapper pre code { /* RESPONSIVE */ @media only screen and (max-width: 900px) { - main > section.file-manager > div.file-drop, - main > section.file-manager > div.page-images-list, - main > section.file-manager > div.page-files-list, - main > section.page-meta > div.page-meta-wrapper, + main > div.file-manager > div.file-drop, + main > div.file-manager > div.page-images-list, + main > div.file-manager > div.page-files-list, + main > div.page-meta > div.page-meta-wrapper, main > section.text-editor { width: 97%; } @@ -284,20 +296,20 @@ main section.text-editor div.edit-post-wrapper pre code { } @media only screen and (max-width: 480px) { - main > section.file-manager > div.page-images-list, - main > section.file-manager > div.page-files-list { + main > div.file-manager > div.page-images-list, + main > div.file-manager > div.page-files-list { grid-template-columns: 1fr 1fr 1fr; } - main > section.file-manager > div.file-drop, - main > section.file-manager > div.page-images-list, - main > section.file-manager > div.page-files-list, - main > section.page-meta > div.page-meta-wrapper, + main > div.file-manager > div.file-drop, + main > div.file-manager > div.page-images-list, + main > div.file-manager > div.page-files-list, + main > div.page-meta > div.page-meta-wrapper, main > section.text-editor { width: 95%; } - main > section.page-meta > div.page-meta-wrapper { + main > div.page-meta > div.page-meta-wrapper { grid-template-columns: 1fr; } diff --git a/public/assets/scripts/dash/app/controllers/PageEditor.js b/public/assets/scripts/dash/app/controllers/PageEditor.js index 3ac893a..39d1b75 100644 --- a/public/assets/scripts/dash/app/controllers/PageEditor.js +++ b/public/assets/scripts/dash/app/controllers/PageEditor.js @@ -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 diff --git a/resources/views/back/page.blade.php b/resources/views/back/page.blade.php index 6aa0c91..113a6fc 100644 --- a/resources/views/back/page.blade.php +++ b/resources/views/back/page.blade.php @@ -1,42 +1,34 @@ @extends('frame') -@section('title', 'The Dash | Editing '. $title) +@section('title', 'The Dash | Editing '. $editTitle) @section('main-content') -
- @if($feature == '') -
- -
- -
- -
- @else -
- -
- -
- @include('includes.media-list') -
- -
- @include('includes.files-list') -
- @endif -
-
-
-
- TITLE - -
-
- TAGS - -
+
+
+ @if($feature == '') +
+ +
+ +
+ +
+ @else +
+ +
+ +
+ @include('includes.media-list') +
+ +
+ @include('includes.files-list') +
+ @endif +
+
- LAYOUTS + LAYOUTS
+
+ TAGS + +
- OPTIONS + OPTIONS @include('includes.options')
- UPDATED + UPDATED {{$updated}}
- CREATED + CREATED {{$date}} @@ -67,9 +63,11 @@
-
+
+ +
@include('includes.editor')
diff --git a/resources/views/includes/editor.blade.php b/resources/views/includes/editor.blade.php index 7b5a34b..f7da5a3 100644 --- a/resources/views/includes/editor.blade.php +++ b/resources/views/includes/editor.blade.php @@ -1,60 +1,42 @@
- @if($mode == "edit") - - - @else - - @endif -
+
\ No newline at end of file diff --git a/resources/views/includes/nav.blade.php b/resources/views/includes/nav.blade.php index a844618..e082dc1 100644 --- a/resources/views/includes/nav.blade.php +++ b/resources/views/includes/nav.blade.php @@ -1,52 +1,64 @@
- @if($title == "Settings" ) - @include('includes.submenu-settings') - @elseif($title == "Start" ) - @include('includes.submenu-start') - @endif + @switch($title) + @case("Settings") + @include('includes.submenu-settings') + @break + + @case("Start") + @include('includes.submenu-start') + @break + + @case("Edit Page") + @include('includes.submenu-edit-page') + @break + @endswitch - + - + - +
- @if($title == "Settings" ) - @include('includes.submenu-settings') - @elseif($title == "Start" ) - @include('includes.submenu-start') - @endif + @switch($title) + @case("Settings") + @include('includes.submenu-settings') + @break + + @case("Start") + @include('includes.submenu-start') + @break + @endswitch - + - + - + -
+ \ No newline at end of file diff --git a/resources/views/includes/submenu-edit-page.blade.php b/resources/views/includes/submenu-edit-page.blade.php new file mode 100644 index 0000000..66c5539 --- /dev/null +++ b/resources/views/includes/submenu-edit-page.blade.php @@ -0,0 +1,25 @@ +
+ + @if($mode == "edit") + + + @else + + @endif +
\ No newline at end of file diff --git a/resources/views/includes/submenu-start.blade.php b/resources/views/includes/submenu-start.blade.php index 3c3ce1a..5e5985e 100644 --- a/resources/views/includes/submenu-start.blade.php +++ b/resources/views/includes/submenu-start.blade.php @@ -1,12 +1,12 @@
- + - + -
+ \ No newline at end of file diff --git a/routes/web.php b/routes/web.php index 4bc788d..5b165d9 100644 --- a/routes/web.php +++ b/routes/web.php @@ -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::post("/{first?}/{second?}/{third?}", [RoutePostController::class, 'handleRequest']) ->middleware(VerifyCsrfToken::class);