Ada-C7 · edeutschie · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017 · Jun 13, 2017
diff --git a/build/css/_settings.css b/build/css/_settings.css
@@ -42,6 +42,9 @@
 //  37. Top Bar
 
 @import 'util/util';
+@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
+/*@import url(http://fonts.googleapis.com/css?family=Open+Sans);*/
+
 
 // 1. Global
 // ---------
@@ -63,7 +66,7 @@ $black: #0a0a0a;
 $white: #fefefe;
 $body-background: $white;
 $body-font-color: $black;
-$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-font-family: 'Slabo 27px', serif;
 $body-antialiased: true;
 $global-margin: 1rem;
 $global-padding: 1rem;
@@ -104,10 +107,10 @@ $block-grid-max: 8;
 // 4. Base Typography
 // ------------------
 
-$header-font-family: $body-font-family;
+$header-font-family: 'Slabo 27px', serif;
 $header-font-weight: $global-weight-normal;
 $header-font-style: normal;
-$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$font-family-monospace: 'Slabo 27px', serif;
 $header-color: inherit;
 $header-lineheight: 1.4;
 $header-margin-bottom: 0.5rem;
@@ -618,4 +621,3 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
-
diff --git a/build/css/styles.css b/build/css/styles.css
@@ -1,12 +1,23 @@
 @include foundation-everything;
+@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
+
+* {
+  font-family: 'Slabo 27px', serif;
+}
 
 main {
     background: lightblue;
+    font-family: 'Slabo 27px', serif;
 }
 
 header {
-  background-color: lightgreen;
+  background-color: white;
   padding: 0.5rem;
+  font-family: 'Slabo 27px', serif;
+}
+
+h1 {
+  text-align: center;
 }
 
 #completed-checkbox {
@@ -37,8 +48,31 @@ aside label {
 div {
   display: inline;
 }
-/*
-* {
-  border-style: solid;
+
+
+#order-form {
+  z-index: 10;
+  width: 50%;
+  height: 60%;
+  top: 30%;
+  left: 30%;
+  background-color: white;
+  text-align: center;
+  margin-left: 20%;
+  margin-right: 20%;
+  border: 2px solid black;
+  font-family: 'Slabo 27px', serif;
 }
-*/
+
+ li{
+   vertical-align: top;
+   margin: 5px;
+   list-style: none;
+   width:300px;
+   display: inline-block;
+ }
+
+ p.title{
+   background-color: rgba(193, 66, 66, 0.8);
+   vertical-align: bottom;
+ }
diff --git a/build/index.html b/build/index.html
@@ -5,11 +5,78 @@
     <link rel="stylesheet" type="text/css" href="css/_settings.css">
     <link rel="stylesheet" type="text/css" href="css/foundation.css">
     <link rel="stylesheet" type="text/css" href="css/styles.css">
-    <title>Backbone Baseline</title>
+    <title>Movies</title>
   </head>
   <body>
 
+    <header>
+      <h1>Movie Store Rental System</h1>
+    </header>
+    <main>
+
+      <section id="order-form"></section>
+
+      <section class="row">
+        <div class="search-box columns small-12 large-4">
+          <label for="title"> What do we need?</label>
+          <input type="text" name="title" id="title"></input>
+          <button type="submit" class="button woogs" id="search">Search Warehouse</button>
+          <button type="submit" class="button" id="library">Reload Movie Library</button>
+
+        </div>
+        <section class="columns large-4 small-12" id='movie'>
+
+
+        </section>
+      </section>
+
+
+        <section >
+
+
+      <section class= "column large-10 medium-10 small-12">
+
+        <section class="movie-card"></section>
+
+      </section>
+      </section>
+      <section id='new-movie'></section>
+    </main>
+
+      <footer>Powered by The Movie DB</footer>
+
+    <!-- Templates -->
+
+
+      <script id="movie-card-template" type="text/template">
+          <img id= "poster" src=<%-movie.image_url%>>
+          <p>
+          <%- movie.title %>
+      </script>
+
+      <script id="search-card-template" type="text/template">
+        <img src=<%-movie.image_url%>>
+        <p><%- movie.title %></p>
+        <button type="submit" class="button" id="open">Movie Info</button>
+      </script>
+
+      <script id="movie-info-template" type="text/template">
+      <img src=<%-movie.image_url%>>
+      <h3>Title: <%- movie.title %></h3>
+      <h4>Synopsis: <%- movie.overview %></h4>
+      <h4>Release Date: <%- movie.release_date %></h4>
+      <label for="title"><h4>How Many Copies Would You Like to Order?</h4></label>
+      <input type="text" name="title" id="inventory"></input>
+      <button type="submit" class="button" id="order-movie">Order Movie</button>
+
+    </script>
+
     <script src="/app.bundle.js"></script>
 
+
+
+
   </body>
+
+
   </html>
diff --git a/src/app.js b/src/app.js
@@ -3,10 +3,30 @@
 // Import jQuery & Underscore
 import $ from 'jquery';
 import _ from 'underscore';
+import MovieList from 'collections/movie_list';
+import MovieListView from 'views/movie_list_view';
+
+var movieList = new MovieList();
 
 // ready to go
 $(document).ready(function() {
 
   $('section.main-content').append('<p>Hello World!</p>');
 
+  movieList.fetch();
+
+  var options = {
+    el: $('main'),
+    model: movieList
+  };
+
+  var movieListDisplay = new MovieListView(options);
+  movieListDisplay.render();
+
+  $('#order-form').hide();
+
+  $('#library').click(function() {
+    movieList.fetch();
+  });
+
 });
diff --git a/src/collections/movie_list.js b/src/collections/movie_list.js
@@ -0,0 +1,9 @@
+import Movie from '../models/movie';
+
+var MovieList = Backbone.Collection.extend({
+  model: Movie,
+  url: 'http://localhost:3000/movies',
+
+});
+
+export default MovieList;
diff --git a/src/css/_settings.scss b/src/css/_settings.scss
@@ -618,4 +618,3 @@ $topbar-submenu-background: $topbar-background;
 $topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
 $topbar-input-width: 200px;
 $topbar-unstack-breakpoint: medium;
-
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -36,9 +36,24 @@ aside label {
 
 div {
   display: inline;
+  border-style: solid;
+  border-color: black;
+  margin: .5em;
+}
+
+.movie-card div {
+  height: 100px;
+  border: solid, black, 2px;
+  border-style: solid;
+  border-color: black;
+  margin: .5em;
 }
-/*
+
 * {
   border-style: solid;
 }
-*/
+
+img {
+  height: 100%;
+  border: 1px black;
+}
diff --git a/src/models/movie.js b/src/models/movie.js
@@ -0,0 +1,16 @@
+import Backbone from 'backbone';
+
+var  Movie = Backbone.Model.extend({
+  defaults: {
+    type : "rental",
+    inventory: 0,
+    url:'http://localhost:3000/movies',
+  },
+  initialize: function(options) {
+
+  }
+
+});
+
+
+export default Movie;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -618,4 +618,3 @@ $topbar-submenu-background: $topbar-background;
		$topbar-title-spacing: 0.5rem 1rem 0.5rem 0;
		$topbar-input-width: 200px;
		$topbar-unstack-breakpoint: medium;