1
Fork 0

Add see more button to projects

This commit is contained in:
Jake Howard 2016-02-29 08:48:37 +00:00
parent 06b46cd639
commit b25e5e70f1
2 changed files with 14 additions and 3 deletions

View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
var ReactBootstrap = require('react-bootstrap'); var ReactBootstrap = require('react-bootstrap');
import ProjectImage from './project-image'; import ProjectImage from './project-image';
import Reverser from '../../helpers/reverser';
var Row = ReactBootstrap.Row; var Row = ReactBootstrap.Row;
const DATA = [ const DATA = [
@ -42,7 +43,8 @@ export default class ProjectImagesMain extends React.Component {
super(); super();
this.keys = [[1, 2, 3], [4, 5, 6]]; this.keys = [[1, 2, 3], [4, 5, 6]];
this.state = { this.state = {
hover: 0 hover: 0,
seeMoreURL: ''
}; };
this.setHovering = this.setHovering.bind(this); this.setHovering = this.setHovering.bind(this);
this._generate_image = this._generate_image.bind(this); this._generate_image = this._generate_image.bind(this);
@ -62,6 +64,12 @@ export default class ProjectImagesMain extends React.Component {
); );
} }
componentDidMount() {
Reverser('projects:all', [], function (url) {
this.setState({ seeMoreURL: url});
}.bind(this));
}
render() { render() {
var images = this.keys.map(function (keyColumns) { var images = this.keys.map(function (keyColumns) {
var col = keyColumns.map(function (key) { var col = keyColumns.map(function (key) {
@ -73,6 +81,9 @@ export default class ProjectImagesMain extends React.Component {
<div className="container"> <div className="container">
<h1>Personal Projects</h1> <h1>Personal Projects</h1>
{ images } { images }
<a href={this.state.seeMoreURL}>
<h3>See More...</h3>
</a>
</div> </div>
); );
} }

View file

@ -113,8 +113,8 @@
} }
.container { .container {
text-align: center; text-align: center;
margin-top: 27px; margin-top: 25px;
margin-bottom: 35px; margin-bottom: 15px;
h1 { h1 {
margin-top: 0; margin-top: 0;
margin-bottom: 30px; margin-bottom: 30px;