110swag / flashy-frontend

Download as
Browse Code ยป

Commit 1d616f4a4d27b2e4146f6b4fe1c4ac3cca06ef10

Authored by Andrew Buss
2 parents 70c2390ab2 eaa6cd5422
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Merge branch 'master' of git.ucsd.edu:110swag/flashy-frontend

Showing 3 changed files Side-by-side Diff

scripts/FlashcardFactory.js View file @ 1d616f4
... ... @@ -29,6 +29,10 @@
29 29 Flashcard.prototype.isInDeck = function () {
30 30 return !(typeof Deck.contains(this.id) === 'undefined');
31 31 };
  32 + Flashcard.prototype.pullUnpull = function() {
  33 + if (Deck[this.id]) this.unpull();
  34 + else this.pull();
  35 + };
32 36 Flashcard.prototype.pull = function () {
33 37 if (this.isInDeck()) return console.log('Not pulling', this.id, "because it's already in deck");
34 38 return $http.post('/api/flashcards/' + this.id + '/pull/');
styles/flashy.css View file @ 1d616f4
... ... @@ -58,15 +58,8 @@
58 58 float: left;
59 59 text-align: center;
60 60 margin: 6px;
61   - /*transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);*/
62 61 }
63 62  
64   -/*.card.flashy.shrinky {*/
65   -/*height: 0;*/
66   -/*opacity: 0;*/
67   -/*overflow: hidden;*/
68   -/*}*/
69   -
70 63 .card-overlay {
71 64 cursor: pointer;
72 65 left: 0;
... ... @@ -74,7 +67,7 @@
74 67 position: absolute;
75 68 /*pointer-events: none;*/
76 69 top: 0;
77   - transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
  70 + transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s,
78 71 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
79 72 /* animation effect to appear on off-hover */
80 73 visibility: hidden;
81 74  
82 75  
83 76  
... ... @@ -421,20 +414,22 @@
421 414 will-change: opacity;
422 415 }
423 416  
424   -.dropping.ng-enter {
425   - max-height: 0vh;
  417 +.fadey.ng-enter {
  418 + opacity: 0.5;
  419 + transform: translate(-50%, -50%) rotate(90deg);
426 420 }
427 421  
428   -.dropping.ng-enter-active {
429   - max-height: 100vh;
  422 +.fadey.ng-enter-active {
  423 + opacity: 1;
  424 + transform: translate(-50%, -50%) rotate(0deg);
430 425 }
431 426  
432   -.dropping.ng-leave {
433   - max-height: 100vh;
  427 +.fadey.ng-leave {
  428 + opacity: 1;
434 429 }
435 430  
436   -.dropping.ng-leave-active {
437   - max-height: 0vh;
  431 +.fadey.ng-leave-active {
  432 + opacity: 0;
438 433 }
439 434  
440 435 /* REPLACEMENT FOR MATERIALIZE ACCORDION/COLLAPSIBLE
templates/flashcard.html View file @ 1d616f4
1   -<div class="card flashy smallify black-text text-darken-2"
  1 +<div class="card flashy black-text"
2 2 ng-class="{'in-deck':flashcard.isInDeck()}">
3 3 <div class="valign-wrapper">
4 4 <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
5 5 </div>
6 6 <div class="card-overlay">
7   - <div class="top-box no-user-select" ng-show="!flashcard.isInDeck()"
8   - ng-click="flashcard.pull()">
9   - <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
10   - </div>
11   - <div class="top-box no-user-select" ng-show="flashcard.isInDeck()"
12   - ng-click="flashcard.unpull()">
13   - <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
  7 + <div class="top-box no-user-select"
  8 + ng-click="flashcard.pullUnpull()">
  9 + <div class="center-me">
  10 + <i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i>
  11 + <i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i>
  12 + </div>
14 13 </div>
15 14 <div class="bottom-box no-user-select">
16 15 <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info">