style: layout

ubiquity · Nov 29, 2023 · 635d87b · 635d87b
1 parent ef83273
commit 635d87b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 7 deletions.
diff --git a/static/scripts/display-issues.ts b/static/scripts/display-issues.ts
@@ -53,24 +53,43 @@ export function displayIssues(container: HTMLDivElement, issues: GitHubIssue[])
       const labels = filteredLabels.map((label) => {
         // Remove the prefix from the label name
         const name = label.name.replace(/(Time|Pricing|Priority): /, "");
+        if(label.name.startsWith("Pricing: ")){
+            return `<div class="label pricing">${name}</div>`;
+        } else {
+            return `<div class="label">${name}</div>`;
 
-        return `<div class="label">${name}</div>`;
+        }
       });
 
       issueElement.innerHTML = `
-      <div class="info"><div class="labels">${labels.join("")}</div><div class="partner"><p class="organization-name">${organizationName}</p><p class="repository-name">${repositoryName}</p></div></div>
+      <div class="info"><div class="labels">${labels.join(
+        ""
+      )}</div><div class="partner"><p class="organization-name">${organizationName}</p><p class="repository-name">${repositoryName}</p></div></div>
       <div class="title"><h3>${issue.title}</h3></div>
       `;
 
       issueElement.addEventListener("click", () => {
         console.log(issue);
-
         //   console.log(foundUrls);
         //   window.open(foundUrls?.shift(), "_blank");
       });
 
       issueWrapper.appendChild(issueElement);
 
+      // Set the issueWrapper background-image to the organization's avatar
+      if (organizationName) {
+        fetch(`https://api.github.com/orgs/${organizationName}`)
+          .then((response) => response.json())
+          .then((data) => {
+            if (data && data.avatar_url) {
+              issueWrapper.style.backgroundImage = `url("${data.avatar_url}")`;
+            }
+          })
+          .catch((error) => {
+            console.error(error);
+          });
+      }
+
       // Append the issue element after the delay
       setTimeout(() => {
         container.appendChild(issueWrapper);

diff --git a/static/style.css b/static/style.css
@@ -26,13 +26,13 @@ body {
   from {
     opacity: 0;
     /* background-color: #fff; */
-    filter: blur(48px);
+    filter: blur(48px) grayscale(0);
     margin-left: 100vw;
   }
   to {
     opacity: 0.75;
     /* background-color: transparent; */
-    filter: blur(0px);
+    filter: blur(0px) grayscale(1);
     margin-left: 1px;
   }
 }
@@ -84,20 +84,28 @@ body {
   border-right: 1px solid #80808040;
   cursor: pointer;
   /* width: 640px; */
+  background-size: 20px;
+  background-position: 12px calc(100% - 9px);
+  background-repeat: no-repeat;
+  /* background-blend-mode: screen; */
+  /* filter: grayscale(100%); */
+  /* margin: 2px auto; */
 }
 #issues-container > div:hover {
+  background-position: 9px calc(100% - 9px);
   opacity: 1 !important;
   border-left: 4px solid #808080;
   padding-left: 13px;
   /* background: #80808020; */
+  filter: grayscale(0%) !important;
 }
 #issues-container > div:active {
   border-left: 4px solid #fff;
-  background: #80808020;
+  background-color: #80808020;
 }
 
 h3 {
-  margin: 12px;
+  margin: 0 0 0 12px;
   line-height: 1;
   /* white-space: pre; */
   font-size: 16px;
@@ -202,4 +210,10 @@ body {
   /* flex-grow: 1; */
   /* vertical-align: middle; */
   display: flex;
+  align-items: center; /* Vertically aligns the content */
+}
+
+.label.pricing {
+  /* border: 1px solid #1f883d; */
+  /* color: #fff; */
 }