diff --git a/client/assets/js/bubble.js b/client/assets/js/bubble.js index 9f5d455..79c0537 100644 --- a/client/assets/js/bubble.js +++ b/client/assets/js/bubble.js @@ -1,4 +1,4 @@ -var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; +let width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; // Main export function bubble() { diff --git a/client/assets/scss/Content.scss b/client/assets/scss/Content.scss index fdd6a11..1972f84 100644 --- a/client/assets/scss/Content.scss +++ b/client/assets/scss/Content.scss @@ -1,20 +1,19 @@ .Content { - flex: 1; - flex-wrap: wrap; - min-width: 0; - .post + .post { + flex: 1; + flex-wrap: wrap; + min-width: 0; + .post+ .post { margin-top: 2em; } .date { display: block; margin: 0; opacity: 0.7; - - @media (min-width: 1200px){ - position: absolute; - width: 7em; - text-align: right; - margin-left: -8em; + @media (min-width: 1200px) { + position: absolute; + width: 7em; + text-align: right; + margin-left: -8em; } } .intro { @@ -29,7 +28,7 @@ pre { white-space: pre-wrap; } - .btn{ + .btn { width: 100%; } } diff --git a/client/assets/scss/Sidebar.scss b/client/assets/scss/Sidebar.scss index c3f86f0..d62afa2 100644 --- a/client/assets/scss/Sidebar.scss +++ b/client/assets/scss/Sidebar.scss @@ -33,7 +33,7 @@ $transitionDuration: 0.4s; &:before { content: " "; display: block; - background: rgba(0,0,0,0.4); + background: rgba(0, 0, 0, 0.4); position: absolute; height: 100%; width: 100vw; diff --git a/client/assets/scss/main.scss b/client/assets/scss/main.scss index 0c58bf9..9cc7924 100644 --- a/client/assets/scss/main.scss +++ b/client/assets/scss/main.scss @@ -1,14 +1,13 @@ @import './utils.scss'; - $linkColor: #3598db; $backgroundColor: #FFFFFF; - html { font-family: 'Roboto Slab', serif; max-width: 100%; overflow-x: hidden; overflow-y: scroll; } + body { background-color: $backgroundColor; max-width: 100%; @@ -17,6 +16,7 @@ body { -webkit-font-smoothing: subpixel-antialiased; font-weight: 300; } + h1, h2, h3, @@ -27,9 +27,11 @@ h6 { font-weight: 400; line-height: 1em; } + p { font-weight: 300; } + *, *:after, *:before { @@ -37,6 +39,7 @@ p { -moz-box-sizing: border-box; box-sizing: border-box; } + a { background-color: transparent; color: $linkColor; @@ -45,11 +48,13 @@ a { color: $linkColor; } } + hr { margin: 1em; border: 0; border-top: 1px solid #eee; } + .Footer, .Main { display: flex; @@ -61,9 +66,11 @@ hr { width: 1em; } } + .Main { padding-top: 1em; } + .Header { width: 100%; background: url("../images/header.jpg"); @@ -76,19 +83,20 @@ hr { text-align: center; } } -.Loading{ + +.Loading { display: flex; flex: 1; justify-content: center; } -.btn{ + +.btn { background-color: $backgroundColor; border: 1px solid #DADADA; border-radius: .2em; cursor: pointer; padding: .5em; - - &:hover{ + &:hover { background-color: #F3F3F3; } } \ No newline at end of file diff --git a/client/js/app.js b/client/js/app.js index 65d0f33..54c9c80 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -13,22 +13,22 @@ import * as actions from './redux/actions'; import Index from './pages/Index'; -class Main extends React.Component{ - render(){ - return( +class Main extends React.Component { + render() { + return (
{React.cloneElement(this.props.children, this.props)}
); } } -function mapStateToProps(state){ +function mapStateToProps(state) { return { redux: state.reducer } } -function mapDispatchToProps(dispatch){ - return{ +function mapDispatchToProps(dispatch) { + return { actions: bindActionCreators(actions, dispatch) } } @@ -44,4 +44,4 @@ ReactDOM.render(( -),document.getElementById('app')); +), document.getElementById('app')); diff --git a/client/js/components/Footer.js b/client/js/components/Footer.js index a15159c..068eea4 100644 --- a/client/js/components/Footer.js +++ b/client/js/components/Footer.js @@ -2,10 +2,10 @@ import React from 'react'; import '../../assets/scss/Footer.scss'; -export default class Footer extends React.Component{ +export default class Footer extends React.Component { - render(){ - return( + render() { + return (
Site created and maintained by Mitchell Gerber
diff --git a/client/js/components/Header.js b/client/js/components/Header.js index 880c266..491e357 100644 --- a/client/js/components/Header.js +++ b/client/js/components/Header.js @@ -1,13 +1,13 @@ import React from 'react'; import {bubble} from '../../assets/js/bubble'; -export default class Header extends React.Component{ - componentDidMount(){ +export default class Header extends React.Component { + componentDidMount() { bubble(); } - render(){ - return( + render() { + return ( diff --git a/client/js/components/Post.js b/client/js/components/Post.js index 169e054..a6c0d0a 100644 --- a/client/js/components/Post.js +++ b/client/js/components/Post.js @@ -1,23 +1,23 @@ +import hljs from 'highlight.js'; +import marked from 'marked'; import React from 'react'; import {Link} from 'react-router'; -import marked from 'marked'; -import hljs from 'highlight.js'; import '../../assets/scss/Content.scss'; const renderer = new marked.Renderer(); marked.setOptions({ - langPrefix: 'hljs ', - highlight: (code) => { - return hljs.highlightAuto(code).value; - } + langPrefix: 'hljs ', + highlight: (code) => { + return hljs.highlightAuto(code).value; + } }); -export default class Post extends React.Component{ +export default class Post extends React.Component { - render(){ - return( + render() { + return (
diff --git a/client/js/components/Preview.js b/client/js/components/Preview.js index 8c38a30..d4dc511 100644 --- a/client/js/components/Preview.js +++ b/client/js/components/Preview.js @@ -3,11 +3,11 @@ import {Link} from 'react-router'; import '../../assets/scss/Content.scss'; -export default class Preview extends React.Component{ +export default class Preview extends React.Component { - insertPosts(posts){ + insertPosts(posts) { let elements = []; - for (let i = 0; i < this.props.postLimit && i < posts.length; i++){ + for (let i = 0; i < this.props.postLimit && i < posts.length; i++) { elements.push(
@@ -27,9 +27,9 @@ export default class Preview extends React.Component{ return elements; } - render(){ + render() { const posts = this.props.posts; - + return (
{posts.length > 0 ? this.insertPosts(posts): null} diff --git a/client/js/components/Sidebar.js b/client/js/components/Sidebar.js index a0026c2..33cce28 100644 --- a/client/js/components/Sidebar.js +++ b/client/js/components/Sidebar.js @@ -7,9 +7,9 @@ import SensorList from './sensors/SensorList'; import me from '../../assets/images/me.jpg'; import '../../assets/scss/Sidebar.scss'; -export default class Sidebar extends React.Component{ +export default class Sidebar extends React.Component { - constructor(){ + constructor() { super(); this.state = { @@ -19,7 +19,7 @@ export default class Sidebar extends React.Component{ this.onToggle = this.onToggle.bind(this); } - onToggle(){ + onToggle() { let temp = this.state.toggler; temp = temp === "open" ? "" : "open"; @@ -28,8 +28,8 @@ export default class Sidebar extends React.Component{ }); } - render(){ - return( + render() { + return (
); } - render(){ + render() { return (
{this.state.fetched ? this.state.sensors.map(this.insertSensorData) : null} diff --git a/client/js/pages/Index.js b/client/js/pages/Index.js index 4b6468e..09602e2 100644 --- a/client/js/pages/Index.js +++ b/client/js/pages/Index.js @@ -17,31 +17,31 @@ import '../../assets/css/dracula.css'; import loading from '../../assets/images/loading.svg'; export default class Index extends React.Component { - componentDidMount() { - this.props.actions.fetchPreview(); - this.page = this.props.params.page; - this.page === 'post' ? this.props.actions.fetchPost(this.props.params.category, this.props.params.post) : ""; + componentDidMount() { + this.props.actions.fetchPreview(); + this.page = this.props.params.page; + this.page === 'post' ? this.props.actions.fetchPost(this.props.params.category, this.props.params.post) : ""; + } + + + componentWillReceiveProps(nextProps) { + if (this.props.params !== nextProps.params) { + const params = nextProps.params; + this.page = params.page; + + if (typeof params.post !== 'undefined' && typeof params.category !== 'undefined') { + this.props.actions.fetchPost(params.category, params.post); + } } + } + render() { + const fetched = this.props.redux.fetched; + const fetching = this.props.redux.fetching; - componentWillReceiveProps(nextProps){ - if(this.props.params !== nextProps.params){ - const params = nextProps.params; - this.page = params.page; - - if(typeof params.post !== 'undefined' && typeof params.category !== 'undefined'){ - this.props.actions.fetchPost(params.category, params.post); - } - } - } - - render() { - const fetched = this.props.redux.fetched; - const fetching = this.props.redux.fetching; - - return ( -
-
+ return ( +
+
{typeof this.page === 'undefined' && !fetching ? : null} {fetching ? loadingElement : null} - +
-
+
- ); - } + ); + } } const loadingElement =
diff --git a/client/js/redux/actions.js b/client/js/redux/actions.js index a191abd..77568f9 100644 --- a/client/js/redux/actions.js +++ b/client/js/redux/actions.js @@ -2,7 +2,7 @@ import * as types from "./constants"; import marked from 'marked'; import 'whatwg-fetch'; -export function increasePostLimit(){ +export function increasePostLimit() { return { type: types.INCREASE_POST_LIMIT } @@ -15,15 +15,15 @@ function initPreview(posts) { } } -function loadPost(post){ +function loadPost(post) { return { - type: types.LOAD_POST, - post + type: types.LOAD_POST, + post } } -function fetching(){ - return{ +function fetching() { + return { type: types.FETCHING } } diff --git a/client/js/redux/constants.js b/client/js/redux/constants.js index 6d21a68..5eb537f 100644 --- a/client/js/redux/constants.js +++ b/client/js/redux/constants.js @@ -1,6 +1,6 @@ //constants +export const INCREASE_POST_LIMIT = 'INCREASE_POST_LIMIT'; export const INIT_PREVIEW = 'INIT_PREVIEW'; -export const FILTER_PREVIEW = 'FILTER_PREVIEW'; -export const LOAD_POST = 'LOAD_POST'; export const FETCHING = 'FETCHING'; -export const INCREASE_POST_LIMIT = 'INCREASE_POST_LIMIT'; \ No newline at end of file +export const FILTER_PREVIEW = 'FILTER_PREVIEW'; +export const LOAD_POST = 'LOAD_POST'; \ No newline at end of file diff --git a/client/js/redux/reducers.js b/client/js/redux/reducers.js index ebf0d11..79a76d2 100644 --- a/client/js/redux/reducers.js +++ b/client/js/redux/reducers.js @@ -1,10 +1,6 @@ //just using one reducer - use combineReducers from redux to modularize things -import { - combineReducers -} from 'redux'; -import { - routerReducer -} from 'react-router-redux'; +import {combineReducers} from 'redux'; +import {routerReducer} from 'react-router-redux'; //import typs import * as types from './constants'; @@ -38,12 +34,12 @@ function reducer(state = defaultState, action) { }); case types.FETCHING: return Object.assign({}, state, { - fetched : false, + fetched: false, fetching: true }); case types.INCREASE_POST_LIMIT: return Object.assign({}, state, { - postLimit : state.postLimit + 10 + postLimit: state.postLimit + 10 }); } diff --git a/client/js/redux/store.js b/client/js/redux/store.js index fc5dc04..4206e8e 100644 --- a/client/js/redux/store.js +++ b/client/js/redux/store.js @@ -1,8 +1,8 @@ -import {applyMiddleware, createStore} from 'redux'; -import {syncHistoryWithStore} from 'react-router-redux'; -import {browserHistory} from 'react-router'; -import thunk from 'redux-thunk'; import logger from 'redux-logger'; +import thunk from 'redux-thunk'; +import {applyMiddleware, createStore} from 'redux'; +import {browserHistory} from 'react-router'; +import {syncHistoryWithStore} from 'react-router-redux'; import reducers from './reducers';