fix: improve ui

GeotrekCE · Sep 24, 2024 · b3c5b2d · b3c5b2d
1 parent ec4e254
commit b3c5b2d
Show file tree

Hide file tree

Showing 11 changed files with 127 additions and 34 deletions.
diff --git a/src/components/grw-details-modal/grw-details-modal.scss b/src/components/grw-details-modal/grw-details-modal.scss
@@ -7,7 +7,6 @@
   left: 0px;
   width: 100vw;
   height: 100vh;
-  background-color: #ffffff;
   z-index: 40000;
   font-family: var(--font-family);
   background-color: rgba(0, 0, 0, 0.6);
@@ -19,32 +18,40 @@
     background-color: var(--color-background);
   }
   .grw-content-modal {
-    overflow-y: scroll;
+    overflow-y: hidden;
+    padding-bottom: 24px;
   }
   .grw-arrow-back-container {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
-    margin: 16px 16px;
+    justify-content: flex-start;
+    background-color: var(--color-primary-container);
     .grw-arrow-back-icon {
       cursor: pointer;
       -webkit-tap-highlight-color: transparent;
       color: var(--color-on-surface);
       border: none;
-      background-color: var(--color-primary-container);
       border-radius: var(--border-radius, 50%);
       height: 48px;
       width: 48px;
+      background-color: transparent;
+      margin-left: 4px;
       padding: 0px;
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .icon {
+        height: 24px;
+        width: 24px;
+      }
     }
   }
 }
 
 @media (min-width: 1024px) {
   .modal-container {
     .grw-details-modal {
-      width: 80%;
+      width: 60%;
       height: 80%;
       border-radius: var(--border-radius, 8px);
     }

diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
@@ -407,3 +407,11 @@
   border: 2px solid rgba(0, 0, 0, 0.2) !important;
   box-shadow: none;
 }
+
+.leaflet-interactive {
+  cursor: grab;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
diff --git a/src/components/grw-map/grw-map.tsx b/src/components/grw-map/grw-map.tsx
@@ -2521,7 +2521,7 @@ export class GrwMap {
               html: toutisticContentsIcons[geoJsonPoint.properties.category_pictogram]
                 ? `<div part="touristic-content-marker" class="touristic-content-marker"><img src=${toutisticContentsIcons[geoJsonPoint.properties.category_pictogram]} /></div>`
                 : `<div part="touristic-content-marker" class="touristic-content-marker"><img /></div>`,
-              className: '',
+              className: this.grwApp ? '' : 'cursor-pointer',
               iconSize: this.commonMarkerSize,
             } as any),
             autoPanOnFocus: false,
@@ -2579,7 +2579,7 @@ export class GrwMap {
                 ? `
                 <div part="touristic-event-marker" class="touristic-event-marker"><img src=${toutisticEventsIcons[geoJsonPoint.properties.type_pictogram]} /></div>`
                 : `<div part="touristic-event-marker" class="touristic-event-marker"><img /></div>`,
-              className: '',
+              className: this.grwApp ? '' : 'cursor-pointer',
               iconSize: this.commonMarkerSize,
             } as any),
             autoPanOnFocus: false,

