Settings CSS Remix

Wasn't feeling the previous CSS responsive structure, so edited it to be
a bit more streamline.

Also fixed small issue with the backup API request.

Made a small change to notifications so the alert stays live while the
system is processing a request rather than going back to an unalert
state.

brain/utility/Maintenance.php

@@ -2,6 +2,7 @@
 
 namespace brain\utility;
 
+use brain\data\Settings;
 use Carbon\Carbon;
 
 class Maintenance

brain/views/dash/settings.twig

@@ -10,7 +10,6 @@
 
 	{% block mainContent %}
 		<article role="settings">
-			<h2>Info</h2>
 			<section role="member-settings">
 				<div role="member-avatar">
 					<div role="avatar" style="background: url({{ member['avatar'] }} ) no-repeat center center / cover"></div>
@@ -23,20 +22,24 @@
 				<div>
 					<input type='text' name='handle' id='settings-handle' placeholder='handle' value="{{ member['handle'] }}" autofocus/>
 					<input type='text' name='email' id='settings-email' placeholder='email' value="{{ member['email'] }}" autofocus/>
-				</div>
-				<div>
 					<input type='text' name='base-url' id='settings-url' placeholder='url' value="{{ baseUrl }}" autofocus/>
 					<input type='text' name='base-title' id='settings-title' placeholder='site title' value="{{ siteTitle }}" autofocus/>
-				</div>
-				<div>
 					<textarea id="settings-desc" type='text' name='settings_desc' class='settings-dec' placeholder='description stuff' , autofocus>{{ desc }}</textarea>
 				</div>
-			</section>
+
-			<h2>Options</h2>
+				<div>
-			<section role="site-settings">
+					<button id="create-backup">
+						<i class="ti ti-disc"></i>
+						<span>BACK UP YOUR SITE</span>
+					</button><br/>
+					{% if lastBackup != '' %}
+						LAST BACK UP<br/>
+						<a href="/api/v1/files">{{ lastBackup }}</a><br/>
+					{% else %}
+						<span>span No back ups. Frowny face.</span>
+					{% endif %}
+				</div>
 				<div role="features">
-					<label>Features</label>
-					<br>
 					{% if apiStatus is defined and apiStatus == "true" %}
 						<button id="api-access-toggle" title="allow external api" data-enabled="true">
 							<i class="ti ti-phone-incoming"></i>
@@ -108,9 +111,6 @@
 					</button>
 					<br/><br/>
 				</div>
-				</section>
-				<h2>Data</h2>
-				<section role="data-settings">
 				<div>
 					<label>API KEY</label>
 					<br/>
@@ -119,18 +119,6 @@
 					<label>FORM TOKEN</label><br/>
 					{{ ftoken }}
 				</div>
-					<div>
-						<button id="create-backup">
-							<i class="ti ti-disc"></i>
-							<span>BACK UP YOUR SITE</span>
-						</button><br/>
-						{% if lastBackup != '' %}
-							LAST BACK UP<br/>
-							<a href="/api/v1/files">{{ lastBackup }}</a><br/>
-						{% else %}
-							<span>span No back ups. Frowny face.</span>
-						{% endif %}
-					</div>
 			</section>
 		</article>
 	{% endblock %}

public/assets/css/dash/settings.css

@@ -16,13 +16,11 @@ article[role="settings"] label {
   font-weight: 400;
 }
 
