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 React from 'react'
import { Link } from 'react-router-dom' 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 { export default class ActivitiesList extends React.PureComponent {
render() { render() {
@ -40,30 +41,7 @@ export default class ActivitiesList extends React.PureComponent {
<Link to={`/activities/${activity.id}`}> <Link to={`/activities/${activity.id}`}>
{activity.title} {activity.title}
</Link> </Link>
{activity.map && ( {activity.map && <StaticMap activity={activity} />}
<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>
)}
</td> </td>
<td> <td>
{format( {format(

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

@ -131,7 +131,7 @@ label {
display: none; display: none;
} }
.activity-title:hover span img { .activity-title:hover img {
border: 1px solid lightgrey; border: 1px solid lightgrey;
border-radius: 4px; 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); 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 React from 'react'
import { Link } from 'react-router-dom' 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) { export default function ActivityCard(props) {
const { activity, sports, user } = props const { activity, sports, user } = props
@ -25,24 +26,7 @@ export default function ActivityCard(props) {
<div className="row"> <div className="row">
{activity.map && ( {activity.map && (
<div className="col"> <div className="col">
<img <StaticMap activity={activity} />
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>
</div> </div>
)} )}
<div className="col"> <div className="col">