Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - display WE days with different BG color on calendar - fix #43

Browse Source
This commit is contained in:
Sam 2019-12-29 10:42:01 +01:00
parent 038610e7f6
commit 40edbe19ce
2 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
fittrackee_client/src/components/App.css
View File

@ -330,10 +330,6 @@ label {
color: lightgrey; color: lightgrey;
} }
.img-disabled {
opacity: .4;
}
.leaflet-container { .leaflet-container {
height: 400px; height: 400px;
} }
@ -578,3 +574,11 @@ label {
flex-basis: calc(100%/7); flex-basis: calc(100%/7);
width: calc(100%/7); width: calc(100%/7);
} }
.calendar .body .img-disabled {
opacity: .4;
}
.calendar .body .weekend {
background: #f5f5f5;
}

73
fittrackee_client/src/components/Dashboard/Calendar.jsx
View File

@ -92,7 +92,7 @@ class Calendar extends React.Component {
} }
renderCells() { renderCells() {
const { currentMonth, startDate, endDate } = this.state const { currentMonth, startDate, endDate, weekStartOnMonday } = this.state
const { sports } = this.props const { sports } = this.props
const dateFormat = 'd' const dateFormat = 'd'
@ -106,40 +106,45 @@ class Calendar extends React.Component {
for (let i = 0; i < 7; i++) { for (let i = 0; i < 7; i++) {
formattedDate = format(day, dateFormat) formattedDate = format(day, dateFormat)
const dayActivities = this.filterActivities(day) const dayActivities = this.filterActivities(day)
const isDisabled = isSameMonth(day, currentMonth) ? '' : 'disabled' const isDisabled = isSameMonth(day, currentMonth) ? '' : '-disabled'
const isWeekEnd = weekStartOnMonday
? [5, 6].includes(i)
: [0, 6].includes(i)
days.push( days.push(
<div className={`col cell img-${isDisabled}`} key={day}> <div className={`col cell ${isWeekEnd ? ' weekend' : ''}`} key={day}>
<span className="number">{formattedDate}</span> <div className={`img${isDisabled}`}>
{dayActivities.map(act => ( <span className="number">{formattedDate}</span>
<Link key={act.id} to={`/activities/${act.id}`}> {dayActivities.map(act => (
<Fragment> <Link key={act.id} to={`/activities/${act.id}`}>
<img <Fragment>
alt="activity sport logo" <img
className={`activity-sport ${isDisabled}`} alt="activity sport logo"
src={sports className={`activity-sport ${isDisabled}`}
.filter(s => s.id === act.sport_id) src={sports
.map(s => s.img)} .filter(s => s.id === act.sport_id)
title={act.title} .map(s => s.img)}
/> title={act.title}
{act.records.length > 0 && ( />
<sup> {act.records.length > 0 && (
<i <sup>
className="fa fa-trophy custom-fa-small" <i
aria-hidden="true" className="fa fa-trophy custom-fa-small"
title={act.records.map( aria-hidden="true"
rec => title={act.records.map(
` ${ rec =>
recordsLabels.filter( ` ${
r => r.record_type === rec.record_type recordsLabels.filter(
)[0].label r => r.record_type === rec.record_type
}` )[0].label
)} }`
/> )}
</sup> />
)} </sup>
</Fragment> )}
</Link> </Fragment>
))} </Link>
))}
</div>
</div> </div>
) )
day = addDays(day, 1) day = addDays(day, 1)