Merge pull request #113 from GeotrekCE/bpo_ajusting_style

Bpo ajusting style
GeotrekCE · Apr 11, 2024 · 04a371b · 04a371b
2 parents 5a1faa6 + 020b8e8
commit 04a371b
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 38 deletions.
diff --git a/src/components/grw-filters/grw-filters.scss b/src/components/grw-filters/grw-filters.scss
@@ -94,7 +94,6 @@
       user-select: none;
       font-size: 14px;
       font-weight: 500;
-      margin: 8px 0px 0px 8px;
       padding: 8px 16px;
       height: 32px;
       display: flex;

diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -148,7 +148,7 @@
   .touristic-content-marker-container,
   .touristic-event-marker-container,
   .outdoor-site-marker-container {
-    background-color: var(--color-surface);
+    background-color: var(--color-primary-app);
   }
   .step-marker-container {
     background-color: var(--color-surface-variant);
@@ -243,28 +243,28 @@
   .touristic-event-name,
   .outdoor-site-name {
     color: var(--color-primary-app);
-    font-weight: 400;
+    font-weight: 700;
     font-size: 16px;
     line-height: 24px;
-    padding: 8px;
+    padding: 12px;
   }
   .trek-button,
   .touristic-content-button,
   .touristic-event-button,
   .outdoor-site-button {
-    margin: 0px 8px 8px 8px;
+    margin: 0px 8px 16px 8px;
     user-select: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    border: none;
-    background-color: var(--color-primary-container);
+    border: 1px solid var(--color-on-primary-container);
+    background-color: var(--color-background);
     color: var(--color-on-primary-container);
     padding: 12px 24px;
-    border-radius: var(--border-radius, 20px);
+    border-radius: var(--border-radius, 8px);
     box-sizing: border-box;
     position: relative;
     gap: 8px;
@@ -273,9 +273,11 @@
     letter-spacing: 0.1000000015px;
     font-size: 14px;
     font-weight: 500;
-    box-shadow: var(--elevation-1);
     transition: box-shadow 0.2s ease-in-out 0s;
     font-family: var(--font-family);
+    &:hover {
+      background-color: var(--color-primary-container);
+    }
   }
 }
 
@@ -361,7 +363,7 @@
 
 .leaflet-popup {
   bottom: 40px !important;
-  left: -70px !important;
+  left: -110px !important;
 }
 
 .leaflet-popup-content-wrapper {
@@ -372,6 +374,6 @@
 }
 
 .leaflet-popup-content {
-  width: 144px;
+  width: 221px;
   margin: 0;
 }
diff --git a/src/components/grw-outdoor-sites-list/grw-outdoor-sites-list.scss b/src/components/grw-outdoor-sites-list/grw-outdoor-sites-list.scss
@@ -8,7 +8,7 @@ grw-outdoor-site-card {
   width: 100% !important;
   display: flex;
   justify-content: center;
-  margin: 0px 8px 8px 8px;
+  margin: 0px 8px 16px 8px;
 }
 
 .list-bottom-space {

diff --git a/src/components/grw-segmented-segment/grw-segmented-segment.tsx b/src/components/grw-segmented-segment/grw-segmented-segment.tsx
@@ -86,6 +86,11 @@ export class GrwSegmentedSegment {
               {translate[state.language].home.segment.treks}
             </label>
           )}
+          {this.outdoor && (
+            <label part="segment" class={`segment${state.mode === 'outdoor' ? ' selected-segment' : ''}`} onClick={() => this.changeMode('outdoor')}>
+              {translate[state.language].home.segment.outdoorSites}
+            </label>
+          )}
           {this.touristicContents && (
             <label part="segment" class={`segment${state.mode === 'touristicContents' ? ' selected-segment' : ''}`} onClick={() => this.changeMode('touristicContents')}>
               {translate[state.language].home.segment.touristicContents}
@@ -96,11 +101,6 @@ export class GrwSegmentedSegment {
               {translate[state.language].home.segment.touristicEvents}
             </label>
           )}
-          {this.outdoor && (
-            <label part="segment" class={`segment${state.mode === 'outdoor' ? ' selected-segment' : ''}`} onClick={() => this.changeMode('outdoor')}>
-              {translate[state.language].home.segment.outdoorSites}
-            </label>
-          )}
         </div>
       </Host>
     );

