From 2501a19685e23a3676c83c122f944c5680cdb36c Mon Sep 17 00:00:00 2001 From: Are0h Date: Tue, 10 May 2022 18:05:41 -0700 Subject: [PATCH] UI design tweaks There were some inconsistencies in the UI due to all the changes that were made to the styleshets, so I fixed the obvious ones that were show stoppers. There's more in there to be smoothed out, so this is just the start. --- brain/views/dash/page-edit.twig | 8 +- brain/views/dash/partials/index.twig | 104 +++++++-------- brain/views/dash/start.twig | 4 +- public/assets/css/dash.css | 10 +- public/assets/scripts/Start.js | 66 +++++----- src/com/ui/Notifications.js | 188 +++++++++++++-------------- src/styles/main/_index.scss | 10 +- 7 files changed, 195 insertions(+), 195 deletions(-) diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig index d7037dd..213df76 100644 --- a/brain/views/dash/page-edit.twig +++ b/brain/views/dash/page-edit.twig @@ -9,7 +9,7 @@ {% set slug = page['slug'] %} {% set layout = page['layout'] %} {% set feature = page['feature'] %} - {% set _title = page['title'] %} + {% set title = page['title'] %} {% set tags = page['tags'] %} {% set content = page['content'] %} {% set date = page['created'] %} @@ -119,7 +119,7 @@
@@ -143,7 +143,7 @@
{% apply spaceless %} @@ -163,7 +163,7 @@ {{ include("dash/partials/editor.twig") }} {% endapply %}
- + 
                 
                   
diff --git a/brain/views/dash/partials/index.twig b/brain/views/dash/partials/index.twig
index 01fe989..0ebb0e2 100644
--- a/brain/views/dash/partials/index.twig
+++ b/brain/views/dash/partials/index.twig
@@ -1,58 +1,58 @@
 

-    

-        

-            

-                Recent
-            

-            

-                
-                    
-                
-               
-                
-                                   
-                
-            

-        

-        

-        {% if data["entryCount"] != 0 %}
-            {% for page in data['pages'] %}
-                {% if page.media[0].type == 'mp4' %}
+	

+		

+			

+				Recent
+			

+			

+				
+					
+				
 
-                    
-                        
+					
+				
+			

+		

+		

+		{% if data["entryCount"] != 0 %}
+			{% for page in data['pages'] %}
+				{% if page.media[0].type == 'mp4' %}
 
-                            Sorry, your browser doesn't support embedded videos.
-                        
-                        
-                        {{ include("dash/partials/recent-options.twig") }}
-                    
+					
+						
-                        
+								Sorry, your browser doesn't support embedded videos.
+							
+							
+							{{ include("dash/partials/recent-options.twig") }}
+						
 
-                        {{ include("dash/partials/recent-options.twig") }}
-                    
-                {% endif %}
-                
-            {% endfor %}
-        {% else %}
-            There are no pages
-        {% endif %}
+					{% else %}
+						
+							
 
-    

-

\ No newline at end of file
+							{{ include("dash/partials/recent-options.twig") }}
+						
+					{% endif %}
+
+				{% endfor %}
+			{% else %}
+				There are no pages
+			{% endif %}
+
+		

