Styling for about page

bower.json

@@ -15,9 +15,12 @@
   ],
   "dependencies": {
     "angular-material": "~0.0.3",
+    "angular-animate": "~1.3.0-rc.4",
+    "hammerjs": "2.0.4",
     "angular-ui-router": "~0.2.11",
     "angular-pusher": "~0.0.13",
     "angular-socket-io": "~0.6.0",
+    "angular-morph": "*",
     "angular-mocks": "~1.2.26"
   },
   "resolutions": {

client/about.html

@@ -1,4 +1,100 @@
-<div>
-  <p>{Graphics of project}</p>
-  <p>{Description of project}</p>
-</div>
+<material-content class="material-content-padding">
+  <div ng-morph-overlay="settings" ng-controller="cardController">
+    <material-button class="material-button-raised material-button-colored" layout="horizontal" layout-align="center center">Network Diagram</material-button>
+  </div>
+  <div layout="horizontal" layout-align="space-between">
+    <div layout="vertical">
+      <h1 layout="vertical" layout-sm="horizontal" layout-align="center center">Front End</h1>
+      <div layout="vertical" layout-sm="horizontal" layout-align="start" layout-padding>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+            <img src="./assets/angular-logo.png" height="100px" width="100px" >
+          </div>
+          <h2 layout="horizontal" layout-align="center">Angular</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="http://venturebeat.files.wordpress.com/2014/06/google-design-google-plus-cover-material.jpg?w=780&h=9999&crop=0" height="100px" width="100px">
+          </div>
+          <h2 layout="horizontal" layout-align="center">Material Design</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="http://www.canvasdemos.com/wp-content/uploads/2011/07/getting-started-with-3.jpg" height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">Three.js</h2>
+        </div>  
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/d3-logo.png"  height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">D3</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/stylus-logo.png" height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">Stylus</h2>
+        </div>    
+      </div>
+    </div>
+    <div layout="vertical">
+      <h1 layout="vertical" layout-sm="horizontal" layout-align="center center">Drone</h1>
+      <div layout="horizontal" layout-sm="horizontal" layout-align="start" layout-padding>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+            <img src="./assets/node-logo.png" height="100px" width="100px" >
+          </div>
+          <h2 layout="horizontal" layout-align="center">Node</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/tessel-logo.png" height="100px" width="100px">
+          </div>
+          <h2 layout="horizontal" layout-align="center">Tessel</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/3d-printer-logo.png" height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">3D Printing</h2>
+        </div>
+      </div>
+    </div>
+  </div>
+<div layout="vertical">
+      <h1 layout="vertical" layout-sm="horizontal" layout-align="center center">Back-End and Deployment</h1>
+      <div layout="horizontal" layout-sm="horizontal" layout-align="start" layout-padding>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+            <img src="./assets/express-logo.png" height="100px" width="100px" >
+          </div>
+          <h2 layout="horizontal" layout-align="center">Express</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/travis-logo.png" height="100px" width="100px">
+          </div>
+          <h2 layout="horizontal" layout-align="center">Travis-CI</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/coveralls-logo.png" height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">Coveralls</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/azure-logo.png" class="material-card-image" height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">Azure</h2>
+        </div>
+        <div flex class="card">
+          <div layout="horizontal" layout-align="center center">
+          <img src="./assets/gulp-logo.png" class="material-card-image" height="100px" width="100px">
+          </div>
+          <h2 layout="vertical" layout-sm="horizontal" layout-align="center center">Gulp</h2>
+        </div>        
+      </div>
+    </div>    
+</material-content>

client/about.js

@@ -6,4 +6,14 @@ angular.module('MadProps')
       url: '/about',
       templateUrl: '/client/about.html'
     })
-})
+})
+
+.controller('cardController', function ($scope) {
+ $scope.settings = {
+   closeEl: '.close',
+   overlay: {
+     templateUrl: './assets/networkdiagram.html',
+     scroll: false
+   }
+ }
+});

client/app.js

