Merge pull request #34 from pavlovcik/feat/service-message-ii

Feat/service message
ubiquity · Mar 20, 2024 · 9c860fa · 9c860fa
2 parents 63e3205 + 0638870
commit 9c860fa
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 26 deletions.
diff --git a/src/home/home.ts b/src/home/home.ts
@@ -7,6 +7,7 @@ import { generateSortingToolbar } from "./sorting/generate-sorting-buttons";
 import { TaskManager } from "./task-manager";
 
 generateSortingToolbar();
+renderServiceMessage();
 grid(document.getElementById("grid") as HTMLElement);
 const container = document.getElementById("issues-container") as HTMLDivElement;
 
@@ -44,3 +45,15 @@ void (async function home() {
     });
   }
 })();
+
+function renderServiceMessage() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const message = urlParams.get("message");
+  if (message) {
+    const serviceMessageContainer = document.querySelector("#bottom-bar > div");
+    if (serviceMessageContainer) {
+      serviceMessageContainer.textContent = message;
+      serviceMessageContainer.parentElement?.classList.add("ready");
+    }
+  }
+}
diff --git a/static/index.html b/static/index.html
@@ -35,7 +35,7 @@
   <body>
     <background><div id="grid"></div></background>
     <div id="issues-container"></div>
-    <div id="toolbar" data-authenticated="false"
+    <div id="toolbar" class="toolbar" data-authenticated="false"
       ><div id="branding"
         ><svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 151" fill="currentColor">
           <path
@@ -44,6 +44,9 @@
         ><span><span class="full">Ubiquity DAO | </span><span class="mid">DevPool Directory</span></span></div
       ><div id="filters"></div
     ></div>
+    <div id="bottom-bar" class="toolbar"
+      ><div></div><a href="https://dao.ubq.fi/devpool-flow" target="_blank"><button>DevPool Help</button></a></div
+    >
     <script type="module" src="dist/src/home/home.js"></script>
   </body>
 </html>
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -266,7 +266,7 @@
   button:active {
     background-color: #7f7f7f40;
   }
-  #toolbar {
+  .toolbar {
     position: fixed;
     width: calc(100vw - 8px);
     height: 48px;
@@ -280,7 +280,7 @@
     justify-content: space-between;
     justify-content: space-evenly;
   }
-  #toolbar > * {
+  .toolbar > * {
     align-items: center;
     display: inline-flex;
     text-align: left;
@@ -298,18 +298,18 @@
     height: 40px;
     padding: 4px 0;
   }
-  #toolbar[data-authenticated="true"] > #github-login-button {
+  .toolbar[data-authenticated="true"] > #github-login-button {
     display: none;
   }
-  #toolbar {
+  .toolbar {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     opacity: 0;
     transition: 0.5s opacity ease-in-out;
   }
-  #toolbar.ready {
+  .toolbar.ready {
     opacity: 1;
   }
   #branding {
@@ -343,19 +343,18 @@
       margin: auto;
       margin-left: 12px;
     }
-    #toolbar {
+    .toolbar {
       overflow-x: auto;
-      white-space: nowrap;
       margin: 0;
       padding-left: 0;
       display: flex;
       align-items: center;
-      justify-content: flex-start;
+      justify-content: center;
     }
-    #toolbar > * {
+    .toolbar > * {
       margin-left: 12px;
     }
-    #toolbar > button {
+    .toolbar button {
       padding: 12px 16px;
     }
   }
@@ -375,7 +374,7 @@
       pointer-events: none;
     }
   }
-  #toolbar > button {
+  .toolbar > button {
     text-align: center;
   }
   #filters button {
@@ -580,7 +579,7 @@
     letter-spacing: 0.5px;
   }
   #filters input[type="text"].hidden {
-    visibility: hidden;
+    display: none;
   }
   button#github-login-button {
     margin-left: 0;
@@ -597,4 +596,20 @@
     margin-left: 6px;
     content: "▼";
   }
+  #bottom-bar {
+    top: unset;
+    bottom: 0;
+    opacity: 1;
+    border-top: 1px solid #7f7f7f20;
+    border-bottom: unset;
+  }
+  #bottom-bar a {
+    text-decoration: none;
+  }
+  #bottom-bar a button {
+    height: 30px;
+  }
+  .toolbar button {
+    white-space: nowrap;
+  }
 }
diff --git a/static/style/special.css b/static/style/special.css
@@ -11,7 +11,7 @@
   .preview {
     background-color: var(--dark-background);
   }
-  #toolbar.ready {
+  .toolbar.ready {
     background-color: var(--dark-background-half);
   }
   body.preview-active button#github-login-button.highlight {
@@ -29,7 +29,7 @@
   .preview {
     background-color: var(--light-background);
   }
-  #toolbar.ready {
+  .toolbar.ready {
     background-color: var(--light-background-half);
   }
   body.preview-active button#github-login-button.highlight {

diff --git a/static/style/style.css b/static/style/style.css
@@ -266,7 +266,7 @@
   button:active {
     background-color: #80808040;
   }
-  #toolbar {
+  .toolbar {
     position: fixed;
     width: calc(100vw - 8px);
     height: 48px;
@@ -280,7 +280,7 @@
     justify-content: space-between;
     justify-content: space-evenly;
   }
-  #toolbar > * {
+  .toolbar > * {
     align-items: center;
     display: inline-flex;
     text-align: left;
@@ -298,18 +298,18 @@
     height: 40px;
     padding: 4px 0;
   }
-  #toolbar[data-authenticated="true"] > #github-login-button {
+  .toolbar[data-authenticated="true"] > #github-login-button {
     display: none;
   }
-  #toolbar {
+  .toolbar {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     opacity: 0;
     transition: 0.5s opacity ease-in-out;
   }
-  #toolbar.ready {
+  .toolbar.ready {
     opacity: 1;
   }
   #branding {
@@ -343,19 +343,18 @@
       margin: auto;
       margin-left: 12px;
     }
-    #toolbar {
+    .toolbar {
       overflow-x: auto;
-      white-space: nowrap;
       margin: 0;
       padding-left: 0;
       display: flex;
       align-items: center;
-      justify-content: flex-start;
+      justify-content: center;
     }
-    #toolbar > * {
+    .toolbar > * {
       margin-left: 12px;
     }
-    #toolbar > button {
+    .toolbar button {
       padding: 12px 16px;
     }
   }
@@ -375,7 +374,7 @@
       pointer-events: none;
     }
   }
-  #toolbar > button {
+  .toolbar > button {
     text-align: center;
   }
   #filters button {
@@ -597,4 +596,20 @@
     margin-left: 6px;
     content: "▼";
   }
+  #bottom-bar {
+    top: unset;
+    bottom: 0;
+    opacity: 1;
+    border-top: 1px solid #80808020;
+    border-bottom: unset;
+  }
+  #bottom-bar a {
+    text-decoration: none;
+  }
+  #bottom-bar a button {
+    height: 30px;
+  }
+  .toolbar button {
+    white-space: nowrap;
+  }
 }