diff --git a/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss b/src/components/grw-touristic-contents-list/grw-touristic-contents-list.scss
@@ -8,7 +8,7 @@ grw-touristic-content-card {
   width: 100% !important;
   display: flex;
   justify-content: center;
-  margin: 0px 8px 8px 8px;
+  margin: 0px 8px 16px 8px;
 }
 
 .list-bottom-space {

diff --git a/src/components/grw-touristic-events-list/grw-touristic-events-list.scss b/src/components/grw-touristic-events-list/grw-touristic-events-list.scss
@@ -8,7 +8,7 @@ grw-touristic-event-card {
   width: 100% !important;
   display: flex;
   justify-content: center;
-  margin: 0px 8px 8px 8px;
+  margin: 0px 8px 16px 8px;
 }
 
 .list-bottom-space {

diff --git a/src/components/grw-treks-list/grw-treks-list.scss b/src/components/grw-treks-list/grw-treks-list.scss
@@ -8,7 +8,7 @@ grw-trek-card {
   width: 100% !important;
   display: flex;
   justify-content: center;
-  margin: 0px 8px 8px 8px;
+  margin: 0px 8px 16px 8px;
 }
 
 .list-bottom-space {

diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
@@ -160,14 +160,14 @@ export const translate: AvailableTranslations = {
         treks: 'Itinéraires',
         touristicContents: 'Services',
         touristicEvents: 'Événements',
-        outdoorSites: 'Activités',
+        outdoorSites: 'Outdoor',
       },
       touristicContents: 'Services',
       touristicContent: 'Service',
       touristicEvents: 'Événements',
       touristicEvent: 'Événement',
-      outdoorSites: 'Activités',
-      outdoorSite: 'Activité',
+      outdoorSites: 'Outdoor',
+      outdoorSite: 'Outdoor',
     },
     options: {
       presentation: 'Présentation',
@@ -190,18 +190,18 @@ export const translate: AvailableTranslations = {
       steps: 'Étapes',
       touristicContents: 'À proximité',
       touristicEvents: 'Événements',
-      sites: 'Activités',
+      sites: 'Sites',
       courses: 'Parcours',
     },
     themes: 'Thèmes',
     placeholderThemes: 'Sélectionner un ou plusieurs thèmes',
     placeholderPractices: 'Sélectionner une ou plusieurs pratiques',
     routes: 'Type de parcours',
     elevation: 'Denivelé positif',
-    activities: 'Activités',
+    activities: 'Autres',
     districts: 'Secteurs',
     erase: 'EFFACER',
-    ok: 'OK',
+    ok: 'VALIDER',
     location: 'Localisation',
     steps: 'étapes',
     usefulInformation: 'Informations pratiques',
@@ -222,9 +222,9 @@ export const translate: AvailableTranslations = {
     date: 'Date',
     startDate: 'Date de début',
     endDate: 'Date de fin',
-    outdoorSites: 'activités',
-    outdoorSite: 'activité',
-    relatedOutdoorSites: (relatedOutdoorSitesLength: number) => `Activités (${relatedOutdoorSitesLength})`,
+    outdoorSites: 'Sites',
+    outdoorSite: 'Site',
+    relatedOutdoorSites: (relatedOutdoorSitesLength: number) => `Sites (${relatedOutdoorSitesLength})`,
     relatedOutdoorCourses: (relatedOutdoorCoursesLength: number) => `Parcours (${relatedOutdoorCoursesLength})`,
     cardinalPoints: { n: 'Nord', ne: 'Nord-est', e: 'Est', se: 'Sud-est', s: 'Sud', sw: 'Sud-ouest', w: 'Ouest', nw: 'Nord-ouest' },
   },
@@ -272,14 +272,14 @@ export const translate: AvailableTranslations = {
         treks: 'Routes',
         touristicContents: 'Services',
         touristicEvents: 'Events',
-        outdoorSites: 'Activities',
+        outdoorSites: 'Outdoor',
       },
       touristicContents: 'Services',
       touristicContent: 'Service',
       touristicEvents: 'Events',
       touristicEvent: 'Event',
-      outdoorSites: 'Activities',
-      outdoorSite: 'Activity',
+      outdoorSites: 'Outdoor',
+      outdoorSite: 'Outdoor',
     },
     options: {
       presentation: 'Presentation',
@@ -302,18 +302,18 @@ export const translate: AvailableTranslations = {
       steps: 'Steps',
       touristicContents: 'Near',
       touristicEvents: 'Events',
-      sites: 'Activities',
+      sites: 'sites',
       courses: 'Courses',
     },
     themes: 'Themes',
     placeholderThemes: 'Select one or more themes',
     placeholderPractices: 'Select one or more practices',
     routes: 'Type of course',
     elevation: 'Positive elevation',
-    activities: 'Activities',
+    activities: 'Others',
     districts: 'Districts',
     erase: 'ERASE',
-    ok: 'OK',
+    ok: 'VALIDATE',
     location: 'Location',
     usefulInformation: 'Useful information',
     steps: 'steps',
@@ -334,9 +334,9 @@ export const translate: AvailableTranslations = {
     date: 'Date',
     startDate: 'Start date',
     endDate: 'End date',
-    outdoorSites: 'activities',
-    outdoorSite: 'activity',
-    relatedOutdoorSites: (relatedOutdoorSitesLength: number) => `Activities (${relatedOutdoorSitesLength})`,
+    outdoorSites: 'Sites',
+    outdoorSite: 'Site',
+    relatedOutdoorSites: (relatedOutdoorSitesLength: number) => `Sites (${relatedOutdoorSitesLength})`,
     relatedOutdoorCourses: (relatedOutdoorCoursesLength: number) => `Courses (${relatedOutdoorCoursesLength})`,
     cardinalPoints: { n: 'North', ne: 'North-east', e: 'East', se: 'South-east', s: 'South', sw: 'South-west', w: 'West', nw: 'North-west' },
   },