# HG changeset patch # User ymh # Date 1495468759 -7200 # Node ID b52921a63e775356bb616f79d1e1a5fc8125471c # Parent 431977d7c9a65ee563b2a1356fdfec00a953728f add scss + bootstrap diff -r 431977d7c9a6 -r b52921a63e77 .hgignore --- a/.hgignore Mon May 22 14:34:35 2017 +0200 +++ b/.hgignore Mon May 22 17:59:19 2017 +0200 @@ -2,3 +2,21 @@ ^client/node_modules ^client/\.vscode ^client/build + +^client/.*\.css$ + +# testing +^client/coverage + +# misc +\.DS_Store +\.env\.local +\.env\.development\.local +\.env\.test\.local +\.env\.production\.local + +npm-debug\.log.* +yarn-debug\.log.* +yarn-error\.log.* + + diff -r 431977d7c9a6 -r b52921a63e77 client/package.json --- a/client/package.json Mon May 22 14:34:35 2017 +0200 +++ b/client/package.json Mon May 22 17:59:19 2017 +0200 @@ -3,8 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "bootstrap-sass": "^3.3.7", "immutable": "^3.8.1", "react": "^15.5.4", + "react-bootstrap": "^0.31.0", "react-dom": "^15.5.4", "react-redux": "^5.0.5", "redux": "^3.6.0", @@ -12,11 +14,16 @@ "uuid": "^3.0.1" }, "devDependencies": { + "node-sass-chokidar": "^0.0.1", + "npm-run-all": "^4.0.2", "react-scripts": "1.0.2" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", + "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./node_modules/bootstrap-sass/assets/stylesheets src/ -o src/", + "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules --include-path ./node_modules/bootstrap-sass/assets/stylesheets src/ -o src/ --watch --recursive", + "start-js": "react-scripts start", + "start": "npm-run-all -p watch-css start-js", + "build": "npm run build-css && react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } diff -r 431977d7c9a6 -r b52921a63e77 client/src/App.css --- a/client/src/App.css Mon May 22 14:34:35 2017 +0200 +++ b/client/src/App.css Mon May 22 17:59:19 2017 +0200 @@ -1,24 +1,21 @@ .App { - text-align: center; -} + text-align: center; } .App-logo { animation: App-logo-spin infinite 20s linear; - height: 80px; -} + height: 80px; } .App-header { background-color: #222; height: 150px; padding: 20px; - color: white; -} + color: white; } .App-intro { - font-size: large; -} + font-size: large; } @keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} + from { + transform: rotate(0deg); } + to { + transform: rotate(360deg); } } diff -r 431977d7c9a6 -r b52921a63e77 client/src/App.js --- a/client/src/App.js Mon May 22 14:34:35 2017 +0200 +++ b/client/src/App.js Mon May 22 17:59:19 2017 +0200 @@ -1,23 +1,50 @@ import React, { Component } from 'react'; import logo from './logo.svg'; +import { Grid, Navbar, Jumbotron, Button, Row, Col} from 'react-bootstrap'; import './App.css'; import NotesContainer from './components/NotesContainer'; class App extends Component { render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

- < NotesContainer /> +
+ + + + + React App + + + + + + + +

Welcome to React logo

+

+ +

+

+ To get started, edit src/App.js and save to reload. +

+ + + + + + < NotesContainer /> + + +
); } } -export default App; +export default App; \ No newline at end of file diff -r 431977d7c9a6 -r b52921a63e77 client/src/App.scss --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/App.scss Mon May 22 17:59:19 2017 +0200 @@ -0,0 +1,24 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff -r 431977d7c9a6 -r b52921a63e77 client/src/_bootstrap-custom.scss --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/_bootstrap-custom.scss Mon May 22 17:59:19 2017 +0200 @@ -0,0 +1,58 @@ +/*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'; + +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset and dependencies +@import "bootstrap/normalize"; +@import "bootstrap/print"; +@import "bootstrap/glyphicons"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +@import "bootstrap/jumbotron"; +@import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +@import "bootstrap/progress-bars"; +@import "bootstrap/media"; +@import "bootstrap/list-group"; +@import "bootstrap/panels"; +@import "bootstrap/responsive-embed"; +@import "bootstrap/wells"; +@import "bootstrap/close"; + +// Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +@import "bootstrap/popovers"; +@import "bootstrap/carousel"; + +// Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; \ No newline at end of file diff -r 431977d7c9a6 -r b52921a63e77 client/src/components/NoteInput.js --- a/client/src/components/NoteInput.js Mon May 22 14:34:35 2017 +0200 +++ b/client/src/components/NoteInput.js Mon May 22 17:59:19 2017 +0200 @@ -1,5 +1,8 @@ import React, {Component} from 'react'; +import ReactDOM from 'react-dom' +import { Form, FormControl, FormGroup, Button } from 'react-bootstrap'; + import PropTypes from 'prop-types'; class NoteInput extends Component { @@ -30,15 +33,17 @@ render() { return ( -
-