From 12703d8ffebf9df3df06990aa73b4a2cc2d6266e Mon Sep 17 00:00:00 2001 From: Sam Date: Sat, 31 Aug 2019 20:35:05 +0200 Subject: [PATCH] Client - display activity map on Activities list - fix #37 --- CHANGELOG.md | 3 +- docs/_sources/changelog.md.txt | 3 +- docs/changelog.html | 3 +- .../components/Activities/ActivitiesList.jsx | 28 +++++++++++++++++-- fittrackee_client/src/components/App.css | 23 +++++++++++++++ 5 files changed, 55 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 40b02510..4b177f6f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) diff --git a/docs/_sources/changelog.md.txt b/docs/_sources/changelog.md.txt index 40b02510..4b177f6f 100644 --- a/docs/_sources/changelog.md.txt +++ b/docs/_sources/changelog.md.txt @@ -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) diff --git a/docs/changelog.html b/docs/changelog.html index fb437aa4..a17f9f98 100644 --- a/docs/changelog.html +++ b/docs/changelog.html @@ -167,6 +167,7 @@

  • #23 - The user can choose the first day of the week

  • #36 - Disable user registration

  • #33 - Add file size limit on file upload

    • +

  • #37 - Display map on activities list

    • @@ -181,7 +182,7 @@ -

    In this release 7 issue were closed.

    +

    In this release 8 issue were closed.

    diff --git a/fittrackee_client/src/components/Activities/ActivitiesList.jsx b/fittrackee_client/src/components/Activities/ActivitiesList.jsx index 7cb607c8..dce4a016 100644 --- a/fittrackee_client/src/components/Activities/ActivitiesList.jsx +++ b/fittrackee_client/src/components/Activities/ActivitiesList.jsx @@ -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" /> - + {activity.title} + {activity.map && ( + + activity map + +
    + © + + OpenStreetMap + +
    +     +     + )} {format( diff --git a/fittrackee_client/src/components/App.css b/fittrackee_client/src/components/App.css index 7f8d40ad..4cc11bb7 100644 --- a/fittrackee_client/src/components/App.css +++ b/fittrackee_client/src/components/App.css @@ -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; }