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/7] 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/7] 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/7] 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/7] 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,

From 62e3d3a2e3cfdcd4f27567f957f160e9c1a7c550 Mon Sep 17 00:00:00 2001
From: William Crandell <william@crandell.ws>
Date: Sat, 17 Oct 2015 19:54:26 -0400
Subject: [PATCH 5/7] Make the trailer modal use resposive design

  Additional Note
  The Base64 image was designed by me and exported with the
  Base64 GIMP Plugin https://github.com/CrandellWS/base64-gimp-plugin
  https://github.com/CrandellWS/Udacity-Nanodegree/tree/master/Programming%20Foundations%20with%20Python/Lesson%203/img_source
---
 fresh_tomatoes.py | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index e9ba8a696..e94109c6c 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -22,11 +22,6 @@
             margin-left: 2px;
             margin-right: 2px;
         }
-        #trailer .modal-dialog {
-            margin-top: 200px;
-            width: 640px;
-            height: 480px;
-        }
         .hanging-close {
             position: absolute;
             top: -12px;
@@ -99,6 +94,22 @@
           });
           $('[data-toggle="popover"]').popover({ html : true });
         });
+        /**
+         * Vertically center Bootstrap 3 modals
+         * see -> https://gist.github.com/CrandellWS/8bcd88c6eca4a8260e16
+         */
+        $(function() {
+            function reposition() {
+                var modal = $(this),
+                    dialog = modal.find('.modal-dialog');
+                modal.css('display', 'block');
+                dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
+            }
+            $('.modal').on('show.bs.modal', reposition);
+            $(window).on('resize', function() {
+                $('.modal:visible').each(reposition);
+            });
+        });
     </script>
 </head>
 '''
@@ -108,11 +119,11 @@
 main_page_content = '''
   <body>
     <!-- Trailer Video Modal -->
-    <div class="modal" id="trailer">
-      <div class="modal-dialog">
+    <div class="modal " id="trailer">
+      <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
-            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
+            <img src='data:image/x-png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgElEQVQ4y72TPS9DYRiGr/dg5E+0/Q8MRBgkJho1iY+FjaHMIh2QMJgQCX/AgoVExEmbaGKxSHxUWqOxWqU4vQ3nnPZoNSae6bwn9/Xc7/PkfuHfSyHFZSuvvGzFFfpNbMtRsBzZTSEN14lrUPRnue61U8e8aFmPkhoQheRca0wxreuzKn/WgmKaUEaSwq7S8ohdrEvKQJpNKgCUWCEHlMgB7LlC4/bnDkvscQxAJ3OUSJADDDP0udqIyUArAENYYJjknTMgTRtPbl+mfDkMseY72PR4s1Rd+N4dIGW6fSBPh/+3whbn3vckg8HNFE17behqeSMCcIPTsH4XuPKPr6wGgDTb3sZqKhc49DxZ5Na7+wAA52zUXA7q1lokQRYwTNOP2OUEgC5maamu1QIwD6RgnywA4/QDhil6AbhwwZTJBKMRlvOmJY3qNJCkinYU06o+JClSn6aoVFKyIahHKkvSyE95japZjTR7EeEGCynp57Q5NK+kCiooqflfxH9SX7sUOLwGLpqpAAAAAElFTkSuQmCC' alt='Close' />
           </a>
           <div class="scale-media" id="trailer-video-container">
           </div>

From 54996c3a7740d0e503b863758f207a56af133862 Mon Sep 17 00:00:00 2001
From: William Crandell <william@crandell.ws>
Date: Sat, 17 Oct 2015 19:54:26 -0400
Subject: [PATCH 6/7] Make the trailer modal use resposive design

  Additional Note
  The Base64 image was designed by me and exported with the
  Base64 GIMP Plugin https://github.com/CrandellWS/base64-gimp-plugin
  https://github.com/CrandellWS/Udacity-Nanodegree/tree/master/Programming%20Foundations%20with%20Python/Lesson%203/movies/img_source
---
 fresh_tomatoes.py | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index e9ba8a696..e94109c6c 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -22,11 +22,6 @@
             margin-left: 2px;
             margin-right: 2px;
         }
-        #trailer .modal-dialog {
-            margin-top: 200px;
-            width: 640px;
-            height: 480px;
-        }
         .hanging-close {
             position: absolute;
             top: -12px;
@@ -99,6 +94,22 @@
           });
           $('[data-toggle="popover"]').popover({ html : true });
         });
+        /**
+         * Vertically center Bootstrap 3 modals
+         * see -> https://gist.github.com/CrandellWS/8bcd88c6eca4a8260e16
+         */
+        $(function() {
+            function reposition() {
+                var modal = $(this),
+                    dialog = modal.find('.modal-dialog');
+                modal.css('display', 'block');
+                dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
+            }
+            $('.modal').on('show.bs.modal', reposition);
+            $(window).on('resize', function() {
+                $('.modal:visible').each(reposition);
+            });
+        });
     </script>
 </head>
 '''
@@ -108,11 +119,11 @@
 main_page_content = '''
   <body>
     <!-- Trailer Video Modal -->
