Ada-C7 · ghost · May 30, 2017 · May 30, 2017 · May 30, 2017 · May 31, 2017
diff --git a/build/css/app.css b/build/css/app.css
@@ -1,25 +1,33 @@
 body {
-  background-color: #16202C;
+  background-color: #fff;
+  margin: 0px;
+}
+
+#application {
+  margin: 0px;
 }
 
 h1, h2, h3, h4, h5, h6, p, label {
   font-family: 'Nunito', sans-serif;
 }
 
+#logo {
+  padding-top: 30px;
+  padding-bottom: 60px;
+  -webkit-filter: drop-shadow(5px 5px 5px #222);
+  filter: drop-shadow(5px 5px 5px #222);
+}
+
 header {
   text-align: center;
-  width: 30%;
-  position: fixed;
-  background-image: url("/imgs/sparks.jpeg");
-  background-size: cover;
-  background-position: center;
-  height: 100%;
   z-index: 5;
-  color: rgb(211, 231, 231);
+  background: #fff;
 }
 
 .contact-form {
-  background-color: rgba(0, 0, 0, 0.35);
+  padding: 60px 30px 90px 30px;
+  background: #1160A9;
+  color: #fff;
 }
 
 .contact-form label {
@@ -28,39 +36,66 @@ header {
 }
 
 #contact-details {
+  padding: 30px;
+  background: #2199e8;
+  color: #fff;
   z-index: 10;
-  position: fixed;
+
+  /* uncomment for pop-up like styling */
+  /*position: fixed;
+  top: 30px;
+  left: 30px;
   width: 30%;
   height: 30%;
-  top: 30%;
-  left: 30%;
-  background-color: #538ca3;
   text-align: center;
   border: 1em solid white;
-  margin-left: 20%;
-  border-radius: 20%;
+  margin-left: 20%;*/
 }
 
 #contact-cards {
-  width: 70%;
-  margin: 0 auto;
-  float: right;
-  text-align: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  margin: 0px;
+}
+
+.grayscale{
+  -webkit-filter: grayscale(100%); filter: grayscale(100%);
 }
 
 .contact-card {
-  display: inline-block;
-  padding: 2%;
-  margin: 2%;
-  background-color: #fff;
-  border-radius: 2%;
+  box-sizing: none;
+  display:inline-block;
+  border:0;
+  -webkit-transition: all 200ms ease-in;
+  -webkit-transform: scale(1);
+  -ms-transition: all 200ms ease-in;
+  -ms-transform: scale(1);
+  -moz-transition: all 200ms ease-in;
+  -moz-transform: scale(1);
+  transition: all 200ms ease-in;
+  transform: scale(1);
+  -webkit-filter: drop-shadow(5px 5px 5px #222);
+  filter: drop-shadow(5px 5px 5px #222);
+  min-width: 250px;
+  max-width: 250px;
+  max-height: 350px;
+  min-height: 350px;
 }
 
 .contact-card:hover {
-    cursor: pointer;
-    background-color: #538ca3;
+  z-index: 2;
+  -webkit-transition: all 200ms ease-in;
+  -webkit-transform: scale(1.5);
+  -ms-transition: all 200ms ease-in;
+  -ms-transform: scale(1.5);
+  -moz-transition: all 200ms ease-in;
+  -moz-transform: scale(1.5);
+  transition: all 200ms ease-in;
+  transform: scale(1.25);
 }
 
-.contact-card:hover h3 {
-  color: white;
+.contact-card img {
+  text-align: center;
 }
diff --git a/build/css/foundation.css b/build/css/foundation.css
@@ -429,9 +429,9 @@ button {
   display: none !important; }
 
 .row {
-  max-width: 75rem;
-  margin-left: auto;
-  margin-right: auto; }
+  /*max-width: 75rem;*/
+  margin-left: 0;
+  margin-right: 0; }
   .row::before, .row::after {
     content: ' ';
     display: table; }
@@ -441,12 +441,12 @@ button {
     padding-left: 0;
     padding-right: 0; }
   .row .row {
-    margin-left: -0.625rem;
-    margin-right: -0.625rem; }
+    margin-left: -0rem;
+    margin-right: -0rem; }
     @media screen and (min-width: 40em) {
       .row .row {
-        margin-left: -0.9375rem;
-        margin-right: -0.9375rem; } }
+        margin-left: -0rem;
+        margin-right: -0rem; } }
     .row .row.collapse {
       margin-left: 0;
       margin-right: 0; }

