1
Fork 0

Made project image component more generic

This commit is contained in:
Jake Howard 2015-11-13 18:14:54 +00:00
parent 6dcec5e701
commit 350a1b94d9
5 changed files with 75 additions and 69 deletions

View file

@ -1,5 +1,5 @@
var React = require('react');
var ProjectImages = require('./components/project-images');
var ProjectImagesTypes = require('./components/project-images-types');
$(function() { // https://css-tricks.com/snippets/jquery/smooth-scrolling/
$('a[href*=#]:not([href=#])').click(function() {
@ -20,4 +20,4 @@ $(window).load(function(){
$(window).trigger('scroll').trigger('resize');
});
React.render(<ProjectImages />, document.getElementById('project-images'));
React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));

View file

@ -7,7 +7,7 @@ var projectImage = React.createClass({
render: function () {
var animationClass = this.props.isHovered ? 'zoomIn' : 'zoomOut';
return (
<Col sm={4}>
<Col sm={4} className="project-image">
<div className={"wrapper " + this.props.data.className}>
<div className="project"
onMouseOver={this.props.onHover}

View file

@ -25,7 +25,7 @@ const DATA = [
];
var projectImages = React.createClass({
var projectImagesTypes = React.createClass({
keys: [1,2,3],
getInitialState: function () {
return {
@ -56,4 +56,4 @@ var projectImages = React.createClass({
}
});
module.exports = projectImages;
module.exports = projectImagesTypes;

View file

@ -48,68 +48,8 @@
color: white;
font-size: 40px;
}
@media screen and (max-width: @screen-xs-max) {
.wrapper,
.wrapper .project {
height: 275px;
width: 275px;
}
}
@media screen and (min-width: @screen-sm-min) {
.wrapper,
.wrapper .project {
height: 200px;
width: 200px;
}
}
@media screen and (min-width: @screen-md-min) {
.wrapper,
.wrapper .project {
height: 280px;
width: 280px;
}
}
& > div {
margin: 10px 0;
}
.wrapper {
color: white;
margin: 0 auto;
cursor: pointer;
background-size: cover;
background-position: center;
.box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
&:hover .project {
opacity: 1;
}
&.college {
background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
}
&.personal {
background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
}
&.work {
background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
}
& .project {
padding: 15px;
padding-top: 20%;
.transition(~"opacity 0.5s ease-in");
opacity: 0;
background-color: rgba(0,0,0,0.6);
p, a.btn {
font-size: 12px;
}
h4 {
font-size: 23px;
}
}
.row {
margin-bottom: 10px;
}
}
}
@ -123,4 +63,70 @@
}
}
}
}
}
/* @group project-images */
.project-image {
@media screen and (max-width: @screen-xs-max) {
.wrapper,
.wrapper .project {
height: 275px;
width: 275px;
}
}
@media screen and (min-width: @screen-sm-min) {
.wrapper,
.wrapper .project {
height: 200px;
width: 200px;
}
}
@media screen and (min-width: @screen-md-min) {
.wrapper,
.wrapper .project {
height: 280px;
width: 280px;
}
}
.wrapper {
color: white;
margin: 0 auto;
cursor: pointer;
background-size: cover;
background-position: center;
.box-shadow(0px 4px 5px 2px rgba(0,0,0,0.7));
&:hover .project {
opacity: 1;
}
&.college {
background-image: url(http://cdn.ttgtmedia.com/rms/computerweekly/39826_college-of-richard-collyer.gif);
}
&.personal {
background-image: url(http://www.inzeed.com/kaleidoscope/wp-content/uploads/2014/11/stock-footage-computer-code-background1.jpg);
}
&.work {
background-image: url(http://www.recommendedagencies.com/images/logos/dabapps-logo-1432733278.jpg);
}
& .project {
padding: 15px;
padding-top: 20%;
.transition(~"opacity 0.5s ease-in");
opacity: 0;
background-color: rgba(0,0,0,0.6);
text-align: center;
p, a.btn {
font-size: 12px;
}
h4 {
font-size: 23px;
}
}
}
}
/* @end project-images */

View file

@ -18,7 +18,7 @@
</div>
</div>
<div class="container-fluid" id="project-images"></div>
<div class="container-fluid" id="project-images-types"></div>
<div class="container-fluid" id="twitter-feed">
<div class="container">