archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Remove project item components

Browse source
This commit is contained in:
Jake Howard 2016-04-05 19:40:09 +01:00
parent 97601a7b53
commit 38f4c7a041
2 changed files with 0 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
static/src/js/components/index/project-image.js
View file

@ -1,51 +0,0 @@
import React from 'react';
import Reverser from '../../helpers/reverser';
var ReactBootstrap = require('react-bootstrap');
var Col = ReactBootstrap.Col;
export default class ProjectImage extends React.Component {
constructor() {
super();
this.state = {
url: ''
};
}
componentDidMount() {
if (!this.props.data.link || this.props.data.link === '') {
return;
}
if (this.props.data.link.startsWith('#')) {
this.setState({url: this.props.data.link});
} else {
let args;
if (this.props.data.args) {
args = [this.props.data.args];
}
Reverser(this.props.data.link, args, function (url) {
this.setState({ url });
}.bind(this));
}
}
render() {
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
var classes = this.props.data.title.toLowerCase().replace(/ /g, '-');
return (
<Col sm={4} className="project-image">
<div className={'wrapper ' + classes}>
<div className="project"
onMouseOver={this.props.onHover}
onMouseLeave={this.props.onLeave} >
<div className={'animated ' + animationClass}>
<h4>{this.props.data.title}</h4>
<p>{this.props.data.text}</p>
<a href={this.state.url} className="btn btn-default btn-small">
Find out more
</a>
</div>
</div>
</div>
</Col>
);
}
}

56
static/src/js/components/index/project-images-types.js
View file

@ -1,56 +0,0 @@
import React from 'react';
var ReactBootstrap = require('react-bootstrap');
import ProjectImage from './project-image';
var Row = ReactBootstrap.Row;
const DATA = [
{
title: 'College',
text: 'My time at college was where I learnt most about programming, and discovered my skill and passion for it.',
link: '',
},
{
title: 'Personal',
text: 'I write code just to write code, but sometimes it serves a purpose.',
link: '#project-thumbnails',
},
{
title: 'Work',
text: 'I\'m an apprentice software developer at Dabapps, and this is what I\'ve done.',
link: '',
}
];
export default class ProjectImagesTypes extends React.Component {
constructor() {
super();
this.keys = [1, 2, 3];
this.state = {
hover: 0
};
this.setHovering = this.setHovering.bind(this);
}
setHovering(key) {
this.setState({hover: key});
}
render() {
var images = this.keys.map(function (key) {
return (
<ProjectImage isHovered={this.state.hover === key}
data={DATA[key - 1]}
onHover={this.setHovering.bind(this, key)}
onLeave={this.setHovering.bind(this, 0)} />
);
}.bind(this));
return (
<div className="container">
<h1>Projects</h1>
<Row>
{ images }
</Row>
</div>
);
}
}