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

Search: Autocomplete #80

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Search: Autocomplete #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6ef3986
update ES_URL
KhadijaMahanga Jun 17, 2020
193d601
mobile design + onclicks
KhadijaMahanga Jun 18, 2020
ca11569
autocomplete
KhadijaMahanga Jun 18, 2020
aef6d45
background image
KhadijaMahanga Jun 18, 2020
f8e689d
fix background position
KhadijaMahanga Jun 18, 2020
8d9063b
search result styling
KhadijaMahanga Jun 18, 2020
4140040
minor fixes
KhadijaMahanga Jun 18, 2020
1cc8f05
yarn lint fixes
KhadijaMahanga Jun 18, 2020
95f2f95
only post title
KhadijaMahanga Jun 19, 2020
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@apollo/react-ssr": "^3.1.5",
"@appbaseio/reactivesearch": "^3.6.1",
"@appbaseio/reactivesearch": "^3.11.4",
"@commons-ui/core": "^0.0.1-alpha.21",
"@hurumap-ui/charts": "^0.3.5-alpha.14",
"@hurumap-ui/content": "^0.3.5-alpha.23",
Expand Down
4 changes: 2 additions & 2 deletions src/components/FeaturedData/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,10 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
display: "flex",
alignItems: "flex-end",
[breakpoints.up("md")]: {
marginTop: typography.pxToRem((widths.values.md * 21)/ widths.values.xl),
marginTop: typography.pxToRem((widths.values.md * 21) / widths.values.xl),
},
[breakpoints.up("lg")]: {
marginTop: typography.pxToRem((widths.values.lg * 21)/ widths.values.xl),
marginTop: typography.pxToRem((widths.values.lg * 21) / widths.values.xl),
},
[breakpoints.up("xl")]: {
marginTop: typography.pxToRem(21),
Expand Down
42 changes: 26 additions & 16 deletions src/components/Hero/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,21 +29,31 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
}
return {
flexGrow: 1,
backgroundImage: `url(${coronaImage})`,
backgroundImage: `url(${
props.heroContent && props.heroContent.background_image
? props.heroContent.background_image
: coronaImage
})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "90% 2%",
backgroundSize: "50%",
backgroundPosition: "90% 5%",
backgroundSize: `${typography.pxToRem(136)} ${typography.pxToRem(127)}`,
[breakpoints.up("md")]: {
backgroundPosition: "20% 30%",
backgroundSize: "75% 55%",
backgroundPosition: "50% 20%",
padding: `${typography.pxToRem(20)} 0`,
backgroundSize: `${typography.pxToRem(
(widths.values.md * 587) / widths.values.xl
)} ${typography.pxToRem((widths.values.md * 551) / widths.values.xl)}`,
},
[breakpoints.up("lg")]: {
backgroundPosition: "20% 90%",
backgroundSize: "70% 75%",
backgroundPosition: "40% 60%",
backgroundSize: `${typography.pxToRem(
(widths.values.lg * 587) / widths.values.xl
)} ${typography.pxToRem((widths.values.lg * 551) / widths.values.xl)}`,
},
[breakpoints.up("xl")]: {
backgroundPosition: "40% 80%",
padding: `${typography.pxToRem(59)} 0 ${typography.pxToRem(57)}`,
backgroundSize: `${typography.pxToRem(587)} ${typography.pxToRem(551)}`,
},
};
},
Expand All @@ -64,19 +74,19 @@ const useStyles = makeStyles(({ breakpoints, typography, widths }) => ({
},
},
heroImage: {
width: "315px",
height: "250px",
width: typography.pxToRem(315),
height: typography.pxToRem(250),
[breakpoints.up("md")]: {
width: (widths.values.md * 536) / widths.values.xl,
height: (widths.values.md * 426) / widths.values.xl,
width: typography.pxToRem((widths.values.md * 536) / widths.values.xl),
height: typography.pxToRem((widths.values.md * 426) / widths.values.xl),
},
[breakpoints.up("lg")]: {
width: (widths.values.lg * 536) / widths.values.xl,
height: (widths.values.lg * 426) / widths.values.xl,
width: typography.pxToRem((widths.values.lg * 536) / widths.values.xl),
height: typography.pxToRem((widths.values.lg * 426) / widths.values.xl),
},
[breakpoints.up("xl")]: {
width: "536px",
height: "426px",
width: typography.pxToRem(536),
height: typography.pxToRem(426),
},
},
title: {
Expand Down Expand Up @@ -139,7 +149,7 @@ function Hero({ heroContent, isResearch, ...props }) {
heroContent.component.length &&
heroContent.component[0].acf_fc_layout === "image";

const classes = useStyles({ ...props, hasCarousel });
const classes = useStyles({ ...props, hasCarousel, heroContent });

if (!heroContent) {
return null;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navigation/DesktopNavigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ function DesktopNavigation({ country, countries, navigation, ...props }) {
))}
</Grid>
<Grid item md={3}>
<Search size="large" />
<Search isMobile={false} />
</Grid>
<Grid item md={1} container justify="flex-start">
<Link
Expand Down
114 changes: 70 additions & 44 deletions src/components/Navigation/MobileNavigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import MenuIcon from "@material-ui/icons/Menu";

import IconButtonLink from "components/Link/IconButton";
import Logo from "components/Navigation/Logo";
import Search from "components/Search";

import NavigationList from "./NavigationList";

Expand Down Expand Up @@ -73,6 +74,10 @@ const useStyles = makeStyles((theme) => ({
link: {
color: "white",
},
searchIcon: {
color: "#D6D6D6",
fontSize: theme.typography.pxToRem(20),
},
}));

const Transition = React.forwardRef(function Transition(props, ref) {
Expand All @@ -82,12 +87,14 @@ const Transition = React.forwardRef(function Transition(props, ref) {
function MobileNavigation({ country, countries, navigation, ...props }) {
const classes = useStyles(props);
const [open, setOpen] = React.useState(false);
const [showSearchBar, setShowSearchBar] = React.useState(false);
const [dataNavigation, ...otherNavigations] = navigation || [];
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
setShowSearchBar(false);
};

return (
Expand All @@ -96,14 +103,26 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
<Logo />
</Grid>
<Grid item>
<IconButtonLink
aria-label="Open drawer"
className={classes.searchIcon}
edge="start"
href="/#"
onClick={() => {
setShowSearchBar(true);
handleClickOpen();
}}
>
<SearchIcon />
</IconButtonLink>
<IconButtonLink
aria-label="Open drawer"
color="secondary"
edge="start"
href="/#"
onClick={handleClickOpen}
>
<MenuIcon fontSize="large" />
<MenuIcon />
</IconButtonLink>
<Dialog
fullScreen
Expand All @@ -113,50 +132,57 @@ function MobileNavigation({ country, countries, navigation, ...props }) {
classes={{ root: classes.dialog, paper: classes.dialogPaper }}
>
<DialogActions className={classes.dialogActions}>
<IconButton
aria-label="search"
edge="start"
href="/search"
className={classes.button}
>
<SearchIcon fontSize="large" />
</IconButton>
<Grid container justify="flex-end" alignItems="center" spacing={1}>
<Grid item>
<Link
href="/#"
variant="overline"
underline="none"
className={classNames(
classes.button,
classes.languageButton,
"active"
)}
>
En
</Link>
{showSearchBar ? (
<Search isMobile />
) : (
<Grid
container
justify="flex-start"
alignItems="center"
spacing={2}
>
<Grid item>
<Link
href="/#"
variant="overline"
underline="none"
className={classNames(
classes.button,
classes.languageButton,
"active"
)}
>
En
</Link>
</Grid>
<Grid item>
<Link
href="/#"
variant="overline"
underline="none"
className={classNames(
classes.button,
classes.languageButton
)}
>
Fr
</Link>
</Grid>
<Grid item>
<Link
href="/#"
variant="overline"
underline="none"
className={classNames(
classes.button,
classes.languageButton
)}
>
عربى
</Link>
</Grid>
</Grid>
<Grid item>
<Link
href="/#"
variant="overline"
underline="none"
className={classNames(classes.button, classes.languageButton)}
>
Fr
</Link>
</Grid>
<Grid item>
<Link
href="/#"
variant="overline"
underline="none"
className={classNames(classes.button, classes.languageButton)}
>
عربى
</Link>
</Grid>
</Grid>
)}
<IconButton
aria-label="close drawer"
edge="start"
Expand Down
Loading