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

Client - refactor

Browse Source
This commit is contained in:
Sam 2019-08-31 20:43:44 +02:00
parent 12703d8ffe
commit 05a03cc349
4 changed files with 36 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
fittrackee_client/src/components/Activities/ActivitiesList.jsx
View File

@ -2,7 +2,8 @@ import { format } from 'date-fns'
import React from 'react'
import { Link } from 'react-router-dom'
import { apiUrl, getDateWithTZ } from '../../utils'
import StaticMap from '../Common/StaticMap'
import { getDateWithTZ } from '../../utils'
export default class ActivitiesList extends React.PureComponent {
render() {
@ -40,30 +41,7 @@ export default class ActivitiesList extends React.PureComponent {
<Link to={`/activities/${activity.id}`}>
{activity.title}
</Link>
{activity.map && (
<span>
<img
className="activity-map"
src={`${apiUrl}activities/map/${
activity.map
}?${Date.now()}`}
alt="activity map"
/>
<span className="map-attribution text-right">
<div>
<span className="map-attribution-text">©</span>
<a
className="map-attribution-text"
href="http://www.openstreetmap.org/copyright"
target="_blank"
rel="noopener noreferrer"
>
OpenStreetMap
</a>
</div>
</span>
</span>
)}
{activity.map && <StaticMap activity={activity} />}
</td>
<td>
{format(

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

@ -131,7 +131,7 @@ label {
display: none;
}
.activity-title:hover span img {
.activity-title:hover img {
border: 1px solid lightgrey;
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);

29
fittrackee_client/src/components/Common/StaticMap.jsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react'
import { apiUrl } from '../../utils'
export default class StaticMap extends React.PureComponent {
render() {
const { activity } = this.props
return (
<>
<img
className="activity-map"
src={`${apiUrl}activities/map/${activity.map}?${Date.now()}`}
alt="activity map"
/>
<div className="map-attribution text-right">
<span className="map-attribution-text">©</span>
<a
className="map-attribution-text"
href="http://www.openstreetmap.org/copyright"
target="_blank"
rel="noopener noreferrer"
>
OpenStreetMap
</a>
</div>
</>
)
}
}

22
fittrackee_client/src/components/Dashboard/ActivityCard.jsx
View File

@ -2,7 +2,8 @@ import { format } from 'date-fns'
import React from 'react'
import { Link } from 'react-router-dom'
import { apiUrl, getDateWithTZ } from '../../utils'
import StaticMap from '../Common/StaticMap'
import { getDateWithTZ } from '../../utils'
export default function ActivityCard(props) {
const { activity, sports, user } = props
@ -25,24 +26,7 @@ export default function ActivityCard(props) {
<div className="row">
{activity.map && (
<div className="col">
<img
alt="Map"
src={`${apiUrl}activities/map/${activity.map}?${Date.now()}`}
className="img-fluid"
/>
<div className="map-attribution text-right">
<div>
<span className="map-attribution-text">©</span>
<a
className="map-attribution-text"
href="http://www.openstreetmap.org/copyright"
target="_blank"
rel="noopener noreferrer"
>
OpenStreetMap
</a>
</div>
</div>
<StaticMap activity={activity} />
</div>
)}
<div className="col">