From 1f2dd04e69388b1503b4dae4002ea5fd6ffa6161 Mon Sep 17 00:00:00 2001
From: Ben <36240171+benkyd@users.noreply.github.com>
Date: Thu, 27 Jan 2022 02:10:09 +0000
Subject: [PATCH] notificiation bar
---
client/public/components/components.js | 18 ++-
client/public/components/navbar/navbar.css | 7 +-
.../notification-bar/notification-bar.css | 105 ++++++++++++++++++
.../notification-bar/notification-bar.html | 9 ++
.../notification-bar/notification-bar.js | 6 +
client/public/global.css | 1 +
client/public/index.html | 7 +-
7 files changed, 141 insertions(+), 12 deletions(-)
create mode 100644 client/public/components/notification-bar/notification-bar.css
create mode 100644 client/public/components/notification-bar/notification-bar.html
create mode 100644 client/public/components/notification-bar/notification-bar.js
diff --git a/client/public/components/components.js b/client/public/components/components.js
index eb6eb05..33e7489 100644
--- a/client/public/components/components.js
+++ b/client/public/components/components.js
@@ -16,14 +16,17 @@ async function loadComponents() {
// there is a way to sideload this with express and have it do all that stuff
// TODO: implement this
const components = [
- 'navbar'
+ 'navbar',
+ 'notification-bar',
];
for (let i = 0; i < components.length; i++) {
const path = `./components/${components[i]}/${components[i]}.html`;
- const component = await sideLoad(path);
+ let component = await sideLoad(path);
+
const stylePath = `./components/${components[i]}/${components[i]}.css`;
const styleComponent = await sideLoad(stylePath);
+
const scriptPath = `./components/${components[i]}/${components[i]}.js`;
const scriptComponent = await sideLoad(scriptPath);
@@ -31,10 +34,15 @@ async function loadComponents() {
constructor() {
super();
}
-
- async connectedCallback() {
- const shadow = this.attachShadow({mode: 'open'});
+ async connectedCallback() {
+ // TODO: THIS NEEDS DOCUMENTATION / REFACTORING
+ // make a kinda generic way to do this
+ // needs to be before the shadow dom is attatched
+ component = component.replace('${innerText}', this.innerText)
+
+ const shadow = this.attachShadow({mode: 'open'});
+
shadow.innerHTML = component;
const script = document.createElement('script');
diff --git a/client/public/components/navbar/navbar.css b/client/public/components/navbar/navbar.css
index 66879c0..8f4ae32 100644
--- a/client/public/components/navbar/navbar.css
+++ b/client/public/components/navbar/navbar.css
@@ -17,7 +17,6 @@
margin-left: auto;
}
-/* Menu */
.hamburger {
background: transparent;
border: none;
@@ -27,7 +26,7 @@
position: relative;
height: 60px;
width: 60px;
- z-index: 4;
+ z-index: 100;
}
.hamburger-line {
@@ -114,11 +113,11 @@
@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
.nav-menu {
- background: #E4D6FF;
+ position: fixed;
+ background: #e4d6ffde;
flex-direction: column;
justify-content: center;
opacity: 0;
- position: absolute;
top: 0;
right: 0;
bottom: 0;
diff --git a/client/public/components/notification-bar/notification-bar.css b/client/public/components/notification-bar/notification-bar.css
new file mode 100644
index 0000000..5d4c5a6
--- /dev/null
+++ b/client/public/components/notification-bar/notification-bar.css
@@ -0,0 +1,105 @@
+.notification-bar {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 35px;
+ background-color: #00B4F5;
+ box-shadow: #222 0px 0px 5px;
+ transition: all 0.2s ease-in;
+}
+
+.notification-bar-text {
+ font-family: 'Open Sans', sans-serif;
+ text-transform: uppercase;
+ text-align: center;
+ color: #fff;
+ padding: 0px 15px;
+ height: 100%;
+ line-height: 35px;
+ font-size: 20px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.notification-bar-close {
+ display: inline-block;
+ padding: 0px 15px;
+ height: 100%;
+ line-height: 35px;
+ color: #fff;
+ font-size: 20px;
+ font-weight: bold;
+ text-align: center;
+ font-family: 'Open Sans', sans-serif;
+}
+
+.notification-bar-close:hover {
+ color: #fff;
+}
+
+.notification-bar-close:focus {
+ outline: none;
+}
+
+.notification-bar-close:active {
+ color: #fff;
+}
+
+.notification-bar-close:hover {
+ color: #fff;
+}
+
+.notification-bar-close:focus {
+ outline: none;
+}
+
+.notification-toggler {
+ position: absolute;
+ right: 2px;
+ top: 2px;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ outline: none;
+ height: 30px;
+ width: 30px;
+ z-index: 100;
+ transition: all 0.2s ease-in;
+}
+
+.cross-line {
+ background: #222;
+ box-shadow: #222 0px 0px 2px;
+ position: absolute;
+ height: 2px;
+ left: 0;
+ width: 100%;
+}
+
+#notification-toggler:hover .cross-line {
+ background: #555;
+}
+
+.cross-line-top {
+ top: 50%;
+ transform: rotate(45deg) translatey(-50%);
+}
+
+.cross-line-bottom {
+ bottom: 50%;
+ transform: rotate(-45deg) translatey(50%);
+}
+
+/* move it further up the screen than the mobile toggler would */
+.notification-toggled {
+ transform: translatey(-200%);
+}
+
+/* don's show on mobile or "small mode" */
+@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+ .notification-bar {
+ transform: translatey(-100%);
+ }
+}
diff --git a/client/public/components/notification-bar/notification-bar.html b/client/public/components/notification-bar/notification-bar.html
new file mode 100644
index 0000000..a1c404e
--- /dev/null
+++ b/client/public/components/notification-bar/notification-bar.html
@@ -0,0 +1,9 @@
+
+
+ ${innerText}
+
+
+