Add see more button to projects
This commit is contained in:
parent
06b46cd639
commit
b25e5e70f1
2 changed files with 14 additions and 3 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in a new issue