Smooth javascript transitions in info and about views

website/static/css/style.css

@@ -40,10 +40,6 @@ body {
     background-size: cover;
     padding-top: 50px;
 }
-
-.clip{
-    overflow: hidden;
-}
 .title{
     text-align: center;
     font-size: 50px;
@@ -209,6 +205,9 @@ ul.ui-autocomplete {
     -ms-transition: opacity 356ms ease-in-out, -ms-filter 356ms ease-in-out;
     transition: opacity 356ms ease-in-out, "filter" 356ms ease-in-out;
 }
+.clip-height{
+    max-height: 60%;
+}
 /* Custom Responsive Classes */
 /* xs */
 @media (min-width: 480px) {

website/static/js/about.js

+// Toggles the about page
 $(document).ready(function(){
+    var lastosition;
     $('#about-link').click(function(){
-         $(this).parent().toggleClass('active');
-         $('#about-body').slideToggle(356);
-         $('.main-container').toggleClass('grid-blur');
-         // Prevent body from scolling when about section is active
-         $('body').toggleClass('clip');
-         $('#about-link-text, #about-close-nav').toggle();
+        // Keep track of the users vertical position so it can be scolled back
+        //to when the window is closed
+        position = $(window).scrollTop();
+        console.log(position);
+        $('#about-body').slideToggle(356);
+        $('.main-container').toggleClass('grid-blur');
+        $(this).parent().toggleClass('active');
+        // Replace "About" link with the close icon
+        $('#about-link-text, #about-close-nav').toggle();
+        // Prevent body from scolling when about section is active
+        $('.main-container').slideToggle(500);
+        // Scroll back to top
+        $('html, body').animate({
+                scrollTop: 0
+        }, 500);
     });
     $('#about-close').click(function(){
-         $('#about-link').parent().removeClass('active');
-         $('#about-body').slideUp(356);
-         $('.main-container').removeClass('grid-blur');
-         $('body').removeClass('clip');
-         $('#about-link-text').show();
-         $('#about-close-nav').hide();
+        $('#about-link').parent().removeClass('active');
+        $('#about-body').slideUp(356);
+        $('.main-container').removeClass('grid-blur');
+        $('body').removeClass('clip');
+        $('#about-link-text').show();
+        $('#about-close-nav').hide();
+        $('.main-container').show();
+        // Scroll back to saved position
+        $('html, body').animate({
+            scrollTop: position
+        }, 500);
     });
 });

website/static/js/info.js

@@ -33,6 +33,9 @@ $(document).ready(function() {
     // Displays more info about a restaurant on-click
     $(document).on('click', '.grid-box', function() {
         grid_id = $(this).attr('id');
+        // Keep track of the users vertical position so it can be scolled back
+        //to when the window is closed
+        position = $(window).scrollTop();
         // Search though the restaurnts object to find the selected restaurant's info
         var restaurant;
         $.each(restaurants, function(idx, restaurant_i) { 
@@ -91,13 +94,21 @@ $(document).ready(function() {
             $('#info-body').slideDown(300);
             lastClicked = grid_id;
         }
-        if ($(window).width() <= 992) {
-            // On mobile displays, disable scrolling when info body is active
-            $('body').addClass('clip');
+        if ($(window).width() < 992) {
+            // On mobile displays, hide grid to disable scrolling when info body is active
+            $('.main-container').slideToggle(500);
+            // Scroll to top of page to prevent body from going out of view
+            $('html, body').animate({
+                    scrollTop: 0
+            }, 430);
         }
     });
     $('#info-close').click(function() {
         $('#info-body').slideUp(350);
         $('body').removeClass('clip');
+        $('.main-container').show();
+        $('html, body').animate({
+            scrollTop: position
+        }, 350);
     });
 });
\ No newline at end of file