Bootstrap setup and beautification of application #3

Merged
merged 1 commit into from Jan 10, 2017
View
@@ -13,6 +13,7 @@
"dependencies": {
"jquery": "^3.1.1",
"react": "^15.4.2",
+ "react-bootstrap": "^0.30.7",
@shivabhusal
shivabhusal Jan 10, 2017 Owner

Command I used

npm i react-bootstrap --save
"react-dom": "^15.4.2"
},
"devDependencies": {
View
@@ -4,13 +4,15 @@ import TodoList from './components/todo-list';
// Simplest way to embed you stylesheets in your app
// requiring in main JS file is enough for whole application
+require ('./styles/spacer.scss');
require ('./styles/index.scss');
export default class App extends React.Component {
render() {
return (
<div>
- <h1> To do app in React.js</h1>
+ <h2>ToDo Manager</h2>
+ <h4>Manage your small reminders</h4>
<TodoList />
</div>
@@ -1,4 +1,5 @@
import React from 'react';
+import {Button} from 'react-bootstrap';
export default class TodoItem extends React.Component {
constructor(props) {
@@ -32,12 +33,24 @@ export default class TodoItem extends React.Component {
render() {
console.log('I am executed');
return (
- <li>
- <span onClick={this.clickHandler} className={this.stateSelector()}>
- {this.state.text}
- </span>
- <button onClick={this.deleteHandler}>Delete</button>
- </li>
+ <tr>
+ <td>
+ {this.state.id}
+ </td>
+ <td>
+ <span onClick={this.clickHandler} className={this.stateSelector()}>
+ {this.state.text}
+ </span>
+ </td>
+
+ <td>
+ <Button bsStyle="danger" bsSize="xsmall" onClick={this.deleteHandler}>
+ <i className="fa fa-trash"/>
+ &nbsp;Delete
+ </Button>
+ </td>
+
+ </tr>
);
}
}
@@ -1,5 +1,8 @@
import React from 'react';
import TodoItem from './todo-item';
+import {Table, Form, FormGroup, FormControl, Button} from 'react-bootstrap';
+
+//--------------------------------------------------------------------------------
export default class TodoList extends React.Component {
@@ -29,6 +32,9 @@ export default class TodoList extends React.Component {
// todo: need to find a better solution for this; maybe using jQuery
var textField = e.target.querySelectorAll('[name="new-item"]')[0];
+ // Make sure empty objects are skipped
+ if(textField.value.trim() == '') return(textField.focus());
+
// `setState` updates the state directory/database and notifies the dynamic binding
// feature of React.js
// Note: normal assignment of new-state data will not update the view/DOM
@@ -77,15 +83,27 @@ export default class TodoList extends React.Component {
render() {
return (
- <div>
- <form onSubmit={this.submitHandler}>
- <input type="text" name="new-item"/>
- <input type="submit"/>
- </form>
+ <div className="col-md-8 margin40top">
+ <Form inline onSubmit={this.submitHandler}>
+ <FormGroup>
+ <FormControl type="text" name="new-item" placeholder="You task description here."/>
+ {' '}
+ <Button type="submit"> Add </Button>
+ </FormGroup>
+ </Form>
- <ul>
+ <Table className="margin10top" striped bordered condensed hover>
+ <thead>
+ <tr>
+ <th>S.N.</th>
+ <th>Task</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
{ this.list()}
- </ul>
+ </tbody>
+ </Table>
</div>
);
}
View
@@ -1,11 +1,14 @@
<!DOCTYPE html>
<html>
<head>
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
+ <link rel="stylesheet" href="styles/font-awesome/css/font-awesome.min.css">
<title>React ToDos App</title>
</head>
<body>
-<div id="app"/>
+<div id="app" class="container"/>
<script src="/bundle.js"></script>
</body>
</html>
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,38 @@
+/* Styles related to spacing are found here */
@shivabhusal
shivabhusal Jan 10, 2017 edited Owner

This is a utility helper file which creates most of the spaces classes which we are gonna need down the road.

This is not compulsory but is very useful.

+$positions: top right bottom left;
+$types: margin padding;
+
+/* Eg: .margin10top */
+/* Eg: .padding10top */
+@each $type in $types {
+ @each $position in $positions {
+ @for $index from 0 through 20 {
+ $value: $index * 5;
+ .#{$type}#{$value}#{$position} {
+ #{$type}-#{$position}: #{$value}px;
+ }
+ }
+ }
+}
+
+/* Eg: .margin10all */
+/* Eg: .padding10all */
+@each $type in $types {
+ @for $index from 0 through 20 {
+ $value: $index * 5;
+ .#{$type}#{$value}all {
+ #{$type}: #{$value}px;
+ }
+ }
+}
+
+/* Eg: .min500height */
+/* Eg: .min4500height */
+/* Eg: .min100height */
+/* Eg: .min50height */
+@for $index from 1 through 30 {
+ $value: $index * 25;
+ .min#{$value}height {
+ min-height: #{$value}px;
+ }
+}