diff --git a/build/imgs/andy.png b/build/imgs/andy.png
diff --git a/build/imgs/angela.png b/build/imgs/angela.png
diff --git a/build/imgs/creed.png b/build/imgs/creed.png
diff --git a/build/imgs/dunder-mifflin.png b/build/imgs/dunder-mifflin.png
diff --git a/build/imgs/dwight.png b/build/imgs/dwight.png
diff --git a/build/imgs/gabe.png b/build/imgs/gabe.png
diff --git a/build/imgs/jim.png b/build/imgs/jim.png
diff --git a/build/imgs/kelly.png b/build/imgs/kelly.png
diff --git a/build/imgs/kevin.png b/build/imgs/kevin.png
diff --git a/build/imgs/michael.png b/build/imgs/michael.png
diff --git a/build/imgs/office-logo.png b/build/imgs/office-logo.png
diff --git a/build/imgs/pam.png b/build/imgs/pam.png
diff --git a/build/imgs/stanley.png b/build/imgs/stanley.png
diff --git a/build/index.html b/build/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Rolodex</title>
+    <title>Dunder Mifflin Directory</title>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,44 +11,55 @@
   </head>
   <body>
     <div id="application">
-      <header>
-        <h1>Rolodex</h1>
-        <section class="row contact-form">
-          <h3>Add A New Contact</h3>
-          <div class="columns">
-            <label>
-              Name
-              <input type="text" name="name">
-            </label>
-            <label>
-              Email
-              <input type="text" name="email">
-            </label>
-            <label>
-              Phone
-              <input type="text" name="phone">
-            </label>
-            <h3 class="button btn-save">Save</h3>
-            <h3 class="button btn-cancel">Cancel</h3>
-          </div>
-        </section>
+      <header class="row">
+        <img src="imgs/office-logo.png" alt="office Logo" id="logo" class="small-12 medium-5 columns">
       </header>
 
-      <main>
-        <ul id="contact-cards" class="row align-center"></ul>
-        <section id="contact-details"></section>
+      <main class="row">
+        <div class="row">
+          <section id="contact-cards" class="align-center">
+          </section>
+        </div>
+        <div class="row">
+          <section id="contact-details" class="columns">
+          </section>
+        </div>
       </main>
+
+      <!-- New Contact Form -->
+      <section class="row contact-form">
+        <h3>Add A New Contact</h3>
+        <div class="small-12 columns">
+          <label>
+            Name
+            <input type="text" name="name" class="form-name">
+          </label>
+          <label>
+            Email
+            <input type="text" name="email" class="form-email">
+          </label>
+          <label>
+            Phone
+            <input type="text" name="phone" class="form-phone">
+          </label>
+          <h3 class="button btn-save">Save</h3>
+          <h3 class="button btn-cancel">Cancel</h3>
+        </div>
+      </section>
     </div>
 
-    <!-- Underscore Templates -->
+    <!-- Contact View Template -->
     <script type="text/template" id="tmpl-contact-card">
-      <li class="contact-card small-11 medium-4 large-2 medium-offset-1 columns">
-        <h4><%- name %></h4>
-      </li>
+      <section class="contact-card small-12 medium-4 columns">
+        <div class="staff-pic grayscale">
+          <img src="<%- image %>" label="<%- name %>" class="align-center"/>
+        </div>
+      </section>
     </script>
 
