@@ -36,7 +34,7 @@ const Popup = forwardRef((props, ref) => {
{t("general.maintainer")}
-
+
{data.company && data.company.link ? (
@@ -89,12 +87,12 @@ const Popup = forwardRef((props, ref) => {
)}
- ) : null;
+ );
});
export default Popup;
diff --git a/src/components/Popup.module.css b/src/components/places/Popup.module.css
similarity index 78%
rename from src/components/Popup.module.css
rename to src/components/places/Popup.module.css
index 5bed9b0..7a942b5 100644
--- a/src/components/Popup.module.css
+++ b/src/components/places/Popup.module.css
@@ -1,8 +1,8 @@
/* By default it will cover the map as it were it's own screen */
.popup {
--padding: 20px;
- position: absolute;
- top: 0;
+ position: fixed;
+ top: calc(var(--header-height) + 8vh);
right: 0;
bottom: 0;
left: 0;
@@ -11,16 +11,20 @@
background: var(--nh-background-color);
display: flex;
flex-direction: column;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ box-shadow: 0px -4px 6px 2px rgba(0, 0, 0, 0.3);
}
-.desktopCloseIcon {
- display: none;
+.closeIcon {
+ display: flex;
}
/* on larger screens we turn it into a pop-up over the map */
@media screen and (min-width: 600px) {
.popup {
- width: 100%;
+ position: absolute;
+ width: auto;
max-width: 400px;
max-height: 80vh;
top: auto;
@@ -31,24 +35,20 @@
border-radius: 10px;
box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.3);
}
-
- .desktopCloseIcon {
- display: flex;
- }
-
- .mobileCloseIcon {
- display: none;
- }
}
.popupFooter {
+ flex-grow: 0;
padding: var(--padding);
+ display: flex;
+ flex-direction: row;
+ box-sizing: border-box;
}
.popupHeader {
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid var(--nh-gray);
padding: var(--padding);
- padding-left: calc(var(--padding) + 30px + 20px);
+ padding-right: calc(var(--padding) + 30px + 10px);
min-height: var(--header-height);
display: flex;
flex-direction: row;
@@ -57,13 +57,6 @@
box-sizing: border-box;
}
-@media screen and (min-width: 600px) {
- .popupHeader {
- padding: var(--padding);
- padding-right: calc(var(--padding) + 30px + 10px);
- }
-}
-
.popupContent {
padding: var(--padding);
box-sizing: border-box;
@@ -80,7 +73,7 @@
font-size: 15px;
font-weight: 700;
text-decoration: none;
- color: #000;
+ color: var(--nh-text-color);
}
.popupContent a {
@@ -109,15 +102,15 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
- left: var(--padding);
+ right: var(--padding);
}
-@media screen and (min-width: 600px) {
+/* @media screen and (min-width: 600px) {
.close {
right: var(--padding);
left: auto;
}
-}
+} */
.popupRow {
display: flex;
diff --git a/src/components/Popup.transition.css b/src/components/places/Popup.transition.css
similarity index 100%
rename from src/components/Popup.transition.css
rename to src/components/places/Popup.transition.css
diff --git a/src/components/places/ShareLinkControl.jsx b/src/components/places/ShareLinkControl.jsx
new file mode 100644
index 0000000..e8bdb24
--- /dev/null
+++ b/src/components/places/ShareLinkControl.jsx
@@ -0,0 +1,97 @@
+import { useState, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { CSSTransition } from "react-transition-group";
+
+import styles from "./ShareLinkControl.module.css";
+import listStyles from "../../css/map-list-opener.module.css";
+import Icon from "../ui/Icon";
+import Toast from "../ui/Toast";
+import shareIcon from "../../assets/share-icon.svg";
+import { ControlsTooltip } from "./ControlsTooltip";
+
+import { canHover } from "../../utils/can-hover";
+
+import { isIOS, isAndroid } from "../../utils/platform-detection";
+import { useTranslation } from "react-i18next";
+
+function ShareLinkControl({ label }) {
+ const [showToast, setShowToast] = useState(false);
+ const toastRef = useRef(null);
+ const [showTooltip, setShowTooltip] = useState(false);
+ const tooltipRef = useRef(null);
+ const { i18n } = useTranslation();
+ // apart from checking for the existence of the WebShare API we
+ // want to make sure that this feature only activates on iOS and Android
+ // because some desktop browsers (eg.: Safari on macOS) implement the WebShare API
+ // but the experience is clunky and way worse then copy-to-clipboard
+ // so we want to keep using a simple copy-to-clipboard flow on "desktop"
+ const shouldUseNativeShare = navigator.share && (isAndroid() || isIOS());
+
+ const doSharing = () => {
+ const queryParams = new URLSearchParams(window.location.search);
+ queryParams.set("utm_source", "map_sharing_button");
+
+ const url = `${window.location.origin}?${queryParams}`;
+
+ if (shouldUseNativeShare) {
+ navigator
+ .share({
+ title: i18n.resolvedLanguage === "hu" ? "NERHotel" : "HotelOligarch",
+ url,
+ })
+ .catch((error) => console.error("Error sharing", error));
+ } else {
+ if (navigator.clipboard) {
+ navigator.clipboard.writeText(url);
+ }
+ }
+ };
+
+ const handleMouseEnter = () => {
+ if (canHover()) {
+ setShowTooltip(true);
+ }
+ };
+
+ const handleClick = () => {
+ doSharing();
+ // No need for this toast when using the native share panel on mobile
+ if (!shouldUseNativeShare) {
+ setShowToast(true);
+ }
+ };
+
+ useEffect(() => {
+ let closeTimer;
+ if (showToast) {
+ closeTimer = setTimeout(() => setShowToast(false), 2000);
+ }
+
+ return () => clearTimeout(closeTimer);
+ }, [showToast]);
+
+ return (
+
+
+ {createPortal(
+
+ setShowToast(false)} ref={toastRef} />
+ ,
+ document.body
+ )}
+
+
+
+
+ );
+}
+
+export default ShareLinkControl;
diff --git a/src/components/ShareLinkControl.module.css b/src/components/places/ShareLinkControl.module.css
similarity index 90%
rename from src/components/ShareLinkControl.module.css
rename to src/components/places/ShareLinkControl.module.css
index 9132e91..1ccef9d 100644
--- a/src/components/ShareLinkControl.module.css
+++ b/src/components/places/ShareLinkControl.module.css
@@ -1,5 +1,4 @@
.shareButton {
- top: 114px;
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
diff --git a/src/components/routing/LegacyHashRouteRedirect.jsx b/src/components/routing/LegacyHashRouteRedirect.jsx
deleted file mode 100644
index a033106..0000000
--- a/src/components/routing/LegacyHashRouteRedirect.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-import { useNavigate, useLocation } from "react-router";
-
-function LegacyHashRouteRedirect({ children }) {
- const location = useLocation();
- const navigate = useNavigate();
-
- useEffect(() => {
- if (location.hash && location.hash.includes("/")) {
- const hashAsArray = location.hash.split("");
- hashAsArray.shift();
- const withoutHashMark = hashAsArray.join("");
- navigate(withoutHashMark, { replace: true });
- }
- }, [location]);
-
- return <>{children};
-}
-
-export default LegacyHashRouteRedirect;
diff --git a/src/components/ui/Toast.jsx b/src/components/ui/Toast.jsx
index 9c1445b..328b23e 100644
--- a/src/components/ui/Toast.jsx
+++ b/src/components/ui/Toast.jsx
@@ -1,7 +1,14 @@
+import { forwardRef } from "react";
+
import styles from "./Toast.module.css";
+import "./Toast.transition.css";
-function Toast({ message }) {
- return
{message}
;
-}
+const Toast = forwardRef(({ message, ...props }, ref) => {
+ return (
+
+ {message}
+
+ );
+});
export default Toast;
diff --git a/src/components/ui/Toast.module.css b/src/components/ui/Toast.module.css
index 9d60a16..3c54a08 100644
--- a/src/components/ui/Toast.module.css
+++ b/src/components/ui/Toast.module.css
@@ -3,9 +3,10 @@
bottom: 20px;
left: 50%;
transform: translateX(-50%);
- background: #333;
- color: #fff;
+ background: var(--nh-text-color);
+ color: var(--nh-background-color);
padding: 10px 20px;
border-radius: 4px;
z-index: 1000;
+ box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.3);
}
diff --git a/src/components/ui/Toast.transition.css b/src/components/ui/Toast.transition.css
new file mode 100644
index 0000000..e79d173
--- /dev/null
+++ b/src/components/ui/Toast.transition.css
@@ -0,0 +1,17 @@
+.Toast-enter {
+ opacity: 0;
+ margin-bottom: -10px;
+}
+.Toast-enter-active {
+ opacity: 1;
+ transition: opacity 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
+ margin-bottom: 0;
+}
+.Toast-exit {
+ opacity: 1;
+}
+.Toast-exit-active {
+ opacity: 0;
+ margin-bottom: -10px;
+ transition: opacity 0.2s ease-in-out, margin-bottom 0.2s ease-in-out;
+}
diff --git a/src/context.js b/src/context.js
deleted file mode 100644
index 5e69291..0000000
--- a/src/context.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { createContext } from "react";
-
-const mapValue = {
- list: [],
- showPopup: false,
- center: [],
- selectedPoint: null,
- locationRequired: false,
- showMenu: false,
- showList: false,
- dispatch: () => {},
-};
-
-export const MapContext = createContext(mapValue);
-
-const hotelValue = {
- hotels: [],
-};
-
-export const HotelContext = createContext(hotelValue);
diff --git a/src/context/places-provider.jsx b/src/context/places-provider.jsx
new file mode 100644
index 0000000..cf1b739
--- /dev/null
+++ b/src/context/places-provider.jsx
@@ -0,0 +1,45 @@
+import { useContext, useState, useMemo, createContext, useEffect } from "react";
+import loadPlaceDataFromCsv from "../utils/load-place-data-from-csv";
+
+const placesValue = {
+ places: [],
+ isLoading: true,
+};
+
+const PlacesContext = createContext(placesValue);
+
+PlacesContext.displayName = "PlacesContext";
+
+export function usePlacesContext() {
+ return useContext(PlacesContext);
+}
+
+export function PlacesProvider({ children }) {
+ const [places, setPlaces] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ let isSubscribed = true;
+
+ loadPlaceDataFromCsv()
+ .then((data) => {
+ if (isSubscribed) {
+ setPlaces(data);
+ }
+ })
+ .catch((e) => {
+ console.error(e);
+ })
+ .finally(() => {
+ setIsLoading(false);
+ });
+
+ return () => {
+ isSubscribed = false;
+ };
+ }, []);
+
+ const value = useMemo(() => ({ places, isLoading }), [places, isLoading]);
+
+ return
{children};
+}
diff --git a/src/css/list-item.module.css b/src/css/list-item.module.css
index 24c6315..6bf945d 100644
--- a/src/css/list-item.module.css
+++ b/src/css/list-item.module.css
@@ -2,7 +2,10 @@
font-size: 18px;
padding: 15px 5px;
border-bottom: 1px solid #ccc;
- cursor: pointer;
+
+ &:last-of-type {
+ border-bottom: none;
+ }
}
.listItemRow {
diff --git a/src/css/list.module.css b/src/css/list.module.css
index 7a1b022..304ae34 100644
--- a/src/css/list.module.css
+++ b/src/css/list.module.css
@@ -1,13 +1,10 @@
.list {
- position: absolute;
- top: var(--header-height);
- left: 0;
- width: 100%;
- min-height: calc(100vh - var(--header-height));
+ height: calc(100vh - var(--header-height));
padding: 20px;
background: var(--nh-background-color);
- z-index: 2;
box-sizing: border-box;
+ transform: translate(0);
+ will-change: opacity;
}
.listWrapper {
@@ -16,17 +13,24 @@
margin: 0 auto;
}
-.oligarchList {
+.listContent {
display: flex;
flex-direction: column;
+ height: 100%;
+}
+
+.scrollPlane {
+ flex: 1;
+ overflow-y: auto;
}
-.oligarchList p {
- margin: 0 0 5px;
+.closeContainer {
+ display: flex;
+ justify-content: end;
+ flex-grow: 0;
}
.closeButton {
- position: absolute;
top: 20px;
right: 15px;
cursor: pointer;
diff --git a/src/css/map-list-opener.module.css b/src/css/map-list-opener.module.css
index 96c5c35..1b78b2e 100644
--- a/src/css/map-list-opener.module.css
+++ b/src/css/map-list-opener.module.css
@@ -1,13 +1,12 @@
.controlButton {
- right: 10px;
width: 34px;
height: 34px;
- z-index: 1000;
+
border: 2px solid var(--nh-gray);
border-radius: 4px;
background: #fafafa;
cursor: pointer;
- position: absolute;
+
display: flex;
justify-content: center;
align-items: center;
@@ -34,7 +33,6 @@
}
.locateButton {
- top: 12px;
padding: 4px;
border-bottom-width: 1px;
border-bottom-left-radius: 0;
@@ -42,7 +40,6 @@
}
.listButton {
- top: 46px;
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
diff --git a/src/css/hotel.module.css b/src/css/place.module.css
similarity index 89%
rename from src/css/hotel.module.css
rename to src/css/place.module.css
index 80e2422..d483492 100644
--- a/src/css/hotel.module.css
+++ b/src/css/place.module.css
@@ -1,15 +1,15 @@
-.hotel {
+.place {
position: relative;
top: 100px;
padding: 40px;
}
-.hotel h1 {
+.place h1 {
margin-top: 0;
margin-bottom: var(--h1-mb);
}
-.hotelWrapper {
+.placeWrapper {
display: flex;
justify-content: space-between;
}
@@ -50,11 +50,11 @@
}
@media (max-width: 768px) {
- .hotel {
+ .place {
padding: 20px;
}
- .hotelWrapper {
+ .placeWrapper {
flex-direction: column;
justify-content: flex-start;
}
@@ -83,22 +83,22 @@
box-sizing: border-box;
}
-.hotelRow {
+.placeRow {
display: flex;
align-items: baseline;
}
-.hotelRow p,
-.hotelRow a {
+.placeRow p,
+.placeRow a {
line-height: 1.3;
margin-left: 10px;
}
-.hotelRow span {
+.placeRow span {
font-weight: 700;
}
-.hotelRow span.title {
+.placeRow span.title {
font-weight: 400;
font-style: italic;
}
diff --git a/src/global.css b/src/global.css
index 3147414..ef52ecd 100644
--- a/src/global.css
+++ b/src/global.css
@@ -96,3 +96,7 @@ input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
+
+.relative {
+ position: relative;
+}
diff --git a/src/leaflet-helper.jsx b/src/leaflet-helper.jsx
index 8e06654..1f0ecf0 100644
--- a/src/leaflet-helper.jsx
+++ b/src/leaflet-helper.jsx
@@ -3,19 +3,24 @@ import iconShadow from "leaflet/dist/images/marker-shadow.png";
import styles from "./css/map.module.css";
import orangeIcon from "./assets/marker-icon-orange.svg";
import blueIcon from "./assets/marker-icon-blue.svg";
-import { Marker } from "react-leaflet";
-import React from "react";
-export function createOrangeIcon() {
- return Leaflet.icon({
- iconUrl: orangeIcon,
- shadowUrl: iconShadow,
- iconSize: [40, 62],
- iconAnchor: [20, 52],
- shadowSize: [40, 62],
- shadowAnchor: [12, 62],
- });
-}
+const iconBase = {
+ shadowUrl: iconShadow,
+ iconSize: [40, 62],
+ iconAnchor: [20, 52],
+ shadowSize: [40, 62],
+ shadowAnchor: [12, 62],
+};
+
+export const ORANGE_ICON = Leaflet.icon({
+ iconUrl: orangeIcon,
+ ...iconBase,
+});
+
+export const BLUE_ICON = Leaflet.icon({
+ iconUrl: blueIcon,
+ ...iconBase,
+});
export function createClusterCustomIcon(cluster) {
return Leaflet.divIcon({
@@ -24,42 +29,3 @@ export function createClusterCustomIcon(cluster) {
iconSize: Leaflet.point(40, 40, true),
});
}
-
-/**
- * @param {Hotel[]} points
- * @param {Hotel|null} selectedPoint? Optional.
- * @param {function(Hotel): (function(): void)} clickCallback Optional.
- * @returns {React.Component[]}
- */
-export function getMarkerList({ points, selectedPoint = null, clickCallback = () => {} }) {
- return points.map((point, index) => {
- const [latitude, longitude] = point.geometry.coordinates;
- const isSelected = selectedPoint && selectedPoint.properties.id === point.properties.id;
- const DefaultIcon = getIcon(orangeIcon);
- const ActiveIcon = getIcon(blueIcon);
-
- return (
-
{
- clickCallback(point);
- },
- }}
- />
- );
- });
-}
-
-function getIcon(iconUrl) {
- return Leaflet.icon({
- iconUrl,
- shadowUrl: iconShadow,
- iconSize: [40, 62],
- iconAnchor: [20, 52],
- shadowSize: [40, 62],
- shadowAnchor: [12, 62],
- });
-}
diff --git a/src/views/ContentPageView.jsx b/src/pages/ContentPage.jsx
similarity index 82%
rename from src/views/ContentPageView.jsx
rename to src/pages/ContentPage.jsx
index 7250315..1febd00 100644
--- a/src/views/ContentPageView.jsx
+++ b/src/pages/ContentPage.jsx
@@ -21,21 +21,20 @@ const getContent = async (fileName, lang) => {
}
};
-const ContentPageView = () => {
+const ContentPage = () => {
const [pageContent, setPageContent] = useState("");
const { t, i18n } = useTranslation();
const { resolvedLanguage } = i18n;
const location = useLocation();
const navigate = useNavigate();
const { search } = location;
- const pathNameAsArray = Array.from(location.pathname);
- pathNameAsArray.shift();
- const pathNameWithoutSlash = pathNameAsArray.join("");
+ const pathNameAsArray = location.pathname.split("/").filter((segment) => segment !== "");
+ const lastPathSegment = pathNameAsArray.at(-1);
useEffect(() => {
let isSubscribed = true;
- getContent(pathNameWithoutSlash, resolvedLanguage)
+ getContent(lastPathSegment, resolvedLanguage)
.then((data) => {
if (isSubscribed) {
setPageContent(data);
@@ -52,13 +51,13 @@ const ContentPageView = () => {
return () => {
isSubscribed = false;
};
- }, [resolvedLanguage, pathNameWithoutSlash, search]);
+ }, [resolvedLanguage, lastPathSegment, search]);
return (
- {t(`staticPageTitles.${pathNameWithoutSlash}`)} - {t("general.siteName")}
+ {t(`staticPageTitles.${lastPathSegment}`)} - {t("general.siteName")}
@@ -76,4 +75,4 @@ const ContentPageView = () => {
);
};
-export default ContentPageView;
+export default ContentPage;
diff --git a/src/views/ErrorView.jsx b/src/pages/ErrorPage.jsx
similarity index 77%
rename from src/views/ErrorView.jsx
rename to src/pages/ErrorPage.jsx
index 0abc6fa..eb25468 100644
--- a/src/views/ErrorView.jsx
+++ b/src/pages/ErrorPage.jsx
@@ -1,7 +1,7 @@
import Layout from "./Layout";
import ErrorScreen from "../components/ErrorScreen";
-function ErrorView() {
+function ErrorPage() {
return (
@@ -9,4 +9,4 @@ function ErrorView() {
);
}
-export default ErrorView;
+export default ErrorPage;
diff --git a/src/pages/LanguageLayout.jsx b/src/pages/LanguageLayout.jsx
new file mode 100644
index 0000000..76e6acf
--- /dev/null
+++ b/src/pages/LanguageLayout.jsx
@@ -0,0 +1,35 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams, useNavigate, useLocation, Outlet } from "react-router";
+
+import { config } from "../config";
+
+export function LanguageLayout() {
+ const { lang } = useParams();
+ const { i18n } = useTranslation();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ useEffect(() => {
+ // 1. If no language is in the URL path
+ if (!lang) {
+ const preferredLang = localStorage.getItem(config.locales.paramName) || "hu";
+ // Redirect to /hu/current-path
+ navigate(`/${preferredLang}${location.pathname}${location.search}`, { replace: true });
+ return;
+ }
+
+ // 2. If language in URL is valid but different from i18n state
+ if (config.locales.available.includes(lang)) {
+ if (i18n.language !== lang) {
+ i18n.changeLanguage(lang);
+ localStorage.setItem(config.locales.paramName, lang);
+ }
+ } else {
+ // 3. Fallback for invalid language codes (e.g., /fr/page -> /hu/page)
+ navigate(`/hu${location.pathname.replace(`/${lang}`, "")}`, { replace: true });
+ }
+ }, [lang, i18n, navigate, location.pathname, location.search]);
+
+ return ;
+}
diff --git a/src/pages/Layout.jsx b/src/pages/Layout.jsx
new file mode 100644
index 0000000..395af97
--- /dev/null
+++ b/src/pages/Layout.jsx
@@ -0,0 +1,18 @@
+import { useState } from "react";
+
+import Header from "../components/header/Header";
+import Menu from "../components/header/Menu";
+
+const Layout = (props) => {
+ const [showMenu, setShowMenu] = useState(false);
+
+ return (
+ <>
+ setShowMenu(true)} />
+