From ffd3ccad52febea7e4d8900e8e376620b1ff4bbe Mon Sep 17 00:00:00 2001
From: Chris Amyx <40224280+cdamyx@users.noreply.github.com>
Date: Sat, 4 Nov 2023 10:10:44 -0500
Subject: [PATCH] Update Projects page RWD for small screens (#18)

* Update projects with single repo and issues below

* Remove blank lines

* Update Projects page RWD for small screens
---
 islands/IssuesList.tsx | 9 +++++----
 routes/projects.tsx    | 6 +++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/islands/IssuesList.tsx b/islands/IssuesList.tsx
index 18de946..a1d3eb7 100644
--- a/islands/IssuesList.tsx
+++ b/islands/IssuesList.tsx
@@ -24,7 +24,7 @@ const IssuesList = ({repos, issues}: Props) => {
 
   const showLabel = (label: LabelProps) => {
     return (
-      <span onClick={() => setLabelFilter(label)} style={"background-color: #".concat(label.color)} class="cursor-pointer font-bold mr-1 px-2 py-[0.125rem] rounded-xl text-white text-xxs whitespace-nowrap hover:text-black">
+      <span onClick={() => setLabelFilter(label)} style={"background-color: #".concat(label.color)} class="cursor-pointer font-bold mr-1 mb-1 w-fit px-2 py-[0.125rem] rounded-xl text-white text-xxs whitespace-nowrap hover:text-black">
         {label.name}
       </span>
     );
@@ -47,7 +47,7 @@ const IssuesList = ({repos, issues}: Props) => {
     <Card title="Current Issues">
       <div class="flex justify-between my-4">
         <div>
-          <select class="px-4 py-2" value={repoFilter} onChange={e => setRepoFilter(e.currentTarget.value)}>
+          <select class="w-full md:w-auto px-4 py-2 mb-2 md:mb-0" value={repoFilter} onChange={e => setRepoFilter(e.currentTarget.value)}>
             <option value={NO_FILTER}>Filter by Repo</option>
             {repos.map(repo => <option value={repo}>{repo}</option>)}
           </select>
@@ -59,8 +59,9 @@ const IssuesList = ({repos, issues}: Props) => {
             )}
           </span>
         </div>
-        {(repoFilter !== NO_FILTER || labelFilter) && <button type="button" onClick={clearFilters} class="bg-zinc-200 px-4">Clear Filters</button>}
+        
       </div>
+      {(repoFilter !== NO_FILTER || labelFilter) && <button type="button" onClick={clearFilters} class="bg-zinc-200 px-4">Clear Filters</button>}
       <ul class="list-none">
         {filteredIssues.map((issue) => (
           <li class="my-3">
@@ -73,7 +74,7 @@ const IssuesList = ({repos, issues}: Props) => {
                 {issue.title}
               </a>
             </div>
-            <div class="flex">
+            <div class="flex flex-wrap">
               {issue.labels.map((label) => showLabel(label))}
             </div>
           </li>
diff --git a/routes/projects.tsx b/routes/projects.tsx
index 2f29554..b9d0efe 100644
--- a/routes/projects.tsx
+++ b/routes/projects.tsx
@@ -39,12 +39,12 @@ export default async function Home() {
 
   return (
     <div class="container mx-auto px-4">
-      <h1 class="text-4xl font-bold mb-4">Contribute to devICT</h1>
+      <h1 class="sm:text-4xl text-2xl font-bold mb-4 text-center md:text-left">Contribute to devICT</h1>
       <div class="grid grid-cols-4 gap-4">
-        <div class="col-span-3">
+        <div class="md:col-span-3 col-span-4">
           <IssuesList {...issuesListProps} />
         </div>
-        <div>
+        <div class="col-span-4 md:col-span-1">
           <div class="mb-4">
             <RepoList title="DevICT Repos" list={DEVICT_REPOS} />
           </div>
-- 
2.51.2