-    <div class="modal" id="trailer">
-      <div class="modal-dialog">
+    <div class="modal " id="trailer">
+      <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
-            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
+            <img src='data:image/x-png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABKfvVzAAAACXBIWXMAAAsTAAALEwEAmpwYAAABgElEQVQ4y72TPS9DYRiGr/dg5E+0/Q8MRBgkJho1iY+FjaHMIh2QMJgQCX/AgoVExEmbaGKxSHxUWqOxWqU4vQ3nnPZoNSae6bwn9/Xc7/PkfuHfSyHFZSuvvGzFFfpNbMtRsBzZTSEN14lrUPRnue61U8e8aFmPkhoQheRca0wxreuzKn/WgmKaUEaSwq7S8ohdrEvKQJpNKgCUWCEHlMgB7LlC4/bnDkvscQxAJ3OUSJADDDP0udqIyUArAENYYJjknTMgTRtPbl+mfDkMseY72PR4s1Rd+N4dIGW6fSBPh/+3whbn3vckg8HNFE17behqeSMCcIPTsH4XuPKPr6wGgDTb3sZqKhc49DxZ5Na7+wAA52zUXA7q1lokQRYwTNOP2OUEgC5maamu1QIwD6RgnywA4/QDhil6AbhwwZTJBKMRlvOmJY3qNJCkinYU06o+JClSn6aoVFKyIahHKkvSyE95japZjTR7EeEGCynp57Q5NK+kCiooqflfxH9SX7sUOLwGLpqpAAAAAElFTkSuQmCC' alt='Close' />
           </a>
           <div class="scale-media" id="trailer-video-container">
           </div>

From a995a40596c96ad7732c0beea0137acde887792c Mon Sep 17 00:00:00 2001
From: William Crandell <william@crandell.ws>
Date: Sun, 18 Oct 2015 06:09:56 -0400
Subject: [PATCH 7/7] Redid the modal adding title button

  The title button brings up a discription of the movie.
  This is done for better support on mobile devices.
---
 fresh_tomatoes.py | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/fresh_tomatoes.py b/fresh_tomatoes.py
index e94109c6c..8d976ddaf 100644
--- a/fresh_tomatoes.py
+++ b/fresh_tomatoes.py
@@ -68,6 +68,10 @@
             /* inline-block space fix */
             margin-right:-15px;
         }
+        .movie-btn{
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     </style>
     <script type="text/javascript" charset="utf-8">
         // Pause the video when the modal is closed
@@ -77,7 +81,7 @@
             $("#trailer-video-container").empty();
         });
         // Start playing the video whenever the trailer modal is opened
-        $(document).on('click', '.movie-tile', function (event) {
+        $(document).on('click', '.movie-img', function (event) {
             var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
             var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId + '?autoplay=1&html5=1';
             $("#trailer-video-container").empty().append($("<iframe></iframe>", {
@@ -89,10 +93,22 @@
         });
         // Animate in the movies when the page loads
         $(document).ready(function () {
+          var deferred = $.Deferred();
+          $(".movie-btn").hide();
+          var movie_tile_length = $('.movie-tile').length
+          i = 0;
           $('.movie-tile').hide().first().show("fast", function showNext() {
             $(this).next("div").show("fast", showNext);
+            i++;
+            if(i == movie_tile_length)
+                $(".movie-btn").show('slow');
+            console.log(i);
           });
-          $('[data-toggle="popover"]').popover({ html : true });
+              
+          //is_touch_device see -> http://stackoverflow.com/a/15691248/1815624
+          var is_touch_device = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
+          $('[data-toggle="popover"]').popover({ html : true, trigger: is_touch_device ? "focus" : "hover focus"});
+          
         });
         /**
          * Vertically center Bootstrap 3 modals
@@ -153,9 +169,10 @@
 
 # A single movie entry html template
 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 class="col-md-3 col-sm-4 col-xs-6 col-centered movie-tile">
+    <div class="thumbnail">
+        <img class="img-responsive movie-img" src="{poster_image_url}" alt="{movie_title}" data-trailer-youtube-id="{trailer_youtube_id}" data-toggle="modal" data-target="#trailer">
+        <button class="btn btn-sm btn-block movie-btn" data-toggle="popover" data-placement="top auto" title="{movie_title}" data-content="<p>{storyline}</p>">{movie_title}</button>
     </div>
 </div>
 '''
@@ -198,3 +215,7 @@ def open_movies_page(movies):
     # open the output file in the browser (in a new tab, if possible)
     url = os.path.abspath(output_file.name)
     webbrowser.open('file://' + url, new=2)
+
+
+
+