@@ -218,16 +217,8 @@ const Report: React.FC = ({ displayMobileMap, startPoint, trekId }) => {
)}
)}
-
+ >
);
};
-const ReportWrapper = styled.div`
- position: relative;
- z-index: 0;
- > .loader {
- min-height: 80px;
- }
-`;
-
export default Report;
diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx
index 25daf4c3c..51896f028 100644
--- a/frontend/src/components/pages/details/Details.tsx
+++ b/frontend/src/components/pages/details/Details.tsx
@@ -1,7 +1,7 @@
import MoreLink from 'components/Information/MoreLink';
import { Layout } from 'components/Layout/Layout';
import { Modal } from 'components/Modal';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import parse from 'html-react-parser';
import { FormattedMessage } from 'react-intl';
@@ -11,7 +11,7 @@ import { OpenMapButton } from 'components/OpenMapButton';
import { MobileMapContainer } from 'components/pages/search';
import { useShowOnScrollPosition } from 'hooks/useShowOnScrollPosition';
import { useMediaPredicate } from 'react-media-hook';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
+import { sizes } from 'stylesheet';
import React, { useMemo, useRef } from 'react';
import { TrekChildGeometry } from 'modules/details/interface';
import { cleanHTMLElementsFromString } from 'modules/utils/string';
@@ -118,18 +118,13 @@ export const DetailsUIWithoutContext: React.FC = ({ detailsId, parentId,
}
/>
{details === undefined ? (
- isLoading ? (
-
- ) : (
-
- )
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
) : (
<>
diff --git a/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx b/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx
index ff7689c07..9ce2c7806 100644
--- a/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx
+++ b/frontend/src/components/pages/details/components/DetailsReservationWidget/DetailsReservationWidget.tsx
@@ -1,5 +1,6 @@
import { Reservation } from 'modules/details/interface';
import { useCallback, useEffect } from 'react';
+import Loader from 'components/Loader';
import Script from 'next/script';
import Head from 'next/head';
import { useRouter } from 'next/router';
@@ -91,7 +92,9 @@ export const DetailsReservationWidget: React.FC =
strategy="lazyOnload"
/>
>
);
diff --git a/frontend/src/components/pages/flatPage/FlatPage.tsx b/frontend/src/components/pages/flatPage/FlatPage.tsx
index 47a40aa4c..a8c55f9de 100644
--- a/frontend/src/components/pages/flatPage/FlatPage.tsx
+++ b/frontend/src/components/pages/flatPage/FlatPage.tsx
@@ -1,5 +1,5 @@
import { Layout } from 'components/Layout/Layout';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import { colorPalette, sizes, zIndex } from 'stylesheet';
import parse from 'html-react-parser';
import { Footer } from 'components/Footer';
@@ -34,14 +34,7 @@ export const FlatPageUI: React.FC = ({ flatPageUrl }) => {
/>
{flatPage === undefined ? (
isLoading === true ? (
-
+
) : (
)
diff --git a/frontend/src/components/pages/search/Search.tsx b/frontend/src/components/pages/search/Search.tsx
index 09a3a7113..3160019da 100644
--- a/frontend/src/components/pages/search/Search.tsx
+++ b/frontend/src/components/pages/search/Search.tsx
@@ -4,9 +4,9 @@ import { useEffect } from 'react';
import { useMediaPredicate } from 'react-media-hook';
import styled from 'styled-components';
import { FormattedMessage, useIntl } from 'react-intl';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import InfiniteScroll from 'react-infinite-scroll-component';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
+import { colorPalette, sizes } from 'stylesheet';
import { Layout } from 'components/Layout/Layout';
import { TouristicContentCategoryMapping } from 'modules/touristicContentCategory/interface';
@@ -112,14 +112,20 @@ export const SearchUI: React.FC = ({ language }) => {
id,
selectedOptions: [
...list[index].selectedOptions,
- ...item.selectedOptions.map(option => ({ ...option, include: false })),
+ ...item.selectedOptions.map(option => ({
+ ...option,
+ include: false,
+ })),
],
};
}
} else {
list.push({
...item,
- selectedOptions: item.selectedOptions.map(option => ({ ...option, include: true })),
+ selectedOptions: item.selectedOptions.map(option => ({
+ ...option,
+ include: true,
+ })),
});
}
return list;
@@ -128,7 +134,7 @@ export const SearchUI: React.FC = ({ language }) => {
const numberSelected = countFiltersSelected(filtersState, null, null);
return (
-
+
= ({ language }) => {
className="flex flex-col w-full desktop:w-1/2 overflow-y-scroll"
>
-
+
@@ -213,14 +211,8 @@ export const SearchUI: React.FC
= ({ language }) => {
next={fetchNextPage}
hasMore={hasNextPage ?? false}
loader={
-
-
+
+
}
scrollableTarget="search_resultCardList"
@@ -332,20 +324,8 @@ export const SearchUI: React.FC
= ({ language }) => {
className="hidden desktop:flex desktop:z-content desktop:w-1/2 desktop:fixed desktop:right-0 desktop:bottom-0 desktop:top-headerAndFilterBar"
id="search_resultMap"
>
- {isMapLoading && (
-
- )}
-
+ {isMapLoading && }
+
{!isMobile && (
`
+export const MobileMapContainer = styled.div<{
+ displayState: 'DISPLAYED' | 'HIDDEN' | null;
+}>`
transition: top 0.3s ease-in-out 0.1s;
top: ${({ displayState }) => (displayState === 'DISPLAYED' ? 0 : 100)}%;
`;
diff --git a/frontend/src/components/pages/site/OutdoorCourseUI.tsx b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
index d63639ebc..5680d8bca 100644
--- a/frontend/src/components/pages/site/OutdoorCourseUI.tsx
+++ b/frontend/src/components/pages/site/OutdoorCourseUI.tsx
@@ -14,9 +14,9 @@ import { OutdoorSiteChildrenSection } from 'components/pages/site/components/Out
import { useOutdoorCourse } from 'components/pages/site/useOutdoorCourse';
import React, { useMemo, useRef } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import { useMediaPredicate } from 'react-media-hook';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
+import { sizes } from 'stylesheet';
import { DetailsMapDynamicComponent } from 'components/Map';
import { PageHead } from 'components/PageHead';
import { Footer } from 'components/Footer';
@@ -91,18 +91,13 @@ export const OutdoorCourseUIWithoutContext: React.FC = ({ outdoorCourseUr
}
/>
{outdoorCourseContent === undefined ? (
- isLoading ? (
-
- ) : (
-
- )
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
) : (
<>
diff --git a/frontend/src/components/pages/site/OutdoorSiteUI.tsx b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
index bf91f938f..1dec0d37b 100644
--- a/frontend/src/components/pages/site/OutdoorSiteUI.tsx
+++ b/frontend/src/components/pages/site/OutdoorSiteUI.tsx
@@ -19,9 +19,9 @@ import { OutdoorCoursesChildrenSection } from 'components/pages/site/components/
import { OutdoorSiteChildrenSection } from 'components/pages/site/components/OutdoorSiteChildrenSection';
import React, { useMemo, useRef } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import { useMediaPredicate } from 'react-media-hook';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
+import { sizes } from 'stylesheet';
import { DetailsMapDynamicComponent } from 'components/Map';
import { PageHead } from 'components/PageHead';
import { Footer } from 'components/Footer';
@@ -103,18 +103,13 @@ const OutdoorSiteUIWithoutContext: React.FC = ({ outdoorSiteUrl, language
}
/>
{outdoorSiteContent === undefined ? (
- isLoading ? (
-
- ) : (
-
- )
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
) : (
<>
diff --git a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
index 9e0e4dc13..71be9fe7e 100644
--- a/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
+++ b/frontend/src/components/pages/touristicContent/TouristicContentUI.tsx
@@ -1,8 +1,7 @@
import { Layout } from 'components/Layout/Layout';
import { Modal } from 'components/Modal';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import { useMediaPredicate } from 'react-media-hook';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
import parse from 'html-react-parser';
import { FormattedMessage } from 'react-intl';
import { TouristicContentMapDynamicComponent } from 'components/Map';
@@ -56,18 +55,13 @@ export const TouristicContentUI: React.FC = ({
}
/>
{touristicContent === undefined ? (
- isLoading ? (
-
- ) : (
-
- )
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
) : (
<>
diff --git a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
index d3aa7f551..c9e448160 100644
--- a/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
+++ b/frontend/src/components/pages/touristicEvent/TouristicEventUI.tsx
@@ -10,11 +10,11 @@ import { useOnScreenSection } from 'components/pages/details/hooks/useHighlighte
import { generateTouristicContentUrl } from 'components/pages/details/utils';
import { VisibleSectionProvider } from 'components/pages/details/VisibleSectionContext';
import { useTouristicEvent } from 'components/pages/touristicEvent/useTouristicEvent';
-import React, { useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
-import Loader from 'react-loader';
+import Loader from 'components/Loader';
import { useMediaPredicate } from 'react-media-hook';
-import { colorPalette, sizes, zIndex } from 'stylesheet';
+import { sizes } from 'stylesheet';
import { DetailsMapDynamicComponent } from 'components/Map';
import { PageHead } from 'components/PageHead';
import { Footer } from 'components/Footer';
@@ -87,18 +87,13 @@ export const TouristicEventUIWithoutContext: React.FC
= ({
}
/>
{touristicEventContent === undefined ? (
- isLoading ? (
-
- ) : (
-
- )
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+
) : (
<>
diff --git a/frontend/src/translations/ca.json b/frontend/src/translations/ca.json
index bf18fc0aa..b111cd7a1 100644
--- a/frontend/src/translations/ca.json
+++ b/frontend/src/translations/ca.json
@@ -19,6 +19,7 @@
"territoryTreks": "Excursions a descobrir",
"itinerantTreks": "Itineràncies a descobrir"
},
+ "loading": "Carregant",
"page": {
"back": "Tornada",
"not-found": "No s’ha trobat la pàgina",
diff --git a/frontend/src/translations/de.json b/frontend/src/translations/de.json
index 992269d7a..d99a26cf9 100644
--- a/frontend/src/translations/de.json
+++ b/frontend/src/translations/de.json
@@ -19,6 +19,7 @@
"territoryTreks": "Wanderungen, die es zu entdecken gilt",
"itinerantTreks": "Reiserouten zum Entdecken"
},
+ "loading": "Laden",
"page": {
"back": "Zurück",
"not-found": "Diese Seite ist unauffindbar",
diff --git a/frontend/src/translations/en.json b/frontend/src/translations/en.json
index 18e1a11bc..763aa1904 100644
--- a/frontend/src/translations/en.json
+++ b/frontend/src/translations/en.json
@@ -22,6 +22,7 @@
"events": "Events not to miss",
"outdoor": "Outdoor to discover"
},
+ "loading": "Loading",
"page": {
"back": "Back",
"not-found": "This page was not found"
diff --git a/frontend/src/translations/es.json b/frontend/src/translations/es.json
index bf7b8bfaa..93d6d90b8 100644
--- a/frontend/src/translations/es.json
+++ b/frontend/src/translations/es.json
@@ -19,6 +19,7 @@
"territoryTreks": "Excursiones para descubrir",
"itinerantTreks": "Itinerancias para descubrir"
},
+ "loading": "Cargando",
"page": {
"back": "Vuelta",
"not-found": "No hemos encontrado la página",
diff --git a/frontend/src/translations/fr.json b/frontend/src/translations/fr.json
index 8d2df8873..99ce9cb25 100644
--- a/frontend/src/translations/fr.json
+++ b/frontend/src/translations/fr.json
@@ -22,6 +22,7 @@
"events": "Événements à ne pas rater",
"outdoor": "Sites outdoor à découvrir"
},
+ "loading": "Chargement",
"page": {
"back": "Retour",
"not-found": "Cette page est introuvable",
diff --git a/frontend/src/translations/it.json b/frontend/src/translations/it.json
index f3a015a2d..b1fc0ba3b 100644
--- a/frontend/src/translations/it.json
+++ b/frontend/src/translations/it.json
@@ -22,6 +22,7 @@
"events": "Eventi da non perdere",
"outdoor": "Siti outdoor da scoprire"
},
+ "loading": "Caricamento",
"page": {
"back": "Ritorno",
"not-found": "Questa pagina non è stata trovata"
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index d0c4b3274..33a3146bc 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -159,7 +159,7 @@ module.exports = {
},
},
plugins: [
- // plugin should be drop with TW v3
+ // plugins should be drop with TW v3
plugin(function ({ addUtilities, variants }) {
const scrollBehaviors = {
'.scroll-smooth': {
@@ -169,8 +169,32 @@ module.exports = {
'scroll-behavior': 'auto',
},
};
+ const srOnly = {
+ '.sr-only': {
+ position: 'absolute',
+ width: '1px',
+ height: '1px',
+ padding: 0,
+ margin: '-1px',
+ overflow: 'hidden',
+ clip: 'rect(0, 0, 0, 0)',
+ 'white-space': 'nowrap',
+ 'border-width': 0,
+ },
+ '.not-sr-only': {
+ position: 'static',
+ width: 'auto',
+ height: 'auto',
+ padding: 0,
+ margin: 0,
+ overflow: 'visible',
+ clip: 'auto',
+ 'white-space': 'normal',
+ },
+ };
addUtilities(scrollBehaviors, variants('scrollBehavior', ['motion-safe', 'motion-reduce']));
- })
+ addUtilities(srOnly);
+ }),
],
};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index a0453b429..904ac4301 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4486,14 +4486,6 @@ cosmiconfig@^7.0.1:
path-type "^4.0.0"
yaml "^1.10.0"
-create-react-class@^15.5.2:
- version "15.7.0"
- resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
- integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
- dependencies:
- loose-envify "^1.3.1"
- object-assign "^4.1.1"
-
create-require@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
@@ -8100,7 +8092,7 @@ longest-streak@^2.0.0:
resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
-loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9384,7 +9376,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@15.7.2, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9630,15 +9622,6 @@ react-leaflet@^3.0.0:
dependencies:
"@react-leaflet/core" "^1.0.2"
-react-loader@^2.4.7:
- version "2.4.7"
- resolved "https://registry.yarnpkg.com/react-loader/-/react-loader-2.4.7.tgz#729abe746155456a954a97ff830aff0d6b05f2a9"
- integrity sha512-pNW5xoSt0Q7HdmQh/EaIeeFbG0Ii74y6Le8gPdDyWyEFNgCiY1NcreQxMioQGjQ4Jo4EenQGKN/qMbxW+dpZkQ==
- dependencies:
- create-react-class "^15.5.2"
- prop-types "^15.5.8"
- spin.js "2.x"
-
react-media-hook@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/react-media-hook/-/react-media-hook-0.5.0.tgz#f830231f31ea80049f8cbaf8058da90ab71e7150"
@@ -10531,11 +10514,6 @@ specificity@^0.4.1:
resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
-spin.js@2.x:
- version "2.3.2"
- resolved "https://registry.yarnpkg.com/spin.js/-/spin.js-2.3.2.tgz#6caa56d520673450fd5cfbc6971e6d0772c37a1a"
- integrity sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho=
-
split-string@^3.0.1, split-string@^3.0.2:
version "3.1.0"
resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"