Skip to content

Commit

Permalink
HTML and CSS clean up.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmvanb
cmvanb committed Sep 28, 2024
1 parent 6bbd3a9 commit 60d0260
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 98 deletions.
12 changes: 4 additions & 8 deletions frontend/src/components/DrawerMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,19 @@ function DrawerMenu(props) {
</button>
</nav>
</header>
<a>
<a href="/mealplanner">
<i>calendar_month</i>
<span>Meal Planner</span>
</a>
<a>
<a href="/recipes">
<i>menu_book</i>
<span>Recipes</span>
</a>
<hr />
<a>
<hr class="medium" />
<a href="/settings">
<i>settings</i>
<span>Settings</span>
</a>
<a>
<i>account_circle</i>
<span>Account</span>
</a>
<a>
<i>logout</i>
<span>Log out</span>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ article {
}

article .header {
width: fit-content;
margin: auto;
text-align: center;
}

article .content {
display: flex;
width: fit-content;
max-width: 41rem;
}

section {
margin: 1rem auto;
max-width: 42rem;
}
14 changes: 7 additions & 7 deletions frontend/src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
function Login() {
return (
<div>
<article class="round">
<div class="header center-align">
<h4>Log In</h4>
</div>
<article>
<section class="header center-align">
<h4>Log In</h4>
</section>
<section>
<form method="post">
<div class="field label border">
<input type="email" id="email" name="email" required />
Expand All @@ -18,8 +18,8 @@ function Login() {

<button type="submit" value="Log In">Log In</button>
</form>
</article>
</div>
</section>
</article>
);
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/MealPlanner.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
function MealPlanner() {
return (
<div>
<h3>MEAL PLANNER</h3>
</div>
<article>
<h4>MEAL PLANNER</h4>
</article>
);
}

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/NotFound.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
function NotFound() {
return (
<div>
<h3>404 NOT FOUND</h3>
</div>
<article>
<h4>404 NOT FOUND</h4>
</article>
);
}

Expand Down
41 changes: 23 additions & 18 deletions frontend/src/pages/Recipe.css
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,41 @@
section {
width: 20rem;
overflow: hidden;
border-radius: 0;
#recipe-controls {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}

#recipe-image {
flex: 1 1 42rem;
max-height: 40rem;
margin: 0;
}

#recipe-attributes {
gap: 2rem;
justify-content: space-evenly;
flex-wrap: wrap;
gap: 0.25rem 2rem;
justify-content: center;
width: fit-content;
}

#recipe-attr {
.recipe-attr {
gap: 0.5rem;
white-space: nowrap;
}

#recipe-summary {
text-align: center;
}

#recipe-content {
#recipe-columns {
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
gap: 1rem;
}

/*
#recipe-image {
flex: 1 1 420rem;
max-height: 400rem;
margin: 0;
.recipe-col {
width: 20rem;
overflow: hidden;
border-radius: 0;
}

/*
#recipe-nutrition {
margin-top: 56rem;
}
Expand Down
104 changes: 56 additions & 48 deletions frontend/src/pages/Recipe.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,58 +48,66 @@ function Recipe() {
],
};

const closeRecipe = () => {
console.warn('Not implemented yet.')
}

return (
<div>
<article class="medium-elevate no-padding">
<img class="responsive" id="recipe-image" src="" />
<div class="padding">
<div class="header center-align">
<h4>{recipe.title}</h4>
<p>by {recipe.author}</p>
<a class="link" href="{recipe.source_url}">{recipe.source_url}</a>
<article class="medium-elevate no-padding">
<nav id="recipe-controls">
<h6 class="max"></h6>
<button class="transparent circle extra" onClick={closeRecipe}>
<i>close</i>
</button>
</nav>
<img class="responsive" id="recipe-image" src="https://www.teaforturmeric.com/wp-content/uploads/2018/06/Chicken-Korma-in-pan.jpg" />
<div class="padding">
<section class="header center-align">
<h4>{recipe.title}</h4>
<p>by {recipe.author}</p>
<a class="link" href={recipe.source_url}>{recipe.source_url}</a>
</section>
<section id="recipe-attributes" class="content">
<div class="middle-align recipe-attr">
<i class="small">schedule</i>
<span>Prep: {recipe.prep_time} mins</span>
</div>
<div class="middle-align recipe-attr">
<i class="small">schedule</i>
<span>Cook: {recipe.cook_time} mins</span>
</div>
<section id="recipe-attributes" class="content">
<div id="recipe-attr" class="middle-align">
<i class="small">schedule</i>
<span>Prep: {recipe.prep_time} mins</span>
</div>
<div id="recipe-attr" class="middle-align">
<i class="small">schedule</i>
<span>Cook: {recipe.cook_time} mins</span>
</div>
<div id="recipe-attr" class="middle-align">
<i class="small">group</i>
<span>Serves: {recipe.servings}</span>
</div>
</section>
<section id="recipe-summary" class="content">
<p>{recipe.description}</p>
</section>
<div id="recipe-content" class="content grid">
<section class="s12 m6">
<h6>Ingredients</h6>
<table class="border fill">
<tbody>
{recipe.ingredients.map((ingredient) => (
<tr>
<td>{ingredient}</td>
</tr>
))}
</tbody>
</table>
</section>
<section class="s12 m6">
<h6>Instructions</h6>
<ol>
{recipe.instructions.map((instruction) => (
<li>{instruction}</li>
<div class="middle-align recipe-attr">
<i class="small">group</i>
<span>Serves: {recipe.servings}</span>
</div>
</section>
<section class="content center-align">
<p>{recipe.description}</p>
</section>
<section id="recipe-columns" class="content grid">
<div class="s12 m6 recipe-col">
<h6>Ingredients</h6>
<table class="border fill">
<tbody>
{recipe.ingredients.map((ingredient) => (
<tr>
<td>{ingredient}</td>
</tr>
))}
</ol>
</section>
</tbody>
</table>
</div>
<div class="s12 m6 recipe-col">
<h6>Instructions</h6>
<ol>
{recipe.instructions.map((instruction) => (
<li>{instruction}</li>
))}
</ol>
</div>
</div>
</article>
</div>
</section>
</div>
</article>
);
}

Expand Down
8 changes: 5 additions & 3 deletions frontend/src/pages/Settings.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
function Settings() {
return (
<div>
<h3>SETTINGS</h3>
</div>
<article>
<section class="header center-align">
<h4>Settings</h4>
</section>
</article>
);
}

Expand Down
10 changes: 6 additions & 4 deletions frontend/src/pages/Splash.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
function Splash() {
return (
<div>
<h3>SPLASH</h3>
<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>
</div>
<article>
<section class="header center-align">
<h4>Welcome to Cookbook!</h4>
<p>This splash page is a work in progress. Here we will display user's publicly shared recipes.</p>
</section>
</article>
);
}

Expand Down

0 comments on commit 60d0260

Please sign in to comment.