added animations

chromebook-checkout-meteor/.meteor/packages

@@ -15,3 +15,4 @@ fortawesome:fontawesome
 templates:tabs
 accounts-ui
 maazalik:malihu-jquery-custom-scrollbar
+percolate:momentum

chromebook-checkout-meteor/.meteor/versions

@@ -55,6 +55,8 @@ oauth@1.1.3
 oauth2@1.1.2
 observe-sequence@1.0.4
 ordered-dict@1.0.2
+percolate:momentum@0.7.1
+percolate:velocityjs@1.1.0
 random@1.0.2
 reactive-dict@1.0.5
 reactive-var@1.0.4

chromebook-checkout-meteor/client/admin.css

@@ -6,7 +6,7 @@
   color: #E14C2B;
 }
 .row-admin {
-  max-width:89%;
+  min-width: 100%;
 }
 .submission {
   margin-left: 2%;

chromebook-checkout-meteor/client/admin.html

@@ -3,21 +3,20 @@
     <div>
     <h5>Admin Panel</h5>
     </div>
-    
           {{#teacherTabs tabs=tabs}}
           <!-- Single -->
       <div class="border">
       <div>
         <h6>Edit Chromebooks</h6> <!-- Edit Chromebooks -->
+          {{#momentum plugin='slide-fade'}}
         {{#each chromebooks}}
           <div class="row-admin">
             {{> chromebook}}
             <i class="icons yield fa fa-exclamation-triangle fa-lg"></i>
-            <div class="overlap-fix">
             <i class="icons cross fa fa-times fa-lg"></i>
       </div> 
-      </div> 
         {{/each}} 
+      {{/momentum}}
         <h6>Add a Chromebook</h6> <!-- Add Chromebooks -->
         <form class="new-task">
           <input type="text" name="anumber" placeholder="Chromebook Number (eg. B1)" class="submission" />

chromebook-checkout-meteor/client/chromebook.css

@@ -16,8 +16,7 @@ body {
   box-shadow: 3px 3px 10px #c2c2c2;
   color: #000000;
   height: 10%;
-/*  max-width: 100%;*/
+  max-width: 81%;
-  min-width: 92%;
 }
 
 .chromebook:hover {
@@ -32,11 +31,14 @@ body {
 
 .icons {
   float: right;
-  margin-top: 2.5%;
+  margin-top: -7.5%;
   margin-left: 2%;
   color: #5A5A5A;
   transition: color 0.5s;
 }
+.icons.yield.fa.fa-exclamation-triangle.fa-lg {
+  margin-right: 6%;
+}
 
 .cross:hover, .crossc:hover{
   color: #E14C2B;

chromebook-checkout-meteor/client/chromebook.html

@@ -1,7 +1,7 @@
 <template name="chromebook">
     <div class="chromebook {{status_class}}">
       <p class="pure-u-3-5">Chromebook #{{number}}</p> 
-        {{#if status }}
+        {{#if status}}
           <div class="timestamp pure-u-2-5">
             <p class="user"> <b>{{user}}</b></p>
             <p class="time">{{time_ago}}</p>

chromebook-checkout-meteor/client/slide-fade.js

@@ -0,0 +1,38 @@
+Momentum.registerPlugin('slide-fade', function(options) {
+  options = _.extend({
+    duration: 200,
+    easing: 'ease-in-out'
+  }, options);
+
+  return {
+    insertElement: function(node, next, done) {
+      var $node = $(node);
+
+      $node
+        .hide()
+        .insertBefore(next)
+        .velocity('fadeIn')
+        .velocity('slideDown', {
+          easing: options.easing,
+          duration: options.duration,
+          queue: false,
+          complete: function() {
+            $node.css('height', ''); // remove explicit height
+            done();
+          }
+        });
+    },
+    removeElement: function(node, done) {
+      var $node = $(node);
+
+      $node.velocity('slideUp', {
+        easing: options.easing,
+        duration: options.duration,
+        complete: function() {
+          $node.remove();
+          done();
+        }
+      });
+    }
+  }
+});