Client: add OSM copyright on static map

fittrackee_client/src/components/App.css

@@ -45,22 +45,12 @@ a {
   color: #40578a;
 }
 
-.card {
-  text-align: left;
-}
-
-label {
-  width: 100%;
-}
-
 input, textarea {
   width: 100%;
 }
 
-.page-title {
+label {
-  font-size: 2em;
+  width: 100%;
-  margin: 1em;
-  text-align: center;
 }
 
 .activity-card {
@@ -105,24 +95,8 @@ input, textarea {
   max-height: 35px;
 }
 
-.col-activity-logo{
+.card {
-  padding-right: 0;
+  text-align: left;
-}
-
-.fa-trophy {
-  color: goldenrod;
-}
-
-.fa-color {
-  color: #405976;
-}
-
-.leaflet-container {
-  height: 400px;
-}
-
-.radioLabel {
-  text-align: center;
 }
 
 .chart {
@@ -156,6 +130,10 @@ input, textarea {
   margin-bottom: 10px;
 }
 
+.col-activity-logo{
+  padding-right: 0;
+}
+
 .custom-modal {
   background-color: #fff;
   border-radius: 5px;
@@ -183,9 +161,12 @@ input, textarea {
   margin-top: 30px;
 }
 
-.sport-img {
+.fa-trophy {
-  max-width: 35px;
+  color: goldenrod;
-  max-height: 35px;
+}
+
+.fa-color {
+  color: #405976;
 }
 
 .huge {
@@ -200,6 +181,47 @@ input, textarea {
   opacity: .4;
 }
 
+.leaflet-container {
+  height: 400px;
+}
+
+.loader {
+  animation: spin 2s linear infinite;
+  border: 16px solid #f3f3f3;
+  border-top: 16px solid #3498db;
+  border-radius: 50%;
+  height: 120px;
+  margin-left: 41%;
+  width: 120px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.map-attribution {
+  font-size: 11px;
+  position:relative;
+  top: -15px;
+}
+
+.map-attribution-text {
+  background-color: rgba(255, 255, 255, .5);
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.page-title {
+  font-size: 2em;
+  margin: 1em;
+  text-align: center;
+}
+
+.radioLabel {
+  text-align: center;
+}
+
 .record-logo {
   margin-right: 5px;
   max-width: 25px;
@@ -211,6 +233,11 @@ input, textarea {
   padding: 0.1em;
 }
 
+.sport-img {
+  max-width: 35px;
+  max-height: 35px;
+}
+
 .sport-img-medium {
   max-width: 45px;
   max-height: 45px;
@@ -247,22 +274,6 @@ input, textarea {
   padding: 0.1em;
 }
 
-.loader {
-  animation: spin 2s linear infinite;
-  border: 16px solid #f3f3f3;
-  border-top: 16px solid #3498db;
-  border-radius: 50%;
-  height: 120px;
-  margin-left: 41%;
-  width: 120px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-
 /* calendar */
 :root {
   --main-color: #1a8fff;

fittrackee_client/src/components/Dashboard/ActivityCard.jsx

@@ -29,6 +29,21 @@ export default function ActivityCard (props) {
                      `?${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 className="col">