innocuous-symmetry/recipe-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling work

Browse Source
This commit is contained in:
Mikayla Dobson
2023-02-18 11:57:31 -06:00
parent 1d4763333b
commit e89067d942
6 changed files with 90 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/components/derived/IngredientSelector.tsx
View File

@@ -16,19 +16,13 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
const [newOptions, setNewOptions] = useState(new Array<string>());
const [selected, setSelected] = useState(new Array<string>());
useEffect(() => {
console.log(units);
}, [])
return (
<table style={{ display: "flex", flexDirection: "row", alignItems: "center" }}><tbody>
<table className="ingredient-widget"><tbody>
<tr>
<td className="quantity-of-unit">
<label>Quantity:</label>
<TextField />
<TextField variant="outlined" label="Quantity" />
</td>
<td className="ingredient-unit">
<label>Unit:</label>
<Autocomplete
autoHighlight
options={measurementUnits}
@@ -36,8 +30,8 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
renderInput={(params) => (
<TextField
{...params}
variant="filled"
placeholder="Unit of Measurement"
variant="outlined"
label="Unit"
/>
)}
onKeyDown={(e) => {
@@ -53,7 +47,6 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
/>
</td>
<td className="ingredient-name">
<label>Ingredient:</label>
<Autocomplete
autoHighlight
options={options}
@@ -61,8 +54,8 @@ function IngredientSelector({ position, ingredients, units, destroy }: Ingredien
renderInput={(params) => (
<TextField
{...params}
variant="filled"
placeholder="Ingredient Name"
variant="outlined"
label="Ingredient Name"
/>
)}
onKeyDown={(e) => {

28
client/src/components/pages/AddRecipe.tsx
View File

@@ -2,11 +2,14 @@ import { useAuthContext } from "../../context/AuthContext";
import { useCallback, useEffect, useState } from "react";
import { Button, Card, Divider, Page, Panel } from "../ui"
import { DropdownData, IIngredient, IRecipe } from "../../schemas";
import API from "../../util/API";
import { useSelectorContext } from "../../context/SelectorContext";
import IngredientSelector from "../derived/IngredientSelector";
import { v4 } from "uuid";
import Protect from "../../util/Protect";
import API from "../../util/API";
import { v4 } from "uuid";
import RichText from "../ui/RichText";
import { TextareaAutosize, TextField } from "@mui/material";
// import "/src/sass/pages/AddRecipe.scss";
const AddRecipe = () => {
const { user, token } = useAuthContext();
@@ -45,7 +48,6 @@ const AddRecipe = () => {
// once user information is available, store it in recipe data
useEffect(() => {
if (!user) return;
user && setInput((prev: IRecipe) => {
return {
...prev,
@@ -99,6 +101,10 @@ const AddRecipe = () => {
setOptionCount(prev => prev + 1);
}
useEffect(() => {
console.log(input);
}, [input])
return (
<Protect redirect="/add-recipe">
<h1>Add a New Recipe</h1>
@@ -107,12 +113,12 @@ const AddRecipe = () => {
<Panel id="create-recipe-panel" extraClasses="ui-form-component width-80">
<div className="form-row">
<label>Recipe Name:</label>
<input onChange={(e) => setInput({ ...input, name: e.target.value })} />
<TextField variant="outlined" label="Recipe Name" onChange={(e) => setInput({ ...input, name: e.target.value })}/>
</div>
<div className="form-row">
<label>Prep Time:</label>
<input onChange={(e) => setInput({ ...input, preptime: e.target.value })} />
<TextField variant="outlined" label="Prep Time" onChange={(e) => setInput({ ...input, preptime: e.target.value })}/>
</div>
<div className="form-row">
@@ -121,20 +127,22 @@ const AddRecipe = () => {
</div>
{ data && (
<>
<Card extraClasses="form-row flex-row ingredient-card">
<label>Ingredients:</label>
<div id="ingredient-container">
<label id="ingredients-label">Ingredients:</label>
<div className="ingredient-container">
{ ingredientFields }
<Button onClick={handleNewOption}>Add Ingredient</Button>
<Button id="add-ingredient-button" onClick={handleNewOption}>Add Ingredient</Button>
</div>
</Card>
</>
)}
<Divider />
<div className="form-row">
<label>Description:</label>
{ "description here" }
<label id="description-label">Description:</label>
<RichText id="add-ingredient-description" getState={(text) => setInput({ ...input, description: text })} />
</div>
<Button onClick={handleCreate}>Create Recipe!</Button>

10
client/src/components/ui/Button.tsx
View File

@@ -1,7 +1,15 @@
import { ButtonComponent } from "../../util/types"
import "/src/sass/components/Button.scss";
const Button: ButtonComponent = ({ onClick = (() => {}), children, extraClasses, disabled = false, disabledText = null }) => {
const Button: ButtonComponent = ({ onClick = (() => {}), children, extraClasses, id = null, disabled = false, disabledText = null }) => {
if (id?.length) {
return (
<button id={id} onClick={onClick} disabled={disabled} className={`ui-button ${extraClasses || ''}`}>
{ disabled ? (disabledText || children || "Button") : (children || "Button") }
</button>
)
}
return (
<button onClick={onClick} disabled={disabled} className={`ui-button ${extraClasses || ''}`}>
{ disabled ? (disabledText || children || "Button") : (children || "Button") }

2
client/src/components/ui/RichText.tsx
View File

@@ -25,7 +25,7 @@ const RichText: FC<RichTextProps> = ({ id, initialValue, getState }) => {
onEditorChange={(txt, editor) => handleChange(txt, editor)}
initialValue={initialValue || '<p></p>'}
init={{
height: 500,
height: 300,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',

53
client/src/sass/components/Form.scss
View File

@@ -7,20 +7,63 @@
.form-row {
display: inline-flex;
justify-content: flex-start;
align-items: center;
padding: 4px;
margin-bottom: 6px;
label {
text-align: left;
width: 25%;
width: 15%;
}
input {
border-radius: 4px;
width: 65%;
width: 85%;
}
select {
width: 65%;
margin: 0;
width: 85%;
}
.MuiFormControl-root {
width: 85%;
}
#ingredients-label, #description-label {
align-self: flex-start;
padding-top: 1rem;
}
// special properties for form containers on AddRecipe page
.ingredient-container {
width: 85%;
.ingredient-widget {
width: 100%;
tr {
width: 100%;
td {
width: 30%;
.MuiFormControl-root {
width: 100%;
}
label {
width: unset;
}
}
td:last-child {
width: 10%;
}
}
}
#add-ingredient-button {
margin-top: 1rem;
float: right;
}
}
}

8
client/src/sass/pages/AddRecipe.scss Normal file
View File

@@ -0,0 +1,8 @@
#create-recipe-panel {
.ingredient-card {
.ingredient-container {
background-color: blue;
width: 75%;
}
}
}