From 6a9d6dfc45e644c30a33b8428d6f89715c62ebe5 Mon Sep 17 00:00:00 2001
From: Keshvi <keshvi030802@gmail.com>
Date: Thu, 17 Oct 2024 02:23:56 +0530
Subject: [PATCH] code modifications in designing select and issue list

Signed-off-by: Keshvi <keshvi030802@gmail.com>
---
 layouts/shortcodes/issueList.html | 96 ++++++++++++++++++-------------
 static/css/main.css               | 46 ++++++++++++++-
 2 files changed, 98 insertions(+), 44 deletions(-)

diff --git a/layouts/shortcodes/issueList.html b/layouts/shortcodes/issueList.html
index 0bab722..8a66810 100644
--- a/layouts/shortcodes/issueList.html
+++ b/layouts/shortcodes/issueList.html
@@ -1,32 +1,32 @@
 <!-- Uses the services / endpoints of this project: https://github.com/OpenElements/good-first-issue-provider -->
 <div class="flex flex-col">
     <label for="language-filter" class="block prose lg:prose-xl">Filter issues by Language</label>
-    <select id="language-filter" name="language-filter" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
+    
+    <select id="language-filter" name="language-filter" class="mt-2 block w-full rounded-md border-0 py-2 my-4 pl-3 pr-10 text-slate-900 ring-2 ring-inset ring-slate-800 focus:ring-gray-800 ">
         <option value="">All Languages</option>
     </select>
+    
     <!-- Loading Text -->
     <div id="loading" class="text-center text-xl text-gray-700">LOADING...</div>
-    <ul id="issues-list" class="divide-y divide-gray-100 hidden">
+    <ul id="issues-list" class="hidden">
     </ul>
 </div>
 <script>
