Mobile Mini Event Card #97
|
@ -48,3 +48,24 @@
|
||||||
.dropDownIcon {
|
.dropDownIcon {
|
||||||
fill: var(--primary-accent);
|
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>
|
</div>
|
||||||
<p className={styles.shortDescription}>{short}</p>
|
<p className={styles.shortDescription}>{short}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles.details}>View details {dropDownIcon}</div>
|
||||||
<p className={styles.details}>View details {dropDownIcon}</p>
|
|
||||||
</summary>
|
</summary>
|
||||||
|
|
||||||
<div>{description}</div>
|
<div>{description}</div>
|
||||||
</details>
|
</details>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue