ruidy/meal_planner
1
0
Fork 0
mirror of https://github.com/rjNemo/meal_planner synced 2026-06-06 02:26:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CSS

Browse source
This commit is contained in:
Ruidy Nemausat 2020-02-08 21:50:28 +01:00
parent abd510457c
commit df86b94dd6
24 changed files with 9451 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/apple-touch-icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/favicon-16x16.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 381 B

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/favicon-32x32.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 972 B

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

10
public/index.html
View file

@ -8,14 +8,6 @@
<meta name="description" content="Online Meal Planner | Chef's" /> <meta name="description" content="Online Meal Planner | Chef's" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@ -33,5 +25,7 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <script type="text/javascript" src="js/materialize.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
</body> </body>
</html> </html>

BIN
public/logo192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
public/logo512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 47 KiB

6
src/components/ContactForm.jsx
View file

@ -41,7 +41,7 @@ export const ContactForm = ({ onSubmit }) => {
</div> </div>
<div className="col s12"> <div className="col s12">
<ContactFormTextArea id="Message" /> <ContactFormTextArea id="Message" />
<ContactFormSubmit text="Send Message" /> <ContactFormSubmit text="Send Message" color="orange darken-2" />
</div> </div>
</div> </div>
</div> </div>
@ -82,10 +82,10 @@ const ContactFormTextArea = ({ id }) => {
); );
}; };
const ContactFormSubmit = ({ text }) => { const ContactFormSubmit = ({ text, color }) => {
return ( return (
<button <button
className="waves-effect waves-light btn" className={`waves-effect waves-light btn ${color}`}
type="submit" type="submit"
name="submit" name="submit"
> >

2
src/components/CopyrightText.jsx
View file

@ -2,7 +2,7 @@ import React from "react";
export const CopyrightText = () => { export const CopyrightText = () => {
return ( return (
<span> <span className="grey-text text-darken-1">
© 2020 - <span className="logo">Chef's</span> - Made with{" "} © 2020 - <span className="logo">Chef's</span> - Made with{" "}
<span role="img" aria-label="heart"> <span role="img" aria-label="heart">
❤️ ❤️

4
src/components/Footer.jsx
View file

@ -11,10 +11,10 @@ export const Footer = () => {
<div className="row"> <div className="row">
<div className="container"> <div className="container">
<div className=" s12"> <div className=" s12">
<h5 className="white-text">Navigation</h5> <h5 className="black-text">Navigation</h5>
<ul> <ul>
{links.map((link, i) => ( {links.map((link, i) => (
<FooterLink key={i} link={link} textColor="grey" /> <FooterLink key={i} link={link} textColor="black" />
))} ))}
</ul> </ul>
</div> </div>

2
src/components/GitHubLink.jsx
View file

@ -3,7 +3,7 @@ import React from "react";
export const GitHubLink = () => { export const GitHubLink = () => {
return ( return (
<a <a
className="grey-text text-lighten-4 right" className="grey-text text-darken-1 right"
href="https://github.com/rjNemo/meal_planner" href="https://github.com/rjNemo/meal_planner"
target="blank" target="blank"
rel="noopener" rel="noopener"

7
src/components/LogInButton.jsx
View file

@ -1,13 +1,16 @@
import React from "react"; import React from "react";
import { useAuth0 } from "../utils/auth0-spa"; import { useAuth0 } from "../utils/auth0-spa";
export const LogInButton = () => { export const LogInButton = ({ color }) => {
const { loginWithRedirect } = useAuth0(); const { loginWithRedirect } = useAuth0();
const handleClick = () => { const handleClick = () => {
loginWithRedirect({}); loginWithRedirect({});
}; };
return ( return (
<button className="waves-effect waves-light btn" onClick={handleClick}> <button
className={`waves-effect waves-light btn ${color}`}
onClick={handleClick}
>
Log in Log in
</button> </button>
); );

15
src/components/Logo.jsx
View file

@ -3,12 +3,17 @@ import { Link } from "react-router-dom";
export const Logo = () => { export const Logo = () => {
return ( return (
<div> <>
<Link to="/" className="brand-logo"> <Link to="/" className="brand-logo">
<span role="img" aria-label="cookie"> <img
👩‍🍳 <span className="logo">Chef's</span> // className="responsive-img"
</span> src="/logo192.png"
alt="chef's logo"
height="30px"
style={{ position: "relative", top: "5px" }}
/>
<span className="logo orange-text text-accent-4">Chef's</span>
</Link> </Link>
</div> </>
); );
}; };

52
src/components/MealPresentation.jsx
View file

@ -12,42 +12,32 @@ export const MealPresentation = props => {
return ( return (
<div className="row"> <div className="row">
<div className="col s12"> <div className="col s12">
<div className="card teal darken-1"> <div className="card orange lighten-1">
<div className="card-content white-text"> <div className="card-content black-text">
<span className="card-title">{mealName}</span> <span className="card-title">{mealName}</span>
<img className="responsive-img" src={imgAddress} alt={mealName} /> <img className="responsive-img" src={imgAddress} alt={mealName} />
<ul> <ul>
<li> <li>
<a href={videoAddress} target="blank"> <div className="chip">
See in video <b>Video:</b>
</a> <a href={videoAddress} target="blank">
</li> <i className="close material-icons">video_library</i>
{/* <video width="" height="" controls autoplay> </a>
<source src={videoAddress} type="video/mp4" /> </div>
Your browser does not support the video tag. {/* </li>
</video> */}
{/* <iframe
title="video"
width="560"
height="315"
src="https://www.youtube.com/embed/wqZzLAPmr9k"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe> */}
<li> <li> */}
<b>Category: </b> {mealCategory} ( <div className="chip">
<Link to={`/categories/${mealCategory}`}> <b>Category: </b> {mealCategory}
See every {mealCategory} recipes <Link to={`/categories/${mealCategory}`}>
</Link> <i className="close material-icons">call_made</i>
) </Link>
</li> </div>
<li> {/* </li>
<b>Origin:</b> {mealArea} <li> */}
{/* <Link to={`/area/${mealArea}`}> <div className="chip">
See every {mealArea} recipes <b>Origin:</b> {mealArea}
</Link> */} </div>
</li> </li>
</ul> </ul>
</div> </div>

15
src/components/Navbar.jsx
View file

@ -19,17 +19,26 @@ export const Navbar = props => {
<Logo /> <Logo />
<ul id="nav-mobile" className="right hide-on-med-and-down"> <ul id="nav-mobile" className="right hide-on-med-and-down">
{links.map((link, i) => ( {links.map((link, i) => (
<FooterLink key={i} link={link} /> <FooterLink key={i} link={link} textColor="black" />
))} ))}
{isAuthenticated && <FooterLink link="profile" />} {isAuthenticated && (
<FooterLink link="profile" textColor="black" />
)}
<li> <li>
<RandomButton <RandomButton
handleClick={props.handleClick} handleClick={props.handleClick}
url={props.buttonUrl} url={props.buttonUrl}
size="small" size="small"
color="orange darken-2"
/> />
</li> </li>
<li>{!isAuthenticated ? <LogInButton /> : <LogOutButton />}</li> <li>
{!isAuthenticated ? (
<LogInButton color="orange lighten-1" />
) : (
<LogOutButton />
)}
</li>
</ul> </ul>
<Link <Link
to="#" to="#"

4
src/components/RandomButton.jsx
View file

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
export const RandomButton = ({ url, size = "large", handleClick }) => { export const RandomButton = ({ url, size = "large", handleClick, color }) => {
const classString = `waves-effect waves-light btn-${size}`; const classString = `waves-effect waves-light btn-${size} ${color}`;
return ( return (
<Link to={url}> <Link to={url}>
<button <button

1
src/components/Recipe.jsx
View file

@ -3,6 +3,7 @@ import React from "react";
export const Recipe = props => { export const Recipe = props => {
return ( return (
<div className="recipe"> <div className="recipe">
<div className="divider"></div>
<h3>Instructions</h3> <h3>Instructions</h3>
<p className="flow-text">{props.recipe}</p> <p className="flow-text">{props.recipe}</p>
</div> </div>

82
src/components/SearchBar.jsx
View file

@ -1,40 +1,56 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
export const SearchBar = props => { export const SearchBar = ({
searchString,
setSearchString,
setSearchResults,
handleChange,
onSubmit
}) => {
const clearSearchBar = () => {
setSearchString("");
setSearchResults({ meals: [] });
};
return ( return (
<div className="container"> <div className="section">
<div className=" nav-wrapper"> <div className="container">
<div className="row center-align"> <div className=" nav-wrapper">
<form> <div className="row center-align">
<div className="input-field col s10"> <form>
<input <div className="input-field col s10">
className="" <input
id="search" className="validate"
type="search" id="search"
required type="search"
name="search" required
value={props.searchString} name="search"
placeholder="Search for a recipe" value={searchString}
onChange={props.handleChange} placeholder="Search for a recipe"
/> onChange={handleChange}
<label className="label-icon" htmlFor="search"> />
<i className="material-icons">search</i> <label className="label-icon" htmlFor="search">
</label> <i className="material-icons">search</i>
<i className="material-icons">close</i> </label>
</div> <i className="material-icons" onClick={clearSearchBar}>
<Link to="/search"> close
<button </i>
className="btn-floating waves-effect waves-light" </div>
type="submit" <div className="col s2 valign-wrapper">
name="searchButton" <Link to="/search">
value="Search" <button
onClick={props.onSubmit} className="btn-floating waves-effect waves-light orange lighten-2"
> type="submit"
<i className="material-icons right">send</i> name="searchButton"
</button> value="Search"
</Link> onClick={onSubmit}
</form> >
<i className="material-icons right">send</i>
</button>
</Link>
</div>
</form>
</div>
</div> </div>
</div> </div>
</div> </div>

7
src/components/SideNav.jsx
View file

@ -68,11 +68,16 @@ export const SideNav = props => {
handleClick={props.handleClick} handleClick={props.handleClick}
url={props.buttonUrl} url={props.buttonUrl}
size="small" size="small"
color="orange darken-2"
/> />
</li> </li>
<li> <li>
<Link to="#"> <Link to="#">
{!isAuthenticated ? <LogInButton /> : <LogOutButton />} {!isAuthenticated ? (
<LogInButton color="orange lighten-1" />
) : (
<LogOutButton />
)}
</Link> </Link>
</li> </li>

9318
src/index.css
View file

File diff suppressed because it is too large Load diff

8
src/pages/App.jsx
View file

@ -99,8 +99,10 @@ export const App = () => {
getData("categories", setCategories); getData("categories", setCategories);
}; };
const getSearchResults = () => { const getSearchResults = e => {
getData(searchString, setSearchResults, "search"); searchString === ""
? e.preventDefault()
: getData(searchString, setSearchResults, "search");
}; };
const handleChange = ev => { const handleChange = ev => {
@ -150,8 +152,10 @@ export const App = () => {
<SearchBar <SearchBar
searchString={searchString} searchString={searchString}
setSearchString={setSearchString}
handleChange={handleChange} handleChange={handleChange}
onSubmit={getSearchResults} onSubmit={getSearchResults}
setSearchResults={setSearchResults}
/> />
<SideNav <SideNav
showNav={showNav} showNav={showNav}

16
src/pages/CategoryList.jsx
View file

@ -11,15 +11,13 @@ export const CategoryListPage = ({ items, getCategories }) => {
}, []); }, []);
return ( return (
<div className="section"> <div className="container">
<div className="container"> <h1 className="logo">Chef's Categories</h1>
<h1 className="logo">Chef's Categories</h1> <ul>
<ul> {categories.map((category, i) => (
{categories.map((category, i) => ( <CategoryEntry key={i} category={category} />
<CategoryEntry key={i} category={category} /> ))}
))} </ul>
</ul>
</div>
</div> </div>
); );
}; };

6
src/pages/Home.jsx
View file

@ -8,7 +8,11 @@ export const Home = ({ buttonUrl }) => {
<div className="row"> <div className="row">
<div className="col s12 m6"> <div className="col s12 m6">
<h1 className="logo">Chef's Online Cookbook</h1> <h1 className="logo">Chef's Online Cookbook</h1>
<RandomButton url={buttonUrl} size="large" /> <RandomButton
url={buttonUrl}
size="large"
color="orange darken-2"
/>
</div> </div>
<div className="col s12 m6"> <div className="col s12 m6">
<img <img

4
src/pages/Meal.jsx
View file

@ -45,10 +45,10 @@ export const Meal = props => {
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col s12 m6"> <div className="col s12 l6">
<MealPresentation meal={item} /> <MealPresentation meal={item} />
</div> </div>
<div className="col s12 m6"> <div className="col s12 l6">
<IngredientList ingredients={ingredientList} /> <IngredientList ingredients={ingredientList} />
</div> </div>
</div> </div>