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 Inline Diff

scripts/FlashcardFactory.js View file @ 1d616f4
angular.module('flashy.FlashcardFactory', ['ui.router']). 1 1 angular.module('flashy.FlashcardFactory', ['ui.router']).
factory('Flashcard', function ($http) { 2 2 factory('Flashcard', function ($http) {
var FlashcardCache = []; 3 3 var FlashcardCache = [];
var Deck = null; 4 4 var Deck = null;
var Flashcard = function (data, deck) { 5 5 var Flashcard = function (data, deck) {
if(deck) Deck = deck; 6 6 if(deck) Deck = deck;
if (typeof data == 'number') return FlashcardCache[data]; 7 7 if (typeof data == 'number') return FlashcardCache[data];
if (FlashcardCache[data.id]) return FlashcardCache[data.id]; 8 8 if (FlashcardCache[data.id]) return FlashcardCache[data.id];
for (var k in data) this[k] = data[k]; 9 9 for (var k in data) this[k] = data[k];
this.textPieces = []; 10 10 this.textPieces = [];
this.mask.sort(function (a, b) { 11 11 this.mask.sort(function (a, b) {
return a[0] - b[0]; 12 12 return a[0] - b[0];
}); 13 13 });
var i = 0; 14 14 var i = 0;
this.mask.forEach(function (blank) { 15 15 this.mask.forEach(function (blank) {
this.textPieces.push({text: this.text.slice(i, blank[0])}); 16 16 this.textPieces.push({text: this.text.slice(i, blank[0])});
this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true}); 17 17 this.textPieces.push({text: this.text.slice(blank[0], blank[1]), blank: true});
i = blank[1]; 18 18 i = blank[1];
}, this); 19 19 }, this);
this.textPieces.push({text: this.text.slice(i)}); 20 20 this.textPieces.push({text: this.text.slice(i)});
this.formatted_text = ''; 21 21 this.formatted_text = '';
for (i in this.textPieces) { 22 22 for (i in this.textPieces) {
p = this.textPieces[i]; 23 23 p = this.textPieces[i];
this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text; 24 24 this.formatted_text += p.blank ? '<b>' + p.text + '</b>' : p.text;
} 25 25 }
FlashcardCache[this.id] = this; 26 26 FlashcardCache[this.id] = this;
}; 27 27 };
28 28
Flashcard.prototype.isInDeck = function () { 29 29 Flashcard.prototype.isInDeck = function () {
return !(typeof Deck.contains(this.id) === 'undefined'); 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 };
Flashcard.prototype.pull = function () { 32 36 Flashcard.prototype.pull = function () {
if (this.isInDeck()) return console.log('Not pulling', this.id, "because it's already in deck"); 33 37 if (this.isInDeck()) return console.log('Not pulling', this.id, "because it's already in deck");
return $http.post('/api/flashcards/' + this.id + '/pull/'); 34 38 return $http.post('/api/flashcards/' + this.id + '/pull/');
}; 35 39 };
Flashcard.prototype.unpull = function () { 36 40 Flashcard.prototype.unpull = function () {
if (!this.isInDeck()) return console.log('Not unpulling', this.id, "because it's not in deck"); 37 41 if (!this.isInDeck()) return console.log('Not unpulling', this.id, "because it's not in deck");
return $http.post('/api/flashcards/' + this.id + '/unpull/'); 38 42 return $http.post('/api/flashcards/' + this.id + '/unpull/');
}; 39 43 };
Flashcard.prototype.hide = function () { 40 44 Flashcard.prototype.hide = function () {
return $http.post('/api/flashcards/' + this.id + '/hide/'); 41 45 return $http.post('/api/flashcards/' + this.id + '/hide/');
}; 42 46 };
43 47
styles/flashy.css View file @ 1d616f4
.no-user-select { 1 1 .no-user-select {
-moz-user-select: none; 2 2 -moz-user-select: none;
-webkit-user-select: none; 3 3 -webkit-user-select: none;
-ms-user-select: none; 4 4 -ms-user-select: none;
user-select: none; 5 5 user-select: none;
} 6 6 }
7 7
.angucomplete-dropdown { 8 8 .angucomplete-dropdown {
border-color: #ececec; 9 9 border-color: #ececec;
border-width: 1px; 10 10 border-width: 1px;
border-style: solid; 11 11 border-style: solid;
border-radius: 2px; 12 12 border-radius: 2px;
/*width: 250px;*/ 13 13 /*width: 250px;*/
padding: 6px; 14 14 padding: 6px;
cursor: pointer; 15 15 cursor: pointer;
z-index: 9999; 16 16 z-index: 9999;
position: absolute; 17 17 position: absolute;
/*top: 32px; 18 18 /*top: 32px;
left: 0px; 19 19 left: 0px;
*/ 20 20 */
margin-top: -6px; 21 21 margin-top: -6px;
background-color: #ffffff; 22 22 background-color: #ffffff;
} 23 23 }
24 24
.angucomplete-description { 25 25 .angucomplete-description {
font-size: 14px; 26 26 font-size: 14px;
} 27 27 }
28 28
.angucomplete-row { 29 29 .angucomplete-row {
padding: 5px; 30 30 padding: 5px;
color: #000000; 31 31 color: #000000;
margin-bottom: 4px; 32 32 margin-bottom: 4px;
clear: both; 33 33 clear: both;
} 34 34 }
35 35
.angucomplete-selected-row { 36 36 .angucomplete-selected-row {
background-color: #aaaaff; 37 37 background-color: #aaaaff;
} 38 38 }
39 39
/*.container .row {*/ 40 40 /*.container .row {*/
/*margin-left: 0;*/ 41 41 /*margin-left: 0;*/
/*margin-right: 0;*/ 42 42 /*margin-right: 0;*/
/*}*/ 43 43 /*}*/
44 44
/* Flashcard directive css */ 45 45 /* Flashcard directive css */
.card { 46 46 .card {
word-wrap: break-word; 47 47 word-wrap: break-word;
} 48 48 }
49 49
.card.flashy.in-deck { 50 50 .card.flashy.in-deck {
border: 3px solid rgba(0, 184, 76, 0.4); 51 51 border: 3px solid rgba(0, 184, 76, 0.4);
} 52 52 }
53 53
.card.flashy { 54 54 .card.flashy {
border: 0px solid rgba(0, 184, 76, 0.4); 55 55 border: 0px solid rgba(0, 184, 76, 0.4);
background-color: #fff; 56 56 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 57 57 font-family: 'Titillium Web', sans-serif;
float: left; 58 58 float: left;
text-align: center; 59 59 text-align: center;
margin: 6px; 60 60 margin: 6px;
/*transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);*/ 61
} 62 61 }
63 62
/*.card.flashy.shrinky {*/ 64
/*height: 0;*/ 65
/*opacity: 0;*/ 66
/*overflow: hidden;*/ 67
/*}*/ 68
69
.card-overlay { 70 63 .card-overlay {
cursor: pointer; 71 64 cursor: pointer;
left: 0; 72 65 left: 0;
opacity: 0; 73 66 opacity: 0;
position: absolute; 74 67 position: absolute;
/*pointer-events: none;*/ 75 68 /*pointer-events: none;*/
top: 0; 76 69 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 77 70 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 78 71 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 79 72 /* animation effect to appear on off-hover */
visibility: hidden; 80 73 visibility: hidden;
height: 100%; 81 74 height: 100%;
width: 100%; 82 75 width: 100%;
} 83 76 }
84 77
.card-overlay i { 85 78 .card-overlay i {
color: #FFF; 86 79 color: #FFF;
left: 50%; 87 80 left: 50%;
position: absolute; 88 81 position: absolute;
top: 50%; 89 82 top: 50%;
transform: translate(-50%, -50%); 90 83 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 91 84 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 92 85 }
93 86
.center-me:hover i { 94 87 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 95 88 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 96 89 }
97 90
.card:hover .card-overlay { 98 91 .card:hover .card-overlay {
opacity: 1.0; 99 92 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 100 93 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 101 94 visibility: visible;
} 102 95 }
103 96
.top-box { 104 97 .top-box {
background-color: rgba(0, 184, 76, 0.4); 105 98 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 106 99 height: 65%;
position: relative; 107 100 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 108 101 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 109 102 width: 100%;
} 110 103 }
111 104
.top-box:hover { 112 105 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 113 106 background-color: rgba(0, 184, 76, 0.5);
} 114 107 }
115 108
.bottom-box { 116 109 .bottom-box {
height: 35%; 117 110 height: 35%;
width: 100%; 118 111 width: 100%;
} 119 112 }
120 113
.left-box { 121 114 .left-box {
background-color: rgba(119, 146, 255, 0.5); 122 115 background-color: rgba(119, 146, 255, 0.5);
float: left; 123 116 float: left;
position: relative; 124 117 position: relative;
height: 100%; 125 118 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 126 119 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 127 120 width: 50%;
} 128 121 }
129 122
.left-box:hover { 130 123 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 131 124 background-color: rgba(119, 146, 255, 0.6);
} 132 125 }
133 126
.right-box { 134 127 .right-box {
background-color: rgba(255, 62, 76, 0.5); 135 128 background-color: rgba(255, 62, 76, 0.5);
float: right; 136 129 float: right;
height: 100%; 137 130 height: 100%;
position: relative; 138 131 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 139 132 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 140 133 width: 50%;
} 141 134 }
142 135
.right-box:hover { 143 136 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 144 137 background-color: rgba(255, 62, 76, 0.6);
} 145 138 }
146 139
.center-me { 147 140 .center-me {
height: 100%; 148 141 height: 100%;
margin: 0 auto; 149 142 margin: 0 auto;
text-align: center; 150 143 text-align: center;
vertical-align: middle; 151 144 vertical-align: middle;
width: 100%; 152 145 width: 100%;
} 153 146 }
154 147
/* Card Colors */ 155 148 /* Card Colors */
.card.flashy.cardcolor-blue div { 156 149 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 157 150 background-color: rgba(119, 158, 203, 0.5) !important;
} 158 151 }
159 152
.cardcolor-red div { 160 153 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 161 154 background-color: rgba(255, 105, 97, 0.5) !important;
} 162 155 }
163 156
.cardcolor-green div { 164 157 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 165 158 background-color: rgba(119, 190, 119, 0.5) !important;
} 166 159 }
167 160
.cardcolor-yellow div { 168 161 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 169 162 background-color: rgba(253, 253, 150, 0.5) !important;
} 170 163 }
171 164
/* Card Colors END */ 172 165 /* Card Colors END */
173 166
.modal.bottom-sheet { 174 167 .modal.bottom-sheet {
max-width: 600px; 175 168 max-width: 600px;
margin-left: auto; 176 169 margin-left: auto;
margin-right: auto; 177 170 margin-right: auto;
} 178 171 }
179 172
.feed-modal-input { 180 173 .feed-modal-input {
background-color: #D3D3D3; 181 174 background-color: #D3D3D3;
border-style: solid; 182 175 border-style: solid;
border-width: 1px; 183 176 border-width: 1px;
box-shadow: 2px 2px 5px #888888; 184 177 box-shadow: 2px 2px 5px #888888;
height: 24px; 185 178 height: 24px;
} 186 179 }
187 180
.input-field label { 188 181 .input-field label {
color: #00b3c2; 189 182 color: #00b3c2;
} 190 183 }
191 184
/* label focus color */ 192 185 /* label focus color */
.input-field input[type]:focus + label { 193 186 .input-field input[type]:focus + label {
color: #00b3c2; 194 187 color: #00b3c2;
} 195 188 }
196 189
/* label underline focus color */ 197 190 /* label underline focus color */
.input-field input[type]:focus { 198 191 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 199 192 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 200 193 box-shadow: 0 1px 0 0 #b388ff;
} 201 194 }
202 195
/* valid color */ 203 196 /* valid color */
.input-field input[type].valid { 204 197 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 205 198 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 206 199 box-shadow: 0 1px 0 0 #673ab7;
} 207 200 }
208 201
/* invalid color */ 209 202 /* invalid color */
.input-field input[type].invalid { 210 203 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 211 204 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 212 205 box-shadow: 0 1px 0 0 #673ab7;
} 213 206 }
214 207
/* icon prefix focus color */ 215 208 /* icon prefix focus color */
.input-field .prefix.active { 216 209 .input-field .prefix.active {
color: #b388ff; 217 210 color: #b388ff;
} 218 211 }
219 212
/* label focus color */ 220 213 /* label focus color */
.input-field textarea[type]:focus + label { 221 214 .input-field textarea[type]:focus + label {
color: #b388ff; 222 215 color: #b388ff;
} 223 216 }
224 217
/* label underline focus color */ 225 218 /* label underline focus color */
.input-field textarea[type]:focus { 226 219 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 227 220 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 228 221 box-shadow: 0 1px 0 0 #b388ff;
} 229 222 }
230 223
body { 231 224 body {
background-color: #e8e8e8; 232 225 background-color: #e8e8e8;
overflow-x: hidden; 233 226 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 234 227 font-family: 'Titillium Web', sans-serif;
height: 100%; 235 228 height: 100%;
} 236 229 }
237 230
html { 238 231 html {
background: transparent; 239 232 background: transparent;
height: 100%; 240 233 height: 100%;
} 241 234 }
242 235
.btn { 243 236 .btn {
background-color: #00b3c2; 244 237 background-color: #00b3c2;
} 245 238 }
246 239
.btn:hover { 247 240 .btn:hover {
background-color: #0097cb; 248 241 background-color: #0097cb;
} 249 242 }
250 243
.btn-floating { 251 244 .btn-floating {
background-color: #00b3c2; 252 245 background-color: #00b3c2;
} 253 246 }
254 247
.btn-floating:hover { 255 248 .btn-floating:hover {
background-color: #0097cb; 256 249 background-color: #0097cb;
} 257 250 }
258 251
.toggley { 259 252 .toggley {
float: left; 260 253 float: left;
margin: 10px; 261 254 margin: 10px;
} 262 255 }
263 256
#logo-container { 264 257 #logo-container {
margin-bottom: 18px; 265 258 margin-bottom: 18px;
} 266 259 }
267 260
#lean-overlay { 268 261 #lean-overlay {
display: none !important; 269 262 display: none !important;
} 270 263 }
271 264
nav { 272 265 nav {
background-color: #d2143f !important; 273 266 background-color: #d2143f !important;
} 274 267 }
275 268
main { 276 269 main {
min-height: 145px; 277 270 min-height: 145px;
} 278 271 }
279 272
.side-nav .collapsible-body { 280 273 .side-nav .collapsible-body {
width: 100%; 281 274 width: 100%;
} 282 275 }
283 276
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 284 277 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 285 278 background-color: #00b3c2;
} 286 279 }
287 280
nav .button-collapse { 288 281 nav .button-collapse {
margin: 0 20px; 289 282 margin: 0 20px;
} 290 283 }
291 284
.collapsible-body i { 292 285 .collapsible-body i {
font-size: 1rem !important; 293 286 font-size: 1rem !important;
} 294 287 }
295 288
.tabs .tab a { 296 289 .tabs .tab a {
color: #00b3c2; 297 290 color: #00b3c2;
} 298 291 }
299 292
.tabs .tab a:hover { 300 293 .tabs .tab a:hover {
color: #0041dd; 301 294 color: #0041dd;
} 302 295 }
303 296
.tabs .indicator { 304 297 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 305 298 border-bottom: 1px solid #00b3c2;
} 306 299 }
307 300
h2 { 308 301 h2 {
text-align: center; 309 302 text-align: center;
} 310 303 }
311 304
md-content.md-default-theme { 312 305 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 313 306 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 314 307 border: 1px solid #fff;
} 315 308 }
316 309
/*#sidenav-overlay { 317 310 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 318 311 background-color: rgba(0, 0, 0, 0) !important;
}*/ 319 312 }*/
.card-content { 320 313 .card-content {
width: 100%; 321 314 width: 100%;
} 322 315 }
323 316
.valign-wrapper { 324 317 .valign-wrapper {
height: 100%; 325 318 height: 100%;
} 326 319 }
327 320
/*.toast { 328 321 /*.toast {
height: 100px; 329 322 height: 100px;
width: 300px; 330 323 width: 300px;
line-height: 20px; 331 324 line-height: 20px;
max-height: 100px; 332 325 max-height: 100px;
word-wrap: normal; 333 326 word-wrap: normal;
}*/ 334 327 }*/
335 328
[ng-cloak] { 336 329 [ng-cloak] {
display: none !important; 337 330 display: none !important;
} 338 331 }
339 332
.cardColumn { 340 333 .cardColumn {
float: left; 341 334 float: left;
} 342 335 }
343 336
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */ 344 337 /* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter, 345 338 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 346 339 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 347 340 .repeated-card.ng-leave,
.repeated-card.ng-leave > flashcard > .card, 348 341 .repeated-card.ng-leave > flashcard > .card,
.repeated-card.ng-move, 349 342 .repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card { 350 343 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 351 344 -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 352 345 -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 353 346 -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 354 347 transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
position: relative; 355 348 position: relative;
} 356 349 }
357 350
.repeated-card.ng-enter > flashcard > .card { 358 351 .repeated-card.ng-enter > flashcard > .card {
z-index: 1; 359 352 z-index: 1;
top: -236px; 360 353 top: -236px;
margin-bottom: -230px; 361 354 margin-bottom: -230px;
} 362 355 }
363 356
.repeated-card.ng-enter.ng-enter-active > flashcard > .card { 364 357 .repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px; 365 358 top: 0px;
margin-bottom: 6px; 366 359 margin-bottom: 6px;
} 367 360 }
368 361
.repeated-card.ng-leave > flashcard > .card { 369 362 .repeated-card.ng-leave > flashcard > .card {
z-index: -100; 370 363 z-index: -100;
top: 0px; 371 364 top: 0px;
margin-bottom: 6px; 372 365 margin-bottom: 6px;
} 373 366 }
374 367
.repeated-card.ng-leave.ng-leave-active > flashcard > .card { 375 368 .repeated-card.ng-leave.ng-leave-active > flashcard > .card {
z-index: -100; 376 369 z-index: -100;
opacity: 0; 377 370 opacity: 0;
top: -236px; 378 371 top: -236px;
margin-bottom: -230px; 379 372 margin-bottom: -230px;
} 380 373 }
381 374
.repeated-card.ng-move > flashcard > .card { 382 375 .repeated-card.ng-move > flashcard > .card {
background-color:blue; 383 376 background-color:blue;
top: -250px; 384 377 top: -250px;
} 385 378 }
386 379
.repeated-card.ng-move-active > flashcard > .card { 387 380 .repeated-card.ng-move-active > flashcard > .card {
top: 0 388 381 top: 0
} 389 382 }
390 383
.repeated-card.ng-move > flashcard > .card + div { 391 384 .repeated-card.ng-move > flashcard > .card + div {
background-color:red; 392 385 background-color:red;
top: -250px; 393 386 top: -250px;
} 394 387 }
395 388
/* Animation CSS END */ 396 389 /* Animation CSS END */
397 390
.container, .push { 398 391 .container, .push {
height: 4em; 399 392 height: 4em;
} 400 393 }
401 394
#resetPasswordForm { 402 395 #resetPasswordForm {
templates/flashcard.html View file @ 1d616f4
<div class="card flashy smallify black-text text-darken-2" 1 1 <div class="card flashy black-text"
ng-class="{'in-deck':flashcard.isInDeck()}"> 2 2 ng-class="{'in-deck':flashcard.isInDeck()}">
<div class="valign-wrapper"> 3 3 <div class="valign-wrapper">
<div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div> 4 4 <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
</div> 5 5 </div>
<div class="card-overlay"> 6 6 <div class="card-overlay">
<div class="top-box no-user-select" ng-show="!flashcard.isInDeck()" 7 7 <div class="top-box no-user-select"
ng-click="flashcard.pull()"> 8 8 ng-click="flashcard.pullUnpull()">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 9 9 <div class="center-me">
</div> 10 10 <i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i>
<div class="top-box no-user-select" ng-show="flashcard.isInDeck()" 11 11 <i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i>
ng-click="flashcard.unpull()"> 12 12 </div>
<div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div> 13
</div> 14 13 </div>
<div class="bottom-box no-user-select"> 15 14 <div class="bottom-box no-user-select">
<div class="left-box tooltipped" data-position="bottom" data-tooltip="Info"> 16 15 <div class="left-box tooltipped" data-position="bottom" data-tooltip="Info">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 17 16 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 18 17 </div>
<div class="right-box tooltipped" ng-click="flashcard.hide()" data-position="bottom" data-tooltip="Hide"> 19 18 <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> 20 19 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 21 20 </div>
22 21
</div> 23 22 </div>
</div> 24 23 </div>
<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px"> 25 24 <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
<div class="center-me tooltipped" data-position="bottom" data-tooltip="In deck"><i 26 25 <div class="center-me tooltipped" data-position="bottom" data-tooltip="In deck"><i
class="mdi-action-done small"></i></div> 27 26 class="mdi-action-done small"></i></div>
</div> 28 27 </div>
<div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;"> 29 28 <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
<span class="center-me">score:{{flashcard.score}}</span> 30 29 <span class="center-me">score:{{flashcard.score}}</span>
</div> 31 30 </div>
</div> 32 31 </div>
33 32