From 2ec819e113078e1f62b3bcc4a0272b8e2080446a Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Sun, 25 Jul 2021 00:55:23 -0400
Subject: [PATCH 1/4] added mobile styling for View Details toggle for card

---
 components/MiniEventCard.module.css | 31 ++++++++++++++++++++++++++++-
 components/MiniEventCard.tsx        |  5 ++---
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index ce61aa2b..0fd1f228 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -23,7 +23,8 @@
   margin-bottom: calc(12rem / 16);
 }
 
-.details {
+.details,
+.mobileOpenCardToggle {
   position: absolute;
   top: 0;
   right: 0;
@@ -33,10 +34,22 @@
   font-size: calc(14rem / 16);
 }
 
+.mobileOpenCardToggle {
+  display: none;
+}
+
 .card[open] .shortDescription {
   display: none;
 }
 
+.longDescription {
+  display: none;
+}
+
+.card[open] .longDescription {
+  display: initial;
+}
+
 .card[open] .dropDownIcon {
   transform: rotate(180deg);
 }
@@ -48,3 +61,19 @@
 .dropDownIcon {
   fill: var(--blue-2);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .mobileOpenCardToggle {
+    position: relative;
+    margin: auto;
+    display: initial;
+  }
+
+  .details .dropDownIcon {
+    display: none;
+  }
+
+  .details {
+    display: none;
+  }
+}
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 5236a7b0..5015d8cd 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -32,11 +32,10 @@ export const MiniEventCard: React.FC<Props> = ({
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>
-
         <p className={styles.details}>View details {dropDownIcon}</p>
+        <div className={styles.longDescription}>{description}</div>
+        <p className={styles.mobileOpenCardToggle}>View details</p>
       </summary>
-
-      <div>{description}</div>
     </details>
   );
 };
-- 
2.39.2


From 65217ea5970f954a248f932fc0bc038a2f479358 Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Sun, 25 Jul 2021 15:01:55 -0400
Subject: [PATCH 2/4] cleaned up css module

---
 components/MiniEventCard.module.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index 0fd1f228..656a182e 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -69,11 +69,8 @@
     display: initial;
   }
 
+  .details,
   .details .dropDownIcon {
     display: none;
   }
-
-  .details {
-    display: none;
-  }
 }
-- 
2.39.2


From 3e700c7a3c265aa2375556b22da6a13ae8ec52fb Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Mon, 16 Aug 2021 16:35:22 -0400
Subject: [PATCH 3/4] removed duplication of UI

---
 components/MiniEventCard.module.css | 35 +++++++++++++----------------
 components/MiniEventCard.tsx        |  7 +++---
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index d9f2637a..59e1bbec 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -23,8 +23,7 @@
   margin-bottom: calc(12rem / 16);
 }
 
-.details,
-.mobileOpenCardToggle {
+.details {
   position: absolute;
   top: 0;
   right: 0;
@@ -34,22 +33,10 @@
   font-size: calc(14rem / 16);
 }
 
-.mobileOpenCardToggle {
-  display: none;
-}
-
 .card[open] .shortDescription {
   display: none;
 }
 
-.longDescription {
-  display: none;
-}
-
-.card[open] .longDescription {
-  display: initial;
-}
-
 .card[open] .dropDownIcon {
   transform: rotate(180deg);
 }
@@ -63,14 +50,22 @@
 }
 
 @media only screen and (max-width: calc(768rem / 16)) {
-  .mobileOpenCardToggle {
-    position: relative;
-    margin: auto;
-    display: initial;
+  .details {
+    bottom: 0;
+    left: 0;
+    top: unset;
+    right: unset;
   }
 
-  .details,
-  .details .dropDownIcon {
+  .dropDownIcon {
+    display: none;
+  }
+
+  .card {
+    padding-bottom: calc(48rem / 16);
+  }
+
+  .nameSpacer {
     display: none;
   }
 }
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 3b5bccc0..c1dc4eff 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -34,10 +34,11 @@ export const MiniEventCard: React.FC<Props> = ({
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>
-        <p className={styles.details}>View details {dropDownIcon}</p>
-        <div className={styles.longDescription}>{description}</div>
-        <p className={styles.mobileOpenCardToggle}>View details</p>
+        <div className={styles.details}>View details {dropDownIcon}</div>
       </summary>
+      <div>
+      {description}
+      </div>
     </details>
   );
 };
-- 
2.39.2


From 649a641411324e0bb2b519ebd191d5329d94a8db Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Mon, 16 Aug 2021 16:42:36 -0400
Subject: [PATCH 4/4] fix prettier issue

---
 components/MiniEventCard.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index c1dc4eff..be2c7928 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -36,9 +36,7 @@ export const MiniEventCard: React.FC<Props> = ({
         </div>
         <div className={styles.details}>View details {dropDownIcon}</div>
       </summary>
-      <div>
-      {description}
-      </div>
+      <div>{description}</div>
     </details>
   );
 };
-- 
2.39.2