Notifications Rework #81

Integrated the Notifications UI component into the header to streamline
user alerts into the overall experience.

Also added titles to use the space created by moving the notifications
compoenent to it's own space.

brain/views/dash/_frame.twig

@@ -14,14 +14,12 @@
 		{% if status %}
 			<header>
 				{% apply spaceless %}
-				<nav>
+				<nav role="top-nav">
 					<div role="nav-left">
 						<a href="/dashboard"><img id="the-logo" src="/assets/images/global/fipamo-logo.svg"/></a>
 					</div>
-					<div role="notifications">
-						{% apply spaceless %}
-						{{ include("dash/partials/notifications.twig") }}
-						{% endapply %}
+					<div role="title">
+						<h1>{{ title }}</h1>
 					</div>
 					<div role="nav-right">
 						{% if status %}
@@ -31,6 +29,11 @@
 						{% endif %}
 					</div>
 				</nav>
+				<div role="notify">
+					{% apply spaceless %}
+					{{ include("dash/partials/notifications.twig") }}
+					{% endapply %}
+				</div>
 				{% endapply %}
 			{% endif %}
 		</header>

public/assets/css/dash/frame.css

@@ -60,19 +60,12 @@ header {
   width: 100%;
   max-width: 900px;
   margin: 10px auto;
-  background: var(--white);
   height: 50px;
   border-radius: 5px;
   left: 50%;
   transform: translate(-50%, 0);
   position: fixed;
   z-index: 500;
-  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
-}
-
-header > nav {
-  display: grid;
-  grid-template-columns: 50px 1fr auto;
 }
 
 header > nav > div[role="nav-left"] img {
@@ -80,6 +73,16 @@ header > nav > div[role="nav-left"] img {
   padding: 5px;
 }
 
+header > nav > div[role="title"] {
+  text-align: left;
+  height: 100%;
+}
+
+header > nav > div[role="title"] h1 {
+  color: var(--primary);
+  margin: 15px;
+}
+
 header > nav > div[role="nav-right"] {
   padding: 5px;
 }

public/assets/css/dash/notifications.css

@@ -1,53 +1,78 @@
-header > nav > div[role="notifications"] {
-  width: 100%;
+header > nav[role="top-nav"] {
+  display: grid;
+  text-align: right;
+  grid-template-columns: 50px auto auto;
+  height: 100%;
+  position: relative;
+  background: var(--white);
+  border-radius: 3px;
+  transform-style: preserve-3d;
+  transform-origin: 100% 50%;
+  transform: rotateX(0deg);
+  transition: all 0.1s ease-out;
+  perspective: 500px;
+  backface-visibility: hidden;
+  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
 }
 
-header > nav > div[role="notifications"] > div[role="notify-message"] {
+header > div[role="notify"] {
+  display: grid;
+  height: 100%;
+  position: relative;
+  background: var(--black);
+  border-radius: 3px;
+  transform-style: preserve-3d;
+  transform-origin: 100% 50%;
+  transform: rotateX(180deg);
+  transition: all 0.3s ease-out;
+  perspective: 500px;
+  backface-visibility: hidden;
+  margin-top: -50px;
+  box-shadow: 2px 2px 0 rgba(var(--primary-rgb) / 30%);
+}
+
+header > div[role="notify"] > div[role="notify-message"] {
   display: flex;
   height: 86%;
 }
 
-header > nav > div[role="notifications"] > div[role="notify-message"] div {
+header > div[role="notify"] > div[role="notify-message"] div {
   display: inline-block;
   transition: all 0.2s linear;
 }
 
 header
-  > nav
-  > div[role="notifications"]
+  > div[role="notify"]
   > div[role="notify-message"]
   > div[role="notify-text"] {
   color: var(--white);
   border-radius: 5px;
   height: 79%;
-  margin-top: 5px;
+  margin-top: 8px;
   opacity: 0;
 }
 
 header
-  > nav
-  > div[role="notifications"]
+  > div[role="notify"]
   > div[role="notify-message"]
   > div[role="notify-icons"] {
   margin: 5px;
-  width: 0;
+  width: 40px;
   opacity: 0;
 }
 
 header
-  > nav
-  > div[role="notifications"]
+  > div[role="notify"]
   > div[role="notify-message"]
   > div[role="notify-text"]
   span {
   display: block;
   padding: 5px;
-  margin-top: 4px;
 }
 
-header > nav > div[role="notifications"] > div[role="notify-message"] i {
+header > div[role="notify"] > div[role="notify-message"] i {
   display: none;
-  color: var(--primary);
+  color: var(--white);
 }
 
 i[role="notify-working"] {

public/assets/css/dash/settings.css

@@ -8,7 +8,7 @@ article[role="settings"] h1 {
   color: var(--white);
 }
 
-section label {
+section[role="member-settings"] label {
   background: var(--primary);
   color: var(--white);
   padding: 3px;

public/assets/scripts/Start.js

@@ -4201,14 +4201,24 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
             $accfb6154319a04b$var$iconWorking.style.display = "block";
         }
         $accfb6154319a04b$var$responseText.innerHTML = text;
-        (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+        new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+            targets: document.querySelector('[role="top-nav"]'),
+            rotateX: "180deg",
+            easing: "easeOutQuint"
+        });
+        new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+            targets: document.querySelector('[role="notify"]'),
+            rotateX: "10deg",
+            easing: "easeOutQuint",
+            complete: ()=>{
+                new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
                     targets: $accfb6154319a04b$var$notifyIcons,
                     width: 39,
                     opacity: 1,
                     easing: "easeInQuint",
                     duration: 300
                 });
-        (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
                     targets: $accfb6154319a04b$var$notifyText,
                     backgroundColor: color,
                     opacity: 1,
@@ -4230,7 +4240,19 @@ class $accfb6154319a04b$export$2e2bcd8739ae039 {
                                 easing: "easeOutQuint",
                                 duration: 350
                             });
-                }, 2000);
+                            new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                                targets: document.querySelector('[role="top-nav"]'),
+                                rotateX: "0deg",
+                                easing: "easeOutQuint"
+                            });
+                            new (0, $8b9e2899b2e82f52$export$2e2bcd8739ae039)({
+                                targets: document.querySelector('[role="notify"]'),
+                                rotateX: "180deg",
+                                easing: "easeOutQuint"
+                            });
+                        }, 2500);
+                    }
+                });
             }
         });
     }

