Food Orders

food-orders.markdown

Food Orders

A Pen by Jack Thomson on CodePen.

License.

index.haml

.app{'ng-app' => 'app'}
  %div
    %h1 Food Orders
    %p Make your order in style
  .app_inner{'ng-controller' => 'FoodOrdersController as vm'}
    .app_inner__header
      %div
        %i{'class' => 'material-icons', 'ng-click' => 'vm.previousItem()', 'ng-class' => '{"show": !vm.takeOrder, "hide": vm.takeOrder}'} keyboard_arrow_left
        %h1{'ng-class' => 'vm.textAnimationName'} {{ vm.activeFood.name }}
        %i{'class' => 'material-icons', 'ng-click' => 'vm.nextItem()', 'ng-class' => '{"show": !vm.takeOrder, "hide": vm.takeOrder}'} keyboard_arrow_right
        %i{'class' => 'material-icons', 'ng-click' => 'vm.takeOrder = !vm.takeOrder; vm.takeOrderAnimationName = "slide-down"', 'ng-show' => 'vm.takeOrder', 'ng-class' => '{"show": vm.takeOrder, "hide": !vm.takeOrder}'} close
      
      .action
        %button{'ng-click' => 'vm.takeOrder = true; vm.takeOrderAnimationName = "slide-up"', 'ng-show' => '!vm.takeOrder', 'ng-class' => '{"hide": vm.takeOrder, "show": !vm.takeOrder}'} Create order
    .app_inner__body{'ng-class' => 'vm.takeOrderAnimationName'}
      %ul{'ng-class' => 'vm.fadeAnimationName', 'ng-show' => '!vm.takeOrder'}
        %strong Included
        %li{'ng-repeat' => 'ingredient in vm.activeFood.ingredients'} {{ ingredient }}
      %ul{'ng-class' => 'vm.fadeAnimationName', 'ng-show' => '!vm.takeOrder'}
        %strong Extras
        %li{'ng-repeat' => 'extra in vm.activeFood.extras'} {{ extra }}
        

      %div{'ng-show' => 'vm.takeOrder', 'ng-class' => '{"show": vm.takeOrder, "hide": !vm.takeOrder}'}
        %div
          .tile
            %span Price
            %span £19.99
          .tile
            %span Quantity
            %input{'type' => 'text', 'value' => '1'}
        
        .actions
          %button{'ng-click' => 'vm.done = true', 'ng-class' => '{"load": vm.done}'} {{ vm.done ? '' : 'Buy now (£19.99)' }}
          %p Your order will be ready within 30 minutes of ordering

script.js

angular
  .module("app", ['ngAnimate'])
  .controller("FoodOrdersController", FoodOrdersController);

FoodOrdersController.$inject = ['$scope']
function FoodOrdersController($scope) {
  let vm = this;
  let animationTime = 500
  vm.index = 0
  vm.textAnimationName = 'slide-out'
  vm.fadeAnimationName = 'fade-in'
  vm.fadeAnimationName = 'fade-in'
  vm.takeOrder = false
  vm.availableFoods = [
    {
      name: "Cheeseburger",
      ingredients: ["Beef Patty", "Mayonaise", "Gherkin", "American Cheese"],
      extras: ['Chicken Breast', 'Crème Freiche']
    },
    {
      name: "Pasta and pesto",
      ingredients: ["Basil Pesto", "Pine Nuts", "Chicken", "Avacado"],
      extras: ['Spinach']
    }
  ];
  vm.activeFood = vm.availableFoods[vm.index];

  vm.nextItem = () => {
    vm.textAnimationName = 'slide-in'
    vm.fadeAnimationName = 'fade-out'
    if(vm.index + 1 > vm.availableFoods.length - 1) {
      return
    }
    setTimeout(() => {
      vm.index++
      vm.activeFood = vm.availableFoods[vm.index];
      $scope.$apply()
    }, animationTime - 200)
  };

  vm.previousItem = () => {
    vm.textAnimationName = 'slide-out'
    vm.fadeAnimationName = 'fade-in'
    if(vm.index === 0) {
      return
    }
    setTimeout(() => {
      vm.index--
      vm.activeFood = vm.availableFoods[vm.index];
      $scope.$apply()
    }, animationTime - 200)
  };
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.14/angular-animate.js"></script>

style.scss

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  overflow: hidden;
}

html,body {
  background: #F0F2F8;
}

