mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-10 18:02:51 +00:00
Code Issues Releases Wiki Activity

beautified

Browse Source
This commit is contained in:
mgerb42
2016-09-01 13:11:17 +00:00
parent f8ccec7ae0
commit f8c89b4486
16 changed files with 107 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/assets/js/bubble.js
View File

@@ -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() {

21
client/assets/scss/Content.scss
View File

@@ -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%;
}
}

2
client/assets/scss/Sidebar.scss
View File

@@ -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;

20
client/assets/scss/main.scss
View File

@@ -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;
}
}

14
client/js/app.js
View File

@@ -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 (
<div>{React.cloneElement(this.props.children, this.props)}</div>
);
}
}
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((
</Route>
</Router>
</Provider>
),document.getElementById('app'));
), document.getElementById('app'));

6
client/js/components/Footer.js
View File

@@ -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 (
<div class="Footer">
Site created and maintained by Mitchell Gerber
</div>

8
client/js/components/Header.js
View File

@@ -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 (
<header id="header" class="Header">
<canvas id="canvas" width="854" height="709"></canvas>
</header>

18
client/js/components/Post.js
View File

@@ -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 (
<div class="Content">
<div dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
</div>

10
client/js/components/Preview.js
View File

@@ -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(
<div class="post" key={i}>
<div class="date">
@@ -27,9 +27,9 @@ export default class Preview extends React.Component{
return elements;
}
render(){
render() {
const posts = this.props.posts;
return (
<div class="Content">
{posts.length > 0 ? this.insertPosts(posts): null}

10
client/js/components/Sidebar.js
View File

@@ -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 (
<div class={"Sidebar " + this.state.toggler}>
<a onClick={this.onToggle} class="toggler">
<i

10
client/js/components/sensors/SensorList.js
View File

@@ -3,21 +3,21 @@ import 'whatwg-fetch';
export default class SensorList extends React.Component {
constructor(){
constructor() {
super();
this.state = {
sensors : {},
sensors: {},
fetching: false,
fetched: false
}
}
componentDidMount(){
componentDidMount() {
this.loadSensorData();
}
loadSensorData(){
loadSensorData() {
this.setState({
fetching: true
});
@@ -49,7 +49,7 @@ export default class SensorList extends React.Component {
</div>
);
}
render(){
render() {
return (
<div>
{this.state.fetched ? this.state.sensors.map(this.insertSensorData) : null}

52
client/js/pages/Index.js
View File

@@ -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 (
<div>
<Header />
return (
<div>
<Header/>
<div class="Main">
{typeof this.page === 'undefined' && !fetching
? <Preview posts={this.props.redux.preview.posts}
@@ -50,12 +50,12 @@ export default class Index extends React.Component {
: null}
{this.page === 'post' && !fetching ? <Post content={this.props.redux.post}/> : null}
{fetching ? loadingElement : null}
<Sidebar />
<Sidebar/>
</div>
<Footer />
<Footer/>
</div>
);
}
);
}
}
const loadingElement = <div class="Loading">

12
client/js/redux/actions.js
View File

@@ -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
}
}

6
client/js/redux/constants.js
View File

@@ -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';
export const FILTER_PREVIEW = 'FILTER_PREVIEW';
export const LOAD_POST = 'LOAD_POST';

12
client/js/redux/reducers.js
View File

@@ -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
});
}

8
client/js/redux/store.js
View File

@@ -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';