Skip to content
This repository has been archived by the owner on May 7, 2021. It is now read-only.

Commit

Permalink
Improve layout (minor)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jorge Cuadra committed Sep 3, 2018
1 parent a6879c9 commit ba0256a
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 135 deletions.
271 changes: 141 additions & 130 deletions src/calculator/Calculator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as yup from 'yup';
import { Button } from 'rmwc/Button';
import { Checkbox } from 'rmwc/Checkbox';
import { ListDivider } from 'rmwc/List';
import { Select } from 'rmwc';
import { Select, Grid, GridCell } from 'rmwc';
import { TextField, TextFieldHelperText } from 'rmwc/TextField';
import { Typography } from 'rmwc/Typography';

Expand Down Expand Up @@ -70,139 +70,123 @@ class Calculator extends React.Component {
<Typography use="subtitle1" tag="div" className="p-4">
Set your daily targets to compute your meal plan
</Typography>
<Typography use="overline" tag="div" className="px-4">
Kinobody Calories / Macros
</Typography>
<ListDivider />
<Form>
<div className="max m-4">
<Select
className="mb-4 mr-4"
label="Kinobody Program"
onBlur={handleBlur}
onChange={handleChange}
options={[
{ label: 'GGP - Greek God Program', value: 'GGP' },
]}
outlined
value={values.kinobodyProgram}
/>
<Select
className="mb-4 mr-4"
label="Program Mode"
onBlur={handleBlur}
onChange={handleChange}
options={kinobodyProgramModeOptions}
outlined
name="kinobodyProgramMode"
value={values.kinobodyProgramMode}
/>
<Select
className="mb-4 mr-4"
label="Macro Options"
name="kinobodyMacroOption"
onBlur={handleBlur}
onChange={handleChange}
options={macroOptions}
outlined
value={values.kinobodyMacroOption}
/>
<TextField
className="mb-4 mr-4"
label="Body weight"
name="bodyWeight"
onBlur={handleBlur}
onChange={handleChange}
outlined
value={values.bodyWeight}
/>
{errors.bodyWeight && (
<TextFieldHelperText validationMsg persistent>
{errors.bodyWeight}
</TextFieldHelperText>
)}
<Select
className="mb-4 mr-4"
label="units"
onBlur={handleBlur}
onChange={handleChange}
options={['lbs']}
outlined
name="bodyWeightIsInLbs"
value={values.bodyWeightIsInLbs}
/>
</div>

<Typography use="overline" tag="div" className="mx-4">
Workout days
</Typography>
<ListDivider />
<Grid>
<GridCell span="6">
<Typography use="overline" tag="div">
Kinobody Calories / Macros
</Typography>
<ListDivider />
<Select
className="my-4 mr-4"
label="Kinobody Program"
onBlur={handleBlur}
onChange={handleChange}
options={[
{ label: 'GGP - Greek God Program', value: 'GGP' },
]}
outlined
value={values.kinobodyProgram}
/>
<Select
className="mb-4 mr-4"
label="Program Mode"
onBlur={handleBlur}
onChange={handleChange}
options={kinobodyProgramModeOptions}
outlined
name="kinobodyProgramMode"
value={values.kinobodyProgramMode}
/>
<Select
className="mb-4 mr-4"
label="Macro Options"
name="kinobodyMacroOption"
onBlur={handleBlur}
onChange={handleChange}
options={macroOptions}
outlined
value={values.kinobodyMacroOption}
/>
<TextField
className="mb-4 mr-4"
label="Body weight"
name="bodyWeight"
onBlur={handleBlur}
onChange={handleChange}
outlined
value={values.bodyWeight}
/>
{errors.bodyWeight && (
<TextFieldHelperText validationMsg persistent>
{errors.bodyWeight}
</TextFieldHelperText>
)}
<Select
className="mb-4 mr-4"
label="units"
onBlur={handleBlur}
onChange={handleChange}
options={['lbs']}
outlined
name="bodyWeightIsInLbs"
value={values.bodyWeightIsInLbs}
/>
</GridCell>

<div className="max">
<Checkbox
onChange={handleChange}
value={values.workoutOnSunday}
name="workoutOnSunday"
label="Sunday"
/>
<GridCell span="6">
<Typography use="overline" tag="div">
Workout days
</Typography>
<ListDivider />
<Checkbox
onChange={handleChange}
value={values.workoutOnSunday}
name="workoutOnSunday"
label="Sunday"
/>

<Checkbox
onChange={handleChange}
value={values.workoutOnMonday}
name="workoutOnMonday"
label="Monday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnTuesday}
name="workoutOnTuesday"
label="Tuesday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnWednesday}
name="workoutOnWednesday"
label="Wednesday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnThursday}
name="workoutOnThursday"
label="Thursday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnFriday}
name="workoutOnFriday"
label="Friday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnSaturday}
name="workoutOnSaturday"
label="Saturday"
/>
</div>

<Typography use="overline" tag="div" className="mx-4">
Preview
</Typography>
<ListDivider />

<Typography use="headline6" tag="div" className="mx-4">
Macros Rest
</Typography>
<Preview {...computeMacros(values)} />

<Typography use="headline6" tag="div" className="mx-4">
Macros Workout
</Typography>
<Preview {...computeMacros(values, true)} />

<ListDivider />
<Checkbox
onChange={handleChange}
value={values.workoutOnMonday}
name="workoutOnMonday"
label="Monday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnTuesday}
name="workoutOnTuesday"
label="Tuesday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnWednesday}
name="workoutOnWednesday"
label="Wednesday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnThursday}
name="workoutOnThursday"
label="Thursday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnFriday}
name="workoutOnFriday"
label="Friday"
/>
<Checkbox
onChange={handleChange}
value={values.workoutOnSaturday}
name="workoutOnSaturday"
label="Saturday"
/>
</GridCell>
</Grid>

<div
className={`banner p-4 text-center${
className={`banner text-center${
this.state.isSaved ? ' banner-open' : ''
}`}
>
Expand All @@ -217,22 +201,49 @@ class Calculator extends React.Component {
</Link>
</Typography>
</div>
<footer className="flex max justify-end mt-4 mb-8">
<footer className="flex justify-end mt-4 mb-8">
<Button onClick={handleReset}>reset</Button>
<Button type="submit" disabled={isSubmitting}>
save
</Button>
</footer>
<Typography use="headline5" tag="div" className="mx-4 mt-4">
Preview Macros
</Typography>

<Grid>
<GridCell span="6">
<Typography use="overline" tag="div">
Rest
</Typography>
<ListDivider />
<Preview {...computeMacros(values)} />
</GridCell>
<GridCell span="6">
<Typography use="overline" tag="div">
Workout
</Typography>
<ListDivider />
<Preview {...computeMacros(values, true)} />
</GridCell>
</Grid>

<ListDivider />
</Form>

<style jsx>{`
.banner {
background-color: var(--mdc-theme-secondary);
opacity: 0;
height: 0;
padding: 0;
margin: 0;
}
.banner-open {
transition: all 0.3s ease-in;
opacity: 1;
height: auto;
padding: 1rem;
}
.link {
color: white;
Expand Down
20 changes: 15 additions & 5 deletions src/calculator/Preview.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import numeral from 'numeral';
import { List, SimpleListItem } from 'rmwc/List';

function formatNumber(number, format) {
return numeral(number).format(format || '0');
Expand All @@ -9,11 +10,20 @@ class Preview extends Component {
render() {
const { calories, carbs, fat, protein } = this.props;
return (
<div className="m-4">
calories {formatNumber(calories, '0,0')}, carbs {formatNumber(carbs)}
g, fat {formatNumber(fat)}
g, protein {formatNumber(protein)}g
</div>
<List>
<SimpleListItem graphic="trip_origin">
{formatNumber(calories, '0,0')} cal
</SimpleListItem>
<SimpleListItem graphic="trip_origin">
Carbs {formatNumber(carbs)}g
</SimpleListItem>
<SimpleListItem graphic="trip_origin">
Fat {formatNumber(fat)} g
</SimpleListItem>
<SimpleListItem graphic="trip_origin">
Protein {formatNumber(protein)}g
</SimpleListItem>
</List>
);
}
}
Expand Down

0 comments on commit ba0256a

Please sign in to comment.