Improve RecipeAdd layout (minor)

vasco3 · Sep 3, 2018 · 2bee075 · 2bee075
1 parent 7da2544
commit 2bee075
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 52 deletions.
diff --git a/src/recipes/RecipeForm.js b/src/recipes/RecipeForm.js
@@ -3,7 +3,7 @@ import * as yup from 'yup';
 import { TextField } from 'rmwc/TextField';
 import { Button } from 'rmwc/Button';
 
-const recipeAttributes = [
+const RECIPE_ATTRIBUTES = [
   { name: 'name', label: 'Recipe name', defaultValue: 'New Recipe' },
   { name: 'Calories', label: 'Calories', defaultValue: 1 },
   { name: 'Protein', label: 'Protein (g)', defaultValue: 1 },
@@ -40,52 +40,44 @@ const RecipeForm = ({ recipe = {}, onCancel, onSave }) => {
       render={({
         values,
         // errors,
-        // touched,
         handleChange,
         handleBlur,
         isSubmitting,
       }) => {
         return (
-          <Form className="recipeForm">
-            {recipeAttributes.map(function mapRecipeForm(
-              { name, label, defaultValue },
-              index,
-            ) {
-              return (
-                <TextField
-                  key={index}
-                  name={name}
-                  value={values[name]}
-                  onBlur={handleBlur}
-                  outlined
-                  label={label}
-                  onChange={handleChange}
-                  type={typeof defaultValue === 'string' ? 'text' : 'number'}
-                  rootProps={{
-                    style: {
-                      ...(name === 'name' ? { gridColumn: '1 / 4' } : {}),
-                    },
-                  }}
-                />
-              );
-            })}
-            <footer className="recipeFormFooter">
-              <Button onClick={onCancel}>cancel</Button>
-              <Button type="submit" disabled={isSubmitting}>
-                save recipe
+          <Form>
+            <div className="flex flex-wrap p-4">
+              {RECIPE_ATTRIBUTES.map(function mapRecipeForm(
+                { name, label, defaultValue },
+                index,
+              ) {
+                return (
+                  <TextField
+                    className="mb-4 mr-4"
+                    key={index}
+                    name={name}
+                    value={values[name]}
+                    onBlur={handleBlur}
+                    outlined
+                    label={label}
+                    onChange={handleChange}
+                    type={typeof defaultValue === 'string' ? 'text' : 'number'}
+                  />
+                );
+              })}
+            </div>
+            <footer className="recipeFormFooter pr-4 mb-4">
+              <Button className="mr-4" onClick={onCancel}>
+                cancel
+              </Button>
+              <Button type="submit" raised disabled={isSubmitting}>
+                add recipe
               </Button>
             </footer>
             <style jsx>{`
-              .recipeForm {
-                padding: 0 1rem 1rem;
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                grid-column-gap: 1rem;
-              }
               .recipeFormFooter {
                 display: flex;
                 justify-content: flex-end;
-                grid-column: 1 / 4;
               }
             `}</style>
           </Form>

diff --git a/src/recipes/Recipes.js b/src/recipes/Recipes.js
@@ -115,24 +115,23 @@ class Recipes extends React.Component {
         <ListDivider />
 
         <div className="fab flex justify-end pr-4">
-          <Fab onClick={this.toggleAddRecipe} icon="add" />
+          <span className={`addIcon${state.isAdding ? ' rotate' : ''}`}>
+            <Fab onClick={this.toggleAddRecipe} icon="add" />
+          </span>
         </div>
 
-        {state.isAdding && (
-          <div>
-            <ListDivider />
-            <Typography use="subtitle2" tag="div" className="mx-4 mt-4 mb-0">
-              Enter new recipe information
-            </Typography>
-
-            <RecipeForm
-              onCancel={() => this.setState({ isAdding: false })}
-              onChange={this.handleRecipeChange}
-              onSave={this.addRecipe}
-            />
-            <ListDivider />
-          </div>
-        )}
+        <div className={`addingSection${state.isAdding ? ' adding-open' : ''}`}>
+          <Typography use="subtitle2" tag="div" className="mx-4 mb-0">
+            Enter new recipe information
+          </Typography>
+
+          <RecipeForm
+            onCancel={() => this.setState({ isAdding: false })}
+            onChange={this.handleRecipeChange}
+            onSave={this.addRecipe}
+          />
+          <ListDivider />
+        </div>
 
         <List twoLine dense>
           {recipes
@@ -204,6 +203,22 @@ class Recipes extends React.Component {
           .fab {
             margin-top: -2rem;
           }
+          .addIcon {
+            transition: all 0.3s ease-in-out;
+          }
+          .rotate {
+            transform: rotateZ(45deg);
+          }
+
+          .addingSection {
+            height: 0;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+          }
+          .adding-open {
+            height: auto;
+            opacity: 1;
+          }
         `}</style>
       </Card>
     );