@@ -1,4 +1,4 @@
-angular.module('MadProps', ['ngAnimate', 'ngMaterial', 'ui.router', 'THREE', 'd3', 'btford.socket-io'])
+angular.module('MadProps', ['ngAnimate', 'ngMaterial', 'ui.router', 'THREE', 'd3', 'btford.socket-io', 'ngMorph'])
 
   .config(function($stateProvider, $urlRouterProvider){
     $urlRouterProvider.when('', '/');

client/assets/networkdiagram.html

@@ -0,0 +1,5 @@
+  <span class="info-overlay">
+    <span class="close">
+      <img src = './assets/network-diagram.png' class="networkdiagram">
+    <span>
+  </span>

client/index.html

@@ -13,6 +13,7 @@
     <script src="../bower_components/angular/angular.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.js"></script>
     <script src="../bower_components/hammerjs/hammer.js"></script>
+    <script src="../bower_components/angular-morph/dist/angular-morph.js"></script>
     <script src="../bower_components/angular-material/angular-material.js"></script>
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
     <script src="/socket.io/socket.io.js"></script>
@@ -41,9 +42,9 @@ <h2>Connected Machines: TesselDrone</h2>
             <a href="https://twitter.com/TesselDrone"<i class="fa fa-twitter"></i></a>
       </div>
       <material-tabs>
-        <material-tab label="HOME" ui-sref="home"></material-tab>
-        <material-tab label="TEAM" ui-sref="team"></material-tab>
-        <material-tab label="ABOUT" ui-sref="about"></material-tab>
+        <material-tab class="tabs" label="HOME" ui-sref="home"></material-tab>
+        <material-tab class="tabs" label="TEAM" ui-sref="team"></material-tab>
+        <material-tab class="tabs" label="ABOUT" ui-sref="about"></material-tab>
       </material-tabs>
     </material-toolbar>
 

client/main.css

@@ -1,103 +1,34 @@
 .title {
   padding-left: 8px;
-  /*padding-bottom: 2px;*/
-  color: #40BF5F;
+  color: #40bf5f;
   margin-bottom: 0;
 }
-
 .index {
-  background-color: #414B4B;
+  background-color: #414b4b;
 }
-
 .material-button-raised {
   margin: 2em;
-  height: 10%
+  height: 10%;
 }
-/*
-.toolbar {
-  position: fixed;
-}*/
-
 .face {
   border-radius: 30px;
   border: 1px solid #ddd;
   width: 5em;
   margin: 16px;
 }
-
-/***************************************************
-nav-bar styles
-***************************************************/
-
-/*#nav-bar{
-  position: absolute;
+.card {
   box-sizing: border-box;
-  border-bottom: solid black 2px;
-  width: 100vw;
+  box-shadow: 0px 5px 10px 0 rgba(0,0,0,0.26);
+  margin: 8px;
+  padding: 8px;
 }
-
-#nav-bar h2{
-  display: inline;
+.card:hover {
+  background-color: #808080;
 }
-
-#logout-button{
-  position: absolute;
-  display: inline;
-  border: solid black 1px;
-  top: 5px;
-  right: 10px;
-}*/
-
-/***************************************************
-generic container styles
-***************************************************/
-
-/*#main-container{
-  position: absolute;
-  box-sizing: border-box;
-  top: 30px;
-  width: 100vw;
-  height: 750px;
-}
-
-.container{
-  box-sizing: border-box;
-  border: solid black 2px;
-}*/
-
-/***************************************************
-drone control styles
-***************************************************/
-
-/*.drone-control{
-  position: absolute;
-  width: 50%;
-  height: 50%;
-  left: 0;
-}*/
-
-/***************************************************
-visualizer styles
-***************************************************/
-
-/*.visualizer{
-  position: absolute;
-  width: 50%;
-  height: 50%;
-  right: 0;
-}*/
-
-/***************************************************
-log styles
-***************************************************/
-
-/*.drone-log{
-  position: absolute;
+.networkdiagram {
   width: 100%;
-  height: 50%;
-  bottom: 0;
-}*/
-
-
-
-
+  height: 100%;
+}
+.tabs {
+  border-style: none;
+}

client/main.styl

@@ -0,0 +1,33 @@
+.title
+  padding-left 8px
+  color #40BF5F
+  margin-bottom 0
+
+.index 
+  background-color #414B4B
+
+.material-button-raised 
+  margin 2em
+  height 10%
+
+.face 
+  border-radius 30px
+  border 1px solid #ddd
+  width 5em
+  margin 16px
+
+.card 
+  box-sizing border-box
+  box-shadow 0px 5px 10px 0 rgba(0, 0, 0, 0.26)
+  margin 8px
+  padding 8px
+
+.card:hover
+  background-color grey
+
+.networkdiagram 
+  width 100%
+  height 100%
+
+.tabs
+  border-style none

karma.conf.js

@@ -6,6 +6,7 @@ module.exports = function(config) {
     singleRun: true,
     files: [
       'bower_components/angular/angular.js',
+      'bower_components/angular-morph/dist/angular-morph.js',
       'bower_components/angular-animate/angular-animate.js',
       'bower_components/angular-material/angular-material.js',
       'bower_components/angular-ui-router/release/angular-ui-router.js',

package.json

@@ -26,7 +26,8 @@
     "gulp-shell": "^0.2.9",
     "gulp-stylus": "^1.3.3",
     "nodejs-websocket": "^1.0.0",
-    "socket.io": "^1.1.0"
+    "socket.io": "^1.1.0",
+    "stylus": "^0.49.1"
   },
   "devDependencies": {
     "coveralls": "^2.11.2",