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

3
CHANGELOG.md
View File

@@ -12,6 +12,7 @@
* [#23](https://github.com/SamR1/Fittrackee/issues/23) - The user can choose the first day of the week
* [#36](https://github.com/SamR1/Fittrackee/issues/36) - Disable user registration
* [#33](https://github.com/SamR1/Fittrackee/issues/33) - Add file size limit on file upload
* [#37](https://github.com/SamR1/Fittrackee/issues/37) - Display map on activities list
#### Bugs Fixed
@@ -21,7 +22,7 @@
* **[Poetry](https://poetry.eustace.io/)** replaces **[pipenv](https://docs.pipenv.org)** for Python packages management
In this release 7 issue were closed.
In this release 8 issue were closed.
## Version 0.2.0 - Statistics (2019/07/07)

3
docs/_sources/changelog.md.txt
View File

@@ -12,6 +12,7 @@
* [#23](https://github.com/SamR1/Fittrackee/issues/23) - The user can choose the first day of the week
* [#36](https://github.com/SamR1/Fittrackee/issues/36) - Disable user registration
* [#33](https://github.com/SamR1/Fittrackee/issues/33) - Add file size limit on file upload
* [#37](https://github.com/SamR1/Fittrackee/issues/37) - Display map on activities list
#### Bugs Fixed
@@ -21,7 +22,7 @@
* **[Poetry](https://poetry.eustace.io/)** replaces **[pipenv](https://docs.pipenv.org)** for Python packages management
In this release 7 issue were closed.
In this release 8 issue were closed.
## Version 0.2.0 - Statistics (2019/07/07)

3
docs/changelog.html
View File

@@ -167,6 +167,7 @@
<li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/23">#23</a> - The user can choose the first day of the week</p></li>
<li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/36">#36</a> - Disable user registration</p></li>
<li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/33">#33</a> - Add file size limit on file upload</p></li>
<li><p><a class="reference external" href="https://github.com/SamR1/Fittrackee/issues/37">#37</a> - Display map on activities list</p></li>
</ul>
</div>
<div class="section" id="bugs-fixed">
@@ -181,7 +182,7 @@
<ul class="simple">
<li><p><strong><a class="reference external" href="https://poetry.eustace.io/">Poetry</a></strong> replaces <strong><a class="reference external" href="https://docs.pipenv.org">pipenv</a></strong> for Python packages management</p></li>
</ul>
<p>In this release 7 issue were closed.</p>
<p>In this release 8 issue were closed.</p>
</div>
</div>
<div class="section" id="version-0-2-0-statistics-2019-07-07">

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;
}