Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@/Climatemapped Africa styling issues improvement. #996

Merged
merged 5 commits into from
Nov 13, 2024
Merged

@/Climatemapped Africa styling issues improvement. #996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
90c1743
Fixes Climatemapped Africa styling issues
koechkevin Nov 11, 2024
63c55af
Update Menu alignment
koechkevin Nov 12, 2024
0ce3894
chore: Update Hero Map component alignment and height
koechkevin Nov 12, 2024
92065e2
chore: Update Hero Map component alignment and height
koechkevin Nov 12, 2024
66e4386
chore: Update Hero Map component zoom levels
koechkevin Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 11 additions & 18 deletions apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
import { Box, Typography, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { chunk, uniqueId } from "lodash";
import PropTypes from "prop-types";
import React, { useRef } from "react";

Expand All @@ -16,10 +15,12 @@ import useStyles from "./useStyles";

const responsive = {
desktop: {
items: 1,
items: 4,
partialVisibilityGutter: 30,
},
tablet: {
items: 1,
items: 2,
partialVisibilityGutter: 30,
},
};

Expand All @@ -33,8 +34,6 @@ function AboutTeam({ title, members: membersProp, ...props }) {
if (!membersProp?.length) {
return null;
}
const chunkSize = isMdUp ? 4 : 2;
const members = chunk(membersProp, chunkSize);
const scrollToTeam = () => {
if (ref.current && !isMdUp) {
ref.current.scrollIntoView({ behavior: "smooth" });
Expand Down Expand Up @@ -69,18 +68,12 @@ function AboutTeam({ title, members: membersProp, ...props }) {
responsive={responsive}
classes={{ dotList: classes.dotList }}
>
{members.map((membersChunks) => (
<Grid
container
justifyContent="space-between"
key={uniqueId("team-chunk-")}
>
{membersChunks.map((member) => (
<Grid item key={member.title}>
<Card {...member} mediaProps={{ square: true }} />
</Grid>
))}
</Grid>
{membersProp.map((member) => (
<Card
key={member.title}
{...member}
mediaProps={{ square: true }}
/>
))}
</Carousel>
</Section>
Expand Down
3 changes: 2 additions & 1 deletion apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ function DropdownSearch({
icon: IconProp = SearchIcon,
placeholder,
variant,
sx,
...props
}) {
const router = useRouter();
Expand Down Expand Up @@ -96,7 +97,7 @@ function DropdownSearch({
);

return (
<Box id="location-search">
<Box id="location-search" sx={sx}>
{label && (
<Typography
variant="body1"
Expand Down
8 changes: 6 additions & 2 deletions apps/climatemappedafrica/src/components/Footer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,15 @@ function Footer(props) {
{...connect}
LinkProps={{
component: Link,
sx: { color: "text.secondary" },
sx: {
color: "text.secondary",
alignItems: { xs: "center", lg: "flex-end" },
},
}}
alignItems={{ xs: "center", lg: "flex-end" }}
TitleProps={{
variant: "footerCap",
sx: { color: "text.secondary" },
sx: { color: "text.secondary", mr: 0 },
}}
sx={{ gap: 2 }}
direction="column"
Expand Down
4 changes: 2 additions & 2 deletions apps/climatemappedafrica/src/components/Footer/useStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
copyrightText: {
color: palette.text.secondary,
order: 5,
padding: `0 ${typography.pxToRem(5)}`,
padding: `0 ${typography.pxToRem(5)} 0 0`,
[breakpoints.up("lg")]: {
padding: `0 ${typography.pxToRem(10)}`,
padding: `0 ${typography.pxToRem(10)} 0 0`,
},
},
}));
Expand Down
81 changes: 30 additions & 51 deletions apps/climatemappedafrica/src/components/Hero/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import { RichTypography } from "@commons-ui/legacy";
import { Box, Grid, useMediaQuery } from "@mui/material";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
import React, { useState } from "react";

import Legend from "./Legend";
import React from "react";

import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg";
import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
Expand All @@ -26,14 +24,12 @@ function Hero({
level,
explorePageSlug,
averageTemperature,
legend,
zoom: zoomProp,
...props
}) {
const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
const [hoverGeo, setHoverGeo] = useState(null);
const continentLevelZoom = isUpLg ? 3 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs
const countryLevelZoom = isUpLg ? 6 : 5.25;
const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
const { desktop, mobile } = zoomProp;
const zoom = isUpLg ? desktop : mobile;
return (
<Box
sx={{
Expand All @@ -58,7 +54,14 @@ function Hero({
}}
>
<Grid container>
<Grid item xs={12} md={6}>
<Grid
display="flex"
flexDirection="column"
justifyContent="space-between"
item
xs={12}
md={6}
>
<RichHeader
subtitle={subtitle}
TitleProps={{
Expand All @@ -82,25 +85,24 @@ function Hero({
>
{title}
</RichHeader>
<DropdownSearch
label={searchLabel}
locations={featuredLocations}
placeholder={searchPlaceholder}
{...props}
/>
<RichTypography
variant="caption"
sx={{
fontSize: { xs: "11px" },
color: "#707070",
marginTop: {
sm: "20px",
xs: "40px",
},
}}
>
{comment}
</RichTypography>
<Box>
<DropdownSearch
label={searchLabel}
locations={featuredLocations}
placeholder={searchPlaceholder}
sx={{ mb: 1 }}
{...props}
/>
<RichTypography
variant="caption"
sx={{
fontSize: { xs: "11px" },
color: "#707070",
}}
>
{comment}
</RichTypography>
</Box>
</Grid>
{/* Since map is dynamic-ally loaded, no need for implementation="css" */}

Expand All @@ -112,34 +114,11 @@ function Hero({
tileLayer={{
url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
}}
onLayerMouseOver={setHoverGeo}
featuredLocations={featuredLocations}
explorePageSlug={explorePageSlug}
{...props}
/>
) : null}
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
gap={2}
sx={{ height: 80, width: "100%" }}
>
<Legend title={averageTemperature} data={legend} />
<RichTypography
variant="h6"
sx={{
lineHeight: 23 / 18,
lineSpacing: "0.9px",
fontWeight: "normal",
textTransform: "capitalize",
display: "flex",
justifyContent: "flex-end",
}}
>
{hoverGeo}
</RichTypography>
</Box>
</Grid>
</Grid>
</Section>
Expand Down
102 changes: 36 additions & 66 deletions apps/climatemappedafrica/src/components/Hero/Hero.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`<Hero /> renders unchanged 1`] = `
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-18w5b2b-MuiGrid-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-16r8gvm-MuiGrid-root"
>
<header
class="MuiBox-root css-0"
Expand All @@ -50,82 +50,52 @@ exports[`<Hero /> renders unchanged 1`] = `
</header>
<div
class="MuiBox-root css-0"
id="location-search"
>
<p
class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
>
Search for a location
</p>
<div
class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
class="MuiBox-root css-19idom"
id="location-search"
>
<input
aria-label="search"
class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
placeholder="Search for a location"
type="text"
value=""
/>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
root="[object Object]"
tabindex="0"
type="button"
<p
class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
focusable="false"
viewBox="0 0 48 48"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiBox-root css-79elbk"
/>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
>
<div
class="MuiBox-root css-ljsg2c"
>
<div
class="MuiBox-root css-0"
>
Search for a location
</p>
<div
class="MuiBox-root css-70qvj9"
class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
>
<div
class="MuiBox-root css-1wok3bd"
/>
<div
class="MuiBox-root css-1fg12k3"
/>
<div
class="MuiBox-root css-55biq3"
/>
<div
class="MuiBox-root css-9qafv7"
/>
<div
class="MuiBox-root css-5srxm6"
/>
<div
class="MuiBox-root css-1kw6r8l"
/>
<div
class="MuiBox-root css-oi5eih"
<input
aria-label="search"
class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
placeholder="Search for a location"
type="text"
value=""
/>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
root="[object Object]"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
focusable="false"
viewBox="0 0 48 48"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiBox-root css-79elbk"
/>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
/>
</div>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions apps/climatemappedafrica/src/components/Hero/Hero.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ const defaultProps = {
{ min: 25, max: 28, color: "#F96264" },
{ min: 28, max: 31, color: "#F80701" },
],
zoom: {
desktop: 3,
mobile: 2,
},
};

describe("<Hero />", () => {
Expand Down
Loading
Loading