some changes in select-menu page

app/app.js

@@ -18,3 +18,11 @@ app.config(['$routeProvider', function($routeProvider){
     })
 
 }])
+
+// app.run(function($animate) {
+//   $animate.enabled(true);
+//   $animate.enabled(document.body, false);
+//   $animate.enabled(document.getElementById('view-container'), true);
+// });
+//
+// app.value('$$isDocumentHidden', function() { return false; });

app/controllers/SelectMenuPageController.js

@@ -7,8 +7,20 @@ app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout'
   // })
   $scope.mealType = 'breakfast';
   $scope.meals = [];
+  $scope.selectedNumber = 0;
   $scope.selectMeal = function(i){
     var keys = Object.keys($scope.meals);
+
+    //animating btn
+    if(!$scope.meals[keys[i]].isSelected){
+      var selectedMealsBtn = angular.element(document.querySelector('.selected-meals-btn'));
+      selectedMealsBtn.addClass('selected-meals-btn-animate');
+      $timeout(function(){
+        selectedMealsBtn.removeClass('selected-meals-btn-animate');
+      },500)
+    }
+    //animating btn
+
     $scope.meals[keys[i]].isSelected = true;
     ref.child(keys[i]).set($scope.meals[keys[i]]);
   }
@@ -26,17 +38,4 @@ app.controller('SelectMenuPageController',['$scope','$firebaseObject','$timeout'
     })
   })
 
-  $scope.openSelectedMeals = function(){
-    var selectedMeals = angular.element(document.querySelector('.selected-meals'));
-    var appRoot = angular.element(document.querySelector('.app-root'));
-    var overlay2 = angular.element(document.querySelector('.overlay2'));
-    // selectedMeals.css({'transform': 'translateX(0)'})
-    appRoot.css({'transform': 'translateX(-281px)'});
-    overlay2.css({'pointer-events': 'auto','opacity':'1'});
-    overlay2.on('click',function(){
-      overlay2.css({'pointer-events': 'none','opacity':'0'});
-      appRoot.css({'transform': 'translateX(0px)'});
-    })
-  }
-
 }])

app/controllers/appRootController.js

