Merge pull request #664 from GeotrekCE/develop

Develop > Main / Prepa 3.8.4
GeotrekCE · May 31, 2022 · 847e9ee · 847e9ee
2 parents 0f7fd95 + 8830e77
commit 847e9ee
Show file tree

Hide file tree

Showing 17 changed files with 172 additions and 181 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -1,5 +1,20 @@
 # Changelog
 
+3.8.4 (2022-05-31)
+------------------
+
+**🚀 New features**
+
+* Allow to override ``manifest.json`` properties (#661)
+
+**🐛 Fixes**
+
+* Fix card display for iOS mobile (#645)
+* Fix truncated icon name if it is too long (#658)
+* Display Sensitive Areas when their geometry is MultiPolygon (#655)
+* Fix trek detail page if there are no signages endpoint in API (#660)
+* Fix trek and outdoor site detail page if there are no weblinks (#660)
+
 3.8.3 (2022-05-24)
 ------------------
 

diff --git a/docs/customization.md b/docs/customization.md
@@ -170,6 +170,11 @@ See examples in https://github.com/GeotrekCE/Geotrek-rando-v3/tree/main/frontend
 
 Icons are provided by Geotrek-admin API. See [icons documentation](icons.md) to know how they have to be designed.
 
+## Manifest.json
+
+There is a default `manifest.json` generated using the `applicationName` parameters of `global.json` and icons/images detailed in the next section below (See: https://github.com/GeotrekCE/Geotrek-rando-v3/blob/main/frontend/src/pages/manifest.json.tsx#L20).
+You can complete it by creating `manifest.json` file in the `customization/config/` folder and filling it with the props to add and/or override.
+
 ## Images, favicon, mobile phone icons and splashscreens
 
 These files need to be in the correct folder during the build process and therefore, we created a specific `medias` folder in the customization repository.

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -78,5 +78,6 @@ module.exports = withPlugins(plugins, {
     map: getConfig('map.json', true),
     filter: getConfig('filter.json', true),
     footer: getConfig('footer.json', true),
+    manifest: getConfig('manifest.json', true),
   },
 });
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "geotrek-rando-frontend",
-  "version": "3.8.3",
+  "version": "3.8.4",
   "private": true,
   "scripts": {
     "debug": "NODE_OPTIONS='--inspect' next ./src",

diff --git a/frontend/src/components/CardIcon/CardIcon.tsx b/frontend/src/components/CardIcon/CardIcon.tsx
@@ -3,84 +3,56 @@ import SVG from 'react-inlinesvg';
 import styled from 'styled-components';
 
 interface IconProps {
-  iconUri: string;
+  className?: string;
+  iconUri?: string;
   color?: string;
 }
 interface Props extends IconProps {
-  iconName: string;
+  iconName?: string;
 }
 
 const Wrapper = styled.div<{ color?: string }>`
   z-index: 100;
   background: ${props => props.color};
-
-  & > div {
-    max-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    transition: max-width 0.6s;
-  }
+  max-width: 32px;
+  transition: max-width 0.6s;
 
   &:hover {
-    & > div {
-      max-width: 150px;
-    }
-  }
-`;
-
-const Label = styled.div`
-  text-align: center;
-  flex: auto;
-
-  & > div {
-    padding: 0 10px;
+    max-width: 300%;
   }
 `;
 
-const StyledSVG = styled(SVG)`
-  height: 28px;
-  width: 28px;
-`;
-
-const Img = styled.img`
-  height: 28px;
-  width: 28px;
-`;
-
 const NoImg = styled.span<{ color?: string }>`
-  display: block;
-  height: 28px;
-  width: 28px;
-  border-radius: 50%;
   background: ${props => props.color};
 `;
 
-const Icon: React.FC<IconProps> = ({ iconUri, color }) => {
+const Icon: React.FC<IconProps> = ({ iconUri = '', className = '', color }) => {
   if (!iconUri) {
-    return <NoImg color={color} />;
+    return <NoImg color={color} className={`block rounded-full ${className}`} />;
   }
   if (RegExp(/(.*).svg/).test(iconUri)) {
     return (
-      <StyledSVG
+      <SVG
         src={iconUri}
-        className="fill-current p-1"
+        className={`fill-current p-1 ${className}`}
         preProcessor={fillSvgWithColor(colorPalette.white)}
       />
     );
   }
-  return <Img src={iconUri} alt="" />;
+  return <img className={className} src={iconUri} alt="" />;
 };
 
-export const CardIcon: React.FC<Props> = ({ iconUri, iconName, color }) => {
+export const CardIcon: React.FC<Props> = ({ iconUri = '', iconName = '', color }) => {
+  if (!iconName && !iconUri) {
+    return null;
+  }
   return (
     <Wrapper
-      className="absolute top-4 left-4 h-8 flex items-center w-auto rounded-full shadow-sm text-white border-2 border-white border-solid"
+      className="absolute top-4 left-4 h-8 flex items-center rounded-full shadow-sm text-white border-2 border-white border-solid overflow-hidden"
       color={color}
     >
-      <Icon color={color} iconUri={iconUri} />
-      <Label>
-        <div>{iconName}</div>
-      </Label>
+      <Icon color={color} iconUri={iconUri} className="w-7 h-7 flex-shrink-0" />
+      {iconName && <div className="pr-3 whitespace-nowrap">{iconName}</div>}
     </Wrapper>
   );
 };
diff --git a/frontend/src/components/Map/DetailsMap/SensitiveAreas.tsx b/frontend/src/components/Map/DetailsMap/SensitiveAreas.tsx
@@ -1,28 +1,43 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Polygon } from 'react-leaflet';
-import 'leaflet/dist/leaflet.css';
 import { SensitiveAreaGeometry } from 'modules/sensitiveArea/interface';
+import { RawCoordinate2D } from 'modules/interface';
 
 export type PropsType = {
   contents?: SensitiveAreaGeometry[];
 };
 
 export const SensitiveAreas: React.FC<PropsType> = ({ contents }) => {
+  if (contents === undefined) {
+    return null;
+  }
+
+  const polygons = useMemo(() => {
+    return contents
+      .map(({ color, geometry }) => {
+        if (geometry.type === 'MultiPolygon') {
+          return geometry.coordinates.flatMap(polygon =>
+            polygon.map(line => ({
+              positions: line.map<RawCoordinate2D>(point => [point.y, point.x]),
+              color,
+            })),
+          );
+        }
+        return {
+          positions: geometry.coordinates.map(line =>
+            line.map<RawCoordinate2D>(point => [point.y, point.x]),
+          ),
+          color,
+        };
+      })
+      .flat();
+  }, contents);
+
   return (
     <>
-      {contents !== undefined &&
-        contents.map(({ color, geometry }, i) => {
-          return (
-            <Polygon
-              key={`sensitiveArea${i}`}
-              color={color}
-              weight={3}
-              positions={geometry.coordinates.map(line =>
-                line.map<[number, number]>(point => [point.y, point.x]),
-              )}
-            />
-          );
-        })}
+      {polygons.map(({ positions, color }, i) => {
+        return <Polygon color={color} key={`sensitiveArea${i}`} positions={positions} weight={3} />;
+      })}
     </>
   );
 };
diff --git a/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx b/frontend/src/components/pages/details/components/DetailsCard/DetailsCard.tsx
@@ -70,7 +70,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
         setHoveredCardId(null);
       }}
     >
-      {logoUri && (
+      {Boolean(logoUri) && (
         <img
           className="hidden desktop:absolute h-12 object-cover object-center right-6 top-6"
           src={logoUri}
@@ -97,13 +97,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
             </>
           )}
         </Modal>
-        {iconUri && (
-          <CardIcon
-            iconUri={iconUri}
-            iconName={iconName as string}
-            color={getActivityColor(type)}
-          />
-        )}
+        <CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
       </div>
       <div
         ref={detailsCardRef}
@@ -118,7 +112,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
         <OptionalLink redirectionUrl={redirectionUrl}>
           <p className="text-Mobile-C1 desktop:text-H4 text-primary1 font-bold">{name}</p>
         </OptionalLink>
-        {description && (
+        {Boolean(description) && (
           <div
             className="mt-1 desktop:mt-4
             flex flex-col desktop:flex-row desktop:items-end

diff --git a/frontend/src/components/pages/details/components/DetailsCard/__tests__/DetailsCard.test.tsx b/frontend/src/components/pages/details/components/DetailsCard/__tests__/DetailsCard.test.tsx
@@ -14,6 +14,7 @@ describe('DetailsCard', () => {
       ],
       thumbnailUris: ['https://cdn.pixabay.com/photo/2017/06/29/18/40/background-2455710_1280.jpg'],
       iconUri: 'https://geotrekdemo.ecrins-parcnational.fr/media/upload/practice-foot_GpBv9u1.svg',
+      iconName: 'Randonnée pédestre',
       description:
         "<span>Pour esp&eacute;rer apercevoir cet oiseau, partir la nuit au printemps, parcourir un grand d&eacute;nivel&eacute; afin d'arriver sur son terrain de pr&eacute;dilection &agrave; plus de 2000 m voire 3000 m d'altitude avant le lever du jour et l&agrave;, entendre le chant guttural&nbsp;caract&eacute;ristique qui trahit sa pr&eacute;sence. Mais pour le voir, il faudra bien ouvrir les yeux ou se munir d'une paire de jumelles. Et alors l&agrave;, quel bonheur&nbsp;! Le lagop&egrave;de alpin est l'esp&egrave;ce arctique par excellence, menac&eacute;e entre autre par le r&eacute;chauffement climatique. Il fait partie des esp&egrave;ces &agrave; prot&eacute;ger dans le c&oelig;ur du Parc national des Ecrins.</span>",
     };

diff --git a/...ts/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap b/...ts/pages/details/components/DetailsCard/__tests__/__snapshots__/DetailsCard.test.tsx.snap
@@ -62,13 +62,13 @@ Object {
             </div>
           </div>
           <div
-            class="CardIcon__Wrapper-sc-cv6h96-0 iuMpeF absolute top-4 left-4 h-8 flex items-center w-auto rounded-full shadow-sm text-white border-2 border-white border-solid"
+            class="CardIcon__Wrapper-sc-cv6h96-0 bXmPlv absolute top-4 left-4 h-8 flex items-center rounded-full shadow-sm text-white border-2 border-white border-solid overflow-hidden"
             color="#AA397D"
           >
             <div
-              class="CardIcon__Label-sc-cv6h96-1 ddMeYP"
+              class="pr-3 whitespace-nowrap"
             >
-              <div />
+              Randonnée pédestre
             </div>
           </div>
         </div>
@@ -159,13 +159,13 @@ Object {
           </div>
         </div>
         <div
-          class="CardIcon__Wrapper-sc-cv6h96-0 iuMpeF absolute top-4 left-4 h-8 flex items-center w-auto rounded-full shadow-sm text-white border-2 border-white border-solid"
+          class="CardIcon__Wrapper-sc-cv6h96-0 bXmPlv absolute top-4 left-4 h-8 flex items-center rounded-full shadow-sm text-white border-2 border-white border-solid overflow-hidden"
           color="#AA397D"
         >
           <div
-            class="CardIcon__Label-sc-cv6h96-1 ddMeYP"
+            class="pr-3 whitespace-nowrap"
           >
-            <div />
+            Randonnée pédestre
           </div>
         </div>
       </div>

diff --git a/frontend/src/components/pages/search/components/ResultCard/ResultCard.tsx b/frontend/src/components/pages/search/components/ResultCard/ResultCard.tsx
@@ -141,14 +141,7 @@ export const ResultCard: React.FC<
       }}
       className={className}
       id="result_card"
-      style={
-        asColumn
-          ? {
-              flex: 'auto',
-              flexDirection: 'column',
-            }
-          : { flex: 'auto' }
-      }
+      asColumn={asColumn}
     >
       <Modal>
         {({ isFullscreen, toggleFullscreen }) => (
@@ -170,7 +163,7 @@ export const ResultCard: React.FC<
         )}
       </Modal>
 
-      <Link href={redirectionUrl} testId={`Link-ResultCard-${id}`} className="w-full">
+      <Link href={redirectionUrl} testId={`Link-ResultCard-${id}`} className="w-full min-h-0">
         <DetailsContainer>
           <DetailsLayout>
             {place !== null && <Place>{place}</Place>}
@@ -295,9 +288,9 @@ export const ResultCard: React.FC<
   );
 };
 
-const Container = styled.div`
+const Container = styled.div<{ asColumn?: boolean }>`
   display: flex;
-  flex: none;
+  flex: auto;
   flex-direction: column;
   cursor: pointer;
   border: 1px solid ${colorPalette.greySoft.DEFAULT};
@@ -313,11 +306,13 @@ const Container = styled.div`
 
   align-items: stretch;
 
-  ${desktopOnly(
-    css`
-      flex-direction: row;
-    `,
-  )}
+  ${({ asColumn }) =>
+    asColumn !== true &&
+    desktopOnly(
+      css`
+        flex-direction: row;
+      `,
+    )}
 `;
 
 const DetailsContainer = styled.div`

diff --git a/...c/components/pages/search/components/ResultCard/ResultCardCarousel/ResultCardCarousel.tsx b/...c/components/pages/search/components/ResultCard/ResultCardCarousel/ResultCardCarousel.tsx
@@ -1,6 +1,6 @@
 import { CardIcon } from 'components/CardIcon';
 import { SmallCarousel } from 'components/Carousel';
-import getConfig from 'next/config';
+import styled, { css } from 'styled-components';
 import getActivityColor from '../getActivityColor';
 
 interface ResultCardCarouselProps {
@@ -20,32 +20,30 @@ export const ResultCardCarousel: React.FC<ResultCardCarouselProps> = ({
   onClickImage,
   asColumn,
 }) => {
-  const {
-    publicRuntimeConfig: { colors },
-  } = getConfig();
-
   const files = navigator && navigator?.onLine ? thumbnailUris : thumbnailUris.slice(0, 1);
 
   return (
-    <div
+    <Wrapper
       className={`h-full w-full flex-shrink-0 relative desktop:w-resultCardDesktop`}
-      style={asColumn ? { width: '100%' } : {}}
+      asColumn={asColumn}
     >
       <SmallCarousel>
         {files.map((thumbnailUri, i) => (
           <div key={i} className="relative h-full" onClick={onClickImage}>
-            <img
-              src={thumbnailUri}
-              className="object-cover object-top
-              w-full
-              h-full"
-            />
+            <img src={thumbnailUri} className="object-cover object-top w-full h-full" alt="" />
           </div>
         ))}
       </SmallCarousel>
-      {iconUri !== undefined && (
-        <CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
-      )}
-    </div>
+      <CardIcon iconUri={iconUri} iconName={iconName} color={getActivityColor(type)} />
+    </Wrapper>
   );
 };
+
+const Wrapper = styled.div<{ asColumn?: boolean }>`
+    ${({ asColumn }) =>
+      asColumn === true &&
+      css`
+        width: 100%;
+      `}
+  }
+`;