+
diff --git a/brain/views/dash/start.twig b/brain/views/dash/start.twig index c5d48d6..ad9d3d0 100644 --- a/brain/views/dash/start.twig +++ b/brain/views/dash/start.twig @@ -5,7 +5,7 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} @@ -23,5 +23,5 @@ {% endblock %} {% block javascripts %} - + {% endblock %} diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index 3654467..18d0e92 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -2458,19 +2458,19 @@ svg.icons { margin: 0 10px 0 0; bottom: -15px; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(3) { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(3) { width: 100%; margin-bottom: 20px; height: 500px; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(4), -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(6) { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(4), +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(6) { width: 48.6%; height: 350px; margin: 0 10px 20px 0; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(5), -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.dash-link:nth-child(7) { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(5), +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.recent-link:nth-child(7) { width: 48.6%; height: 350px; margin: 0 0 20px 10px; diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index 1df543b..947e02e 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -1638,7 +1638,7 @@ class PostEditor { //-------------------------- constructor(){ this.processing = false; - let self = 'this'; + let self = "this"; this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress')); this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress')); this.urlPieces = document.URL.split('/'); @@ -1663,7 +1663,7 @@ class PostEditor { this.editor.addListener(_editorEvent.EDITOR_SAVE, ()=>this.handleEditorOptions(_editorEvent.EDITOR_SAVE) , false); document.getElementById('post-image-upload').addEventListener('change', (e)=>{ - this.handleImageUpload(e.target.id, e.target.files); + self.handleImageUpload(e.target.id, e.target.files); }, false); /* TinyDatePicker(document.getElementById('post-date'), { @@ -4012,14 +4012,14 @@ var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); var _animeEsJs = require("animejs/lib/anime.es.js"); var _animeEsJsDefault = parcelHelpers.interopDefault(_animeEsJs); -const notifcation = document.getElementById("notifications"); -const notify = document.getElementById("notifyMessage"); -const messageText = document.getElementById("message-text"); -const notifyText = document.getElementById("notify-text"); -const notifyProgress = document.getElementById("notify-progress"); -const iconGood = document.getElementById("notify-good"); -const iconLame = document.getElementById("notify-lame"); -const iconWorking = document.getElementById("notify-working"); +const notifcation = document.getElementById('notifications'); +const notify = document.getElementById('notify-message'); +const messageText = document.getElementById('message-text'); +const notifyText = document.getElementById('notify-text'); +const notifyProgress = document.getElementById('notify-progress'); +const iconGood = document.getElementById('notify-good'); +const iconLame = document.getElementById('notify-lame'); +const iconWorking = document.getElementById('notify-working'); class Notfications { //-------------------------- // constructor @@ -4029,66 +4029,66 @@ class Notfications { // methods //-------------------------- alert(text, status) { - iconWorking.style.display = "none"; - iconGood.style.display = "none"; - iconLame.style.display = "none"; - var color = ""; + iconWorking.style.display = 'none'; + iconGood.style.display = 'none'; + iconLame.style.display = 'none'; + var color = ''; if (status !== null) { _animeEsJsDefault.default({ targets: notifyProgress, opacity: 0, - easing: "easeInOutQuint", + easing: 'easeInOutQuint', duration: 500 }); if (status) { - color = "#32cd32"; - iconWorking.style.display = "none"; - iconGood.style.display = "block"; + color = '#32cd32'; + iconWorking.style.display = 'none'; + iconGood.style.display = 'block'; } else { - color = "#F64747"; - iconWorking.style.display = "none"; - iconLame.style.display = "block"; + color = '#F64747'; + iconWorking.style.display = 'none'; + iconLame.style.display = 'block'; } } else { - color = "#200317"; - iconWorking.style.display = "block"; + color = '#200317'; + iconWorking.style.display = 'block'; _animeEsJsDefault.default({ targets: notifyProgress, opacity: 1, - easing: "easeInOutQuint", + easing: 'easeInOutQuint', duration: 500 }); } messageText.innerHTML = text; _animeEsJsDefault.default({ targets: notifcation, - marginTop: "-10", - easing: "easeInOutQuint", + marginTop: '-10', + easing: 'easeInOutQuint', duration: 10, complete: ()=>{ _animeEsJsDefault.default({ targets: notify, - rotateX: "0", - easing: "easeInOutQuint", + rotateX: '0', + easing: 'easeInOutQuint', duration: 700 }); _animeEsJsDefault.default({ targets: notifyText, backgroundColor: color, - easing: "easeInOutQuint", + easing: 'easeInOutQuint', duration: 700, complete: ()=>{ setTimeout(()=>{ if (status !== null) _animeEsJsDefault.default({ targets: notify, - rotateX: "-120", - easing: "easeInOutQuint", + rotateX: '-120', + easing: 'easeInOutQuint', duration: 700, complete: ()=>{ _animeEsJsDefault.default({ targets: notifcation, - marginTop: "-55", - easing: "easeInOutQuint", + marginTop: '-55', + easing: 'easeInOutQuint', delay: 700, duration: 50 }); //notifcation.style.display = 'none'; diff --git a/src/com/ui/Notifications.js b/src/com/ui/Notifications.js index 5bb65c2..fcf42f6 100644 --- a/src/com/ui/Notifications.js +++ b/src/com/ui/Notifications.js @@ -1,101 +1,101 @@ -import anime from "animejs/lib/anime.es.js"; -const notifcation = document.getElementById("notifications"); -const notify = document.getElementById("notifyMessage"); -const messageText = document.getElementById("message-text"); -const notifyText = document.getElementById("notify-text"); -const notifyProgress = document.getElementById("notify-progress"); -const iconGood = document.getElementById("notify-good"); -const iconLame = document.getElementById("notify-lame"); -const iconWorking = document.getElementById("notify-working"); +import anime from 'animejs/lib/anime.es.js'; +const notifcation = document.getElementById('notifications'); +const notify = document.getElementById('notify-message'); +const messageText = document.getElementById('message-text'); +const notifyText = document.getElementById('notify-text'); +const notifyProgress = document.getElementById('notify-progress'); +const iconGood = document.getElementById('notify-good'); +const iconLame = document.getElementById('notify-lame'); +const iconWorking = document.getElementById('notify-working'); export default class Notfications { - //-------------------------- - // constructor - //-------------------------- - constructor() {} - //-------------------------- - // methods - //-------------------------- + //-------------------------- + // constructor + //-------------------------- + constructor() {} + //-------------------------- + // methods + //-------------------------- - alert(text, status) { - iconWorking.style.display = "none"; - iconGood.style.display = "none"; - iconLame.style.display = "none"; + alert(text, status) { + iconWorking.style.display = 'none'; + iconGood.style.display = 'none'; + iconLame.style.display = 'none'; - var color = ""; - if (status !== null) { - anime({ - targets: notifyProgress, - opacity: 0, - easing: "easeInOutQuint", - duration: 500 - }); - if (status) { - color = "#32cd32"; - iconWorking.style.display = "none"; - iconGood.style.display = "block"; - } else { - color = "#F64747"; - iconWorking.style.display = "none"; - iconLame.style.display = "block"; - } - } else { - color = "#200317"; - iconWorking.style.display = "block"; - anime({ - targets: notifyProgress, - opacity: 1, - easing: "easeInOutQuint", - duration: 500 - }); - } - messageText.innerHTML = text; + var color = ''; + if (status !== null) { + anime({ + targets: notifyProgress, + opacity: 0, + easing: 'easeInOutQuint', + duration: 500 + }); + if (status) { + color = '#32cd32'; + iconWorking.style.display = 'none'; + iconGood.style.display = 'block'; + } else { + color = '#F64747'; + iconWorking.style.display = 'none'; + iconLame.style.display = 'block'; + } + } else { + color = '#200317'; + iconWorking.style.display = 'block'; + anime({ + targets: notifyProgress, + opacity: 1, + easing: 'easeInOutQuint', + duration: 500 + }); + } + messageText.innerHTML = text; - anime({ - targets: notifcation, - marginTop: "-10", - easing: "easeInOutQuint", - duration: 10, - complete: () => { - anime({ - targets: notify, - rotateX: "0", - easing: "easeInOutQuint", - duration: 700 - }); - anime({ - targets: notifyText, - backgroundColor: color, - easing: "easeInOutQuint", - duration: 700, - complete: () => { - setTimeout(() => { - if (status !== null) { - anime({ - targets: notify, - rotateX: "-120", - easing: "easeInOutQuint", - duration: 700, - complete: () => { - anime({ - targets: notifcation, - marginTop: "-55", - easing: "easeInOutQuint", - delay: 700, - duration: 50 - }); - //notifcation.style.display = 'none'; - } - }); - } - }, 1000); - } - }); - } - }); - } + anime({ + targets: notifcation, + marginTop: '-10', + easing: 'easeInOutQuint', + duration: 10, + complete: () => { + anime({ + targets: notify, + rotateX: '0', + easing: 'easeInOutQuint', + duration: 700 + }); + anime({ + targets: notifyText, + backgroundColor: color, + easing: 'easeInOutQuint', + duration: 700, + complete: () => { + setTimeout(() => { + if (status !== null) { + anime({ + targets: notify, + rotateX: '-120', + easing: 'easeInOutQuint', + duration: 700, + complete: () => { + anime({ + targets: notifcation, + marginTop: '-55', + easing: 'easeInOutQuint', + delay: 700, + duration: 50 + }); + //notifcation.style.display = 'none'; + } + }); + } + }, 1000); + } + }); + } + }); + } - //-------------------------- - // event handlers - //-------------------------- + //-------------------------- + // event handlers + //-------------------------- } diff --git a/src/styles/main/_index.scss b/src/styles/main/_index.scss index 2a1c7e7..6cce582 100644 --- a/src/styles/main/_index.scss +++ b/src/styles/main/_index.scss @@ -292,21 +292,21 @@ } } - a.dash-link:nth-child(3) { + a.recent-link:nth-child(3) { width: 100%; margin-bottom: 20px; height: 500px; } - a.dash-link:nth-child(4), - a.dash-link:nth-child(6) { + a.recent-link:nth-child(4), + a.recent-link:nth-child(6) { width: 48.6%; height: 350px; margin: 0 10px 20px 0; } - a.dash-link:nth-child(5), - a.dash-link:nth-child(7) { + a.recent-link:nth-child(5), + a.recent-link:nth-child(7) { width: 48.6%; height: 350px; margin: 0 0 20px 10px;