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: www/www-new#97
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: l42luo <l42luo@localhost>
Co-committed-by: l42luo <l42luo@localhost>
amy-random-shapes
l42luo 1 year ago
parent 1f8fd0f408
commit 2ced987f42
  1. 21
      components/MiniEventCard.module.css
  2. 4
      components/MiniEventCard.tsx

@ -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;
}
}

@ -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>
);

Loading…
Cancel
Save