From 350a1b94d9a541d27a176c7c733f0cacaa731384 Mon Sep 17 00:00:00 2001
From: Jake Howard <jake@theorangeone.net>
Date: Fri, 13 Nov 2015 18:14:54 +0000
Subject: [PATCH] Made project image component more generic

---
 static/src/js/app.js                          |   4 +-
 static/src/js/components/project-image.js     |   2 +-
 ...ject-images.js => project-images-types.js} |   4 +-
 static/src/less/homepage.less                 | 132 +++++++++---------
 templates/index.html                          |   2 +-
 5 files changed, 75 insertions(+), 69 deletions(-)
 rename static/src/js/components/{project-images.js => project-images-types.js} (93%)

diff --git a/static/src/js/app.js b/static/src/js/app.js
index 44328b6..949187d 100644
--- a/static/src/js/app.js
+++ b/static/src/js/app.js
@@ -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'));
\ No newline at end of file
+React.render(<ProjectImagesTypes />, document.getElementById('project-images-types'));
\ No newline at end of file
diff --git a/static/src/js/components/project-image.js b/static/src/js/components/project-image.js
index 590cffd..9cb879d 100644
--- a/static/src/js/components/project-image.js
+++ b/static/src/js/components/project-image.js
@@ -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}
diff --git a/static/src/js/components/project-images.js b/static/src/js/components/project-images-types.js
similarity index 93%
rename from static/src/js/components/project-images.js
rename to static/src/js/components/project-images-types.js
index 41ac336..659bb92 100644
--- a/static/src/js/components/project-images.js
+++ b/static/src/js/components/project-images-types.js
@@ -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;
\ No newline at end of file
+module.exports = projectImagesTypes;
\ No newline at end of file
diff --git a/static/src/less/homepage.less b/static/src/less/homepage.less
index b78da1b..3433a86 100644
--- a/static/src/less/homepage.less
+++ b/static/src/less/homepage.less
@@ -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 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+/* @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 */
diff --git a/templates/index.html b/templates/index.html
index 685ea31..4eb0a39 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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">