Ada-C8 · julalam · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017 · Dec 18, 2017
diff --git a/dist/index.html b/dist/index.html
@@ -2,14 +2,87 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Backbone Baseline</title>
+    <link rel="icon" type="image/x-icon" href="./favicon.ico">
   </head>
   <body>
-    <main id="main-content">
-
-    </main>
+    <div class="content-wrapper">
+      <header class="header">
+        <h1 class="main-title">IK <i class="fas fa-film"></i> Movies</h1>
+        <p class="sub-head">Made with Backbone blood, API sweat, and Ruby on Rails tears ( <i class="fas fa-heart"></i> Iuliia &amp; Kee )</p>
+      </header>
+
+      <nav class="grid-x grid-padding-x main-nav">
+        <div class="cell nav-wrapper">
+          <form id="search-form">
+            <input type="text" name="search" placeholder="Enter search keywords here">
+            <button type="submit" name="button" id="search" class="button"><i class="fas fa-search"></i> Search</button>
+          </form>
+
+           <button id="movies" class="button blue" type="button" name="button"><i class="fas fa-book"></i> Rental Library</button>
+        </div>
+      </nav>
+
+      <main id="main-content" class="grid-x main">
+        <section class="movies large-6 cell">
+          <ul class="grid-x medium-up-2 movies-list"></ul>
+        </section>
+
+        <section class="movie large-6 cell">
+          <div class="grid-x grid-padding-x details-wrapper"></div>
+        </section>
+      </main>
+    </div>
+
+    <footer>
+      <p>&copy; Ada Developers Academy 2017</p>
+    </footer>
 
     <script src="/app.bundle.js"></script>
+    <!-- TEMPLATES -->
+    <script type="text/template" id="movie-template">
+      <div class="cell">
+        <div class="card">
+          <% if (image_url[0] != 'h' ) { %>
+            <img src="https://image.tmdb.org/t/p/w300/<%- image_url %>">
+          <% } else { %>
+            <img src="<%- image_url %>">
+          <% } %>
+          <div class="card-section">
+            <% if (title.length > 14) {%>
+              <h6><%- title.slice(0,14) %>...</h6>
+            <%} else {%>
+              <h6><%- title %></h6>
+            <% }%>
+            <p>( <%- release_date.slice(0, 4) %> )</p>
+          </div>
+        </div>
+      </div>
+    </script>
+
+    <script type="text/template" id="show-template">
+      <div class="large-5 cell img-detail">
+        <% if (image_url[0] != 'h' ) { %>
+          <img src="https://image.tmdb.org/t/p/w300/<%- image_url %>">
+        <% } else { %>
+          <img src="<%- image_url %>">
+        <% } %>
+      </div>
+      <div class="large-7 cell text-detail">
+        <h2><%- title %></h2>
+        <p class="movie-release">Release date: <%- release_date %></p>
+        <p class="movie-summary"><%- overview %></p>
 
+        <% if (!inInventory) { %>
+          <button class="button add-collection" type="button" name="button"><i class="fas fa-plus-square"></i> Add to Rental Library</button>
+        <% } else { %>
+          <div class="callout alert">
+            <h5><i class="fas fa-exclamation-triangle"></i> This movie is in your library</h5>
+            <p>You're a fine curator, you know that?</p>
+          </div>
+        <% }%>
+      </div>
+    </script>
   </body>
   </html>
diff --git a/src/app.js b/src/app.js
@@ -1,14 +1,75 @@
-import 'css/_settings.css';
-import 'foundation-sites/dist/css/foundation.css';
-import './css/styles.css';
-
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import 'foundation-sites';
+
+// CSS
+import styles from './css/styles.css';
+
+// Models and views
+import Movie from './models/movie';
+import MovieList from './collections/movie_list';
+import MovieView from './views/movie_view';
+import MovieListView from './views/movie_list_view';
+import ShowView from './views/show_view';
 
-// ready to go
+// Define Variables
+let movieTemplate;
+let showTemplate;
+
+// Ready to go
 $(document).ready(function() {
+  // Event Bus
+  let bus = {};
+  bus = _.extend(bus, Backbone.Events);
+
+  // Templates
+  movieTemplate = _.template($('#movie-template').html());
+  showTemplate = _.template($('#show-template').html());
+
+  const movieList = new MovieList();
+  const searchList = new MovieList();
+
+  const movieListView = new MovieListView({
+    el: $('.movies'),
+    model: movieList,
+    collection: searchList,
+    template: movieTemplate,
+    bus: bus,
+  });
+
+  const showView = new ShowView({
+    el: $('section.movie div.details-wrapper'),
+    template: showTemplate,
+    bus: bus,
+    collection: movieList
+  })
+
+  movieList.fetch();
+
+  // Search event
+  $('#search-form').on('submit', function(e){
+    e.preventDefault();
+    let queryText = $('#search-form input').val();
+
+    if (queryText.length > 0 ) {
+      movieListView.searchMode();
+      searchList.fetch({
+        data: {query: queryText},
+      });
+    }
+    $('#search-form input').val('');
+  });
 
-  $('#main-content').append('<p>Hello World!</p>');
+  // Rental Library
+  $('#movies').on('click', function(){
+    movieListView.inventoryMode();
+    movieList.fetch();
+  });
 
+  // Styling
+  $('li.movie').on('click', function() {
+    $('li.movie').removeClass('highlighted');
+    $(this).addClass('highlighted');
+  })
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone';
+import Movie from '../models/movie';
+
+const MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: `http://localhost:3000/movies`,
+  parse: function(response) {
+    return response;
+  },
+});
+
+export default MovieList;
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,44 +1,153 @@
-@include foundation-everything;
+/*----------------- imports -----------------*/
+/*  fontawesome, foundation, google fonts */
+@import url("https://use.fontawesome.com/releases/v5.0.2/css/all.css");
+@import url("https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css");
+@import url('https://fonts.googleapis.com/css?family=Cabin|PT+Sans:400,700');
 
