From 0adf8f867a689fc1ed180def8bf02f20ba703479 Mon Sep 17 00:00:00 2001
From: Andrew Buss <abuss@ucsd.edu>
Date: Tue, 2 Jun 2015 04:16:51 -0700
Subject: [PATCH] nice hide animations

---
 scripts/CardGridController.js |  4 +++-
 scripts/FeedController.js     |  1 +
 styles/flashy.css             | 47 +++++++++++++++++--------------------------
 templates/flashcard.html      | 17 +++++++---------
 4 files changed, 29 insertions(+), 40 deletions(-)

diff --git a/scripts/CardGridController.js b/scripts/CardGridController.js
index d054eef..e7fe7b3 100644
--- a/scripts/CardGridController.js
+++ b/scripts/CardGridController.js
@@ -8,6 +8,7 @@ angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSoc
         $scope.sectionId = parseInt($stateParams.sectionId);
         $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
         $scope.showGrid = false;
+        $scope.moveQueue = [];
         $rootScope.currentSection = $scope.section;
 
         if (!UserService.isInSection($scope.sectionId)) {
@@ -103,12 +104,13 @@ angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSoc
 
         $scope.updateColRanks = function(col) {
             for (i in col)
-                col[i].colRank = i;
+                col[i].colRank = parseInt(i);
         };
         $scope.hideCardFromGrid = function(card) {
             console.log('hiding', card);
             $scope.cardCols[card.colNum].splice(card.colRank, 1);
             $scope.updateColRanks($scope.cardCols[card.colNum]);
+            console.log($scope.cardCols);
         };
 
         $http.get('/api/sections/' + $scope.sectionId + '/deck/').
diff --git a/scripts/FeedController.js b/scripts/FeedController.js
index 8db5a6a..82307da 100644
--- a/scripts/FeedController.js
+++ b/scripts/FeedController.js
@@ -36,6 +36,7 @@ angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket'
             $scope.cardCols[card.colNum].sort(function(a, b) {
                 return b.score - a.score;
             });
+            $scope.updateColRanks($scope.cardCols[card.colNum]);
         };
 
         $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
diff --git a/styles/flashy.css b/styles/flashy.css
index 0374f7d..779a79d 100644
--- a/styles/flashy.css
+++ b/styles/flashy.css
@@ -52,6 +52,7 @@
 }
 
 .card.flashy {
+    border: 0px solid rgba(0, 184, 76, 0.4);
     background-color: #fff;
     font-family: 'Titillium Web', sans-serif;
     float: left;
@@ -60,11 +61,11 @@
     /*transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);*/
 }
 
-.card.flashy.shrinky {
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-}
+/*.card.flashy.shrinky {*/
+/*height: 0;*/
+/*opacity: 0;*/
+/*overflow: hidden;*/
+/*}*/
 
 .card-overlay {
     cursor: pointer;
@@ -178,16 +179,12 @@
 
 .feed-modal-input {
     background-color: #D3D3D3;
-/ / border-style : solid;
-/ / border-width : 1 px;
+    border-style: solid;
+    border-width: 1px;
     box-shadow: 2px 2px 5px #888888;
     height: 24px;
 }
 
-#newCard input[type=text] {
-    height: 3rem !important;
-}
-
 .input-field label {
     color: #00b3c2;
 }
@@ -348,13 +345,13 @@ md-content.md-default-theme {
 .repeated-card.ng-enter,
 .repeated-card.ng-enter > flashcard > .card,
 .repeated-card.ng-leave,
+.repeated-card.ng-leave > flashcard > .card,
 .repeated-card.ng-move,
 .repeated-card.ng-move > flashcard > .card {
     -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
     -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
     -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-    transition: 1s cubic-bezier(0.6, 0.3, 0.7, 1.4);
-    /*1s all cubic-bezier(0, 0, 1, 0.3);*/
+    transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
     position: relative;
 }
 
@@ -369,29 +366,21 @@ md-content.md-default-theme {
     margin-bottom: 6px;
 }
 
-.repeated-card.ng-leave {
-    top: 0;
-    opacity: 1;
+.repeated-card.ng-leave > flashcard > .card {
+    z-index: -100;
+    top: 0px;
+    margin-bottom: 6px;
 }
 
-.repeated-card.ng-leave.ng-leave-active {
-    top: -60px;
+.repeated-card.ng-leave.ng-leave-active > flashcard > .card {
+    z-index: -100;
     opacity: 0;
+    top: -236px;
+    margin-bottom: -230px;
 }
 
 /* Animation CSS END */
 
-/* Footer */
-* {
-    margin: 0;
-}
-
-/*.wrapper {*/
-/*min-height: 100%;*/
-/*height: 100%;*/
-/*/!*margin: 0 auto -4em;*!/*/
-/*}*/
-
 .container, .push {
     height: 4em;
 }
diff --git a/templates/flashcard.html b/templates/flashcard.html
index 72afd70..5e5d3f5 100644
--- a/templates/flashcard.html
+++ b/templates/flashcard.html
@@ -1,12 +1,9 @@
-<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false"
+<div class="card flashy smallify black-text text-darken-2" ng-init="startShrink = false"
      ng-class="{'shrinky': startShrink, 'in-deck':flashcard.isInDeck()}">
   <div class="valign-wrapper">
-    <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text">
-      <!--<span ng-repeat="piece in flashcard.textPieces"-->
-      <!--ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>-->
-    </div>
+    <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
   </div>
-  <div class="card-overlay" >
+  <div class="card-overlay">
     <div class="top-box no-user-select" ng-show="!flashcard.isInDeck()"
          ng-click="flashcard.pull()">
       <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
@@ -16,18 +13,18 @@
       <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
     </div>
     <div class="bottom-box no-user-select">
-      <div class="left-box">
+      <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info">
         <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
       </div>
-      <div class="right-box" ng-click="flashcard.hide()">
+      <div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide">
         <div class="center-me"><i class="mdi-action-delete small"></i></div>
       </div>
 
     </div>
   </div>
   <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
-    <div class="center-me tooltipped" data-position="bottom"
-         data-delay="50" data-tooltip="In deck"><i class="mdi-action-done small"></i></div>
+    <div class="center-me tooltipped" data-position="bottom" data-tooltip="In deck"><i
+            class="mdi-action-done small"></i></div>
   </div>
   <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
     <span class="center-me">score:{{flashcard.score}}</span>
-- 
1.9.1