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