src/com/ui/Notifications.js

@@ -40,7 +40,18 @@ export default class Notfications {
 		}
 		responseText.innerHTML = text;
 
-		anime({
+		new anime({
+			targets: document.querySelector('[role="top-nav"]'),
+			rotateX: '180deg',
+			easing: 'easeOutQuint'
+		});
+
+		new anime({
+			targets: document.querySelector('[role="notify"]'),
+			rotateX: '10deg',
+			easing: 'easeOutQuint',
+			complete: () => {
+				new anime({
 					targets: notifyIcons,
 					width: 39,
 					opacity: 1,
@@ -48,7 +59,7 @@ export default class Notfications {
 					duration: 300
 				});
 
-		anime({
+				new anime({
 					targets: notifyText,
 					backgroundColor: color,
 					opacity: 1,
@@ -71,7 +82,21 @@ export default class Notfications {
 								easing: 'easeOutQuint',
 								duration: 350
 							});
-				}, 2000);
+
+							new anime({
+								targets: document.querySelector('[role="top-nav"]'),
+								rotateX: '0deg',
+								easing: 'easeOutQuint'
+							});
+
+							new anime({
+								targets: document.querySelector('[role="notify"]'),
+								rotateX: '180deg',
+								easing: 'easeOutQuint'
+							});
+						}, 2500);
+					}
+				});
 			}
 		});
 	}