.app {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  
  & > div {
    display: flex;
    flex-flow: column wrap;
    
    h1 {
      color: rgba(54, 53, 55, 0.9);
    }

    p {
      color: rgba(54, 53, 55, 0.8);
    }
  }
  
  &_inner {
    width: 300px;
    height: 500px;
    border-radius: 10px;
    display: flex;
    flex-flow: column wrap;
    background: linear-gradient(45deg, #BCE7FD, #7D5BA6);
    box-shadow: 0 5px 30px #d5daea;
    
    &__header {
      background: transparent;
      flex: 1 0 auto;
      display: flex;
      flex-flow: column wrap;
      justify-content: space-evenly;
      align-items: center;
      
      & > div {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
      
        i {
          color: rgba(255, 255, 255, 0.8);
          font-size: 32px;
          cursor: pointer;
        }

        h1 {
          color: rgba(255, 255, 255, 0.8);
          font-size: 20px;
        }
      }
      
      button {
        border: 1px solid rgba(255, 255, 255, 0.8);
        background: transparent;
        color: rgba(255, 255, 255, 0.8);
        font-size: 12px;
        font-weight: 500;
        padding: 12px 24px;
        border-radius: 40px;
        min-width: 100px;
        cursor: pointer;
        outline: none;
        inline: none;
        
        &:hover {
          background: #FFF;
          color: rgba(54, 53, 55, 0.8);
        }
      }
    }
    
    &__body {
      background: #FFF;
      display: flex;
      flex-flow: column wrap;
      flex: 1.5;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      
      ul {
        padding: 24px;
        width: 50%;
        height: 100%;
        
        &:not(:last-of-type) {
          border-right: 1px solid #F7F7F7;
        }
        
        strong {
          font-weight: 700;
          color: rgba(54, 53, 55, 0.85);
          font-size: 14px;
        }
        
        li {
          list-style: none;
          font-weight: 500;
          font-size: 14px;
          color: rgba(54, 53, 55, 0.85);
          padding: 14px 0;
        }
      }
      
      div {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        width: 300px;

        & > .tile {
          border: 1px solid #EEE;
          display: flex;
          flex-flow: column wrap;
          justify-content: center;
          align-items: center;
          width: 50%;
          height: 100px;
          padding: 24px;
          color: rgba(54, 53, 55, 0.8);

          &:first-of-type {
            border-top-left-radius: 10px;
          }
          &:last-of-type {
            border-top-right-radius: 10px;
          }
          
          & > span:first-of-type {
            font-weight: 700;
            color: rgba(54, 53, 55, 0.8);
          }
          
          & > input {
            border: none;
            text-align: center;
            outline: none;
            font-weight: 700;
            font-size: 14px;
            width: 50%;
            color: rgba(54, 53, 55, 0.8);
          }
        }
        
        & > div {
          display: flex;
          
          &.actions {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            margin-top: 24px;

            & > button {
              background: linear-gradient(45deg, #BCE7FD, #7D5BA6);
              box-shadow: 0 5px 30px #d5daea;
              padding: 12px;
              border: none;
              border-radius: 20px;
              color: rgba(255, 255, 255, 0.8);
              width: 150px;
              cursor: pointer;
              outline: none;
              inline: none;
            }
            
            & > p {
              font-weight: 500;
              font-size: 14px;
              width: 90%;
              text-align: center;
              margin-top: 24px;
            }
          }
        }
      }
    }
  }
}

// Slide out animation
.slide-out.ng-animate { 
  animation: none 0s;
}

.slide-out {
  animation: slide-out 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1
  }
}

// Slide in animation

.slide-in.ng-animate { 
  animation: none 0s;
}

.slide-in {
  animation: slide-in 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes slide-in {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1
  }
}

// Fade in animation

.fade-in.ng-animate { 
  animation: none 0s;
}

.fade-in {
  animation: fade-in 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes fade-in {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

// Fade out animation

.fade-out.ng-animate { 
  animation: none 0s;
}

.fade-out {
  animation: fade-out 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes fade-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

// Fade out-in animation

.fade-out-in.ng-animate { 
  animation: none 0s;
}

.fade-out-in {
  animation: fade-out-in 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes fade-out-in {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// Slide up animation

.slide-up.ng-animate { 
  animation: none 0s;
}

.slide-up {
  animation: slide-up 500ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(0);
  }
  100% {
    flex: 5;
    border-radius: 10px;
  }
}

// Slide down animation

.slide-down.ng-animate { 
  animation: none 0s;
}

.slide-down {
  flex: 5;
  animation: slide-down 500ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
}

@keyframes slide-down {
  0% {
    flex: 5;
  }
  100% {
    flex: 1.5;
  }
}

// Loader animation

.load.ng-animate { 
  animation: none 0s;
}

.load {
  animation: load 1000ms linear forwards infinite;
}

@keyframes load {
  from {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: transparent;
    box-shadow: none;
    border-top: 4px solid #BCE7FD;
    border-right: 4px solid #BCE7FD;
    border-bottom: 4px solid #BCE7FD;
    border-left: 4px solid transparent;
  }
  to {
    transform: rotate(360deg);
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: transparent;
    box-shadow: none;
    border-top: 4px solid #BCE7FD;
    border-right: 4px solid #BCE7FD;
    border-bottom: 4px solid #BCE7FD;
    border-left: 4px solid transparent;
  }
}

.hide {
  opacity: 0;
  transition: 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.show {
  opacity: 1;
  transition: 1000ms 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
}