-main {
-    background: lightblue;
-}
+/*----------------- big parts-----------------*/
+/*  test */
+/** { border: 1px solid red !important; }*/
 
-header {
-  background-color: lightgreen;
-  padding: 0.5rem;
+html { box-sizing: border-box; }
+*, *:before, *:after { box-sizing: inherit; }
+html, body {
+  width: 100%;
+  height: 100%;
 }
+body {
+  display: flex;
+  flex-direction: column;
 
-#completed-checkbox {
-  display: inline;
+  padding: 0;
+  font-size: 16px;
+  font-family: 'Cabin', sans-serif;
+  color: #333;
+  overflow-x: hidden;
 }
-
-label {
-  display: inline;
+h1, h2, h3, h4, h5, h6, button {
+  font-family: 'PT Sans', sans-serif;
+}
+.fas { margin-right: 0.4rem; }
+.fa-camera, .fa-heart {margin-right: 0;}
+.highlighted { border: 5px solid #f9dc48; }
+button.button {
+  background: #f9dc48;
+  color: #333;
+  border-radius: 2px;
+}
+button.button:hover,
+button.button:active,
+button.button:focus {
+  background: #f7bc3d;
+  color: #333;
+}
+.content-wrapper {
+  flex: 1 0 auto;
+  background: #c8c5cc;
+}
+footer {
+  padding-top: 1rem;
+  text-align: center;
+  background: #555;
+  color: #fcfcfc;
+  height: 70px;
 }
 
-button.success {
-  margin-right: 1.2rem;
-  display: inline;
+/*----------------- header -----------------*/
+header {
+  background-color: #857c8e;
+  padding: 0.6rem;
+}
+h1.main-title {
+  font-weight: 700;
+  color: #fefefe;
+  text-align: center;
+}
+p.sub-head {
+  color: #ddd;
+  text-align: center;
 }
 
-aside.create-tasklist {
-  background-color: navy;
-  color: #FFFFFF;
+/*----------------- nav -----------------*/
+nav.main-nav {
+  padding: 0.5rem 0;
+  width: 100%;
+  background-color: #ada6b5;
+  text-align: center;
 }
-aside label {
-  color: #FFFFFF;
+form#search-form {
+  display: inline-block;
+  width: 60%;
+}
+form#search-form input[name="search"],
+button#search,
+button#movies {
+  height: 3rem;
+  display: inline-block;
+}
+form#search-form input[name="search"] {
+  width: 50%;
+  margin-right: 5%;
+  padding-left: 2%;
+  border-radius: 2px;
+}
+button#search,
+button#movies {
+  margin-top: .7rem;
+  width: 20%;
 }
 
-.completed {
-  text-decoration: line-through;
+/*----------------- list -----------------*/
+section.movies {
+  padding-top: 1rem;
+  overflow: auto;
+}
+ul.movies-list li.movie {
+  list-style-type: none;
+  margin: 1rem;
+  width: 26%;
+}
+div.card {
+  margin-bottom: 0;
+  border: none;
+  background: #f0f0f0;
+}
+div.card img {
+  height: 11rem;
+  display: inline-block;
+  filter: grayscale(100%);
+}
+div.card-section { padding: 0.5em; }
+div.card-section h6,
+div.card-section p {
+  text-align: center;
+}
+div.card-section h6 { margin-bottom: 0; }
+div.card-section p {
+  color: #888;
+  font-size: 0.7em;
 }
 
-div {
-  display: inline;
+/*----------------- details -----------------*/
+section.movie { padding: 2rem; }
+div.details-wrapper {
+  background: #f0f0f0;
+  height: auto;
+  border-radius: 2px;
+}
+div.img-detail { text-align: center; }
+div.img-detail img {
+  max-width: 210px;
+  padding: 1em 0 1.5em;
+}
+p.movie-summary { color: #555; font-size: 0.9rem; }
+div.text-detail { padding: 1em 0 2em; }
+div.large-7 button.add-collection {
+  display: block;
+  margin: 2em auto 0;
+  text-align: center;
 }
-/*
-* {
-  border-style: solid;
+div.callout {
+  margin-top: 2em;
+  text-align: center;
 }
-*/
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,15 @@
+import Backbone from 'backbone';
+
+const Movie = Backbone.Model.extend({
+  defaults: {
+    inInventory: true,
+    image_url: ''
+  },
+  url: `http://localhost:3000/movies/`,
+  parse: function(response) {
+    return response;
+  },
+  comparator: 'title',
+});
+
+export default Movie;