From 3904274d1b360f6a83195fa6aab2cbe5af4a7383 Mon Sep 17 00:00:00 2001 From: Rael Max Date: Thu, 17 Nov 2016 18:01:24 -0200 Subject: [PATCH] Refactor to improve css maintainability, moving from js objects to plain css --- README.md | 26 ---------- src/app.css | 86 ++++++++++++++++++++++++++++++++++ src/components/AddForm.jsx | 14 +----- src/components/BuyItemForm.jsx | 43 ++--------------- src/components/Header.js | 29 ++---------- src/components/List.jsx | 8 +--- src/components/ListItem.jsx | 26 ++-------- src/components/Total.js | 14 +----- src/index.js | 5 +- 9 files changed, 106 insertions(+), 145 deletions(-) create mode 100644 src/app.css diff --git a/README.md b/README.md index ad99871..8191265 100644 --- a/README.md +++ b/README.md @@ -25,29 +25,3 @@ It correctly bundles React in production mode and optimizes the build for the be The build is minified and the filenames include the hashes.
Your app is ready to be deployed! - -# Components - - - - - - ... - - - - - - - - - ... - - - - - - - || - - diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..5592fbc --- /dev/null +++ b/src/app.css @@ -0,0 +1,86 @@ +.add-form-wrapper { + background: #4B698B; + padding: 10px; +} +.add-form-input { + padding: 5px 10px; + width: 100%; + color: #444; +} + +.buy-item-form { + background-color: #D4DDE7; + border: 1px solid #133253; + margin: -75px 0 0 -125px; + position: absolute; + max-width: 250px; + height: 150px; + padding: 20px; + left: 50%; + top: 50%; +} +.buy-item-input { + border: 1px solid #f9f9f9; + margin-bottom: 2px; + text-align: right; + padding: 10px; + width: 100%; +} +.buy-item-button { + background-color: #2B4C6F; + border: none; + padding: 5px; + color: #fff; + width: 50%; +} +.buy-item-button-cancel { + background-color: #A5B7CA; +} + +.header { + background-color: #133253; + padding: 15px 10px; + position: relative; +} +.header-text { + text-transform: uppercase; + text-align: center; + font-size: 1em; + color: #fff; + margin: 0; +} +.header-back-button { + text-decoration: none; + position: absolute; + line-height: 40px; + font-size: 50px; + color: #fff; + top: 0; +} + +.list-default { + padding: 15px 10px; + margin: 0 0 40px 0; + list-style: none; +} +.list-default-item { + border-bottom: 1px solid #D4DDE7; + padding: 10px 5px; + cursor: pointer; + color: #2B4C6F; +} +.list-default-item-bought { + text-decoration: line-through; +} + +.total-info { + background-color: #133253; + text-align: right; + position: fixed; + padding: 10px; + height: 40px; + color: #fff; + width: 100%; + bottom: 0; + margin: 0; +} diff --git a/src/components/AddForm.jsx b/src/components/AddForm.jsx index e58f4b4..e8ffee1 100644 --- a/src/components/AddForm.jsx +++ b/src/components/AddForm.jsx @@ -1,24 +1,14 @@ import React, { PropTypes } from 'react'; -const wrapperStyles = { - backgroundColor: '#4B698B', - padding: 10, -} -const inputStyles = { - padding: '5px 10px', - width: '100%', - color: '#444' -} - const AddForm = ({ onAddFormSubmit, placeholderText }) => { let input; return ( -
+
{ e.preventDefault(); onAddFormSubmit(input); }}> - {input = node}} type={"text"} placeholder={placeholderText} style={inputStyles} /> + {input = node}} type={"text"} placeholder={placeholderText} />
) diff --git a/src/components/BuyItemForm.jsx b/src/components/BuyItemForm.jsx index 3c4bc95..6b4549f 100644 --- a/src/components/BuyItemForm.jsx +++ b/src/components/BuyItemForm.jsx @@ -1,38 +1,5 @@ import React, { PropTypes } from 'react'; -const formStyles = { - position: 'absolute', - backgroundColor: '#D4DDE7', - border: '1px solid #133253', - margin: '-75px 0 0 -125px', - maxWidth: '250px', - height: '150px', - padding: '20px', - left: '50%', - top: '50%', -} - -const inputStyles = { - border: '1px solid #f9f9f9', - padding: '10px', - width: '100%', - textAlign: 'right', - marginBottom: '2px' -} - -let buttonStyles = { - backgroundColor: '#2B4C6F', - border: 'none', - padding: '5px', - color: '#fff', - width: '50%', -} - -let cancelButtonStyles = Object.assign({}, buttonStyles, { - backgroundColor: '#A5B7CA' -}) - - const BuyItemForm = ({ openDialog, listId, id, onCloseDialog, onSubmit }) => { let price; let quantity; @@ -40,14 +7,14 @@ const BuyItemForm = ({ openDialog, listId, id, onCloseDialog, onSubmit }) => { return (
{openDialog ? ( -
{ + { e.preventDefault(); onSubmit(listId, id, quantity.value, price.value); }}> - {quantity = node}} type={"number"} placeholder={"quantidade"} style={inputStyles} /> - {price = node}} type={"number"} step={"any"} min={0} placeholder={"preço"} style={inputStyles} /> - - + {quantity = node}} type={"number"} placeholder={"quantidade"} /> + {price = node}} type={"number"} step={"any"} min={0} placeholder={"preço"} /> + +
) : null }
) diff --git a/src/components/Header.js b/src/components/Header.js index b5994ef..85b80b6 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,34 +1,11 @@ import React from 'react'; import { Link } from 'react-router'; -const headerStyles = { - backgroundColor: '#133253', - padding: '15px 10px', - position: 'relative' -} - -const textStyles = { - textTransform: 'uppercase', - textAlign: 'center', - fontSize: '1em', - color: '#fff', - margin: 0, -} - -const linkStyles = { - textDecoration: 'none', - position: 'absolute', - lineHeight: '40px', - fontSize: '50px', - color: '#fff', - top: 0 -} - const Header = ({text, backButton}) => { return ( -
- {backButton ? ‹ : null} -

{text}

+
+ {backButton ? ‹ : null} +

{text}

) } diff --git a/src/components/List.jsx b/src/components/List.jsx index 8db98cb..e2b1441 100644 --- a/src/components/List.jsx +++ b/src/components/List.jsx @@ -1,14 +1,8 @@ import React, { PropTypes } from 'react'; import ListItem from './ListItem'; -const listStyles = { - padding: '15px 10px', - listStyle: 'none', - margin: '0 0 40px 0', -} - const List = ({ listItems, listId, onListItemClick }) => ( -
    +
      {listItems.map(listItem => { - let styles; - - if (bought) { - styles = Object.assign({}, itemStyles, { - textDecoration: 'line-through' - }) - } else { - styles = itemStyles; - } - - return ( -
    • {text}
      • - ) -} +const ListItem = ({ onClick, text, id, bought }) => ( +
    • {text}
      • +) ListItem.propTypes = { onClick: PropTypes.func.isRequired, diff --git a/src/components/Total.js b/src/components/Total.js index e8f19d5..bc70784 100644 --- a/src/components/Total.js +++ b/src/components/Total.js @@ -1,19 +1,7 @@ import React from 'react'; -const totalStyles = { - backgroundColor: '#133253', - textAlign: 'right', - position: 'fixed', - padding: '10px', - color: '#fff', - width: '100%', - height: '40px', - bottom: 0, - margin: 0, -} - const Total = ({ total = 0 }) => ( -

      Total: R$ {total}

      +

      Total: R$ {total}

      ) export default Total; diff --git a/src/index.js b/src/index.js index 0cd1f8b..39766fb 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; -import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux'; import { Router, Route, hashHistory } from 'react-router'; +import { syncHistoryWithStore, routerMiddleware } from 'react-router-redux'; + +import './app.css'; + import ShoppingList from './components/ShoppingList'; import ShoppingListDetail from './components/ShoppingListDetail'; import shoppingListApp from './reducers/Index';