-section[role="member-settings"],
+section[role="member-settings"] {
-section[role="site-settings"],
-section[role="data-settings"],
-section[role="backup-settings"] {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
-  gap: 10px;
+  grid-auto-columns: auto;
+  gap: 15px;
   width: 100%;
   max-width: 900px;
   margin: 10px auto;
@@ -32,8 +30,47 @@ section[role="member-settings"] {
   width: 100%;
 }
 
-section[role="member-settings"] > div[role="member-avatar"] {
+section[role="member-settings"] > div:nth-child(1) {
-  height: 300px;
+  grid-column: 1/2;
+  grid-row: 1/3;
+}
+
+section[role="member-settings"] > div:nth-child(2) {
+  grid-column: 2/4;
+  grid-row: 1/3;
+}
+
+section[role="member-settings"] > div:nth-child(3) {
+  grid-row: 1/3;
+}
+
+section[role="member-settings"] > div:nth-child(4) {
+  color: var(--white);
+}
+
+section[role="member-settings"] > div:nth-child(4) a {
+  font-weight: bold;
+  text-decoration: underline;
+  color: var(--tertiary);
+}
+
+section[role="member-settings"] > div:nth-child(5) {
+  grid-column: 2/4;
+}
+
+section[role="member-settings"] > div:nth-child(6) {
+  grid-column: 1/3;
+}
+
+section[role="member-settings"] > div:nth-child(7) {
+  grid-column: 3/5;
+  min-height: 325px;
+}
+
+section[role="member-settings"] > div:nth-child(8) {
+  grid-column: 1/4;
+  color: var(--white);
+  word-wrap: break-word;
 }
 
 section[role="member-settings"] > div[role="member-avatar"] div,
@@ -55,15 +92,7 @@ section[role="member-settings"] div input[type="text"] {
 
 section[role="member-settings"] div textarea {
   width: 99%;
-  height: 86%;
+  height: 63%;
-}
-
-section[role="member-settings"] > div:nth-child(1) {
-  grid-column: 1/2;
-}
-
-section[role="member-settings"] > div:nth-child(2) {
-  grid-column: 2/4;
 }
 
 article[role="settings"] button {
@@ -80,20 +109,22 @@ article[role="settings"] button > span {
   position: relative;
 }
 
-section[role="site-settings"]
+section[role="member-settings"]
   > div[role="features"]
   button[data-enabled="true"] {
   color: var(--white);
 }
 
-section[role="site-settings"]
+section[role="member-settings"]
   > div[role="features"]
   button[data-enabled="false"] {
   color: var(--primary);
   background: var(--secondary);
 }
 
-section[role="site-settings"] > div[role="theme"] button[data-enabled="true"] {
+section[role="member-settings"]
+  > div[role="theme"]
+  button[data-enabled="true"] {
   color: var(--white);
   background: var(--highlight);
   display: block;
@@ -101,7 +132,9 @@ section[role="site-settings"] > div[role="theme"] button[data-enabled="true"] {
   padding: 3px;
 }
 
-section[role="site-settings"] > div[role="theme"] button[data-enabled="false"] {
+section[role="member-settings"]
+  > div[role="theme"]
+  button[data-enabled="false"] {
   color: var(--primary);
   background: var(--secondary);
   display: block;
@@ -109,7 +142,7 @@ section[role="site-settings"] > div[role="theme"] button[data-enabled="false"] {
   padding: 3px;
 }
 
-section[role="site-settings"] > div[role="mail"] a {
+section[role="member-settings"] > div[role="mail"] a {
   margin-right: 3px;
   color: var(--secondary);
   display: inline-block;
@@ -118,18 +151,18 @@ section[role="site-settings"] > div[role="mail"] a {
   border-top: var(--primary) 1px solid;
 }
 
-section[role="site-settings"] > div[role="mail"] a[data-enabled="true"] {
+section[role="member-settings"] > div[role="mail"] a[data-enabled="true"] {
   color: var(--tertiary);
   font-weight: bold;
   border-top: var(--highlight) 1px solid;
 }
 
-section[role="site-settings"] > div[role="mail"] div[data-enabled="false"] {
+section[role="member-settings"] > div[role="mail"] div[data-enabled="false"] {
   visibility: hidden;
   display: none;
 }
 
-section[role="site-settings"] > div[role="mail"] input {
+section[role="member-settings"] > div[role="mail"] input {
   width: 96%;
   height: 30px;
   padding: 5px;
@@ -140,17 +173,6 @@ section[role="data-settings"] {
   color: var(--white);
 }
 
-section[role="data-settings"] div:nth-child(1) {
-  grid-column: 1/3;
-  word-wrap: break-word;
-}
-
-section[role="data-settings"] a {
-  font-weight: bold;
-  text-decoration: underline;
-  color: var(--tertiary);
-}
-
 @media only screen and (max-width: 900px) {
   main > article[role="settings"] {
     width: 97%;
@@ -161,68 +183,81 @@ section[role="data-settings"] a {
   }
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 650px) {
-  article[role="settings"] button {
+  section[role="member-settings"] {
-    width: 98%;
-  }
-
-  article[role="settings"] button > span {
-    font-size: 0.6em;
-  }
-
-  section[role="member-settings"],
-  section[role="site-settings"],
-  section[role="data-settings"],
-  section[role="backup-settings"] {
     grid-template-columns: 1fr 1fr;
   }
 
+  section[role="member-settings"] div textarea {
+    height: 80px;
+  }
+
+  section[role="member-settings"] > div:nth-child(1) {
+    grid-column: 1/2;
+    grid-row: 1/3;
+    height: 200px;
+  }
+
   section[role="member-settings"] > div:nth-child(2) {
     grid-column: 2/3;
+    grid-row: 1/3;
   }
 
-  section[role="member-settings"] > div:nth-child(5) {
+  section[role="member-settings"] > div:nth-child(3) {
     grid-column: 1/3;
+    grid-row: 3/5;
   }
 
-  main > article[role="settings"] > section[role="member-settings"] {
+  section[role="member-settings"] > div:nth-child(4) {
-    width: auto;
-  }
-
-  section[role="member-settings"] > div[role="member-avatar"] {
-    height: 200px;
-  }
-
-  section[role="site-settings"] > div:nth-child(3) {
-    grid-column: 1/3;
-  }
-
-  section[role="data-settings"] > div:nth-child(2) {
-    grid-column: 1/3;
-  }
-}
-
-@media only screen and (max-width: 330px) {
-  section[role="member-settings"],
-  section[role="site-settings"],
-  section[role="data-settings"],
-  section[role="backup-settings"] {
-    grid-template-columns: 1fr;
-    grid-auto-rows: 1fr 1fr auto auto;
-  }
-
-  section[role="member-settings"] > div:nth-child(2),
-  section[role="member-settings"] > div:nth-child(3),
-  section[role="member-settings"] > div:nth-child(4),
-  section[role="member-settings"] > div:nth-child(5) {
     grid-column: 1/2;
   }
 
-  section[role="site-settings"] > div:nth-child(1) {
+  section[role="member-settings"] > div:nth-child(5) {
-    grid-column: 1/3;
+    grid-column: 2/3;
   }
 
-  article[role="settings"] button > span {
+  section[role="member-settings"] > div:nth-child(6) {
-    font-size: 0.8em;
+    grid-column: 1/2;
+  }
+
+  section[role="member-settings"] > div:nth-child(7) {
+    grid-column: 2/3;
+    min-height: 325px;
+  }
+
+  section[role="member-settings"] > div:nth-child(8) {
+    grid-column: 1/3;
+  }
+}
+
+@media only screen and (max-width: 530px) {
+  section[role="member-settings"] {
+    grid-template-columns: 1fr;
+  }
+
+  section[role="member-settings"] div textarea {
+    height: 80px;
+  }
+
+  section[role="member-settings"] > div:nth-child(1) {
+    grid-row: 1/3;
+    height: 200px;
+  }
+
+  section[role="member-settings"] > div:nth-child(2) {
+    grid-row: 3/5;
+  }
+
+  section[role="member-settings"] > div:nth-child(3) {
+    grid-column: 1;
+    grid-row: 5/7;
+  }
+
+  section[role="member-settings"] > div:nth-child(4),
+  section[role="member-settings"] > div:nth-child(5),
+  section[role="member-settings"] > div:nth-child(6),
+  section[role="member-settings"] > div:nth-child(7),
+  section[role="member-settings"] > div:nth-child(8) {
+    grid-column: 1/3;
   }
 }

public/assets/scripts/Start.js

@@ -445,7 +445,7 @@ const $7e781a188206b2b3$export$d46ee33f41c7e43d = "apiUseNotAuthorized";
             data = {
                 task: "create_backup"
             };
-            this._request(url, event, method, type, data).then((result)=>{
+            this._request(url, null, event, method, type, data).then((result)=>{
                 resolve(result);
             }).catch((err)=>{
                 reject(err);
@@ -4186,6 +4186,7 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
         $accfb6154319a04b$var$iconGood.style.display = "none";
         $accfb6154319a04b$var$iconNotGood.style.display = "none";
         var color = "";
+        $accfb6154319a04b$var$responseText.innerHTML = text;
         if (status !== null) {
             if (status) {
                 color = "#32cd32";
@@ -4200,7 +4201,6 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
             color = "#200317";
             $accfb6154319a04b$var$iconWorking.style.display = "block";
         }
-        $accfb6154319a04b$var$responseText.innerHTML = text;
         new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
             targets: document.querySelector('[role="top-nav"]'),
             rotateX: "180deg",
@@ -4226,6 +4226,7 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
                     duration: 400,
                     complete: ()=>{
                         setTimeout(()=>{
+                            if (status !== null) {
                                 (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
                                     targets: $accfb6154319a04b$var$notifyText,
                                     backgroundColor: color,
@@ -4250,6 +4251,7 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
                                     rotateX: "180deg",
                                     easing: "easeOutQuint"
                                 });
+                            }
                         }, 2500);
                     }
                 });

src/com/controllers/MaintenanceManager.js

@@ -135,8 +135,7 @@ class MaintenanceManager {
 			method = REQUEST_TYPE_POST;
 			type = CONTENT_TYPE_JSON;
 			data = { task: 'create_backup' };
-
+			this._request(url, null, event, method, type, data)
-			this._request(url, event, method, type, data)
 				.then(result => {
 					resolve(result);
 				})

src/com/ui/Notifications.js

@@ -24,6 +24,7 @@ export default class Notfications {
 		iconNotGood.style.display = 'none';
 
 		var color = '';
+		responseText.innerHTML = text;
 		if (status !== null) {
 			if (status) {
 				color = '#32cd32';
@@ -38,7 +39,6 @@ export default class Notfications {
 			color = '#200317';
 			iconWorking.style.display = 'block';
 		}
-		responseText.innerHTML = text;
 
 		new anime({
 			targets: document.querySelector('[role="top-nav"]'),
@@ -67,6 +67,7 @@ export default class Notfications {
 					duration: 400,
 					complete: () => {
 						setTimeout(() => {
+							if (status !== null) {
 								anime({
 									targets: notifyText,
 									backgroundColor: color,
@@ -94,6 +95,7 @@ export default class Notfications {
 									rotateX: '180deg',
 									easing: 'easeOutQuint'
 								});
+							}
 						}, 2500);
 					}
 				});