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" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<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
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@ -33,5 +25,7 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<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>
</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 className="col s12">
<ContactFormTextArea id="Message" />
<ContactFormSubmit text="Send Message" />
<ContactFormSubmit text="Send Message" color="orange darken-2" />
</div>
</div>
</div>
@ -82,10 +82,10 @@ const ContactFormTextArea = ({ id }) => {
);
};
const ContactFormSubmit = ({ text }) => {
const ContactFormSubmit = ({ text, color }) => {
return (
<button
className="waves-effect waves-light btn"
className={`waves-effect waves-light btn ${color}`}
type="submit"
name="submit"
>

2
src/components/CopyrightText.jsx
View file

@ -2,7 +2,7 @@ import React from "react";
export const CopyrightText = () => {
return (
<span>
<span className="grey-text text-darken-1">
© 2020 - <span className="logo">Chef's</span> - Made with{" "}
<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="container">
<div className=" s12">
<h5 className="white-text">Navigation</h5>
<h5 className="black-text">Navigation</h5>
<ul>
{links.map((link, i) => (
<FooterLink key={i} link={link} textColor="grey" />
<FooterLink key={i} link={link} textColor="black" />
))}
</ul>
</div>

2
src/components/GitHubLink.jsx
View file

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

7
src/components/LogInButton.jsx
View file

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

15
src/components/Logo.jsx
View file

@ -3,12 +3,17 @@ import { Link } from "react-router-dom";
export const Logo = () => {
return (
<div>
<>
<Link to="/" className="brand-logo">
<span role="img" aria-label="cookie">
👩‍🍳 <span className="logo">Chef's</span>
</span>
<img
// className="responsive-img"
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>
</div>
</>
);
};

52
src/components/MealPresentation.jsx
View file

@ -12,42 +12,32 @@ export const MealPresentation = props => {
return (
<div className="row">
<div className="col s12">
<div className="card teal darken-1">
<div className="card-content white-text">
<div className="card orange lighten-1">
<div className="card-content black-text">
<span className="card-title">{mealName}</span>
<img className="responsive-img" src={imgAddress} alt={mealName} />
<ul>
<li>
<a href={videoAddress} target="blank">
See in video
</a>
</li>
{/* <video width="" height="" controls autoplay>
<source src={videoAddress} type="video/mp4" />
Your browser does not support the video tag.
</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> */}
<div className="chip">
<b>Video:</b>
<a href={videoAddress} target="blank">
<i className="close material-icons">video_library</i>
</a>
</div>
{/* </li>
<li>
<b>Category: </b> {mealCategory} (
<Link to={`/categories/${mealCategory}`}>
See every {mealCategory} recipes
</Link>
)
</li>
<li>
<b>Origin:</b> {mealArea}
{/* <Link to={`/area/${mealArea}`}>
See every {mealArea} recipes
</Link> */}
<li> */}
<div className="chip">
<b>Category: </b> {mealCategory}
<Link to={`/categories/${mealCategory}`}>
<i className="close material-icons">call_made</i>
</Link>
</div>
{/* </li>
<li> */}
<div className="chip">
<b>Origin:</b> {mealArea}
</div>
</li>
</ul>
</div>

15
src/components/Navbar.jsx
View file

@ -19,17 +19,26 @@ export const Navbar = props => {
<Logo />
<ul id="nav-mobile" className="right hide-on-med-and-down">
{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>
<RandomButton
handleClick={props.handleClick}
url={props.buttonUrl}
size="small"
color="orange darken-2"
/>
</li>
<li>{!isAuthenticated ? <LogInButton /> : <LogOutButton />}</li>
<li>
{!isAuthenticated ? (
<LogInButton color="orange lighten-1" />
) : (
<LogOutButton />
)}
</li>
</ul>
<Link
to="#"

4
src/components/RandomButton.jsx
View file

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

1
src/components/Recipe.jsx
View file

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

82
src/components/SearchBar.jsx
View file

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

7
src/components/SideNav.jsx
View file

@ -68,11 +68,16 @@ export const SideNav = props => {
handleClick={props.handleClick}
url={props.buttonUrl}
size="small"
color="orange darken-2"
/>
</li>
<li>
<Link to="#">
{!isAuthenticated ? <LogInButton /> : <LogOutButton />}
{!isAuthenticated ? (
<LogInButton color="orange lighten-1" />
) : (
<LogOutButton />
)}
</Link>
</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);
};
const getSearchResults = () => {
getData(searchString, setSearchResults, "search");
const getSearchResults = e => {
searchString === ""
? e.preventDefault()
: getData(searchString, setSearchResults, "search");
};
const handleChange = ev => {
@ -150,8 +152,10 @@ export const App = () => {
<SearchBar
searchString={searchString}
setSearchString={setSearchString}
handleChange={handleChange}
onSubmit={getSearchResults}
setSearchResults={setSearchResults}
/>
<SideNav
showNav={showNav}

16
src/pages/CategoryList.jsx
View file

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

6
src/pages/Home.jsx
View file

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

4
src/pages/Meal.jsx
View file

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