+    <!-- Contact Details Template -->
     <script type="text/template" id="tmpl-contact-details">
-      <h3><%- name %></h3>
+      <h2><%- name %></h2>
       <h4><%- email %></h4>
       <h4><%- phone %></h4>
     </script>

diff --git a/src/app.js b/src/app.js
@@ -1,9 +1,98 @@
-import Application from 'app/models/application';
-import ApplicationView from 'app/views/application_view';
+import $ from 'jquery';
+import _ from 'underscore';
 
-var application = new Application();
+import contact from './app/models/contact.js';
+import contactView from './app/views/contact_view.js';
 
-var appView = new ApplicationView({
-  el: '#application',
-  model: application
+import Rolodex from './app/collections/rolodex.js';
+import RolodexView from './app/views/rolodex_view.js';
+
+var myContacts = [
+  { name: "Dwight Schrute",
+    email: "schrutefarms@gmail.com",
+    phone: "111-111-1111",
+    image: "imgs/dwight.png"
+  },
+  {
+    name: "Jim Halpert",
+    email: "jim@athlead.com",
+    phone: "222-222-2222",
+    image: "imgs/jim.png"
+  },
+  {
+    name: "Pam Beasley",
+    email: "Pam@prattinstitute.com",
+    phone: "333-333-3333",
+    image: "imgs/pam.png"
+  },
+  {
+    name: "Michael Scott",
+    email: "mscott@greatscottproductions.com",
+    phone: "444-444-4444",
+    image: "imgs/michael.png"
+  },
+  {
+    name: "Kelly Kapoor",
+    email: "kkapoor@businessbitch.com",
+    phone: "555-555-5555",
+    image: "imgs/kelly.png"
+  },
+  {
+    name: "Andy Bernard",
+    email: "narddog@cornell.edu",
+    phone: "777-777-7777",
+    image: "imgs/andy.png"
+  },
+  {
+    name: "Kevin Malone",
+    email: "bigbog69@fanduel.com",
+    phone: "888-888-8888",
+    image: "imgs/kevin.png"
+
+  },
+  {
+    name: "Angela Martin",
+    email: "msmartin@lipton4PA.com",
+    phone: "999-999-9999",
+    image: "imgs/angela.png"
+  },
+  {
+    name: "Creed Bratton",
+    email: "notcreedbratton@creedthoughts.gov",
+    phone: "2-222-222-2222",
+    image: "imgs/creed.png"
+  }
+  // {
+  //   name: "Toby Flenderson",
+  //   email: "chadflenderson@flendersonfiles.com",
+  //   phone: "1-111-111-1111",
+  //   image: "imgs/toby.png"
+  // },
+  // {
+  //   name: "David Wallace",
+  //   email: "dwallace@suckit.com",
+  //   phone: "3-333-333-3333",
+  //   image: "imgs/david.png"
+  // }
+  // {
+  //   name: "Ryan Howard",
+  //   email: "rhoward@wupf.edu",
+  //   phone: "666-666-6666",
+  //   image: "imgs/ryan.png"
+  // },
+];
+
+var myRolodex = new Rolodex(myContacts);
+
+$(document).ready(function() {
+
+  var myRolodexView = new RolodexView({
+    model: myRolodex,
+    template: _.template($('#tmpl-contact-card').html()),
+    el: '#application'
+  });
+
+  myRolodexView.render();
+
+  $('#contact-details').hide();
 });
diff --git a/src/app/collections/rolodex.js b/src/app/collections/rolodex.js
@@ -1,10 +1,8 @@
 import Backbone from 'backbone';
+import Contact from '../models/contact.js';
 
-const Rolodex = Backbone.Collection.extend({
-  // This Rolodex represents a collection of Contacts
-  // and should include any methods or attributes
-  // that are involved in working with more than one
-  // Contact.
+var Rolodex = Backbone.Collection.extend({
+  model: Contact
 });
 
 export default Rolodex;
diff --git a/src/app/models/application.js b/src/app/models/application.js