Initial steps on issue #580. Slide on guide creation

openfarmcc · Dec 30, 2015 · ab60c29 · ab60c29
1 parent 15b96ba
commit ab60c29
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 20 deletions.
diff --git a/app/assets/javascripts/angular-libs/guides/directives/guides.stageButtons.directive.js b/app/assets/javascripts/angular-libs/guides/directives/guides.stageButtons.directive.js
@@ -26,17 +26,31 @@ openFarmApp.directive('stageButtons', ['$rootScope', '$location',
         $scope.cancelUrl = $attrs.cancelUrl || '/';
         $scope.backText = $attrs.backText || undefined;
 
-        // $scope.previousStep = $scope.previousStep;
+        var recalcHeight = function() {
+          var $viewing = $('.step:not(.ng-hide)')
 
+          var maxHeight = Math.max.apply(null, $(".step").map(function () {
+              return $(this).height();
+          }).get());
+
+          if (maxHeight < 600) {
+            maxHeight = 600;
+          }
+
+          $viewing.parent().height(maxHeight);
+        };
 
         $scope.switchToStep = function(step){
           $rootScope.step = step;
+          recalcHeight();
           $location.hash($rootScope.step);
           scrollToTop();
         };
 
         $scope.goBack = function() {
+          $rootScope.previousStep = $rootScope.step;
           $rootScope.step -= 1;
+          recalcHeight();
           $location.hash($rootScope.step);
           scrollToTop();
         }
@@ -45,31 +59,24 @@ openFarmApp.directive('stageButtons', ['$rootScope', '$location',
           window.scrollTo($('.guides').scrollTop(), 0);
         }
 
-        // $scope.nextStep = function(){
-        //   if ($rootScope.step === 3){
-        //     $scope.newGuide.hasEditedStages = true;
-        //   }
-        //   $rootScope.step += 1;
-        //   $location.hash($rootScope.step);
-        //   scrollToTop();
-        // };
-
         $scope.previousStep = function(){
+          $rootScope.previousStep = $rootScope.step;
           $rootScope.step -= 1;
           $location.hash($rootScope.step);
           scrollToTop();
+          recalcHeight();
         };
 
         $scope.tunnelToNextStage = function(stage) {
           $scope.nextStage(stage);
+          recalcHeight();
           scrollToTop();
         }
 
         $scope.nextStep = function(){
-          // if ($rootScope.step === 3){
-            // $scope.newGuide.hasEditedStages = true;
-          // }
+          $rootScope.previousStep = $rootScope.step;
           $rootScope.step += 1;
+          recalcHeight();
           $location.hash($rootScope.step);
           scrollToTop();
         }

diff --git a/app/assets/javascripts/guides/new.js b/app/assets/javascripts/guides/new.js
@@ -188,11 +188,31 @@ openFarmApp.controller('newGuideCtrl', ['$scope', '$http', '$q',
 
   // Methods to switch between steps
 
+  var recalcHeight = function() {
+    var $viewing = $('.step:not(.ng-hide)')
+
+    var maxHeight = Math.max.apply(null, $(".step").map(function () {
+        return $(this).height();
+    }).get());
+
+    if (maxHeight < 850) {
+      maxHeight = 850;
+    }
+
+    $viewing.parent().height(maxHeight);
+  };
+
   $scope.switchToStep = function(step){
+    $rootScope.previousStep = $rootScope.step;
     $rootScope.step = step;
+
+    recalcHeight();
+
     $location.hash($rootScope.step);
   };
 
+  recalcHeight();
+
   // Sending methods
 
   var buildParametersFromScope = function(){

diff --git a/app/assets/stylesheets/styles/components/guides/_new_guides.css.scss b/app/assets/stylesheets/styles/components/guides/_new_guides.css.scss
@@ -22,8 +22,16 @@
 }
 
 .new-guide {
+  position: relative;
+  height: 100%;
+
   section.step {
     margin-bottom: 4rem;
+    transition: transform 1s, opacity 1s;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
 
     h1 {
       font-size: 2rem;
@@ -37,8 +45,43 @@
       font-size: 1.2rem;
       font-family: $body-font-family;
     }
+
+    &.ng-hide {
+      display: block !important;
+      opacity: 0;
+      pointer-events: none;
+      transform: translateX(180px);
+      opacity: 0;
+    }
+
+
+    // coming from the left, appearing
+    &.from-left:not(.ng-hide) {
+      transform: translate(0px);
+      opacity: 1;
+    }
+
+    // coming from the left, disappearing
+    &.ng-hide.from-left {
+      transform: translateX(-180px);
+      opacity: 0;
+    }
+
+    // coming from the right, appearing
+    &.from-right:not(.ng-hide) {
+      transform: translate(0px);
+      opacity: 1;
+    }
+
+    // coming from the right, disappearing
+    &.ng-hide.from-right {
+      transform: translateX(180px);
+      opacity: 0;
+    }
   }
 
+
+
   .button-wrapper {
     margin-top: 2rem;
 

diff --git a/app/views/guides/new/_new_guide_step_1.html.erb b/app/views/guides/new/_new_guide_step_1.html.erb
@@ -1,4 +1,8 @@
-<section name="step-1" class="step" ng-show="step === 1" ng-if="!$scope.loadingEverything">
+<section name="step-1"
+  class="step"
+  ng-show="step === 1"
+  ng-if="!$scope.loadingEverything"
+  ng-class="{'from-right': step < 1, 'from-left': step > 1}">
   <form accept-charset="UTF-8"
     class="getting-started"
     id="new-guide-step-1"

diff --git a/app/views/guides/new/_new_guide_step_2.html.erb b/app/views/guides/new/_new_guide_step_2.html.erb
@@ -1,4 +1,7 @@
-<section name="step-2" class="step" ng-show="step === 2">
+<section name="step-2"
+  class="step"
+  ng-show="step === 2"
+  ng-class="{'from-right': step < 2, 'from-left': step > 2}">
     <form class="life-stages">
       <div class="instructions text-center">
         <h2><%= t('.choose_the_life_stages') %></h2>

diff --git a/app/views/guides/new/_new_guide_step_3.html.erb b/app/views/guides/new/_new_guide_step_3.html.erb
@@ -1,4 +1,7 @@
-<section name="step-3" class="step stage-details" ng-show="step === 3">
+<section name="step-3"
+  class="step stage-details"
+  ng-show="step === 3"
+  ng-class="{'from-right': step < 3, 'from-left': step > 3}">
 
   <div ng-show="newGuide.selectedStagesCount === 0">
     <%= t('.select_some_stages') %>

diff --git a/app/views/guides/new/_new_guide_step_4.html.erb b/app/views/guides/new/_new_guide_step_4.html.erb
@@ -1,4 +1,7 @@
-<section name="step-4" class="step" ng-if="step === 4">
+<section name="step-4"
+  class="step"
+  ng-show="step === 4"
+  ng-class="{'from-right': 4 < previousStep, 'from-left': step > 4}">
   <div class="instructions text-center">
     <h1>
       <%= t('.almost_done') %>

diff --git a/app/views/guides/new/_new_guide_steps.html.erb b/app/views/guides/new/_new_guide_steps.html.erb
@@ -33,7 +33,7 @@
             </a>
           </li>
           <li>
-            <a ng-class="{ 'active' : step === 4, 'disabled' : !newGuide.crop || !selectedStagesCount > 0, 'check' : newGuide.name }"
+            <a ng-class="{ 'active' : step === 4, 'disabled' : !newGuide.crop || !newGuide.selectedStagesCount > 0, 'check' : newGuide.name }"
             ng-click="switchToStep(4)">
               <%= t('.final_touches') %>
             </a>
@@ -43,11 +43,12 @@
     </div>
   </div>
 
-  <div class="bar-header life-stage-nav stage-details" ng-show="step === 3">
+  <section class="bar-header life-stage-nav stage-details" ng-show="step === 3"
+    ng-class="{'from-right': step < 3, 'from-left': step > 3}">
     <div class="container">
       <div class="row">
         <%= render 'guides/new/stage_details/chosen_stages' %>
       </div>
     </div>
-  </div>
+  </section>
 </div>