Ada-C7 · gofarann · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017 · Jun 14, 2017
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,7 +1,11 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Yellowtail');
+
+@import url('https://fonts.googleapis.com/css?family=Orbitron');
+
+
 
 main {
-    background: lightblue;
 }
 
 header {
@@ -37,8 +41,93 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+#movie-card {
+  display: inline;
+  height: 430px;
+  width: 200px;
+  color: black;
+  margin: auto;
+  /*padding: 140px 40px;*/
+
+}
+
+#search-bar {
+  display: block;
+  padding-top: 20px;
+  padding-bottom: 80px;
+
+
+}
+
+#logo {
+  color: black;
+  font-size: 50px;
+  padding-top: 25px;
+  padding-bottom: 15px;
+  font-family: 'Orbitron', sans-serif;
+
+}
+
+.button {
+  display: block;
+  background-color: #ffffff;
+  color: #E24E42;
+  border: 2px solid #E24E42;
+  border-radius: 500px;
+  text-transform: uppercase;
+}
+
+
+.button:hover {
+  color: #ffffff;
+  background-color: #E24E42;
+}
+
+.center {
+    text-align: center;
+    padding-left: 10%;
+    padding-right: 10%;
+}
+
+.inline {
+  display: inline;
+  padding-top: 20px;
+  padding-bottom: 80px;
+}
+
+
+#movie-details {
+  z-index: 10;
+  position: fixed;
+  width: 70%;
+  height: 80%;
+  top: 10%;
+  border-style: ridge;
+  background-color: white;
+  text-align: center;
+  margin-left: 10%;
+  border-radius: 25px;
+  font-size: 80%
+
+
+}
+
+#title-and-date {
+  position: relative;
+  font-weight: 400;
+  font-size: 80%;
+  color: black;
+  text-align: center;
+
+}
+
+#detail-title {
+  font-weight: 900;
+  font-size: 50px;
+  color: black;
+}
+
+.hidden {
+    display: none;
 }
-*/
diff --git a/build/index.html b/build/index.html
@@ -1,3 +1,5 @@
+
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -7,9 +9,75 @@
     <link rel="stylesheet" type="text/css" href="css/styles.css">
     <title>Backbone Baseline</title>
   </head>
-  <body>
+  <main>
+
+    <!-- <section>
+      <img src="https://static1.squarespace.com/static/522f305be4b0186bd83d5cf8/t/5489e4b8e4b0d0edcbe82988/1418323128978/wood_block" height="80" width="80"><img src="https://vignette2.wikia.nocookie.net/arthur/images/5/5d/Buster.jpg/revision/latest?cb=20090712025127" height="100" width="100">
+    </section> -->
+    <!-- <nav class="top-bar"> -->
+      <!-- <div class="title-area"> -->
+      <div>
+        <h1 id="logo" class="center">OliviAnn's Video Rental</h1>
+      </div>
+      <!-- </div> -->
+      <section id="top-bar-search">
+          <label class='left'>
+            <input type="text" id="query" placeholder="Search for Movies to Add"></input>
+          </label>
+          <button id="search" class="button left">Search</button>
+
+      </section>
+    <!-- </nav> -->
+
+
+
+    <section class="hidden" id='movie-details'></section>
+    <section class="column small-12 medium-12 large-12" id='movie-list'></section>
+  </main>
+
+  <!--- Templates ------------->
+
+  <script id="movie-card-template" type="text/template">
+    <section class="column small-12 medium-12 large-12 inline" id="movie-card">
+      <section id='title-and-date'>
+        <p class="movie-title"><%- title %></p>
+        <p> (<%- release_date.substring(0,4) %>)  </p>
+        <button id="remove-from-library" class="medium-3 large-12 columns button center ">Remove</button>
+
+      </section>
+
+
+      <img id="movie-image" src=<%-image_url %> alt=<% title %>></img>
+    </section>
+  </script>
+
+
+  <script id="new-movie-card-template" type="text/template">
+    <section class="column small-12 medium-12 large-12 inline" id="movie-card">
+      <p class="movie-title"><%- title %></p>
+      <p> (<%- release_date.substring(0,4)  %>)  </p>
+      <!-- <p> (<%- image_url %>)  </p> -->
+
+      <button id="add-to-library" class="medium-3 large-12 columns button center ">+</button>
+      <img id="movie-image" src=<%-image_url %> alt=<% title %>></img>
+
+    </section>
+  </script>
+
+  <script id="movie-details-template" type="text/template">
+     <section>
+       <p id="detail-title"><%- title %></p>
+       <p><%- release_date.substring(0,4) %></p>
+       <img src="<%-image_url %>"alt="<% title %>"></img>
+       <p>Overview: <%- overview %></p>
+     </section>
+  </script>
+  <script src="/app.bundle.js" charset="utf-8"></script>
+
+
+</html>
+
 
-    <script src="/app.bundle.js"></script>
+<!-- <script id="movie-list-template" type="text/template">
 
-  </body>
-  </html>
+</script> -->
diff --git a/src/app.js b/src/app.js
@@ -1,12 +1,23 @@
-// /src/app.js
-
-// Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
-
 // ready to go
-$(document).ready(function() {
 
-  $('section.main-content').append('<p>Hello World!</p>');
+import RentalLibrary from './collections/rental_library';
+import RentalLibraryView from './views/rental_library_view';
+
+
+var rentalLibrary = new RentalLibrary();
+rentalLibrary.fetch();
+// console.log("crumb 1");
 
+// would be replaced with fetched rental library from rails api
+var rentalLibraryView = new RentalLibraryView({
+  model: rentalLibrary,
+  template: _.template($('#movie-card-template').html()),
+  el: 'main'
+});
+
+
+$(document).ready(function() {
+  rentalLibraryView.render();
 });
diff --git a/src/collections/rental_library.js b/src/collections/rental_library.js
@@ -0,0 +1,31 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie.js';
+console.log("crumb 5");
+
+
+var RentalLibrary = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+  comparator: function( collection ){
+    return( collection.get( 'title') );
+  }
+  // comparator: function (property) {
+  //      return selectedStrategy.apply(myModel.get(property));
+  //  },
+  //  strategies: {
+  //      byTitle: function (title) { return this.model.get("title"); },
+  //      byReleaseDate: function (release_date) { return this.model.get("release_date"); },
+  //  },
+  //  changeSort: function (sortProperty) {
+  //      this.comparator = this.strategies[sortProperty];
+  //  },
+  //  initialize: function () {
+  //      this.changeSort('byTitle');
+  //      console.log(this.comparator);
+  //      this.changeSort("byReleaseDate");
+  //      console.log(this.comparator);
+  //  }
+
+});
+
+export default RentalLibrary;
diff --git a/src/collections/search_results.js b/src/collections/search_results.js
@@ -0,0 +1,13 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie.js';
+
+console.log("crumb 6");
+
+var SearchResults = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies?query=' 
+
+});
+
+
+export default SearchResults;