From 4f9fbb837dbff10218201167a5f1d3910fefa538 Mon Sep 17 00:00:00 2001
From: Alexander Bozhenko <abozhenko@mirantis.com>
Date: Thu, 15 Oct 2015 20:11:58 -0700
Subject: [PATCH 1/4] Movie storyline to appear on hover on poster

---
 fresh_tomatoes.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index 5cd75599c..769288007 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -123,7 +123,7 @@
 # A single movie entry html template
 movie_tile_content = '''
 <div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
-    <img src="{poster_image_url}" width="220" height="342">
+    <img src="{poster_image_url}" title="{storyline}" width="220" height="342">
     <h2>{movie_title}</h2>
 </div>
 '''
@@ -144,6 +144,7 @@ def create_movie_tiles_content(movies):
         # Append the tile for the movie with its content filled in
         content += movie_tile_content.format(
             movie_title=movie.title,
+            storyline=movie.storyline,
             poster_image_url=movie.poster_image_url,
             trailer_youtube_id=trailer_youtube_id
         )

From fd222e194036bad1c8cebf04e04f6bb3706e4646 Mon Sep 17 00:00:00 2001
From: William Crandell <william@crandell.ws>
Date: Fri, 16 Oct 2015 01:31:05 -0400
Subject: [PATCH 2/4] Updating Bootstrap and adding __init__.py

  This allows me to import with:
  from ud036_StarterCode import fresh_tomatoes
---
 __init__.py       | 2 ++
 fresh_tomatoes.py | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)
 create mode 100644 __init__.py

diff --git a/__init__.py b/__init__.py
new file mode 100644
index 000000000..8ca456a6f
--- /dev/null
+++ b/__init__.py
@@ -0,0 +1,2 @@
+## this file is required to use
+## from xxx import x
diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index 5cd75599c..808a01fcf 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -12,10 +12,10 @@
     <title>Fresh Tomatoes!</title>
 
     <!-- Bootstrap 3 -->
-    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
-    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
-    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
     <style type="text/css" media="screen">
         body {
             padding-top: 80px;

From cd5b04ae0ca95bee2bb3f298e9db108d3b90832c Mon Sep 17 00:00:00 2001
From: William Crandell <william@crandell.ws>
Date: Fri, 16 Oct 2015 02:17:35 -0400
Subject: [PATCH 3/4] merge from alexbozhenko enhanced template

  Added Bootstrap tooltip
---
 fresh_tomatoes.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index ef3cebca4..54587ee95 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -80,6 +80,7 @@
           $('.movie-tile').hide().first().show("fast", function showNext() {
             $(this).next("div").show("fast", showNext);
           });
+          $('[data-toggle="tooltip"]').tooltip();
         });
     </script>
 </head>
@@ -123,7 +124,7 @@
 # A single movie entry html template
 movie_tile_content = '''
 <div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
-    <img src="{poster_image_url}" title="{storyline}" width="220" height="342">
+    <img data-toggle="tooltip" data-placement="bottom" src="{poster_image_url}" title="{storyline}" width="220" height="342">
     <h2>{movie_title}</h2>
 </div>
 '''

From 4217571a945400a90504cfd3f8b678b479f918be Mon Sep 17 00:00:00 2001
From: William Crandell <william@crandell.ws>
Date: Sat, 17 Oct 2015 14:56:25 -0400
Subject: [PATCH 4/4] Working towards a more responsive design

  Todo is fix the video trailer modal to a more mobile responsive design
  Also perhaps make it use more screen space where possible.
---
 fresh_tomatoes.py | 50 +++++++++++++++++++++++++++++++++--------------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index 54587ee95..e9ba8a696 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -19,6 +19,8 @@
     <style type="text/css" media="screen">
         body {
             padding-top: 80px;
+            margin-left: 2px;
+            margin-right: 2px;
         }
         #trailer .modal-dialog {
             margin-top: 200px;
@@ -35,14 +37,6 @@
             width: 100%;
             height: 100%;
         }
-        .movie-tile {
-            margin-bottom: 20px;
-            padding-top: 20px;
-        }
-        .movie-tile:hover {
-            background-color: #EEE;
-            cursor: pointer;
-        }
         .scale-media {
             padding-bottom: 56.25%;
             position: relative;
@@ -56,6 +50,29 @@
             top: 0;
             background-color: white;
         }
+        .thumbnail:hover {
+            background-color: #333;
+            cursor: pointer;
+        }
+        .thumbnail{
+            padding: 10px;
+        }
+        .popover-title{
+            font-weight: bold;
+            text-align: center;
+        }
+        /* centered columns styles see -> http://goo.gl/pv4oow */
+        .row-centered {
+            text-align:center;
+        }
+        .col-centered {
+            display:inline-block;
+            float:none;
+            /* reset the text-align */
+            text-align:left;
+            /* inline-block space fix */
+            margin-right:-15px;
+        }
     </style>
     <script type="text/javascript" charset="utf-8">
         // Pause the video when the modal is closed
@@ -80,7 +97,7 @@
           $('.movie-tile').hide().first().show("fast", function showNext() {
             $(this).next("div").show("fast", showNext);
           });
-          $('[data-toggle="tooltip"]').tooltip();
+          $('[data-toggle="popover"]').popover({ html : true });
         });
     </script>
 </head>
@@ -114,7 +131,9 @@
       </div>
     </div>
     <div class="container">
-      {movie_tiles}
+        <div class="row row-centered">
+          {movie_tiles}
+        </div>
     </div>
   </body>
 </html>
@@ -122,10 +141,11 @@
 
 
 # A single movie entry html template
-movie_tile_content = '''
-<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
-    <img data-toggle="tooltip" data-placement="bottom" src="{poster_image_url}" title="{storyline}" width="220" height="342">
-    <h2>{movie_title}</h2>
+movie_content = '''
+<div class="col-md-3 col-sm-4 col-xs-6 movie-tile col-centered" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
+    <div class="thumbnail" data-toggle="popover" data-placement="top auto" data-trigger="hover" title="{movie_title}" data-content="<p>{storyline}</p>">
+        <img class="img-responsive" src="{poster_image_url}" alt="{movie_title}">
+    </div>
 </div>
 '''
 
@@ -143,7 +163,7 @@ def create_movie_tiles_content(movies):
                               else None)
 
         # Append the tile for the movie with its content filled in
-        content += movie_tile_content.format(
+        content += movie_content.format(
             movie_title=movie.title,
             storyline=movie.storyline,
             poster_image_url=movie.poster_image_url,