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

styling

Browse source
This commit is contained in:
Ruidy Nemausat 2020-01-27 21:00:17 +01:00
parent cb9f6e3ed8
commit c23636c249
18 changed files with 80 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -82,6 +82,6 @@ Free meal planner for cooks short on ideas! (like me …)
## TO DO ## TO DO
- put a preloader - put a preloader
- change favicon
- visual styling - visual styling
- route bad request to notFOund (exple: /categories/string) - route bad request to notFOund (exple: /categories/string)
- add sidenav on mobile

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
public/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 381 B

BIN
public/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 972 B

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 15 KiB

5
public/index.html
View file

@ -24,7 +24,10 @@
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons" 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> <title>Chef's | Meal Planner</title>
</head> </head>
<body> <body>

BIN
public/logo192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
public/logo512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 28 KiB

7
public/manifest.json
View file

@ -4,7 +4,7 @@
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 48x48 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
@ -16,6 +16,11 @@
"src": "logo512.png", "src": "logo512.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "512x512"
},
{
"src": "apple-touch-icon.png",
"type": "image/png",
"sizes": "180x180"
} }
], ],
"start_url": "/", "start_url": "/",

27
src/components/CategoryEntry.js
View file

@ -11,14 +11,25 @@ const CategoryEntry = props => {
const { url } = useRouteMatch(); const { url } = useRouteMatch();
return ( return (
<div className="row"> <Link to={`${url}/${strCategory}`}>
<Link to={`${url}/${strCategory}`}> <li>
<li> <div className="row">
<img src={strCategoryThumb} alt={strCategory} /> <div className="col s12">
<h3>{strCategory}</h3> {strCategoryDescription} <div className="card horizontal">
</li> <div className="card-image">
</Link> <img src={strCategoryThumb} alt={strCategory} />
</div> <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>
); );
}; };

12
src/components/Logo.js
View file

@ -3,11 +3,13 @@ import { Link } from "react-router-dom";
const Logo = () => { const Logo = () => {
return ( return (
<Link to="/" className="brand-logo"> <logo>
<span role="img" aria-label="cookie"> <Link to="/" className="brand-logo">
👩‍🍳 Chef's <span role="img" aria-label="cookie">
</span> 👩‍🍳 Chef's
</Link> </span>
</Link>
</logo>
); );
}; };

1
src/components/Navbar.js
View file

@ -19,6 +19,7 @@ const Navbar = props => {
<RandomButton <RandomButton
handleClick={props.handleClick} handleClick={props.handleClick}
url={props.buttonUrl} url={props.buttonUrl}
size="small"
/> />
</li> </li>
</ul> </ul>

4
src/components/RandomButton.js
View file

@ -2,10 +2,12 @@ import React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const RandomButton = props => { const RandomButton = props => {
const classString = `waves-effect waves-light btn-${props.size}`;
return ( return (
<Link to={props.url}> <Link to={props.url}>
<button <button
className="waves-effect waves-light btn-small" // className="waves-effect waves-light btn-small"
className={classString}
onClick={props.handleClick} onClick={props.handleClick}
> >
Random Recipe Random Recipe

27
src/components/SearchResult.js
View file

@ -6,14 +6,25 @@ const SearchResult = props => {
const { idMeal, strMeal, strMealThumb } = meal; const { idMeal, strMeal, strMealThumb } = meal;
return ( return (
<div className="row"> <Link to={`${idMeal}`}>
<Link to={`${idMeal}`}> <li>
<li key={props.i}> <div className="row">
<img src={strMealThumb} alt={strMeal} /> <div className="col s12 m6">
<h3>{strMeal}</h3> <div className="card ">
</li> <div className="card-image">
</Link> <img src={strMealThumb} alt={strMeal} />
</div> <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>
); );
}; };

4
src/index.css
View file

@ -18,3 +18,7 @@ div {
background-image: url(./images/Chef.svg); background-image: url(./images/Chef.svg);
/* width: 100%; */ /* width: 100%; */
} }
logo {
font-family: "Marck Script", cursive;
}

13
src/pages/Category.js
View file

@ -31,9 +31,16 @@ const CategoryPage = props => {
{meals.meals.map((meal, i) => ( {meals.meals.map((meal, i) => (
<li key={i}> <li key={i}>
<Link to={`/${meal.idMeal}`}> <Link to={`/${meal.idMeal}`}>
{/* <Link to="/"> */} <div className="row">
<img src={meal.strMealThumb} alt={meal.strMeal} /> <div className="col s12 m6">
<h3>{meal.strMeal}</h3> <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> </Link>
</li> </li>
))} ))}

1
src/pages/Home.js
View file

@ -11,6 +11,7 @@ const HomePage = props => {
<RandomButton <RandomButton
handleClick={props.handleClick} handleClick={props.handleClick}
url={props.buttonUrl} url={props.buttonUrl}
size="large"
/> />
</div> </div>
<div className="col s12 m6"> <div className="col s12 m6">

8
src/pages/Search.js
View file

@ -8,9 +8,11 @@ const SearchPage = props => {
return ( return (
<div className="container"> <div className="container">
<h1>Search Results for: {searchString} </h1> <h1>Search Results for: {searchString} </h1>
{meals.map((meal, i) => ( <ul>
<SearchResult i={i} meal={meal} /> {meals.map((meal, i) => (
))} <SearchResult key={i} meal={meal} />
))}
</ul>
</div> </div>
); );
}; };