udacity · CrandellWS · Oct 16, 2015 · Oct 16, 2015 · Oct 16, 2015 · Oct 16, 2015
diff --git a/__init__.py 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
@@ -12,18 +12,15 @@
     <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;
-        }
-        #trailer .modal-dialog {
-            margin-top: 200px;
-            width: 640px;
-            height: 480px;
+            margin-left: 2px;
+            margin-right: 2px;
         }
         .hanging-close {
             position: absolute;
@@ -35,14 +32,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 +45,33 @@
             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;
+        }
+        .movie-btn{
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     </style>
     <script type="text/javascript" charset="utf-8">
         // Pause the video when the modal is closed
@@ -65,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>", {
@@ -77,9 +93,38 @@
         });
         // 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);
           });
+
+          //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
+         * 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>
@@ -90,11 +135,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>
@@ -113,18 +158,22 @@
       </div>
     </div>
     <div class="container">
-      {movie_tiles}
+        <div class="row row-centered">
+          {movie_tiles}
+        </div>
     </div>
   </body>
 </html>
 '''
 
 
 # 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">
-    <h2>{movie_title}</h2>
+movie_content = '''
+<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>
 '''
 
@@ -142,8 +191,9 @@ 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,
             trailer_youtube_id=trailer_youtube_id
         )
@@ -165,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)
+
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		## this file is required to use
		## from xxx import x