hide some activities on calendar depending on screen width - #46
This commit is contained in:
parent
5ad074bb1f
commit
c8c1074604
@ -248,6 +248,13 @@ label {
|
||||
|
||||
.custom-fa-small {
|
||||
font-size: 0.8em;
|
||||
margin-left: -0.8em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.custom-fa-small {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tooltip {
|
||||
@ -598,3 +605,47 @@ label {
|
||||
.calendar .body .weekend {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.calendar-activity,
|
||||
.calendar-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.calendar-more {
|
||||
color: #405976;
|
||||
font-size: .7em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
|
||||
.calendar-activity:nth-child(-n+2) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.calendar-activity:nth-child(n+3) ~ .calendar-more {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
||||
|
||||
.calendar-activity:nth-child(-n+4){
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.calendar-activity:nth-child(n+5) ~ .calendar-more {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
.calendar-activity:nth-child(-n+6) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.calendar-activity:nth-child(n+7) ~ .calendar-more {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
@ -7,9 +7,13 @@ export default class CalendarActivities extends React.PureComponent {
|
||||
render() {
|
||||
const { dayActivities, isDisabled, sports } = this.props
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
{dayActivities.map(act => (
|
||||
<Link key={act.id} to={`/activities/${act.id}`}>
|
||||
<Link
|
||||
className="calendar-activity"
|
||||
key={act.id}
|
||||
to={`/activities/${act.id}`}
|
||||
>
|
||||
<>
|
||||
<img
|
||||
alt="activity sport logo"
|
||||
@ -36,7 +40,10 @@ export default class CalendarActivities extends React.PureComponent {
|
||||
</>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
{dayActivities.length > 2 && (
|
||||
<i className="fa fa-plus-circle calendar-more" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user