style: layout

ubiquity · Nov 29, 2023 · 4a29158 · 4a29158
1 parent 80af145
commit 4a29158
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/static/scripts/display-issues.ts b/static/scripts/display-issues.ts
@@ -27,10 +27,35 @@ export function displayIssues(container: HTMLDivElement, issues: GitHubIssue[])
     const organizationName = match?.[1];
     const repositoryName = match?.[2];
 
+    type LabelKey = "Pricing: " | "Time: " | "Priority: ";
+
+    const labelOrder: Record<LabelKey, number> = { "Pricing: ": 1, "Time: ": 2, "Priority: ": 3 };
+
+    issue.labels.sort((a, b) => {
+      const matchA = a.name.match(/^(Pricing|Time|Priority): /)?.[0] as LabelKey | undefined;
+      const matchB = b.name.match(/^(Pricing|Time|Priority): /)?.[0] as LabelKey | undefined;
+      const orderA = matchA ? labelOrder[matchA] : 0;
+      const orderB = matchB ? labelOrder[matchB] : 0;
+      return orderA - orderB;
+    });
+
+    // Filter labels that begin with specific prefixes
+    const filteredLabels = issue.labels.filter((label) => {
+      return label.name.startsWith("Time: ") || label.name.startsWith("Pricing: ") || label.name.startsWith("Priority: ");
+    });
+
+    // Map the filtered labels to HTML elements
+    const labels = filteredLabels.map((label) => {
+      // Remove the prefix from the label name
+      const name = label.name.replace(/(Time|Pricing|Priority): /, "");
+
+      return `<div class="label">${name}</div>`;
+    });
+
     issueElement.innerHTML = `
         <h3>${issue.title}</h3>
-        <p class="organization-name">${organizationName}</p>
-        <p class="repository-name">${repositoryName}</p>
+        <div class="partner"><p class="organization-name">${organizationName}</p><p class="repository-name">${repositoryName}</p></div>
+        <div class="labels">${labels.join("")}</div>
       `;
 
     issueElement.addEventListener("click", () => {

diff --git a/static/style.css b/static/style.css
@@ -54,6 +54,13 @@ body {
   /* border-left: 1px solid; */
 }
 
+#issues-container * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 #issues-container > div:first-child {
   border-top: 1px solid #80808040;
 }
@@ -77,9 +84,11 @@ body {
   opacity: 1 !important;
   border-left: 4px solid #808080;
   padding-left: 13px;
+  /* background: #80808020; */
 }
 #issues-container > div:active {
   border-left: 4px solid #fff;
+  background: #80808020;
 }
 
 h3 {
@@ -98,7 +107,7 @@ p {
   text-align: right;
   letter-spacing: 0.5px;
   text-rendering: geometricPrecision;
-  position: absolute;
+  /* position: absolute; */
   top: 0;
   right: 0;
 }
@@ -111,9 +120,42 @@ p {
 p.organization-name {
   /* margin-bottom: 12px; */
   opacity: 0.5;
-  transform: translateY(-50%);
+  /* transform: translateY(-50%); */
+  display: inline-block;
 }
 p.repository-name {
   /* margin-top: 12px; */
-  transform: translateY(50%);
+  /* transform: translateY(50%); */
+  display: inline-block;
+  margin-left: 2px;
+}
+.labels > .label:first-child {
+  margin-left: 0;
+}
+.labels > .label {
+  display: inline-block;
+  padding: 4px 6px;
+  border-radius: 4px;
+  margin: 8px 4px 0px;
+  font-size: 12px;
+  /* font-weight: 400; */
+  /* line-height: 1; */
+  text-align: center;
+  white-space: nowrap;
+  /* vertical-align: baseline; */
+  background-color: #80808040;
+  /* color: #fff; */
+  /* text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); */
+  /* cursor: pointer; */
+  width: 64px;
+  letter-spacing: 0.5px;
+}
+.labels {
+  text-align: right;
+}
+
+.partner {
+  position: absolute;
+  top: 0;
+  right: 0;
 }