Skip to content

Commit

Permalink
Merge pull request #451 from shivky1992/shiv
Browse files Browse the repository at this point in the history 
home page cls fix
  • Loading branch information
@martinheppner
martinheppner authored Aug 26, 2024
2 parents a8d10da + 9f29c76 commit edc32a1
Show file tree
Hide file tree
Showing 2 changed files with 149 additions and 129 deletions.
231 changes: 125 additions & 106 deletions src/views/Start/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,18 @@ import LanguageMenu from "../../components/LanguageMenu";
import { useTranslation } from "react-i18next";
import { useSearchParams } from "react-router-dom";
import { getTotalCityTours } from "../../actions/crudActions";
import '/src/config.js';
import { Helmet } from "react-helmet";
import "/src/config.js";

const LINEAR_GRADIENT =
"linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45)), ";

export default function Header({
totalTours,
allCities,
allCities = [],
showMobileMenu,
setShowMobileMenu,
}) {

const [searchParams, setSearchParams] = useSearchParams();
let city = searchParams.get("city");

Expand All @@ -46,9 +46,9 @@ export default function Header({
tld = "at";
}

const [backgroundImage, setBackgroundImage] = useState(
`${LINEAR_GRADIENT} url(/app_static/img/background_start_tiny_${tld}.jpeg)`
);
// const [backgroundImage, setBackgroundImage] = useState(
// `${LINEAR_GRADIENT} url(/app_static/img/background_start_tiny_${tld}.jpeg)`
// );
const _isMobile = useResponsive();
const { t, i18n } = useTranslation();

Expand All @@ -62,10 +62,9 @@ export default function Header({
setLoading(true);
getTotalCityTours(city).then((data) => {
setTotalToursFromCity(data.tours_city);
if(!!data.tours_city && data.tours_city > 0) setLoading(false);
if (!!data.tours_city && data.tours_city > 0) setLoading(false);
});
}

}, [city]);

useEffect(() => {
Expand All @@ -79,122 +78,142 @@ export default function Header({
}
}, [searchParams, city, allCities]);

useEffect(() => {
if (!!_isMobile) {
setBackgroundImage(
`${LINEAR_GRADIENT} url(/app_static/img/background_start_mobil_${tld}.webp)`
);
} else {
setBackgroundImage(
`${LINEAR_GRADIENT} url(/app_static/img/background_start_small_${tld}.webp)`
);
}
}, [_isMobile, tld]);
// useEffect(() => {
// if (!!_isMobile) {
// setBackgroundImage(
// `${LINEAR_GRADIENT} url(/app_static/img/background_start_mobil_${tld}.webp)`
// );
// } else {
// setBackgroundImage(
// `${LINEAR_GRADIENT} url(/app_static/img/background_start_small_${tld}.webp)`
// );
// }
// }, [_isMobile, tld]);
const backgroundImage = !!_isMobile
? `${LINEAR_GRADIENT} url(/app_static/img/background_start_mobil_${tld}.webp)`
: `${LINEAR_GRADIENT} url(/app_static/img/background_start_small_${tld}.webp)`;

const preloadUrl = !!_isMobile
? `/app_static/img/background_start_mobil_${tld}.webp`
: `/app_static/img/background_start_small_${tld}.webp`;
const getCity = () => {
let _city = searchParams.get("city") ? searchParams.get("city") : localStorage.getItem("city") ? localStorage.getItem("city") : null;

let _city = searchParams.get("city")
? searchParams.get("city")
: localStorage.getItem("city")
? localStorage.getItem("city")
: null;

return _city;
};

if (totalTours === 0) {
return (
<Box
className={"header-container"}
style={{ backgroundImage: backgroundImage }}
>
<Box className={"header-text"}>
<Box
sx={{ display: "flex", alignItems: "center", marginBottom: "16px" }}
>
<img
src={`/app_static/img/logo-white.png`}
height={"16px"}
width={"29px"}
alt="Zuugle"
/>
<Typography
style={{
fontSize: "16px",
color: "#FFF",
lineHeight: "16px",
marginLeft: "5px",
<>
<Helmet>
<link rel="preload" href={preloadUrl} as="image" />
</Helmet>
<Box
className={"header-container"}
style={{ backgroundImage: backgroundImage }}
>
<Box className={"header-text"}>
<Box
sx={{
display: "flex",
alignItems: "center",
marginBottom: "16px",
}}
>
{getDomainText()}
</Typography>
<img
src={`/app_static/img/logo-white.png`}
height={"16px"}
width={"29px"}
alt="Zuugle"
/>
<Typography
style={{
fontSize: "16px",
color: "#FFF",
lineHeight: "16px",
marginLeft: "5px",
}}
>
{getDomainText()}
</Typography>
</Box>
<Typography variant={"h1"}>{t("start.wartungsmodus")}</Typography>
</Box>
<Typography variant={"h1"}>{t("start.wartungsmodus")}</Typography>
</Box>
</Box>
</>
);
} else {
return (
<Box
className={"header-container"}
sx={{ position: "relative" }}
style={{ backgroundImage: backgroundImage }}
>
<Box component={"div"} className="rowing blueDiv">
<DomainMenu />
<LanguageMenu />
</Box>
<Box className={"header-text"}>
<>
{
!loading && !!totalTours && (totalToursFromCity === 0 ) && (
<Typography variant={"h1"} height={"162px"}>
{!!totalTours &&
<>
<Helmet>
<link rel="preload" href={preloadUrl} as="image" />
</Helmet>
<Box
className={"header-container"}
sx={{ position: "relative" }}
style={{ backgroundImage: backgroundImage }}
>
<Box component={"div"} className="rowing blueDiv">
<DomainMenu />
<LanguageMenu />
</Box>
<Box className={"header-text"}>
<>
{!loading && !!totalTours && totalToursFromCity === 0 && (
<Typography variant={"h1"} height={"162px"}>
{!!totalTours &&
totalTours !== 0 &&
totalTours.toLocaleString() +
" " +
t("start.tourenanzahl_untertitel")}
</Typography>
)
}
{
!loading && !!totalToursFromCity && (
<Typography variant={"h1"} height={"162px"}>
{!!totalToursFromCity && totalToursFromCity !== 0
&& totalToursFromCity.toLocaleString() +
" " +
t("start.tourenanzahl_untertitel_city", { capCity })
}
</Typography>
)
}
</>
</Box>
{!!allCities && allCities.length > 0 && (
<Box
sx={{
backgroundColor: "#FFF",
position: "absolute",
bottom: "0",
transform: "translate(-50%, 50%)",
display: "inline-flex",
borderRadius: "20px",
padding: "12px 15px",
border: "2px solid #ddd",
width: "100%",
maxWidth: { xs: "325px", md: "600px" },
boxSizing: "border-box",
boxShadow: "rgba(100, 100, 111, 0.3) 0px 3px 20px 0px",
}}
>
<Box sx={{ width: "100%" }}>
<SearchContainer
pageKey="start"
page="start"
goto={"/search"}
showMobileMenu={showMobileMenu}
setShowMobileMenu={setShowMobileMenu}
updateCapCity={updateCapCity}
/>
</Box>
t("start.tourenanzahl_untertitel")}
</Typography>
)}
{!loading && !!totalToursFromCity && (
<Typography variant={"h1"} height={"162px"}>
{!!totalToursFromCity &&
totalToursFromCity !== 0 &&
totalToursFromCity.toLocaleString() +
" " +
t("start.tourenanzahl_untertitel_city", { capCity })}
</Typography>
)}
</>
</Box>
)}
</Box>
{!!allCities && allCities.length > 0 && (
<Box
sx={{
backgroundColor: "#FFF",
position: "absolute",
bottom: "0",
transform: "translate(-50%, 50%)",
display: "inline-flex",
borderRadius: "20px",
padding: "12px 15px",
border: "2px solid #ddd",
width: "100%",
maxWidth: { xs: "325px", md: "600px" },
boxSizing: "border-box",
boxShadow: "rgba(100, 100, 111, 0.3) 0px 3px 20px 0px",
}}
>
<Box sx={{ width: "100%" }}>
<SearchContainer
pageKey="start"
page="start"
goto={"/search"}
showMobileMenu={showMobileMenu}
setShowMobileMenu={setShowMobileMenu}
updateCapCity={updateCapCity}
/>
</Box>
</Box>
)}
</Box>
</>
);
}
}
Loading

0 comments on commit edc32a1

Please sign in to comment.