add ui customization option

GeotrekCE · Jul 23, 2024 · 860cf7e · 860cf7e
1 parent cbcba7e
commit 860cf7e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -342,7 +342,8 @@
 }
 
 .point-reference-icon {
-  background-color: #ff0000;
+  color: var(--reference-point-color);
+  background-color: var(--reference-point-background-color);
   border: 1px solid #ffffff;
   border-radius: 50%;
   display: flex;
@@ -351,7 +352,6 @@
   width: 100%;
   height: 100%;
   font-size: 24px;
-  color: #ffffff;
 }
 
 .leaflet-popup {

diff --git a/src/components/grw-trek-detail/grw-trek-detail.scss b/src/components/grw-trek-detail/grw-trek-detail.scss
@@ -407,18 +407,18 @@ grw-trek-detail {
         }
       }
       li:before {
+        color: var(--reference-point-color);
+        background: var(--reference-point-background-color);
         position: absolute;
         display: flex;
         align-items: center;
         justify-content: center;
         content: counter(referencePoint);
         width: 24px;
         height: 24px;
-        background: #f04141;
         border-radius: 12px;
         font-weight: bold;
         font-size: 0.8em;
-        color: white;
         margin-left: -36px;
         top: calc(50% - 12px);
       }

diff --git a/src/components/grw-trek-detail/grw-trek-detail.tsx b/src/components/grw-trek-detail/grw-trek-detail.tsx
@@ -1213,19 +1213,20 @@ export class GrwTrekDetail {
                 </button>
               )}
               <div part="links-container" class="links-container">
-                <a href={`${this.currentTrek.gpx}`} target="_blank" rel="noopener noreferrer">
+                <a part="download-gpx-button" href={`${this.currentTrek.gpx}`} target="_blank" rel="noopener noreferrer">
                   <span part="icon" class=" icon" innerHTML={DownloadIcon}></span>
                   <span part="label" class="label">
                     GPX
                   </span>
                 </a>
-                <a href={`${this.currentTrek.kml}`} target="_blank" rel="noopener noreferrer">
+                <a part="download-kml-button" href={`${this.currentTrek.kml}`} target="_blank" rel="noopener noreferrer">
                   <span part="icon" class="icon" innerHTML={DownloadIcon}></span>
                   <span part="label" class="label">
                     KML
                   </span>
                 </a>
                 <a
+                  part="download-pdf-button"
                   href={`${this.currentTrek.pdf}${state.portalsFromProviders && state.portalsFromProviders.length === 1 ? '?portal=' + state.portalsFromProviders[0] : ''}`}
                   target="_blank"
                   rel="noopener noreferrer"

diff --git a/src/global/global.scss b/src/global/global.scss
@@ -107,4 +107,7 @@ $path: '/latest/dist/geotrek-rando-widget';
   --elevation-3: 0px 5px 5px -3px rgb(var(---color-shadow-rgb) / 0.2), 0px 8px 10px 1px rgb(var(--color-shadow-rgb) / 0.14), 0px 3px 14px 2px rgb(var(--color-shadow-rgb) / 0.12);
   --elevation-4: 0px 5px 5px -3px rgb(var(--color-shadow-rgb) / 0.2), 0px 8px 10px 1px rgb(var(--color-shadow-rgb) / 0.14), 0px 3px 14px 2px rgb(var(--color-shadow-rgb) / 0.12);
   --elevation-5: 0px 8px 10px -6px rgb(var(--color-shadow-rgb) / 0.2), 0px 16px 24px 2px rgb(var(--color-shadow-rgb) / 0.14), 0px 6px 30px 5px rgb(var(--color-shadow-rgb) / 0.12);
+
+  --reference-point-color: #ffffff;
+  --reference-point-background-color: #f04141;
 }