display a popup to show more activities - fix #46

This commit is contained in:
Sam 2020-01-28 20:24:16 +01:00
parent c8c1074604
commit 3fd72acf96
3 changed files with 111 additions and 36 deletions

View File

@ -552,7 +552,6 @@ label {
position: relative;
height: 3em;
border-right: 1px solid var(--border-color);
overflow: hidden;
background: var(--neutral-color);
}
@ -617,6 +616,21 @@ label {
margin-left: 0.3em;
}
.calendar-display-more {
background: whitesmoke;
border-radius: 4px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 10px;
padding: 10px 15px;
position: absolute;
min-width: 52px;
z-index: 1000;
}
.calendar-activity-more {
display: none;
}
@media only screen and (max-width: 992px) {
.calendar-activity:nth-child(-n+2) {
@ -626,16 +640,24 @@ label {
.calendar-activity:nth-child(n+3) ~ .calendar-more {
display: inline-block;
}
.calendar-activity-more:nth-child(n+3){
display: inline-block;
}
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.calendar-activity:nth-child(-n+4){
display: inline-block;
display: inline-block;
}
.calendar-activity:nth-child(n+5) ~ .calendar-more {
display: inline-block;
display: inline-block;
}
.calendar-activity-more:nth-child(n+5){
display: inline-block;
}
}
@ -648,4 +670,8 @@ label {
.calendar-activity:nth-child(n+7) ~ .calendar-more {
display: inline-block;
}
.calendar-activity-more:nth-child(n+7){
display: inline-block;
}
}

View File

@ -1,47 +1,57 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { recordsLabels } from '../../utils/activities'
import CalendarActivity from './CalendarActivity'
export default class CalendarActivities extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
isHidden: true,
}
}
handleDisplayMore() {
this.setState({
isHidden: !this.state.isHidden,
})
}
export default class CalendarActivities extends React.PureComponent {
render() {
const { dayActivities, isDisabled, sports } = this.props
const { isHidden } = this.state
return (
<div>
{dayActivities.map(act => (
<Link
className="calendar-activity"
<CalendarActivity
key={act.id}
to={`/activities/${act.id}`}
>
<>
<img
alt="activity sport logo"
className={`activity-sport ${isDisabled}`}
src={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
title={act.title}
/>
{act.records.length > 0 && (
<sup>
<i
className="fa fa-trophy custom-fa-small"
aria-hidden="true"
title={act.records.map(
rec =>
` ${
recordsLabels.filter(
r => r.record_type === rec.record_type
)[0].label
}`
)}
/>
</sup>
)}
</>
</Link>
activity={act}
isDisabled={isDisabled}
isMore=""
sportImg={sports.filter(s => s.id === act.sport_id).map(s => s.img)}
/>
))}
{dayActivities.length > 2 && (
<i className="fa fa-plus-circle calendar-more" aria-hidden="true" />
<i
className="fa fa-plus calendar-more"
aria-hidden="true"
onClick={() => this.handleDisplayMore()}
title="show more activities"
/>
)}
{!isHidden && (
<div className="calendar-display-more">
{dayActivities.map(act => (
<CalendarActivity
key={act.id}
activity={act}
isDisabled={isDisabled}
isMore="-more"
sportImg={sports
.filter(s => s.id === act.sport_id)
.map(s => s.img)}
/>
))}
</div>
)}
</div>
)

View File

@ -0,0 +1,39 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { recordsLabels } from '../../utils/activities'
export default function CalendarActivity(props) {
const { activity, isDisabled, isMore, sportImg } = props
return (
<Link
className={`calendar-activity${isMore}`}
to={`/activities/${activity.id}`}
>
<>
<img
alt="activity sport logo"
className={`activity-sport ${isDisabled}`}
src={sportImg}
title={activity.title}
/>
{activity.records.length > 0 && (
<sup>
<i
className="fa fa-trophy custom-fa-small"
aria-hidden="true"
title={activity.records.map(
rec =>
` ${
recordsLabels.filter(
r => r.record_type === rec.record_type
)[0].label
}`
)}
/>
</sup>
)}
</>
</Link>
)
}