styling
|
|
@ -82,6 +82,6 @@ Free meal planner for cooks short on ideas! (like me …)
|
|||
## TO DO
|
||||
|
||||
- put a preloader
|
||||
- change favicon
|
||||
- visual styling
|
||||
- route bad request to notFOund (exple: /categories/string)
|
||||
- add sidenav on mobile
|
||||
|
|
|
|||
BIN
public/apple-touch-icon.png
Normal file
|
After Width: | Height: | Size: 8.9 KiB |
BIN
public/favicon-16x16.png
Normal file
|
After Width: | Height: | Size: 381 B |
BIN
public/favicon-32x32.png
Normal file
|
After Width: | Height: | Size: 972 B |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 15 KiB |
|
|
@ -24,7 +24,10 @@
|
|||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
/>
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Marck+Script&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Chef's | Meal Planner</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 9.8 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 28 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"sizes": "64x64 48x48 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
|
|
@ -16,6 +16,11 @@
|
|||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
},
|
||||
{
|
||||
"src": "apple-touch-icon.png",
|
||||
"type": "image/png",
|
||||
"sizes": "180x180"
|
||||
}
|
||||
],
|
||||
"start_url": "/",
|
||||
|
|
|
|||
|
|
@ -11,14 +11,25 @@ const CategoryEntry = props => {
|
|||
const { url } = useRouteMatch();
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<Link to={`${url}/${strCategory}`}>
|
||||
<li>
|
||||
<img src={strCategoryThumb} alt={strCategory} />
|
||||
<h3>{strCategory}</h3> {strCategoryDescription}
|
||||
</li>
|
||||
</Link>
|
||||
</div>
|
||||
<Link to={`${url}/${strCategory}`}>
|
||||
<li>
|
||||
<div className="row">
|
||||
<div className="col s12">
|
||||
<div className="card horizontal">
|
||||
<div className="card-image">
|
||||
<img src={strCategoryThumb} alt={strCategory} />
|
||||
<span className="card-title red-text">{strCategory}</span>
|
||||
</div>
|
||||
<div className="card-stacked">
|
||||
<div className="card-content black-text">
|
||||
<p>{strCategoryDescription}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@ import { Link } from "react-router-dom";
|
|||
|
||||
const Logo = () => {
|
||||
return (
|
||||
<Link to="/" className="brand-logo">
|
||||
<span role="img" aria-label="cookie">
|
||||
👩🍳 Chef's
|
||||
</span>
|
||||
</Link>
|
||||
<logo>
|
||||
<Link to="/" className="brand-logo">
|
||||
<span role="img" aria-label="cookie">
|
||||
👩🍳 Chef's
|
||||
</span>
|
||||
</Link>
|
||||
</logo>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const Navbar = props => {
|
|||
<RandomButton
|
||||
handleClick={props.handleClick}
|
||||
url={props.buttonUrl}
|
||||
size="small"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@ import React from "react";
|
|||
import { Link } from "react-router-dom";
|
||||
|
||||
const RandomButton = props => {
|
||||
const classString = `waves-effect waves-light btn-${props.size}`;
|
||||
return (
|
||||
<Link to={props.url}>
|
||||
<button
|
||||
className="waves-effect waves-light btn-small"
|
||||
// className="waves-effect waves-light btn-small"
|
||||
className={classString}
|
||||
onClick={props.handleClick}
|
||||
>
|
||||
Random Recipe
|
||||
|
|
|
|||
|
|
@ -6,14 +6,25 @@ const SearchResult = props => {
|
|||
const { idMeal, strMeal, strMealThumb } = meal;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<Link to={`${idMeal}`}>
|
||||
<li key={props.i}>
|
||||
<img src={strMealThumb} alt={strMeal} />
|
||||
<h3>{strMeal}</h3>
|
||||
</li>
|
||||
</Link>
|
||||
</div>
|
||||
<Link to={`${idMeal}`}>
|
||||
<li>
|
||||
<div className="row">
|
||||
<div className="col s12 m6">
|
||||
<div className="card ">
|
||||
<div className="card-image">
|
||||
<img src={strMealThumb} alt={strMeal} />
|
||||
<span className="card-title ">{strMeal}</span>
|
||||
</div>
|
||||
{/* <div className="card-stacked">
|
||||
<div className="card-content black-text">
|
||||
<p>{strCategoryDescription}</p>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -18,3 +18,7 @@ div {
|
|||
background-image: url(./images/Chef.svg);
|
||||
/* width: 100%; */
|
||||
}
|
||||
|
||||
logo {
|
||||
font-family: "Marck Script", cursive;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,9 +31,16 @@ const CategoryPage = props => {
|
|||
{meals.meals.map((meal, i) => (
|
||||
<li key={i}>
|
||||
<Link to={`/${meal.idMeal}`}>
|
||||
{/* <Link to="/"> */}
|
||||
<img src={meal.strMealThumb} alt={meal.strMeal} />
|
||||
<h3>{meal.strMeal}</h3>
|
||||
<div className="row">
|
||||
<div className="col s12 m6">
|
||||
<div className="card ">
|
||||
<div className="card-image">
|
||||
<img src={meal.strMealThumb} alt={meal.strMeal} />
|
||||
<span className="card-title">{meal.strMeal}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const HomePage = props => {
|
|||
<RandomButton
|
||||
handleClick={props.handleClick}
|
||||
url={props.buttonUrl}
|
||||
size="large"
|
||||
/>
|
||||
</div>
|
||||
<div className="col s12 m6">
|
||||
|
|
|
|||
|
|
@ -8,9 +8,11 @@ const SearchPage = props => {
|
|||
return (
|
||||
<div className="container">
|
||||
<h1>Search Results for: {searchString} </h1>
|
||||
{meals.map((meal, i) => (
|
||||
<SearchResult i={i} meal={meal} />
|
||||
))}
|
||||
<ul>
|
||||
{meals.map((meal, i) => (
|
||||
<SearchResult key={i} meal={meal} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||