theme color correction, editor responsive tweaks

the theme color for the dashboard was incorrect, so that has been
updated and the responsive sticky for the text formatter in the page
editor went funky with posts that had a lot of text so that's been
adjusted so it behaves as it should when it has to resize and stick

app/Http/Controllers/ThemeController.php

@@ -62,8 +62,10 @@ class ThemeController extends Controller
                     //if coming from theme page, grabs id of latest page
                     if ($id == null) {
                         $uuid = $this->getPageUUID();
+                    } else {
+                        //get page by uuid
+                        $page = $this->pages->getByUuid($id);
                     }
-                    $page = $this->pages->getByUuid($uuid);
                 }
                 $pageData = $this->sort->page($page);
                 break;

app/Services/Data/SortingService.php

@@ -90,7 +90,7 @@ class SortingService
             if (isset($page['tags'])) {
                 if (strpos($page['tags'], $tag) !== false) {
                     array_push($tagged, [
-                        'title'   => $page['title'],
+                        'title'   => urldecode($page['title']),
                         'slug'    => $page['slug'],
                         'path'    => $page['path'],
                         'feature' => $page['feature'],

content/themes/fipamo-default-v2/archive.blade.php

@@ -14,14 +14,17 @@
                         <div role="archive-month">
                             <h3>{{ $data['full_month'] }}</h3>
                             @foreach($data['pages'] as $page)
+                                @php
+                                    $title = urldecode($page['title']);
+                                @endphp
                                 @if(isset($dynamicRender))
                                     @if($dynamicRender == 'true')
-                                        <a href="{{ "/".$item['year']."/".$data['month']."/".$page['slug'] }}">{{ $page['title'] }}</a><br/>
+                                        <a href="{{ "/".$item['year']."/".$data['month']."/".$page['slug'] }}">{{ $title }}</a><br/>
                                     @else
-                                        <a href="{{ "/".$item['year']."/".$data['month']."/".$page['slug'].".html" }}">{{ $page['title'] }}</a><br/>
+                                        <a href="{{ "/".$item['year']."/".$data['month']."/".$page['slug'].".html" }}">{{ $title }}</a><br/>
                                     @endif
                                 @else
-                                    <a href="{{ "/".$item['year']."/".$data['month']."/".$page['slug'] }}">{{ $page['title'] }}</a><br/>
+                                    <a href="{{ "/".$item['year']."/".$data['month']."/".$page['slug'] }}">{{ $title }}</a><br/>
                                 @endif
                             @endforeach
                         </div>

public/assets/css/dash/atomic.css

@@ -1,72 +0,0 @@
-/*
- * Atomic CSS
- *
- * 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; }
-
-
-/*
- * 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; }
-
-
-/*
- * Layout
- */
-.row {
-    display: flex;
-}
-
-.col {
-    display: flex;
-    flex-direction: column;
-}
-
-.items-center {
-    display: flex;
-    align-items: center;
-}
-
-.justify-center {
-    display: flex;
-    justify-content: flex;
-}
-
-.grow {
-    flex-grow: 1;
-}
-
-
-/*
- * Borders and rounding
- */
-.rounded {
-    overflow: hidden;
-    border-radius: 5px;
-}
-

public/assets/css/dash/forms.css

@@ -15,7 +15,7 @@ input[type="email"],
 input[type="password"],
 input[type="text"] {
   border: 0;
-  /*border-radius: 5px;*/
+  border-radius: 5px;
   font: 18px var(--base-type);
   display: inline-block;
 }

public/assets/css/dash/init.css

@@ -6,9 +6,10 @@ section.restore-fresh,
 section.restore-backup {
   margin: 15% auto;
   padding: 10px;
-  max-width: 500px;
+  width: 500px;
   border-radius: 5px;
-  display: flex;
+  display: grid;
+  grid-template-columns: 28.5% 1fr;
   gap: 10px;
   visibility: visible;
 }
@@ -59,11 +60,16 @@ section.password-reset form input {
 
 /* SITE RESTORE */
 
-/*section.restore-fresh form input {
+section.restore-fresh form button {
+  padding: 10px 5px;
+  width: 82%;
+}
+
+section.restore-fresh form input {
   height: 30px;
   padding: 5px;
   margin-bottom: 10px;
-}*/
+}
 
 section.restore-backup form button {
   padding: 10px 5px;
@@ -79,13 +85,20 @@ section.restore-backup form input {
 /* RESPONSIVE */
 
 @media only screen and (max-width: 500px) {
-
   section.login,
   section.password-reset,
   section.restore-fresh,
   section.restore-backup {
-    flex-direction: column;
+    width: 97%;
-    margin: 10px auto;
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  section.login,
+  section.password-reset,
+  section.restore-fresh,
+  section.restore-backup {
+    grid-template-columns: 1fr;
   }
 
   section.login img,
@@ -95,22 +108,3 @@ section.restore-backup form input {
     width: 50px;
   }
 }
-
-.form-label {
-  height: 30px;
-  width: 90px;
-  margin-right: 1px;
-  font-weight: bold;
-  background: var(--secondary);
-  color: var(--primary);
-}
-
-.form-input {
-  height: 30px;
-}
-
-.form-button {
-  padding: 10px 5px;
-  width: 100%;
-}
-

public/assets/css/dash/page-editor.css

@@ -207,7 +207,7 @@ main > section.text-editor > div.text-editor-control {
 .control-freeze {
   position: fixed;
   z-index: 300;
-  width: 97%;
+  width: 900px;
   top: 65px;
 }
 
@@ -277,6 +277,10 @@ main section.text-editor div.edit-post-wrapper pre code {
   main > section.text-editor {
     width: 97%;
   }
+
+  .control-freeze {
+    width: 97%;
+  }
 }
 
 @media only screen and (max-width: 480px) {
@@ -322,4 +326,8 @@ main section.text-editor div.edit-post-wrapper pre code {
   main section.text-editor div.edit-post-wrapper #highlight {
     font-size: 0.8em;
   }
+
+  .control-freeze {
+    width: 96%;
+  }
 }

public/assets/css/dash/start.css

@@ -1,4 +1,3 @@
-@import url("atomic.css");
 @import url("colors.css");
 @import url("forms.css");
 @import url("typography.css");

resources/views/forms/init-fresh.blade.php

@@ -1,35 +1,15 @@
 <div>
     <a href="/dashboard">
-        <img alt="fipamo logo" class="logo-medium mr2" src="/assets/images/global/fipamo-logo-secondary.svg"/>
+        <img alt="fipamo logo" class="logo-medium" src="/assets/images/global/fipamo-logo-secondary.svg"/>
     </a>
 </div>
 <form id="init-form" method="POST" onsubmit="return false;">
-
+    <label class="inline">handle</label><input type="text" class="inline" name="new_member_handle" id="new_member_handle" placeholder="handle"/>
-    <label class="items-center rounded mb2">
+    <label class="inline">email</label><input type="text" class="inline" name="new_member_email" id="new_member_email" placeholder="email"/>
-        <span class="form-label p1 items-center">Handle</span>
+    <label class="inline">password</label><input type="password" class="inline" name="new_member_pass" id="new_member_pass" placeholder="password"/>
-        <input class="form-input p1 grow" type="text" name="new_member_handle" id="new_member_handle" placeholder="handle"/>
+    <label class="inline">confirm</label><input type="password" class="inline" name="new_member_pass2" id="new_member_pass2" placeholder="password confirm"/>
-    </label>
+    <label class="inline">site title</label><input type="text" class="inline" name="new_member_title" id="new_member_title" placeholder="title"/>
-
+    <button id="init-blog" data-action='blog-init' type='submit'>SET UP YOUR SITE</button>
-    <label class="items-center rounded mb2">
+    <br/><br/>
-        <span class="form-label p1 items-center">Email</span>
+    <button class="init-option" id="init-switch-restore">RESTORE FROM BACKUP</button>
-        <input class="form-input p1 grow" type="text" name="new_member_email" id="new_member_email" placeholder="email"/>
-    </label>
-
-    <label class="items-center rounded mb2">
-        <span class="form-label p1 items-center">Password</span>
-        <input class="form-input p1 grow" type="password" name="new_member_pass" id="new_member_pass" placeholder="password"/>
-    </label>
-
-    <label class="items-center rounded mb2">
-        <span class="form-label p1 items-center">Confirm</span>
-        <input class="form-input p1 grow" type="password" name="new_member_pass2" id="new_member_pass2" placeholder="password confirm"/>
-    </label>
-
-    <label class="items-center rounded mb2">
-        <span class="form-label p1 items-center">Site title</span>
-        <input class="form-input p1 grow" type="text" name="new_member_title" id="new_member_title" placeholder="title"/>
-    </label>
-
-    <button id="init-blog" class="form-button mb2" data-action='blog-init' type='submit'>SET UP YOUR SITE</button>
-    <button class="init-option form-button" id="init-switch-restore">RESTORE FROM BACKUP</button>
 </form>

resources/views/frame.blade.php

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="theme-color" content="#d66365" />
+  <meta name="theme-color" content="#cf436b" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="csrf-token" content="{{ csrf_token() }}">
   <title>