From 05962260540b9d16f89d8eee06e39ae6a96cc75f Mon Sep 17 00:00:00 2001
From: Nick Visutsithiwong <2823112+nickvisut@users.noreply.github.com>
Date: Fri, 30 Aug 2024 16:09:32 -0700
Subject: [PATCH 1/3] fix high priority label w/out transition

---
 src/components/MapListCard.tsx | 42 ++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/MapListCard.tsx b/src/components/MapListCard.tsx
index c0cd952..9e7c944 100644
--- a/src/components/MapListCard.tsx
+++ b/src/components/MapListCard.tsx
@@ -56,12 +56,12 @@ const MapListCard: React.FC<MapListCardProps> = ({
   }
   return (
     <div
-      className={`grid cursor-pointer grid-cols-10 rounded-lg border-2 bg-white max-md:overflow-hidden ${isExpanded ? "max-h-[300px]" : "max-h-[104px]"} transition-max-height relative duration-[700ms]`}
+      className={`grid cursor-pointer grid-cols-10 rounded-lg border-2 bg-white max-md:overflow-hidden ${isExpanded ? "max-h-none" : "max-h-none"} transition-max-height transition-height relative duration-[700ms]`}
       onClick={onClick}
       id={name}
     >
-      <div className="col-span-6 justify-center overflow-hidden px-4 pb-4 transition-all ease-in-out md:col-span-7">
-        <div className="flex h-[104px] flex-col justify-center">
+      <div className="col-span-6 justify-center overflow-hidden px-4 py-4 transition-all ease-in-out md:col-span-7">
+        <div className="flex flex-col">
           {school.priority && (
             <button
               onClick={(e) => {
@@ -81,26 +81,28 @@ const MapListCard: React.FC<MapListCardProps> = ({
           </div>
         </div>
 
-        <div className="flex flex-col gap-2 max-md:text-sm">
-          <div>
-            <b>{students ? students.value : "N/A"}</b> Students
-          </div>
-          <div>
-            <b>{frl ? frl.value : "N/A"}%</b> Free and Reduced Lunch
-          </div>
-          <div>
-            <b>{ell ? ell.value : "N/A"}%</b> English Language Learners
+        {isExpanded && (
+          <div className={`mt-4 flex flex-col gap-2 max-md:text-sm`}>
+            <div>
+              <b>{students ? students.value : "N/A"}</b> Students
+            </div>
+            <div>
+              <b>{frl ? frl.value : "N/A"}%</b> Free and Reduced Lunch
+            </div>
+            <div>
+              <b>{ell ? ell.value : "N/A"}%</b> English Language Learners
+            </div>
+            <Link
+              className="w-fit rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700"
+              href={"/school?name=" + encodeURIComponent(school.name)}
+            >
+              Learn More
+            </Link>
           </div>
-          <Link
-            className="w-fit rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700"
-            href={"/school?name=" + encodeURIComponent(school.name)}
-          >
-            Learn More
-          </Link>
-        </div>
+        )}
       </div>
       <div
-        className={`transition-max-height relative col-span-4 rounded-r-lg duration-[700ms] md:col-span-3 ${isExpanded ? "max-h-[300px]" : "max-h-[104px]"}`}
+        className={`transition-max-height relative col-span-4 max-h-none rounded-r-lg duration-[700ms] md:col-span-3`}
       >
         <Image
           src={`/school_img/${school.img}`}

From e6cdc191f2e786ea063e1048ace58c8ef2e63220 Mon Sep 17 00:00:00 2001
From: Nick Visutsithiwong <2823112+nickvisut@users.noreply.github.com>
Date: Fri, 30 Aug 2024 17:52:51 -0700
Subject: [PATCH 2/3] attempt to use transition-behavior instead to show/hide

---
 src/components/MapListCard.tsx | 38 +++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/MapListCard.tsx b/src/components/MapListCard.tsx
index 9e7c944..a01755c 100644
--- a/src/components/MapListCard.tsx
+++ b/src/components/MapListCard.tsx
@@ -56,7 +56,7 @@ const MapListCard: React.FC<MapListCardProps> = ({
   }
   return (
     <div
-      className={`grid cursor-pointer grid-cols-10 rounded-lg border-2 bg-white max-md:overflow-hidden ${isExpanded ? "max-h-none" : "max-h-none"} transition-max-height transition-height relative duration-[700ms]`}
+      className={`relative grid cursor-pointer grid-cols-10 rounded-lg border-2 bg-white max-md:overflow-hidden`}
       onClick={onClick}
       id={name}
     >
@@ -81,25 +81,25 @@ const MapListCard: React.FC<MapListCardProps> = ({
           </div>
         </div>
 
-        {isExpanded && (
-          <div className={`mt-4 flex flex-col gap-2 max-md:text-sm`}>
-            <div>
-              <b>{students ? students.value : "N/A"}</b> Students
-            </div>
-            <div>
-              <b>{frl ? frl.value : "N/A"}%</b> Free and Reduced Lunch
-            </div>
-            <div>
-              <b>{ell ? ell.value : "N/A"}%</b> English Language Learners
-            </div>
-            <Link
-              className="w-fit rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700"
-              href={"/school?name=" + encodeURIComponent(school.name)}
-            >
-              Learn More
-            </Link>
+        <div
+          className={`flex flex-col gap-2 transition-all duration-[700ms] [transition-behavior:allow-discrete] max-md:text-sm ${isExpanded ? "visible mt-4 max-h-48" : "invisible mt-0 max-h-0"}`}
+        >
+          <div>
+            <b>{students ? students.value : "N/A"}</b> Students
           </div>
-        )}
+          <div>
+            <b>{frl ? frl.value : "N/A"}%</b> Free and Reduced Lunch
+          </div>
+          <div>
+            <b>{ell ? ell.value : "N/A"}%</b> English Language Learners
+          </div>
+          <Link
+            className="w-fit rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-700"
+            href={"/school?name=" + encodeURIComponent(school.name)}
+          >
+            Learn More
+          </Link>
+        </div>
       </div>
       <div
         className={`transition-max-height relative col-span-4 max-h-none rounded-r-lg duration-[700ms] md:col-span-3`}

From 83bdf02b3fb1834ea8dfeba0e711cafc4aeabc54 Mon Sep 17 00:00:00 2001
From: Nick Visutsithiwong <2823112+nickvisut@users.noreply.github.com>
Date: Fri, 30 Aug 2024 17:59:20 -0700
Subject: [PATCH 3/3] tweak list's card expand/collapse transition

---
 src/components/MapListCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MapListCard.tsx b/src/components/MapListCard.tsx
index a01755c..0c16c4d 100644
--- a/src/components/MapListCard.tsx
+++ b/src/components/MapListCard.tsx
@@ -82,7 +82,7 @@ const MapListCard: React.FC<MapListCardProps> = ({
         </div>
 
         <div
-          className={`flex flex-col gap-2 transition-all duration-[700ms] [transition-behavior:allow-discrete] max-md:text-sm ${isExpanded ? "visible mt-4 max-h-48" : "invisible mt-0 max-h-0"}`}
+          className={`flex flex-col gap-2 transition-all duration-[700ms] [transition-behavior:allow-discrete] max-md:text-sm ${isExpanded ? "visible mt-4 max-h-48 opacity-100" : "invisible mt-0 max-h-0 opacity-0"}`}
         >
           <div>
             <b>{students ? students.value : "N/A"}</b> Students