-
   function populateLanguageFilter(issues) {
     var uniqueLanguages = new Set();
-    issues.forEach(issue => {
-      issue.languageTags.forEach(language => uniqueLanguages.add(language));
+    issues.forEach((issue) => {
+      issue.languageTags.forEach((language) => uniqueLanguages.add(language));
     });
-    const labelFilter = document.getElementById('language-filter');
+    const labelFilter = document.getElementById("language-filter");
     labelFilter.innerHTML = '<option value="">All Languages</option>'; // Reset options
-    uniqueLanguages.forEach(label => {
-      const option = document.createElement('option');
+    uniqueLanguages.forEach((label) => {
+      const option = document.createElement("option");
       option.value = label;
       option.textContent = label;
       labelFilter.appendChild(option);
     });
   }
 
-
   async function fetchIssues() {
     const response = await fetch('{{ .Get "endpoint"}}');
     const issues = await response.json();
@@ -35,8 +35,8 @@
 
   // Function to render issues into the table
   function renderIssues(issues) {
-    const list = document.getElementById('issues-list');
-    list.innerHTML = ''; // Clear any existing rows
+    const list = document.getElementById("issues-list");
+    list.innerHTML = ""; // Clear any existing rows
 
     issues.sort((a, b) => {
       const orgA = a.org.toLowerCase();
@@ -62,54 +62,68 @@
       return 0;
     });
 
-
-    issues.forEach(issue => {
-      if(issue.isAssigned) {
+    issues.forEach((issue) => {
+      if (issue.isAssigned) {
         return;
       }
-      if(issue.isClosed) {
+      if (issue.isClosed) {
         return;
       }
-      const listItem = document.createElement('li');
-      listItem.className = 'flex flex-row justify-between gap-x-6 py-5';
-
-      listItem.innerHTML = `<div class="flex-initial">
-                                <a href="${issue.link}"  target="_blank"><p class="text-sm font-semibold leading-6 text-gray-900">${issue.title}</p></a>
-                                <a href="https://github.com/${issue.org}/${issue.repo}" target="_blank"><p class="mt-1 truncate text-xs leading-5 text-gray-500">${issue.repo}</p></a>
+      const listItem = document.createElement("li");
+      listItem.className = "flex flex-row justify-between py-4";
+
+      listItem.innerHTML = `<div class="w-full rounded-md border border-2 border-inherit py-1.5 my-4 pl-3 pr-10 bg-inherit text-white flex justify-between hover:bg-inherit-hovered">
+                              <div class="flex-1">
+                                  <a href="${issue.link}" class="hover:bg-inherit-hovered" target="_blank">
+                                      <p class="text-sm font-semibold leading-6">${issue.title}</p>
+                                  </a>
+                                  <a href="https://github.com/${issue.org}/${issue.repo}" target="_blank">
+                                      <p class="mt-1 truncate text-xs leading-5">${issue.repo}</p>
+                                  </a>
+                              </div>
+                              <div class="flex items-center ml-4">
+                                  ${issue.languageTags
+                                    .map(
+                                      (tag) => `
+                                      <span class="inline-flex items-center rounded-full px-2 py-1\.5 bg-white text-xs text-inherit text-white font-medium ">${tag}</span>`
+                                    )
+                                    .join("")}
+                              </div>
                             </div>
-                            <div>
-                                ${issue.languageTags.map(tag => `
-                                <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">${tag}</span>`).join('')}
-                            </div>`;
+                            `;
       list.appendChild(listItem);
     });
   }
 
   // Load issues on page load
-  document.addEventListener('DOMContentLoaded', async () => {
-    const loadingElement = document.getElementById('loading');
-    const tableContainer = document.getElementById('issues-list');
+  document.addEventListener("DOMContentLoaded", async () => {
+    const loadingElement = document.getElementById("loading");
+    const tableContainer = document.getElementById("issues-list");
     let issues = [];
     try {
       issues = await fetchIssues();
-      let useableIssues = issues.filter(issue => !issue.isAssigned && !issue.isClosed);
+      let useableIssues = issues.filter(
+        (issue) => !issue.isAssigned && !issue.isClosed
+      );
       renderIssues(useableIssues);
       populateLanguageFilter(useableIssues);
       // Hide the loading text and show the table
-      loadingElement.classList.add('hidden');
-      tableContainer.classList.remove('hidden');
+      loadingElement.classList.add("hidden");
+      tableContainer.classList.remove("hidden");
     } catch (error) {
-      loadingElement.textContent = 'Failed to load data. Please try again later.';
+      loadingElement.textContent =
+        "Failed to load data. Please try again later.";
     }
 
     // Event listener to filter issues by selected label
-    document.getElementById('language-filter').addEventListener('change', function() {
-      const selectedLabel = this.value;
-      const filteredIssues = selectedLabel
-          ? issues.filter(issue => issue.languageTags.includes(selectedLabel)) : issues;
-      renderIssues(filteredIssues);
-    });
-
-
+    document
+      .getElementById("language-filter")
+      .addEventListener("change", function () {
+        const selectedLabel = this.value;
+        const filteredIssues = selectedLabel
+          ? issues.filter((issue) => issue.languageTags.includes(selectedLabel))
+          : issues;
+        renderIssues(filteredIssues);
+      });
   });
-</script>
+</script>
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index bd92a45..d6d2ade 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1034,6 +1034,10 @@ video {
   padding-bottom: 0.375rem;
 }
 
+.py-2 {
+  padding-top: 0.5rem; /* 8px */
+  padding-bottom: 0.5rem; /* 8px */
+}
 .py-20 {
   padding-top: 5rem;
   padding-bottom: 5rem;
@@ -1191,16 +1195,51 @@ video {
   color: rgb(229 228 215 / var(--tw-text-opacity));
 }
 
+.my-4 {
+  margin-top: 1rem; /* 16px */
+  margin-bottom: 1rem; /* 16px */
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.ring-2{
+  box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+}
+
+.ring-slate-800{
+  --tw-ring-color: rgb(30 41 59);
+}
+
 .ring-inset {
   --tw-ring-inset: inset;
 }
 
+.bg-slate-800{
+  background-color: rgb(30 41 59);
+}	
+
+.bg-inherit{
+  background-color: rgb(184, 26, 86);
+}
+.bg-inherit-hovered{
+  background-color:rgb(153, 35, 80);
+}
+
+.bg-white{
+  background-color: rgb(255, 255, 255);
+}
+
+.border-inherit {
+  border-color: rgb(184, 26, 86);
+}
+.text-inherit {
+  color: rgb(184, 26, 86);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1228,10 +1267,12 @@ footer {
   border-top: 1px solid #1E1E1E;
 }
 
+/*
 a {
-  color: #B81A56;
+  color: rgb(184, 26, 86);
   text-decoration: underline;
 }
+*/
 
 nav a {
   color: #FFFFFF;
@@ -1669,5 +1710,4 @@ nav a {
 .\[\&\>strong\]\:text-red>strong {
   --tw-text-opacity: 1;
   color: rgb(184 26 86 / var(--tw-text-opacity));
-}
-
+}
\ No newline at end of file