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

Client - display activity map on Activities list - fix #37

Browse Source
This commit is contained in:
Sam
2019-08-31 20:35:05 +02:00
parent b33befe19a
commit 12703d8ffe
5 changed files with 55 additions and 5 deletions
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,7 @@ import { format } from 'date-fns'
import React from 'react'
import { Link } from 'react-router-dom'
import { getDateWithTZ } from '../../utils'
import { apiUrl, getDateWithTZ } from '../../utils'
export default class ActivitiesList extends React.PureComponent {
render() {
@ -36,10 +36,34 @@ export default class ActivitiesList extends React.PureComponent {
alt="activity sport logo"
/>
</td>
<td>
<td className="activity-title">
<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>
)}
</td>
<td>
{format(

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

@ -127,6 +127,29 @@ label {
max-height: 18px;
}
.activity-title img, .activity-title .map-attribution {
display: none;
}
.activity-title:hover span 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);
display:block;
margin-left: 10px;
position: absolute;
z-index: 1000;
}
.activity-title:hover .map-attribution {
display:block;
font-size: 11px;
left: -130px;
position:relative;
top: 0;
z-index: 1000;
}
.add-activity {
margin-top: 50px;
}