Skip to content

Commit

Permalink
Merge pull request #469 from shivky1992/shiv
Browse files Browse the repository at this point in the history 
loading issue fix
  • Loading branch information
@martinheppner
martinheppner authored Sep 8, 2024
2 parents f5066dc + 4f4cabf commit 94833c5
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 172 deletions.
72 changes: 12 additions & 60 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
/* @import '~material-design-icons/iconfont/material-icons.css' */
* {
margin: 0;
padding: 0;

}

body, #root, .App {
body,
#root,
.App {
height: 100%;
}

html, body {
html,
body {
overflow-x: hidden;
}

Expand All @@ -18,24 +14,11 @@ body * {
text-rendering: optimizeLegibility !important;
}



.App {
text-align: center;
background-color: #f1f1f1;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

/* width */
body ::-webkit-scrollbar {
width: 12px;
Expand Down Expand Up @@ -74,30 +57,6 @@ body ::-webkit-scrollbar-thumb:hover {
/* Firefox */
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* Ensuring the card fits within a 350px width and 300px height, scales down typography sizes */
.tour-card-map {
text-align: left;
Expand Down Expand Up @@ -714,7 +673,7 @@ body ::-webkit-scrollbar-thumb:hover {
.map-container {
z-index: 100;
/* margin-top: 20px; Adjust this value based on your layout and header height */
margin-top: 110px
margin-top: 110px;
}
}

Expand Down Expand Up @@ -1007,8 +966,6 @@ body ::-webkit-scrollbar-thumb:hover {
height: 85px;
padding: 10px 10px;
}


}

.tour-detail-action-btns-container {
Expand Down Expand Up @@ -1112,7 +1069,6 @@ body ::-webkit-scrollbar-thumb:hover {
align-items: flex-start;
}


.tour-detail-properties {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
Expand Down Expand Up @@ -1797,7 +1753,6 @@ top:250px; */
line-height: 1.334;
}


/* For desktop and mobile detail property section of detail page */
/* styles for both Desktop and mobile */

Expand All @@ -1809,7 +1764,7 @@ top:250px; */
display: grid;
grid-template-columns: 1fr 1px 1fr 1px 1fr; /* Columns for elements and dividers */
max-width: 706px; /* Max width */
margin: 0;
margin: 0;
gap: 0; /* No gap between grid items */
height: 100%;
}
Expand Down Expand Up @@ -1842,28 +1797,25 @@ top:250px; */
.tour-detail-properties-el {
padding-left: 1rem;
}

}

/* Styles for small screens (max-width: 678px) */
@media (max-width: 678px) {
.tour-detail-properties {
grid-template-columns: 1fr 1px 1fr; /* 2 columns with a vertical divider */
grid-template-rows: auto auto auto ; /* 3 rows */
grid-template-rows: auto auto auto; /* 3 rows */
}

.tour-detail-properties-el {
padding-left: 0.5rem;
padding-right: 0.5rem;
}


}

.disabled-button {
background-color: #e0e0e0 !important;
background-color: #e0e0e0 !important;
color: #9e9e9e !important;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
142 changes: 74 additions & 68 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,102 @@
import * as React from "react";
import "./App.css";
import React, { lazy, Suspense, useEffect } from "react";
import ThemeProvider from "@mui/material/styles/ThemeProvider";
import { theme } from "./theme";
import ModalRoot from "./components/ModalRoot";
import { Route, Routes, Navigate } from "react-router-dom";
import { lazy, Suspense, useCallback } from "react";
import CircularProgress from "@mui/material/CircularProgress";
// import Start from "./views/Start/Start";
// import DetailReworked from "./views/Main/DetailReworked";
// import Search from "./components/Search/Search";
import i18next from "i18next";
import { Navigate, Route, Routes } from "react-router-dom";
import CircularProgress from "@mui/material/CircularProgress";
import "./App.css";
import ModalRoot from "./components/ModalRoot";
import { theme } from "./theme";
import { getTopLevelDomain } from "./utils/globals";
import '/src/config.js';
import Start from "./views/Start/Start";
import "/src/config.js";

const Main = lazy(() => import("./views/Main/Main"));
const Impressum = lazy(() => import("./views/Pages/Impressum"));
const Privacy = lazy(() => import("./views/Pages/Privacy"));
const DetailReworked = lazy(() => import("./views/Main/DetailReworked"));
const Search = lazy(() => import("./components/Search/Search"));
const Start = lazy(() => import("./views/Start/Start"));



const DetailReworked = lazy(() => import("./views/Main/DetailReworked"));
const Search = lazy(() => import("./components/Search/Search"));

function App() {
//check if first visit and change code to domain language
if(!localStorage.getItem('visited')) {

if (!localStorage.getItem("visited")) {
let domain = getTopLevelDomain();

//switch to domain language
switch (domain) {
case 'si':
i18next.changeLanguage('sl');
case "si":
i18next.changeLanguage("sl");
break;
case 'fr':
i18next.changeLanguage('fr');
case "fr":
i18next.changeLanguage("fr");
break;
case 'it':
i18next.changeLanguage('it');
case "it":
i18next.changeLanguage("it");
break;
default:
i18next.changeLanguage('de');
i18next.changeLanguage("de");
break;
}

localStorage.setItem('visited',true);
localStorage.setItem("visited", true);
}

// Matomo tracking
var _mtm = window._mtm = window._mtm || [];
React.useEffect(() => {
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='https://stats.bahnzumberg.at/js/container_ANAXmMKf.js'; s.parentNode.insertBefore(g,s);
let language = i18next.resolvedLanguage;
_mtm.push({'language': language});
});


const _mtm = (window._mtm = window._mtm || []);
useEffect(() => {
_mtm.push({
"mtm.startTime": new Date().getTime(),
event: "mtm.Start",
});
const d = document,
g = d.createElement("script"),
s = d.getElementsByTagName("script")[0];
g.async = true;
g.src = "https://stats.bahnzumberg.at/js/container_ANAXmMKf.js";
s.parentNode.insertBefore(g, s);
_mtm.push({ language: i18next.resolvedLanguage });
}, []);

return (
<>
<ThemeProvider theme={theme}>
<div className="App" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
<Suspense
fallback={
<div style={{ height: "100%", width: "100%", padding: "20px" }}>
<CircularProgress />
</div>
}
>
<Routes>
<Route path="/" element={<Start />} />
<Route path="/total" element={<Start />} />
<Route path="/search" element={<Main />} />
<Route path="/tour/:idOne/:cityOne" element={<DetailReworked />} />
<Route path="/tour" element={<DetailReworked />} />
<Route path="/provider/:provider" element={<DetailReworked />} />
<Route path="/imprint" element={<Impressum />} />
<Route path="/privacy" element={<Privacy />} />
<Route path="/:city" element={<Main />} />
<Route path="/searchPhrases" element={<Search />} />

<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Suspense>
</div>
<ModalRoot />
</ThemeProvider>
</>
<ThemeProvider theme={theme}>
<div
className="App"
style={{
minHeight: "100vh",
display: "flex",
flexDirection: "column",
}}
>
<Routes>
<Route path="/" element={<Start />} />
<Route path="/total" element={<Start />} />
</Routes>
<Suspense
fallback={
<div
style={{
height: "100%",
width: "100%",
padding: "20px",
}}
>
<CircularProgress />
</div>
}
>
<Routes>
<Route path="/search" element={<Main />} />
<Route path="/tour/:idOne/:cityOne" element={<DetailReworked />} />
<Route path="/tour" element={<DetailReworked />} />
<Route path="/provider/:provider" element={<DetailReworked />} />
<Route path="/imprint" element={<Impressum />} />
<Route path="/privacy" element={<Privacy />} />
<Route path="/:city" element={<Main />} />
<Route path="/searchPhrases" element={<Search />} />

<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Suspense>
</div>
<ModalRoot />
</ThemeProvider>
);
}

Expand Down
14 changes: 7 additions & 7 deletions src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
* {
margin: 0;
padding: 0;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
33 changes: 14 additions & 19 deletions src/views/Start/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ const LanguageMenu = lazy(() => import("../../components/LanguageMenu"));
const SearchContainer = lazy(() => import("./SearchContainer"));

export default function Header({
totalTours,
allCities = [],
showMobileMenu,
setShowMobileMenu,
totalTours,
allCities = [],
showMobileMenu,
setShowMobileMenu,
}) {
const { t } = useTranslation();
const [searchParams] = useSearchParams();
Expand All @@ -36,26 +36,21 @@ export default function Header({
}, [searchParams]);

useEffect(() => {
let _city = getCity();
if (!!_city) {
setLoading(true);
if (getCity()) {
getTotalCityTours(city).then((data) => {
setTotalToursFromCity(data.tours_city);
if (!!data.tours_city && data.tours_city > 0) setLoading(false);
});
}
}, [city]);

useEffect(() => {
// city = searchParams.get("city");
if (!!city && !!allCities && allCities.length > 0) {
const cityObj = allCities.find((e) => e.value === city); // find the city object in array "allCities"
if (!!cityObj) {
updateCapCity(cityObj.label);
searchParams.set("city", city);

if (allCities?.length > 0) {
const cityObj = allCities.find((e) => e.value === city);
if (cityObj) {
updateCapCity(cityObj.label);
searchParams.set("city", city);
}
}
}
}, [searchParams, city, allCities]);
}, [city, getCity, allCities, updateCapCity, searchParams]);


if (totalTours === 0) {
return (
Expand Down
Loading

0 comments on commit 94833c5

Please sign in to comment.