Skip to content

Commit 6d8122f

Browse files
cmvanbcmvanb
committed
HTML and CSS clean up.
1 parent 6bbd3a9 commit 6d8122f

File tree

9 files changed

+114
-98
lines changed

9 files changed

+114
-98
lines changed

‎frontend/src/components/DrawerMenu.jsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,19 @@ function DrawerMenu(props) {
1414
</button>
1515
</nav>
1616
</header>
17-
<a>
17+
<a href="/mealplanner">
1818
<i>calendar_month</i>
1919
<span>Meal Planner</span>
2020
</a>
21-
<a>
21+
<a href="/recipes">
2222
<i>menu_book</i>
2323
<span>Recipes</span>
2424
</a>
25-
<hr />
26-
<a>
25+
<hr class="medium" />
26+
<a href="/settings">
2727
<i>settings</i>
2828
<span>Settings</span>
2929
</a>
30-
<a>
31-
<i>account_circle</i>
32-
<span>Account</span>
33-
</a>
3430
<a>
3531
<i>logout</i>
3632
<span>Log out</span>

‎frontend/src/index.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ article {
2222
}
2323

2424
article .header {
25-
width: fit-content;
26-
margin: auto;
2725
text-align: center;
2826
}
2927

3028
article .content {
3129
display: flex;
32-
width: fit-content;
33-
max-width: 41rem;
30+
}
31+
32+
section {
3433
margin: 1rem auto;
34+
max-width: 42rem;
3535
}

‎frontend/src/pages/Login.jsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
function Login() {
22
return (
3-
<div>
4-
<article class="round">
5-
<div class="header center-align">
6-
<h4>Log In</h4>
7-
</div>
3+
<article>
4+
<section class="header center-align">
5+
<h4>Log In</h4>
6+
</section>
7+
<section>
88
<form method="post">
99
<div class="field label border">
1010
<input type="email" id="email" name="email" required />
@@ -18,8 +18,8 @@ function Login() {
1818

1919
<button type="submit" value="Log In">Log In</button>
2020
</form>
21-
</article>
22-
</div>
21+
</section>
22+
</article>
2323
);
2424
}
2525

‎frontend/src/pages/MealPlanner.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
function MealPlanner() {
22
return (
3-
<div>
4-
<h3>MEAL PLANNER</h3>
5-
</div>
3+
<article>
4+
<h4>MEAL PLANNER</h4>
5+
</article>
66
);
77
}
88

‎frontend/src/pages/NotFound.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
function NotFound() {
22
return (
3-
<div>
4-
<h3>404 NOT FOUND</h3>
5-
</div>
3+
<article>
4+
<section class="header center-align">
5+
<h4>404 Not Found</h4>
6+
<p>This isn't the page you're looking for.</p>
7+
</section>
8+
</article>
69
);
710
}
811

‎frontend/src/pages/Recipe.css‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,41 @@
1-
section {
2-
width: 20rem;
3-
overflow: hidden;
4-
border-radius: 0;
1+
#recipe-controls {
2+
position: absolute;
3+
top: 0;
4+
right: 0;
5+
z-index: 10;
6+
}
7+
8+
#recipe-image {
9+
flex: 1 1 42rem;
10+
max-height: 40rem;
11+
margin: 0;
512
}
613

714
#recipe-attributes {
8-
gap: 2rem;
9-
justify-content: space-evenly;
15+
flex-wrap: wrap;
16+
gap: 0.25rem 2rem;
17+
justify-content: center;
18+
width: fit-content;
1019
}
1120

12-
#recipe-attr {
21+
.recipe-attr {
1322
gap: 0.5rem;
1423
white-space: nowrap;
1524
}
1625

17-
#recipe-summary {
18-
text-align: center;
19-
}
20-
21-
#recipe-content {
26+
#recipe-columns {
2227
flex-wrap: wrap;
28+
gap: 2rem;
2329
justify-content: center;
24-
gap: 1rem;
2530
}
2631

