Commit 0adf8f867a689fc1ed180def8bf02f20ba703479
1 parent
5673511eb3
Exists in
master
and in
1 other branch
nice hide animations
Showing 4 changed files with 29 additions and 40 deletions Side-by-side Diff
scripts/CardGridController.js
View file @
0adf8f8
| ... | ... | @@ -8,6 +8,7 @@ |
| 8 | 8 | $scope.sectionId = parseInt($stateParams.sectionId); |
| 9 | 9 | $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); |
| 10 | 10 | $scope.showGrid = false; |
| 11 | + $scope.moveQueue = []; | |
| 11 | 12 | $rootScope.currentSection = $scope.section; |
| 12 | 13 | |
| 13 | 14 | if (!UserService.isInSection($scope.sectionId)) { |
| 14 | 15 | |
| ... | ... | @@ -103,12 +104,13 @@ |
| 103 | 104 | |
| 104 | 105 | $scope.updateColRanks = function(col) { |
| 105 | 106 | for (i in col) |
| 106 | - col[i].colRank = i; | |
| 107 | + col[i].colRank = parseInt(i); | |
| 107 | 108 | }; |
| 108 | 109 | $scope.hideCardFromGrid = function(card) { |
| 109 | 110 | console.log('hiding', card); |
| 110 | 111 | $scope.cardCols[card.colNum].splice(card.colRank, 1); |
| 111 | 112 | $scope.updateColRanks($scope.cardCols[card.colNum]); |
| 113 | + console.log($scope.cardCols); | |
| 112 | 114 | }; |
| 113 | 115 | |
| 114 | 116 | $http.get('/api/sections/' + $scope.sectionId + '/deck/'). |
scripts/FeedController.js
View file @
0adf8f8
| ... | ... | @@ -36,6 +36,7 @@ |
| 36 | 36 | $scope.cardCols[card.colNum].sort(function(a, b) { |
| 37 | 37 | return b.score - a.score; |
| 38 | 38 | }); |
| 39 | + $scope.updateColRanks($scope.cardCols[card.colNum]); | |
| 39 | 40 | }; |
| 40 | 41 | |
| 41 | 42 | $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); |
styles/flashy.css
View file @
0adf8f8
| ... | ... | @@ -52,6 +52,7 @@ |
| 52 | 52 | } |
| 53 | 53 | |
| 54 | 54 | .card.flashy { |
| 55 | + border: 0px solid rgba(0, 184, 76, 0.4); | |
| 55 | 56 | background-color: #fff; |
| 56 | 57 | font-family: 'Titillium Web', sans-serif; |
| 57 | 58 | float: left; |
| ... | ... | @@ -60,11 +61,11 @@ |
| 60 | 61 | /*transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);*/ |
| 61 | 62 | } |
| 62 | 63 | |
| 63 | -.card.flashy.shrinky { | |
| 64 | - height: 0; | |
| 65 | - opacity: 0; | |
| 66 | - overflow: hidden; | |
| 67 | -} | |
| 64 | +/*.card.flashy.shrinky {*/ | |
| 65 | +/*height: 0;*/ | |
| 66 | +/*opacity: 0;*/ | |
| 67 | +/*overflow: hidden;*/ | |
| 68 | +/*}*/ | |
| 68 | 69 | |
| 69 | 70 | .card-overlay { |
| 70 | 71 | cursor: pointer; |
| 71 | 72 | |
| ... | ... | @@ -178,16 +179,12 @@ |
| 178 | 179 | |
| 179 | 180 | .feed-modal-input { |
| 180 | 181 | background-color: #D3D3D3; |
| 181 | -/ / border-style : solid; | |
| 182 | -/ / border-width : 1 px; | |
| 182 | + border-style: solid; | |
| 183 | + border-width: 1px; | |
| 183 | 184 | box-shadow: 2px 2px 5px #888888; |
| 184 | 185 | height: 24px; |
| 185 | 186 | } |
| 186 | 187 | |
| 187 | -#newCard input[type=text] { | |
| 188 | - height: 3rem !important; | |
| 189 | -} | |
| 190 | - | |
| 191 | 188 | .input-field label { |
| 192 | 189 | color: #00b3c2; |
| 193 | 190 | } |
| 194 | 191 | |
| ... | ... | @@ -348,13 +345,13 @@ |
| 348 | 345 | .repeated-card.ng-enter, |
| 349 | 346 | .repeated-card.ng-enter > flashcard > .card, |
| 350 | 347 | .repeated-card.ng-leave, |
| 348 | +.repeated-card.ng-leave > flashcard > .card, | |
| 351 | 349 | .repeated-card.ng-move, |
| 352 | 350 | .repeated-card.ng-move > flashcard > .card { |
| 353 | 351 | -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); |
| 354 | 352 | -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); |
| 355 | 353 | -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); |
| 356 | - transition: 1s cubic-bezier(0.6, 0.3, 0.7, 1.4); | |
| 357 | - /*1s all cubic-bezier(0, 0, 1, 0.3);*/ | |
| 354 | + transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); | |
| 358 | 355 | position: relative; |
| 359 | 356 | } |
| 360 | 357 | |
| 361 | 358 | |
| 362 | 359 | |
| 363 | 360 | |
| ... | ... | @@ -369,28 +366,20 @@ |
| 369 | 366 | margin-bottom: 6px; |
| 370 | 367 | } |
| 371 | 368 | |
| 372 | -.repeated-card.ng-leave { | |
| 373 | - top: 0; | |
| 374 | - opacity: 1; | |
| 369 | +.repeated-card.ng-leave > flashcard > .card { | |
| 370 | + z-index: -100; | |
| 371 | + top: 0px; | |
| 372 | + margin-bottom: 6px; | |
| 375 | 373 | } |
| 376 | 374 | |
| 377 | -.repeated-card.ng-leave.ng-leave-active { | |
| 378 | - top: -60px; | |
| 375 | +.repeated-card.ng-leave.ng-leave-active > flashcard > .card { | |
| 376 | + z-index: -100; | |
| 379 | 377 | opacity: 0; |
| 378 | + top: -236px; | |
| 379 | + margin-bottom: -230px; | |
| 380 | 380 | } |
| 381 | 381 | |
| 382 | 382 | /* Animation CSS END */ |
| 383 | - | |
| 384 | -/* Footer */ | |
| 385 | -* { | |
| 386 | - margin: 0; | |
| 387 | -} | |
| 388 | - | |
| 389 | -/*.wrapper {*/ | |
| 390 | -/*min-height: 100%;*/ | |
| 391 | -/*height: 100%;*/ | |
| 392 | -/*/!*margin: 0 auto -4em;*!/*/ | |
| 393 | -/*}*/ | |
| 394 | 383 | |
| 395 | 384 | .container, .push { |
| 396 | 385 | height: 4em; |
templates/flashcard.html
View file @
0adf8f8
| 1 | -<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false" | |
| 1 | +<div class="card flashy smallify black-text text-darken-2" ng-init="startShrink = false" | |
| 2 | 2 | ng-class="{'shrinky': startShrink, 'in-deck':flashcard.isInDeck()}"> |
| 3 | 3 | <div class="valign-wrapper"> |
| 4 | - <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"> | |
| 5 | - <!--<span ng-repeat="piece in flashcard.textPieces"--> | |
| 6 | - <!--ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>--> | |
| 7 | - </div> | |
| 4 | + <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div> | |
| 8 | 5 | </div> |
| 9 | - <div class="card-overlay" > | |
| 6 | + <div class="card-overlay"> | |
| 10 | 7 | <div class="top-box no-user-select" ng-show="!flashcard.isInDeck()" |
| 11 | 8 | ng-click="flashcard.pull()"> |
| 12 | 9 | <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> |
| 13 | 10 | |
| 14 | 11 | |
| ... | ... | @@ -16,18 +13,18 @@ |
| 16 | 13 | <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div> |
| 17 | 14 | </div> |
| 18 | 15 | <div class="bottom-box no-user-select"> |
| 19 | - <div class="left-box"> | |
| 16 | + <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info"> | |
| 20 | 17 | <div class="center-me"><i class="mdi-action-info-outline small"></i></div> |
| 21 | 18 | </div> |
| 22 | - <div class="right-box" ng-click="flashcard.hide()"> | |
| 19 | + <div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide"> | |
| 23 | 20 | <div class="center-me"><i class="mdi-action-delete small"></i></div> |
| 24 | 21 | </div> |
| 25 | 22 | |
| 26 | 23 | </div> |
| 27 | 24 | </div> |
| 28 | 25 | <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px"> |
| 29 | - <div class="center-me tooltipped" data-position="bottom" | |
| 30 | - data-delay="50" data-tooltip="In deck"><i class="mdi-action-done small"></i></div> | |
| 26 | + <div class="center-me tooltipped" data-position="bottom" data-tooltip="In deck"><i | |
| 27 | + class="mdi-action-done small"></i></div> | |
| 31 | 28 | </div> |
| 32 | 29 | <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;"> |
| 33 | 30 | <span class="center-me">score:{{flashcard.score}}</span> |