Skip to content

Commit

Permalink
Port recipe and login pages; improve css.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmvanb
cmvanb committed Sep 27, 2024
1 parent b78d23b commit 77d275d
Show file tree
Hide file tree
Showing 6 changed files with 239 additions and 7 deletions.
1 change: 0 additions & 1 deletion frontend/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'beercss';
import { createSignal } from 'solid-js';

import TopBar from './components/TopBar';
Expand Down
12 changes: 9 additions & 3 deletions frontend/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,18 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

/* NOTE: Necessary. */
text-align: center;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

:is(main,header,footer,section).responsive {
max-inline-size: 60rem;
margin: 0 auto;
}

article {
margin: 1rem;
}
9 changes: 8 additions & 1 deletion frontend/src/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
/* @refresh reload */
/*------------------------------------------------------------------------------
Entry point for the frontend application.
------------------------------------------------------------------------------*/
// @refresh reload

import { render } from 'solid-js/web';
import { Router, Route } from '@solidjs/router';

// NOTE: Ordered so local styles will override global styles.
import 'beercss';
import './index.css';

import App from './App';
import Splash from './pages/Splash';
import NotFound from './pages/NotFound';
Expand Down
18 changes: 17 additions & 1 deletion frontend/src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,23 @@
function Login() {
return (
<div>
<h3>LOGIN</h3>
<h3>Log In</h3>

<article class="round">
<form method="post">
<div class="field label border">
<input type="email" id="email" name="email" required />
<label for="email">Email address</label>
</div>

<div class="field label border">
<input type="password" id="password" name="password" required />
<label for="password">Password</label>
</div>

<button type="submit" value="Log In">Log In</button>
</form>
</article>
</div>
);
}
Expand Down
107 changes: 107 additions & 0 deletions frontend/src/pages/Recipe.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
section {
width: 20rem;
overflow: hidden;
border-radius: 0;
}

#recipe-image {
flex: 1 1 420rem;
max-height: 400rem;
margin: 0;
}

#recipe-header {
width: fit-content;
margin: 1rem auto;
text-align: center;
}

#recipe-header h4 {
display: block;
}

#recipe-attributes {
display: flex;
width: fit-content;
max-width: 41rem;
margin: 1rem auto;
gap: 2rem;
justify-content: space-evenly;
}

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

#recipe-summary {
text-align: center;
width: fit-content;
max-width: 41rem;
margin: 1rem auto;
}

#recipe-content {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
width: fit-content;
max-width: 41rem;
margin: 1rem auto;
}

#recipe-nutrition {
margin-top: 56rem;
}

#recipe-nutrition-table {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

/* Ugly CSS, but does the job. */
#recipe-nutrition-header {
position: absolute;
top: -32rem;
left: 0rem;
}

#recipe-nutrition table {
width: 320rem;
table-layout: fixed;
}
@media only screen and (min-width: 704px) {
#recipe-nutrition table {
width: 328rem;
table-layout: fixed;
}
}

#recipe-servings {
margin: 16rem 0;
max-widtH: 120rem;
}

#recipe-servings-tooltip {
right: -8rem;
}

#modal-image-zoom-close-button {
float: right;
}

#modal-image-zoom-container {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}

#zoomed-image {
width: fit-content;
max-width: 100%;
max-height: calc(100vh - 102rem);
margin: auto;
}
99 changes: 98 additions & 1 deletion frontend/src/pages/Recipe.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,104 @@
import './Recipe.css';

function Recipe() {
const recipe = {
title: 'Chicken Korma',
author: 'Izzah',
description: 'Looking for a Chicken Korma recipe that’s the real deal? This one-pot chicken korma is made in the Pakistani and North Indian way but without the fuss. All the mind-blowing flavor of korma – yet ready in much less time. After making & testing this korma for years, I’ve perfected it to the point that I can confidently call it the BEST chicken korma.',
source_url: 'https://www.teaforturmeric.com/authentic-chicken-korma/',
servings: 6,
prep_time: 15,
cook_time: 45,
ingredients: [
'1/3 cup neutral oil',
'2 tbsp ghee, or sub more oil',
'2 (~500 g) large onions, sliced*',
'2 lbs bone-in, cut up, skinless chicken (or sub chicken thighs), cleaned and excess skin removed',
'2 bay leaves',
'1 tsp cumin seeds',
'1/8 tsp whole black peppercorns',
'3 green cardamom pods',
'5 whole cloves',
'1 1-inch cinnamon stick',
'8-10 cloves garlic, crushed',
'1 inch piece ginger, crushed',
'2 small tomatoes* (optional), quartered',
'3/4 cup plain, whole-milk yogurt',
'2 tsp coriander powder',
'1 tsp cumin powder',
'1 tsp red chili powder or to taste',
'1/2 tsp turmeric powder',
'1/2 tsp paprika powder or Kashmiri red chili powder, optional – for color',
'2 1/8 tsp salt, or to taste depending on amount of chicken',
'2-3 green chili peppers, chopped',
'1-2 black cardamom pods (optional)',
'1 piece whole mace, or sub pinch ground mace or cinnamon',
'½ tsp garam masala',
'pinch nutmeg powder',
'1/2 tsp diluted kewra essence, or sub rose water',
'1/4 cup cilantro leaves, chopped, optional – for garnish',
'10-12 blanched almonds, for garnish',
],
instructions: [
'Heat a large, heavy-bottomed pan over high heat. Once hot, add the oil and onions and sauté the onions until they are golden brown (~20-25 minutes depending on quantity). Remove the onions from the pan and transfer them to a food processor. Add tomatoes (if using) and yogurt to the food processor and process until mostly smooth.',
'In the same pan used to brown onions, heat ghee (or oil) and add the whole spices, garlic, and ginger. Sauté for 30 seconds or until the garlic and ginger begin to darken. Add the chicken and fry it until it changes color (~5 minutes).',
'Add the yogurt mixture to chicken along with the ground spices, salt, and green chili peppers and sauté until the mixture comes to a light simmer (~2-3 minutes).',
'Lower the heat to medium-low, cover, and allow it to cook for 15 minutes. Uncover and stir in the black cardamom (if using), mace, garam masala, and nutmeg powder. Cover and cook again for 10 minutes.',
'Raise the heat to high. Add 1/2 to 3/4 cup of water (depending on how thin you\'d like the curry) and bring to a boil. Lower the heat and allow chicken to simmer for another 2-3 minutes. The oil will have risen to the top. Sprinkle the kewra essence and stir. Turn off the heat and garnish with cilantro and blanched almonds.',
],
};

return (
<div>
<h3>RECIPE</h3>
<article class="medium-elevate no-padding">
<img class="responsive" id="recipe-image" src="" />
<div class="padding">
<div id="recipe-header" class="center-align">
<h4>{recipe.title}</h4>
<p>by {recipe.author}</p>
<a class="link" href="{recipe.source_url}">{recipe.source_url}</a>
</div>
<section id="recipe-attributes">
<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">
<p>{recipe.description}</p>
</section>
<div id="recipe-content" class="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>
))}
</ol>
</section>
</div>
</div>
</article>
</div>
);
}
Expand Down

0 comments on commit 77d275d

Please sign in to comment.