27-
/*
28-
#recipe-image {
29-
flex: 1 1 420rem;
30-
max-height: 400rem;
31-
margin: 0;
32+
.recipe-col {
33+
width: 20rem;
34+
overflow: hidden;
35+
border-radius: 0;
3236
}
3337

38+
/*
3439
#recipe-nutrition {
3540
margin-top: 56rem;
3641
}

‎frontend/src/pages/Recipe.jsx‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -48,58 +48,66 @@ function Recipe() {
4848
],
4949
};
5050

51+
const closeRecipe = () => {
52+
console.warn('Not implemented yet.')
53+
}
54+
5155
return (
52-
<div>
53-
<article class="medium-elevate no-padding">
54-
<img class="responsive" id="recipe-image" src="" />
55-
<div class="padding">
56-
<div class="header center-align">
57-
<h4>{recipe.title}</h4>
58-
<p>by {recipe.author}</p>
59-
<a class="link" href="{recipe.source_url}">{recipe.source_url}</a>
56+
<article class="medium-elevate no-padding">
57+
<nav id="recipe-controls">
58+
<h6 class="max"></h6>
59+
<button class="transparent circle extra" onClick={closeRecipe}>
60+
<i>close</i>
61+
</button>
62+
</nav>
63+
<img class="responsive" id="recipe-image" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
64+
<div class="padding">
65+
<section class="header center-align">
66+
<h4>{recipe.title}</h4>
67+
<p>by {recipe.author}</p>
68+
<a class="link" href={recipe.source_url}>{recipe.source_url}</a>
69+
</section>
70+
<section id="recipe-attributes" class="content">
71+
<div class="middle-align recipe-attr">
72+
<i class="small">schedule</i>
73+
<span>Prep: {recipe.prep_time} mins</span>
74+
</div>
75+
<div class="middle-align recipe-attr">
76+
<i class="small">schedule</i>
77+
<span>Cook: {recipe.cook_time} mins</span>
6078
</div>
61-
<section id="recipe-attributes" class="content">
62-
<div id="recipe-attr" class="middle-align">
63-
<i class="small">schedule</i>
64-
<span>Prep: {recipe.prep_time} mins</span>
65-
</div>
66-
<div id="recipe-attr" class="middle-align">
67-
<i class="small">schedule</i>
68-
<span>Cook: {recipe.cook_time} mins</span>
69-
</div>
70-
<div id="recipe-attr" class="middle-align">
71-
<i class="small">group</i>
72-
<span>Serves: {recipe.servings}</span>
73-
</div>
74-
</section>
75-
<section id="recipe-summary" class="content">
76-
<p>{recipe.description}</p>
77-
</section>
78-
<div id="recipe-content" class="content grid">
79-
<section class="s12 m6">
80-
<h6>Ingredients</h6>
81-
<table class="border fill">
82-
<tbody>
83-
{recipe.ingredients.map((ingredient) => (
84-
<tr>
85-
<td>{ingredient}</td>
86-
</tr>
87-
))}
88-
</tbody>
89-
</table>
90-
</section>
91-
<section class="s12 m6">
92-
<h6>Instructions</h6>
93-
<ol>
94-
{recipe.instructions.map((instruction) => (
95-
<li>{instruction}</li>
79+
<div class="middle-align recipe-attr">
80+
<i class="small">group</i>
81+
<span>Serves: {recipe.servings}</span>
82+
</div>
83+
</section>
84+
<section class="content center-align">
85+
<p>{recipe.description}</p>
86+
</section>
87+
<section id="recipe-columns" class="content grid">
88+
<div class="s12 m6 recipe-col">
89+
<h6>Ingredients</h6>
90+
<table class="border fill">
91+
<tbody>
92+
{recipe.ingredients.map((ingredient) => (
93+
<tr>
94+
<td>{ingredient}</td>
95+
</tr>
9696
))}
97-
</ol>
98-
</section>
97+
</tbody>
98+
</table>
99+
</div>
100+
<div class="s12 m6 recipe-col">
101+
<h6>Instructions</h6>
102+
<ol>
103+
{recipe.instructions.map((instruction) => (
104+
<li>{instruction}</li>
105+
))}
106+
</ol>
99107
</div>
100-
</div>
101-
</article>
102-
</div>
108+
</section>
109+
</div>
110+
</article>
103111
);
104112
}
105113

‎frontend/src/pages/Settings.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
function Settings() {
22
return (
3-
<div>
4-
<h3>SETTINGS</h3>
5-
</div>
3+
<article>
4+
<section class="header center-align">
5+
<h4>Settings</h4>
6+
</section>
7+
</article>
68
);
79
}
810

‎frontend/src/pages/Splash.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
function Splash() {
22
return (
3-
<div>
4-
<h3>SPLASH</h3>
5-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
6-
</div>
3+
<article>
4+
<section class="header center-align">
5+
<h4>Welcome to Cookbook!</h4>
6+
<p>This splash page is a work in progress. Here we will display user's publicly shared recipes.</p>
7+
</section>
8+
</article>
79
);
810
}
911

0 commit comments

Comments
 (0)