@@ -1,4 +1,4 @@
-app.controller('AppRootController',['$scope','$window','$timeout',function($scope,$window,$timeout){
+app.controller('AppRootController',['$scope','$window','$timeout','$location',function($scope,$window,$timeout,$location){
   var window = angular.element($window);
   $scope.load = function(){
     $timeout(function(){
@@ -19,4 +19,41 @@ app.controller('AppRootController',['$scope','$window','$timeout',function($scop
       $scope.isOpenMenu = true;
     }
   }
+
+  $scope.selectedNumber = 0;
+  $scope.meals = {};
+  var ref = firebase.database().ref().child('meals');
+  $scope.selectedNumber = 0;
+  ref.on('value', snap => {
+    $timeout(function(){
+      var selectedNumber = 0;
+      angular.forEach(snap.val(),function(el){
+        if(el.isSelected === true){
+          selectedNumber++;
+        }
+      })
+      $scope.selectedNumber = selectedNumber;
+    })
+    $scope.meals = snap.val();
+  })
+  $scope.openSelectedMeals = function(){
+    var selectedMeals = angular.element(document.querySelector('.selected-meals'));
+    var appRoot = angular.element(document.querySelector('.app-root'));
+    var overlay2 = angular.element(document.querySelector('.overlay2'));
+    // selectedMeals.css({'transform': 'translateX(0)'})
+    appRoot.css({'transform': 'translateX(-281px)'});
+    overlay2.css({'pointer-events': 'auto','opacity':'1'});
+    overlay2.on('click',function(){
+      overlay2.css({'pointer-events': 'none','opacity':'0'});
+      appRoot.css({'transform': 'translateX(0px)'});
+    })
+  }
+
+  $scope.isShowMealsBtn = function(){
+    if($location.path() == '/select-menu'){
+      return true;
+    } else{
+      return false;
+    }
+  }
 }])

app/directives/selectedMeals.js

@@ -3,5 +3,16 @@ app.directive('selectedMeals',[function(){
     replace: true,
     resctrict: 'E',
     templateUrl: 'app/views/selected-meals.html',
+    scope: {
+      meals: '=',
+    },
+    controller: function($scope){
+      var ref = firebase.database().ref().child('meals');
+      $scope.unselect = function(i){
+        var keys = Object.keys($scope.meals);
+        $scope.meals[keys[i]].isSelected = false;
+        ref.child(keys[i]).set($scope.meals[keys[i]]);
+      }
+    }
   }
 }])

app/views/app-root.html

@@ -4,10 +4,14 @@
     <nav-menu toggle-menu="toggleMenu()" ng-class="isOpenMenu?'open-menu' : 'close-menu'"></nav-menu>
     <div ng-click="toggleMenu()" class="overlay" ng-class="{'overlay-active': isOpenMenu}"></div>
     <div class="overlay2"></div>
-    <selected-meals></selected-meals>
+    <selected-meals meals="meals"></selected-meals>
     <div class="preload-screen">
       <img src="content\images\preloader\Double Ring-1s-200px.gif">
     </div>
+    <div class="selected-meals-btn" ng-click="openSelectedMeals()" ng-show="isShowMealsBtn()">
+      <span>{{selectedNumber}}</span>
+      <span class="selected-meals-tip">BAG</span>
+    </div>
     <!-- Fixed elements -->
     <i class="fa fa-bars" ng-click="toggleMenu()"></i>
     <div class="logo">
@@ -15,5 +19,5 @@
     </div>
     <div class="undefined-btn"></div>
   </div>
-  <main ng-view></main>
+    <main ng-view></main>
 </div>

app/views/select-menu-page.html

@@ -1,7 +1,4 @@
 <div class="select-menu-page" ng-controller="SelectMenuPageController">
-  <div class="selected-meals-btn" ng-click="openSelectedMeals()">
-    <span class="fa fa-bars"></span>
-  </div>
   <div class="search">
     <div class="search-wrapper">
       <div class="search-description">
@@ -24,7 +21,7 @@
     </div>
   </div>
   <div class="meal-items">
-    <div ng-click="selectMeal($index)" class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == mealType">
+    <div class="meal-item" ng-repeat="meal in meals" ng-if="meal.type == mealType">
       <div class="meal-item-title">
         <h2>{{meal.mealName}}</h2>
       </div>
@@ -37,6 +34,16 @@
           <li ng-repeat="ingredient in meal.ingredients">- {{ingredient}}</li>
         </ul>
       </div>
+      <div class="meal-item-bottom">
+        <div class="meal-item-bottom-container">
+          <div class="meal-item-price">
+            <span>{{meal.price}} USD</span>
+          </div>
+          <div class="meal-item-btn">
+            <button type="button" ng-click="selectMeal($index)">Add</button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

app/views/selected-meals.html

@@ -1,3 +1,16 @@
 <div class="selected-meals">
-  <h1>hi</h1>
+  <div ng-repeat="meal in meals" ng-if="meal.isSelected" class="selected-meal">
+    <div class="selected-meal-img">
+      <img ng-src="{{meal.imageUrl}}">
+    </div>
+    <div class="selected-meal-title">
+      <h2>{{meal.mealName}}</h2>
+    </div>
+    <div class="selected-meal-delete" ng-click="unselect($index)">
+      <span class="fa fa-times"></span>
+    </div>
+  </div>
+  <div class="selected-meals-submit">
+    NEXT STEP
+  </div>
 </div>

content/css/styles.css

@@ -51,6 +51,7 @@ body * {
   background: #1D1D1F;
   text-align: center;
   transition: all 0.6s cubic-bezier(.645,.045,.355,1);
+  z-index: 3;
 }
 
 .preload-screen img{
@@ -85,8 +86,8 @@ body * {
 }
 
 main.ng-enter{
-  -webkit-transition: all 1.6s cubic-bezier(.645,.045,.355,1);
-  transition: all 1.6s cubic-bezier(.645,.045,.355,1);
+  -webkit-transition: all 2.6s cubic-bezier(.645,.045,.355,1);
+  transition: all 2.6s cubic-bezier(.645,.045,.355,1);
   opacity: 0.6s
 }
 
@@ -844,7 +845,8 @@ main.ng-enter.ng-enter-active .meal-item {
 
 /* select-menu-page */
 .select-menu-page {
-  background: rgb(252, 252, 254);
+  /* background: rgb(252, 252, 254); */
+  background: rgb(241, 241, 245);
 }
 
 .select-menu-page .search {
@@ -892,11 +894,11 @@ main.ng-enter.ng-enter-active .meal-item {
   margin: 0 auto;
   border-style: solid;
   border-width: 0 10px 10px 10px;
-  border-color: transparent transparent rgb(252, 252, 254) transparent;
+  border-color: transparent transparent rgb(241, 241, 245) transparent;
 }
 
 .select-menu-page .meal-items {
-  max-width: 1170px;
+  max-width: 1140px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
@@ -918,7 +920,9 @@ main.ng-enter.ng-enter-active .meal-item {
   perspective: 1000px;
   width: 31%;
   /* margin-right: 3.5%; */
-  margin-bottom: 35px;
+  margin-bottom: 40px;
+  box-shadow: 0 0 22px #cacaca;
+  transition: all 0.3s ease;
 }
 
 .select-menu-page .meal-item-title {
@@ -938,6 +942,8 @@ main.ng-enter.ng-enter-active .meal-item {
   padding: 5px 0;
   color: #fff;
   background: rgba(29, 29, 31, 0.7);
+  letter-spacing: 0.7px;
+  font-weight: normal;
 }
 
 /* .select-menu-page .meal-item:nth-child(3n + 3) {
@@ -952,6 +958,7 @@ main.ng-enter.ng-enter-active .meal-item {
   width: 100%;
   transition: all 0.4s ease;
   transform: translateX(0px);
+  margin-bottom: -4px;
 }
 
 .select-menu-page .meal-item-ingredients {
@@ -963,7 +970,7 @@ main.ng-enter.ng-enter-active .meal-item {
   width: 50%;
   background: rgba(29, 29, 31,0.95);
   transition: all 0.3s ease;
-  transform: rotateY(280.3deg);
+  transform: rotateY(280deg);
   transform-origin: 0 50%;
   color: #fff;
   padding: 12px;
@@ -971,6 +978,7 @@ main.ng-enter.ng-enter-active .meal-item {
 
 .select-menu-page .meal-item-ingredients h3 {
   margin: 5px;
+  font-weight: normal;
 }
 
 .select-menu-page .meal-item-ingredients li {
@@ -979,7 +987,12 @@ main.ng-enter.ng-enter-active .meal-item {
   margin: 10px 5px;
 }
 
-.select-menu-page .meal-item:hover .meal-item-ingredients{
+.select-menu-page .meal-item:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 30px #cacaca;
+}
+
+.select-menu-page .meal-item:hover .meal-item-ingredients {
   transform: rotateY(360deg);
 }
 
@@ -992,24 +1005,209 @@ main.ng-enter.ng-enter-active .meal-item {
   opacity: 0;
 }
 
+.select-menu-page .meal-item:hover .meal-item-bottom-container {
+  /* transform: translate3d(0, 100%, 0); */
+  background: rgba(29, 29, 31, 0);
+}
+
+.select-menu-page .meal-item:hover .meal-item-bottom-container button {
+  transform: scale(1.2);
+}
+
+.select-menu-page .meal-item:hover .meal-item-bottom-container span {
+  opacity: 0;
+}
+
+.select-menu-page .meal-item-bottom {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+.select-menu-page .meal-item-bottom-container {
+  display: flex;
+  transition: all 0.4s ease;
+  transform: translateX(0px);
+  text-align: center;
+  text-transform: capitalize;
+  padding: 5px 0;
+  background: rgba(29, 29, 31, 0.7);
+}
+
+.select-menu-page .meal-item-price {
+  width: 50%;
+  text-align: left;
+}
+
+.select-menu-page .meal-item-price span{
+  color: #fff;
+  font-size: 16px;
+  position: relative;
+  top: 4px;
+  left: 15px;
+}
+
+.select-menu-page .meal-item-btn {
+  width: 50%;
+  text-align: right;
+}
+
+.select-menu-page .meal-item-btn button{
+  position: relative;
+  background: #1D1D1F;
+  border: none;
+  color: #fff;
+  padding: 5px 20px;
+  margin-right: 15px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  outline: none;
+}
+
 .selected-meals-btn {
   position: absolute;
-  right: 15px;
-  top: 15px;
+  right: 20px;
+  top: 10px;
   z-index: 2;
+  width: 31px;
+  height: 31px;
+  border-radius: 50%;
+  background: rgba(29, 29, 31,.9);
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  box-shadow: 0 0 5px #cacaca;
+}
+
+.selected-meals-btn:hover .selected-meals-tip {
+  opacity: 1;
+}
+
+
+.selected-meals-btn span:nth-child(1){
+  position: relative;
+  top: 7px;
 }
 
+.selected-meals-btn-animate {
+  transform: scale(1.3);
+}
+
+.selected-meals-tip {
+  position: absolute;
+  color: #000;
+  right: 40px;
+  bottom: 7px;
+  font-size: 14px;
+  opacity: 0;
+  transition: all 0.3s ease;
+  letter-spacing: 1.5px;
+}
+
+
 .selected-meals {
   position: absolute;
   top: 0;
   right: 0;
   height: 100vh;
   width: 281px;
-  background-color: #1D1D1F;
-  padding: 50px;
-  padding-top: 100px;
+  background-color: rgb(29, 29, 31);
+  padding: 25px;
   transition: all 0.6s cubic-bezier(.645,.045,.355,1);
   transform: translateX(281px);
+  overflow-y: scroll;
+}
+
+.selected-meals .selected-meal {
+  margin: 13px 0;
+  position: relative;
+}
+
+.selected-meals::-webkit-scrollbar {
+  width: 0;
+}
+
+.selected-meals .selected-meal-img {
+  width: 100%;
+  overflow: hidden;
+  height: 40px;
+  border-radius: 5px;
+}
+
+.selected-meals .selected-meal img{
+  width: 100%;
+  position: relative;
+  bottom: 150%;
+}
+
+.selected-meals .selected-meal-title {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  background: rgba(29, 29, 31, 0.4);
+  width: 100%;
+  height: 100%;
+}
+
+.selected-meals .selected-meal-title h2 {
+  text-align: center;
+  text-transform: capitalize;
+  color: #fff;
+  letter-spacing: 0.7px;
+  font-weight: normal;
+  margin-top: 7px;
+}
+
+.selected-meals .selected-meal-delete {
+  position: absolute;
+  right: 9px;
+  top: 10px;
+  height: 20px;
+  width: 20px;
+  background: rgba(29, 29, 31,1);
+  border-radius: 50%;
+  text-align: center;
+  z-index: 1;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.selected-meals .selected-meal-delete:hover{
+  opacity: 1;
+}
+
+.selected-meals .selected-meal-delete span {
+  color: #F1F1F5;
+  position: relative;
+  top: 1px;
+}
+
+.selected-meal.ng-leave {
+  transition: all 0.7s ease;
+}
+
+.selected-meal.ng-leave.ng-leave-active {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.selected-meals-submit {
+  position: relative;
+  left: -30px;
+  right: -30px;
+  bottom: -30px;
+  width: 124%;
+  padding: 20px 0;
+  background-color: #F1F1F5;
+  text-align: center;
+  font-size: 15px;
+  font-weight: bold;
+  letter-spacing: 3px;
+  cursor: pointer;
 }
 /* select-menu-page */