Mobile Mini Event Card #97
No reviewers
Labels
No Label
a11y
Backlog
Blocked
Bug
Content
Dependencies
Design
Feature Request
Good First Issue
In Progress
Performance
Priority - High
Priority - Low
Priority - Medium
Untriaged
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
Dependencies
No dependencies set.
Reference: www/www-new#97
Loading…
Reference in New Issue
No description provided.
Delete Branch "feat/mobile-mini-event-card"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Closes #38
Currently short description is still visible when card is closed
@ -51,0 +65,4 @@
@media only screen and (max-width: calc(768rem / 16)) {
.mobileOpenCardToggle {
position: relative;
margin: auto;
This aligns
View Details
with rest of text on the cardWIP: Mobile Mini Event Cardto Mobile Mini Event Card@ -37,3 +37,2 @@
<p className={styles.mobileOpenCardToggle}>View details</p>
</summary>
<div>{description}</div>
Semantically, this is not correct. Everything in the
<summary>
should be the short description, and everything outside the<summary>
but inside the<details>
should be the full explanation.@ -35,2 +35,3 @@
<p className={styles.details}>View details {dropDownIcon}</p>
<div className={styles.longDescription}>{description}</div>
<p className={styles.mobileOpenCardToggle}>View details</p>
Duplicating UI for mobile is a bad practice. You can wrap up the dropdown icon in a
<span>
and then slap a class on that span, anddisplay: none
that class on mobile.LGTM! Hit the button!