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;
}
.img-disabled {
opacity: .4;
}
.leaflet-container {
height: 400px;
}
@ -578,3 +574,11 @@ label {
flex-basis: 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() {
const { currentMonth, startDate, endDate } = this.state
const { currentMonth, startDate, endDate, weekStartOnMonday } = this.state
const { sports } = this.props
const dateFormat = 'd'
@ -106,40 +106,45 @@ class Calendar extends React.Component {
for (let i = 0; i < 7; i++) {
formattedDate = format(day, dateFormat)
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(
<div className={`col cell img-${isDisabled}`} key={day}>
<span className="number">{formattedDate}</span>
{dayActivities.map(act => (
<Link key={act.id} to={`/activities/${act.id}`}>
<Fragment>
<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>
)}
</Fragment>
</Link>
))}
<div className={`col cell ${isWeekEnd ? ' weekend' : ''}`} key={day}>
<div className={`img${isDisabled}`}>
<span className="number">{formattedDate}</span>
{dayActivities.map(act => (
<Link key={act.id} to={`/activities/${act.id}`}>
<Fragment>
<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>
)}
</Fragment>
</Link>
))}
</div>
</div>
)
day = addDays(day, 1)