diff --git a/src/components/grw-poi-detail/grw-poi.tsx b/src/components/grw-poi-detail/grw-poi.tsx
@@ -100,6 +100,7 @@ export class GrwPoiDetail {
 
   render() {
     const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
+    const displayPaginationAndNavigation = (this.poi && this.poi.attachments.filter(attachment => attachment.type === 'image').length > 1) || this.offline;
     return (
       <Host>
         <div part="poi-type-img-container" class="poi-type-img-container">
@@ -133,9 +134,24 @@ export class GrwPoiDetail {
                 </div>
               )}
             </div>
-            <div style={{ display: this.offline ? 'none' : 'block' }} part="swiper-pagination" class="swiper-pagination" ref={el => (this.paginationElPoiRef = el)}></div>
-            <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-prev" class="swiper-button-prev" ref={el => (this.prevElPoiRef = el)}></div>
-            <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-next" class="swiper-button-next" ref={el => (this.nextElPoiRef = el)}></div>
+            <div
+              style={{ display: 'block', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+              part="swiper-pagination"
+              class="swiper-pagination"
+              ref={el => (this.paginationElPoiRef = el)}
+            ></div>
+            <div
+              style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+              part="swiper-button-prev"
+              class="swiper-button-prev"
+              ref={el => (this.prevElPoiRef = el)}
+            ></div>
+            <div
+              style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+              part="swiper-button-next"
+              class="swiper-button-next"
+              ref={el => (this.nextElPoiRef = el)}
+            ></div>
           </div>
         </div>
         <div part="poi-sub-container" class="poi-sub-container">

diff --git a/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx b/src/components/grw-touristic-content-card/grw-touristic-content-card.tsx
@@ -115,6 +115,8 @@ export class GrwTouristicContentCard {
   render() {
     const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
     const touristicContentCategory = state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === this.touristicContent.category);
+    const displayPaginationAndNavigation =
+      (this.touristicContent && this.touristicContent.attachments.filter(attachment => attachment.type === 'image').length > 1) || this.offline;
     return (
       <Host
         style={{
@@ -171,19 +173,19 @@ export class GrwTouristicContentCard {
                   )}
                 </div>
                 <div
-                  style={{ display: this.offline ? 'none' : 'block' }}
+                  style={{ display: 'block', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
                   part="swiper-pagination"
                   class="swiper-pagination"
                   ref={el => (this.paginationElTouristicContentRef = el)}
                 ></div>
                 <div
-                  style={{ display: this.offline ? 'none' : 'flex' }}
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
                   part="swiper-button-prev"
                   class="swiper-button-prev"
                   ref={el => (this.prevElTouristicContentRef = el)}
                 ></div>
                 <div
-                  style={{ display: this.offline ? 'none' : 'flex' }}
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
                   part="swiper-button-next"
                   class="swiper-button-next"
                   ref={el => (this.nextElTouristicContentRef = el)}

diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss
@@ -37,6 +37,7 @@ grw-touristic-content-detail {
   height: 100%;
   max-height: 100%;
   overflow-y: auto;
+  padding-bottom: 24px;
   .touristic-content-category-container {
     display: flex;
     align-items: center;

diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx
@@ -82,6 +82,7 @@ export class GrwTouristicContentDetail {
       state.currentTouristicContent &&
       state.touristicContentCategories.find(touristicContentCategory => touristicContentCategory.id === state.currentTouristicContent.category);
     const cities = state.currentTouristicContent && state.currentTouristicContent.cities.map(currentCity => state.cities.find(city => city.id === currentCity)?.name);
+    const displayPaginationAndNavigation = state.currentTouristicContent.attachments.filter(attachment => attachment.type === 'image').length > 1 || this.offline;
     return (
       <Host
         style={{
@@ -139,9 +140,24 @@ export class GrwTouristicContentDetail {
                     </div>
                   )}
                 </div>
-                <div style={{ display: this.offline ? 'none' : 'block' }} part="swiper-pagination" class="swiper-pagination" ref={el => (this.paginationElImagesRef = el)}></div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-prev" class="swiper-button-prev" ref={el => (this.prevElImagesRef = el)}></div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-next" class="swiper-button-next" ref={el => (this.nextElImagesRef = el)}></div>
+                <div
+                  style={{ display: 'block', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-pagination"
+                  class="swiper-pagination"
+                  ref={el => (this.paginationElImagesRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-prev"
+                  class="swiper-button-prev"
+                  ref={el => (this.prevElImagesRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-next"
+                  class="swiper-button-next"
+                  ref={el => (this.nextElImagesRef = el)}
+                ></div>
               </div>
             </div>
             <div part="touristic-content-category-container" class="touristic-content-category-container">

diff --git a/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx b/src/components/grw-touristic-event-card/grw-touristic-event-card.tsx
@@ -115,6 +115,7 @@ export class GrwTouristicEvent {
   render() {
     const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
     const touristicEventType = state.touristicEventTypes.find(touristicEventType => touristicEventType.id === this.touristicEvent.type);
+    const displayPaginationAndNavigation = (this.touristicEvent && this.touristicEvent.attachments.filter(attachment => attachment.type === 'image').length > 1) || this.offline;
     return (
       <Host
         style={{
@@ -171,13 +172,23 @@ export class GrwTouristicEvent {
                   )}
                 </div>
                 <div
-                  style={{ display: this.offline ? 'none' : 'block' }}
+                  style={{ display: 'block', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
                   part="swiper-pagination"
                   class="swiper-pagination"
                   ref={el => (this.paginationElTouristicEventRef = el)}
                 ></div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-prev" class="swiper-button-prev" ref={el => (this.prevElTouristicEventRef = el)}></div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-next" class="swiper-button-next" ref={el => (this.nextElTouristicEventRef = el)}></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-prev"
+                  class="swiper-button-prev"
+                  ref={el => (this.prevElTouristicEventRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-next"
+                  class="swiper-button-next"
+                  ref={el => (this.nextElTouristicEventRef = el)}
+                ></div>
               </div>
             ) : this.touristicEvent.attachments.filter(attachment => attachment.type === 'image').length > 0 ? (
               <img

diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss
@@ -37,15 +37,17 @@ grw-touristic-event-detail {
   height: 100%;
   max-height: 100%;
   overflow-y: auto;
+  padding-bottom: 24px;
   .touristic-event-category-container {
     display: flex;
     align-items: center;
     padding: 0px 24px;
     margin: 8px 0px;
     .touristic-event-category-name {
       display: -webkit-box;
-      -webkit-box-orient: vertical;
+      line-clamp: 1;
       -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
       overflow: hidden;
     }
     img {

diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx
@@ -69,9 +69,9 @@ export class GrwTouristicEventDetail {
     if (!close) {
       if (state.currentTouristicEvent.attachments && state.currentTouristicEvent.attachments[0] && state.currentTouristicEvent.attachments[0].url) {
         this.swiperImagesRef.requestFullscreen();
-      } else {
-        (document as any).exitFullscreen();
       }
+    } else {
+      (document as any).exitFullscreen();
     }
   }
 
@@ -83,6 +83,9 @@ export class GrwTouristicEventDetail {
       state.currentTouristicEvent &&
       state.touristicEventTypes.find(touristicEventCategory => touristicEventCategory.id === state.currentTouristicEvent.type);
     const cities = state.currentTouristicEvent && state.currentTouristicEvent.cities.map(currentCity => state.cities.find(city => city.id === currentCity)?.name);
+    const displayPaginationAndNavigation =
+      (state.currentTouristicEvent && state.currentTouristicEvent.attachments.filter(attachment => attachment.type === 'image').length > 1) || this.offline;
+
     return (
       <Host
         style={{
@@ -140,16 +143,30 @@ export class GrwTouristicEventDetail {
                         part="default-poi-img"
                         class="default-poi-img"
                         /* @ts-ignore */
-
                         src={defaultImageSrc}
                         loading="lazy"
                       />
                     </div>
                   )}
                 </div>
-                <div style={{ display: this.offline ? 'none' : 'block' }} part="swiper-pagination" class="swiper-pagination" ref={el => (this.paginationElImagesRef = el)}></div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-prev" class="swiper-button-prev" ref={el => (this.prevElImagesRef = el)}></div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }} part="swiper-button-next" class="swiper-button-next" ref={el => (this.nextElImagesRef = el)}></div>
+                <div
+                  style={{ display: 'block', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-pagination"
+                  class="swiper-pagination"
+                  ref={el => (this.paginationElImagesRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-prev"
+                  class="swiper-button-prev"
+                  ref={el => (this.prevElImagesRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-next"
+                  class="swiper-button-next"
+                  ref={el => (this.nextElImagesRef = el)}
+                ></div>
               </div>
             </div>
             <div part="touristic-event-category-container" class="touristic-event-category-container">

diff --git a/src/components/grw-trek-detail/grw-trek-detail.tsx b/src/components/grw-trek-detail/grw-trek-detail.tsx
@@ -965,7 +965,7 @@ export class GrwTrekDetail {
 
   render() {
     const defaultImageSrc = getAssetPath(`${Build.isDev ? '/' : ''}assets/default-image.svg`);
-
+    const displayPaginationAndNavigation = (this.currentTrek && this.currentTrek.attachments.filter(attachment => attachment.type === 'image').length > 1) || this.offline;
     return (
       <Host
         style={{
@@ -1140,11 +1140,24 @@ export class GrwTrekDetail {
                     <img part="trek-img" class="trek-img default-trek-img" src={defaultImageSrc} loading="lazy" alt="" />
                   )}
                 </div>
-                <div style={{ display: this.offline ? 'none' : 'flex' }}>
-                  <div part="swiper-pagination" class="swiper-pagination" ref={el => (this.paginationElImagesRef = el)}></div>
-                  <div part="swiper-button-prev" class="swiper-button-prev" ref={el => (this.prevElImagesRef = el)}></div>
-                  <div part="swiper-button-next" class="swiper-button-next" ref={el => (this.nextElImagesRef = el)}></div>
-                </div>
+                <div
+                  style={{ display: 'block', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-pagination"
+                  class="swiper-pagination"
+                  ref={el => (this.paginationElImagesRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-prev"
+                  class="swiper-button-prev"
+                  ref={el => (this.prevElImagesRef = el)}
+                ></div>
+                <div
+                  style={{ display: 'flex', visibility: displayPaginationAndNavigation ? 'visible' : 'hidden' }}
+                  part="swiper-button-next"
+                  class="swiper-button-next"
+                  ref={el => (this.nextElImagesRef = el)}
+                ></div>
               </div>
             </div>
             <div part="trek-name" class="trek-name">