Merge pull request #891 from Queen-codes/restyle-issue-finder

feat: restyled CC Open Source  issue-finder  page

assets/static/css/issue-finder.css

@@ -0,0 +1,190 @@
+@import "/static/vocabulary/css/vocabulary.css" layer(vocabulary);
+
+/* Issue-card styles */
+.issue-card {
+  padding: 1.3rem;
+  margin-bottom: 1.5rem;
+
+  border: 3px solid #ddd;
+  border-radius: 0.3rem;
+}
+
+.issue-card h4 {
+    font-size: 1.45rem;
+}
+
+.issue-card p {
+    font-size: 1rem;
+    color: rgb(118, 118, 118);
+}
+
+/* General container styling */
+
+.filter-container {
+  padding: 1rem;
+}
+
+/* Label styling */
+
+.filter-container label {
+  display: block;
+  margin-bottom: 0.5rem;
+
+  font-size: 1.12rem;
+  color: #333;
+}
+
+/* Strong text */
+
+.filter-container label strong {
+  display: block;
+  margin-bottom: 0.25rem;
+
+  font-size: 1.2rem;
+  color: #000;
+  font-weight: 700;
+}
+
+.filter-container select {
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 2rem;
+
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+}
+
+/* Paragraph styling */
+
+.filter-container p {
+  margin-top: 1rem;
+
+  font-size: 0.75rem;
+  color: #666;
+  line-height: 1.4;
+}
+
+/* Review: Adjust focus outline color */
+
+.filter-container select:focus {
+  outline: 2px solid #0078D4;
+  border-color: #0078D4;
+}
+
+/* Basic style for all labels */
+
+.label {
+    display: inline-block;
+    margin-right: 0.25rem;
+    padding: 0.25rem 0.5rem;
+
+    font-size: smaller;
+    border: 1px solid #eeeeee;
+    border-radius: 1.5rem;
+}
+
+/* label style for individual labels */
+
+.label.goal {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.label.aspect {
+  background-color: #04338c;
+  color: #ffffff;
+}
+
+.label.skill {
+  background-color: #5ff1f5;
+  color: #000000;
+}
+
+.label.talk {
+  background-color: #f9bbe5;
+  color: #000000;
+}
+
+.label.friendliness {
+  background-color: #7f0799;
+  color: #ffffff;
+}
+
+.label.status-lighter {
+  background-color: #eeeeee;
+  color: #000000;
+}
+
+.label.status-light {
+  background-color: #cccccc;
+  color: #000000;
+}
+
+.label.status-neutral {
+  background-color: #999999;
+  color: #000000;
+}
+
+.label.status-dark {
+  background-color: #666666;
+  color: #ffffff;
+}
+
+.label.status-darker {
+  background-color: #333333;
+  color: #ffffff;
+}
+
+.label.priority-unfavourable {
+  background-color: #b60205;
+  color: #ffffff;
+}
+
+.label.priority-negative {
+  background-color: #ff9f1c;
+  color: #000000;
+}
+
+.label.priority-neutral {
+  background-color: #ffcc00;
+  color: #000000;
+}
+
+.label.priority-positive {
+  background-color: #cfda2c;
+  color: #000000;
+}
+
+.label.priority-favourable {
+  background-color: #008672;
+  color: #ffffff;
+}
+
+.label.miscellaneous {
+  background-color: #000000;
+  color: #ffffff;
+}
+
+.label.hacktoberfest {
+  background-color: #883255;
+  color: #ffffff;
+}
+
+.label.invalid {
+  background-color: #eeeeee;
+  color: #000000;
+}
+
+@media (min-width: 1024px) {
+.issue-container {
+  display: flex;
+  margin-left: -20%;
+  margin-right: -23%
+}
+
+.filter-container {
+  width: 25%;
+  flex: none;
+}
+
+}

themes/vocabulary_theme/templates/issue_finder.html

@@ -3,17 +3,16 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
+<link rel="stylesheet" href="{{ '/static/css/issue-finder.css'|url }}">
 <script type="text/javascript" src="{{ '/static/gen/issue-finder.js'|url }}"></script>
  <header>
     <h1>{{ this.title }}</h1>
     <p> {{ this.description }}</p>
   </header>
-  <div>
-    <div id="app">
       <div>
-        <div class="columns">
+        <div class="issue-container">
           <!-- Filters Section -->
-          <div class="column is-one-quarter">
+          <div class="filter-container">
             <form id="filters">
               <label for="aim">
                 <strong>Aim</strong><br />
@@ -28,7 +27,7 @@ <h1>{{ this.title }}</h1>
               <div id="skill-filters">
                 <label for="skills">
                   <strong>Skill set*</strong><br />
-                  Choose up to three skills.
+                  Choose up to three skills that you would like to see issues for.
                 </label>
                 <select id="skills">
                   <!-- Skills dynamically injected -->
@@ -50,11 +49,9 @@ <h1>{{ this.title }}</h1>
           </div>
 
           <!-- Issues Section -->
-          <div class="column" id="issues-container">
+          <div class="issues-container" id="issues-container">
             <p class="no-results">Loading issues...</p>
           </div>
         </div>
       </div>
-    </div>
-  </div>
 {% endblock %}

webpack/js/issue-finder.js

@@ -23,6 +23,8 @@ document.addEventListener("DOMContentLoaded", function () {
     experience: "experienced", // Default to "Experienced"
   };
 
+  let categories = {}; // Dynamic categories for labels
+
   // Fetch and load filter data (skills and labels)
   async function fetchFilterData() {
     try {
@@ -32,34 +34,71 @@ document.addEventListener("DOMContentLoaded", function () {
       ]);
 
       const skills = yaml.safeLoad(skillsYaml);
+      const labels = yaml.safeLoad(labelsYaml);
+
+      // Hydrate and process categories
+      const [skillsList, categoriesData] = hydrateAppWithData(skills, labels);
+      categories = categoriesData;
+
       populateSkillsDropdown(Object.values(skills).flat()); // Populate skills dropdown
     } catch (error) {
       console.error("Error loading filters:", error);
     }
   }
 
-function populateSkillsDropdown(skills) {
-  // Process skills to remove duplicates
-  const uniqueSkills = Array.from(new Set(Object.values(skills).flat())); // Flatten and remove duplicates
-  const topLevelSkills = Array.from(
-    new Set(uniqueSkills.map((skill) => skill.split("/")[0]))
-  ); // Extract prefixes
+  function hydrateAppWithData(skills, labels) {
+    const categories = {};
+    labels.groups.forEach((group) => {
+      group.labels.forEach((label) => {
+        let name = label.name;
+        if (group.is_prefixed !== false) {
+          name = `${group.name}: ${name}`;
+        }
+        if (label.has_emoji_name !== false) {
+          name = `${label.emoji} ${name}`;
+        }
+        let styleName = label.color;
+        if (/^[A-Z]+$/.test(styleName)) {
+          styleName = `${group.name}-${styleName.toLocaleLowerCase()}`;
+        } else {
+          styleName = group.name;
+        }
+        categories[name] = styleName;
+      });
+    });
 
-  // Populate skills dropdown
-  const skillsDropdown = document.getElementById("skills");
-  skillsDropdown.innerHTML = ""; // Clear existing options
-  const noPreferenceOption = document.createElement("option");
-  noPreferenceOption.value = ""; // Empty value for no preference
-  noPreferenceOption.textContent = "No preferences";
-  skillsDropdown.appendChild(noPreferenceOption);
-  // Add each top-level skill to the dropdown
-  topLevelSkills.forEach((skill) => {
-    const optionElement = document.createElement("option");
-    optionElement.value = skill.toLowerCase();
-    optionElement.textContent = skill;
-    skillsDropdown.appendChild(optionElement);
-  });
-}
+    labels.standalone.forEach((label) => {
+      let name = `${label.emoji} ${label.name}`;
+      categories[name] = "miscellaneous";
+    });
+
+    skills = Array.from(new Set(Object.values(skills).flat()));
+
+    return [skills, categories];
+  }
+
+  function populateSkillsDropdown(skills) {
+    // Process skills to remove duplicates
+    const uniqueSkills = Array.from(new Set(Object.values(skills).flat())); // Flatten and remove duplicates
+    const topLevelSkills = Array.from(
+      new Set(uniqueSkills.map((skill) => skill.split("/")[0]))
+    ); // Extract prefixes
+
+    // Populate skills dropdown
+    const skillsDropdown = document.getElementById("skills");
+    skillsDropdown.innerHTML = ""; // Clear existing options
+    const noPreferenceOption = document.createElement("option");
+    noPreferenceOption.value = ""; // Empty value for no preference
+    noPreferenceOption.textContent = "No preferences";
+    skillsDropdown.appendChild(noPreferenceOption);
+    // Add each top-level skill to the dropdown
+    topLevelSkills.forEach((skill) => {
+      const optionElement = document.createElement("option");
+      optionElement.value = skill.toLowerCase();
+      optionElement.textContent = skill;
+      skillsDropdown.appendChild(optionElement);
+    });
+  }
 
   // Build GitHub search query based on user-selected filters
   function loadIssues() {
@@ -99,7 +138,7 @@ function populateSkillsDropdown(skills) {
     }
   }
 
-  // function to display filtered issues
+  // Function to display filtered issues with dynamic label classes
   function displayFilteredIssues() {
     issuesContainer.innerHTML = ""; // Clear any existing issues
 
@@ -145,7 +184,11 @@ function populateSkillsDropdown(skills) {
         </p>
         <div class="labels">
           ${issue.labels
-            .map((label) => `<span class="label">${label}</span>`)
+            .map((label) => {
+              // Use the dynamic class mapping for labels
+              const labelClass = categories[label] || "miscellaneous";
+              return `<span class="label ${labelClass}">${label}</span>`;
+            })
             .join("")}
         </div>
       `;