removed duplication of UI
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
f18c227b1e
commit
3e700c7a3c
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue