From aff4818f800b6c8ec2a2a245805b38ffa7960fc6 Mon Sep 17 00:00:00 2001
From: ksjdragon <ksjdragon@ksjtech.(none)>
Date: Sat, 31 Jan 2015 20:16:48 -0500
Subject: [PATCH] added animations

---
 chromebook-checkout-meteor/.meteor/packages   |  1 +
 chromebook-checkout-meteor/.meteor/versions   |  2 +
 chromebook-checkout-meteor/client/admin.css   |  2 +-
 chromebook-checkout-meteor/client/admin.html  |  7 ++--
 .../client/chromebook.css                     |  8 ++--
 .../client/chromebook.html                    |  2 +-
 .../client/slide-fade.js                      | 38 +++++++++++++++++++
 7 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 chromebook-checkout-meteor/client/slide-fade.js

diff --git a/chromebook-checkout-meteor/.meteor/packages b/chromebook-checkout-meteor/.meteor/packages
index c41a5eb..eb25282 100644
--- a/chromebook-checkout-meteor/.meteor/packages
+++ b/chromebook-checkout-meteor/.meteor/packages
@@ -15,3 +15,4 @@ fortawesome:fontawesome
 templates:tabs
 accounts-ui
 maazalik:malihu-jquery-custom-scrollbar
+percolate:momentum
diff --git a/chromebook-checkout-meteor/.meteor/versions b/chromebook-checkout-meteor/.meteor/versions
index ad2ebf5..532e668 100644
--- a/chromebook-checkout-meteor/.meteor/versions
+++ b/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
diff --git a/chromebook-checkout-meteor/client/admin.css b/chromebook-checkout-meteor/client/admin.css
index 61c560a..e0375c8 100644
--- a/chromebook-checkout-meteor/client/admin.css
+++ b/chromebook-checkout-meteor/client/admin.css
@@ -6,7 +6,7 @@
   color: #E14C2B;
 }
 .row-admin {
-  max-width:89%;
+  min-width: 100%;
 }
 .submission {
   margin-left: 2%;
diff --git a/chromebook-checkout-meteor/client/admin.html b/chromebook-checkout-meteor/client/admin.html
index d7b9427..e91a19e 100644
--- a/chromebook-checkout-meteor/client/admin.html
+++ b/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}}
+        {{/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" />
diff --git a/chromebook-checkout-meteor/client/chromebook.css b/chromebook-checkout-meteor/client/chromebook.css
index 84a0299..da90103 100644
--- a/chromebook-checkout-meteor/client/chromebook.css
+++ b/chromebook-checkout-meteor/client/chromebook.css
@@ -16,8 +16,7 @@ body {
   box-shadow: 3px 3px 10px #c2c2c2;
   color: #000000;
   height: 10%;
-/*  max-width: 100%;*/
-  min-width: 92%;
+  max-width: 81%;
 }
 
 .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;
diff --git a/chromebook-checkout-meteor/client/chromebook.html b/chromebook-checkout-meteor/client/chromebook.html
index fd61b35..5a9c485 100644
--- a/chromebook-checkout-meteor/client/chromebook.html
+++ b/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>
diff --git a/chromebook-checkout-meteor/client/slide-fade.js b/chromebook-checkout-meteor/client/slide-fade.js
new file mode 100644
index 0000000..f1665dd
--- /dev/null
+++ b/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();
+        }
+      });
+    }
+  }
+});
\ No newline at end of file