From 2ced987f42a1d2989abf1efa3bcd9ca2e4183702 Mon Sep 17 00:00:00 2001
From: l42luo <l42luo@localhost>
Date: Mon, 16 Aug 2021 20:23:41 -0400
Subject: [PATCH] Mobile Mini Event Card (#97)

Closes #38

Currently short description is still visible when card is closed

Co-authored-by: Linna Luo <linnaluo18@gmail.com>
Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/97
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: l42luo <l42luo@localhost>
Co-committed-by: l42luo <l42luo@localhost>
---
 components/MiniEventCard.module.css | 21 +++++++++++++++++++++
 components/MiniEventCard.tsx        |  4 +---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index c3c9e0bf..59e1bbec 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -48,3 +48,24 @@
 .dropDownIcon {
   fill: var(--primary-accent);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .details {
+    bottom: 0;
+    left: 0;
+    top: unset;
+    right: unset;
+  }
+
+  .dropDownIcon {
+    display: none;
+  }
+
+  .card {
+    padding-bottom: calc(48rem / 16);
+  }
+
+  .nameSpacer {
+    display: none;
+  }
+}
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 79e41572..be2c7928 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -34,10 +34,8 @@ 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.details}>View details {dropDownIcon}</div>
       </summary>
-
       <div>{description}</div>
     </details>
   );