Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancements in Select and Issue List Design #14

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhancements in Select and Issue List Design #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 55 additions & 41 deletions layouts/shortcodes/issueList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -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();
Expand All @@ -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>
46 changes: 43 additions & 3 deletions static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1669,5 +1710,4 @@ nav a {
.\[\&\>strong\]\:text-red>strong {
--tw-text-opacity: 1;
color: rgb(184 26 86 / var(--tw-text-opacity));
}

}