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

minor fix on statistics page

Browse Source
This commit is contained in:
Sam 2019-01-05 13:02:55 +01:00
parent 02999107fb
commit 7659940725
2 changed files with 70 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -138,6 +138,10 @@ label {
margin-left: 60px; margin-left: 60px;
} }
.chart-arrows {
margin-top: 7px;
}
.chart-filters { .chart-filters {
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -153,7 +157,7 @@ label {
} }
.chart-radio label { .chart-radio label {
display: flex; /* display: flex; */
} }
.chart-radio input { .chart-radio input {

124
fittrackee_client/src/components/Statistics/index.jsx
View File

@ -13,6 +13,7 @@ import {
subYears subYears
} from 'date-fns' } from 'date-fns'
import React from 'react' import React from 'react'
import { Helmet } from 'react-helmet'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { activityColors } from '../../utils/activities' import { activityColors } from '../../utils/activities'
@ -110,69 +111,74 @@ class Statistics extends React.Component {
const { displayedSports, statsParams } = this.state const { displayedSports, statsParams } = this.state
const { sports } = this.props const { sports } = this.props
return ( return (
<div className="container dashboard"> <>
<div className="card activity-card"> <Helmet>
<div className="card-header"> <title>FitTrackee - Statistics</title>
Statistics </Helmet>
</div> <div className="container dashboard">
<div className="card-body"> <div className="card activity-card">
<div className="chart-filters row"> <div className="card-header">
<div className="col"> Statistics
<p className="text-center">
<i
className="fa fa-chevron-left"
aria-hidden="true"
onClick={() => this.handleOnClickArrows(true)}
/>
</p>
</div>
<div className="col-md-3">
<select
className="form-control input-lg"
name="duration"
defaultValue={statsParams.duration}
onChange={e => this.handleOnChangeDuration(e)}
>
{durations.map(d => (
<option key={d} value={d}>
{d}
</option>
))}
</select>
</div>
<div className="col">
<p className="text-center">
<i
className="fa fa-chevron-right"
aria-hidden="true"
onClick={() => this.handleOnClickArrows(false)}
/>
</p>
</div>
</div> </div>
<Stats <div className="card-body">
displayEmpty <div className="chart-filters row">
displayedSports={displayedSports} <div className="col chart-arrows">
statsParams={statsParams} <p className="text-center">
/> <i
<div className="row chart-activities"> className="fa fa-chevron-left"
{sports.map(sport => ( aria-hidden="true"
<label className="col activity-label" key={sport.id}> onClick={() => this.handleOnClickArrows(true)}
<input />
type="checkbox" </p>
checked={displayedSports.includes(sport.id)} </div>
name={sport.label} <div className="col-md-3">
onChange={() => this.handleOnChangeSports(sport.id)} <select
/> className="form-control input-lg"
<span style={{ color: activityColors[sport.id - 1] }}> name="duration"
{` ${sport.label}`} defaultValue={statsParams.duration}
</span> onChange={e => this.handleOnChangeDuration(e)}
</label> >
))} {durations.map(d => (
<option key={d} value={d}>
{d}
</option>
))}
</select>
</div>
<div className="col chart-arrows">
<p className="text-center">
<i
className="fa fa-chevron-right"
aria-hidden="true"
onClick={() => this.handleOnClickArrows(false)}
/>
</p>
</div>
</div>
<Stats
displayEmpty
displayedSports={displayedSports}
statsParams={statsParams}
/>
<div className="row chart-activities">
{sports.map(sport => (
<label className="col activity-label" key={sport.id}>
<input
type="checkbox"
checked={displayedSports.includes(sport.id)}
name={sport.label}
onChange={() => this.handleOnChangeSports(sport.id)}
/>
<span style={{ color: activityColors[sport.id - 1] }}>
{` ${sport.label}`}
</span>
</label>
))}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </>
) )
} }
} }