110swag / flashy-frontend

Download as
Browse Code ยป

Commit 4f1bc5f5b935a9415a676fd1e2af51cd1524f1a3

Authored by Tetranoir
1 parent fcda9ffd20
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

flashcard debug mode togglable with rootscope.debug_flashcard

Showing 3 changed files with 12 additions and 6 deletions Inline Diff

scripts/FeedController.js View file @ 4f1bc5f
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']). 1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']).
2 2
controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) { 3 3 controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
console.log('Hello from feed'); 4 4 console.log('Hello from feed');
sectionId = parseInt($stateParams.sectionId); 5 5 sectionId = parseInt($stateParams.sectionId);
if (!UserService.isInSection(sectionId)) { 6 6 if (!UserService.isInSection(sectionId)) {
console.log('user is not enrolled in ' + sectionId); 7 7 console.log('user is not enrolled in ' + sectionId);
return $state.go('addclass'); 8 8 return $state.go('addclass');
} 9 9 }
$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId}); 10 10 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
11 $rootScope.debug_flashcard = false;
$scope.cards = false; 11 12 $scope.cards = false;
$scope.cardCols = []; // organized data 12 13 $scope.cardCols = []; // organized data
$scope.numCols = 0; 13 14 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 14 15 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
15 16
function calculate_cols() { 16 17 function calculate_cols() {
var avail = $window.innerWidth - 17; 17 18 var avail = $window.innerWidth - 17;
return Math.max(1, Math.floor(avail / 250)); 18 19 return Math.max(1, Math.floor(avail / 250));
} 19 20 }
20 21
$scope.refreshColumnWidth = function() { 21 22 $scope.refreshColumnWidth = function() {
console.log('refreshing column width'); 22 23 console.log('refreshing column width');
avail = $window.innerWidth - 17; 23 24 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 24 25 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 25 26 $('.cardColumn').css({
width: width + 'px', 26 27 width: width + 'px',
'font-size': 100 * width / 250 + '%' 27 28 'font-size': 100 * width / 250 + '%'
}); 28 29 });
$('.cardColumn .card.flashy').css({ 29 30 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 30 31 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 31 32 height: (width * 3 / 5) + 'px'
}); 32 33 });
}; 33 34 };
34 35
$scope.refreshLayout = function() { 35 36 $scope.refreshLayout = function() {
// check if we actually need to refresh the whole layout 36 37 // check if we actually need to refresh the whole layout
if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth(); 37 38 if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = calculate_cols(); 38 39 $scope.numCols = calculate_cols();
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 39 40 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 40 41 $scope.cardCols = [];
var cols = []; 41 42 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 42 43 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 43 44 $scope.cards.forEach(function(card, i) {
cols[i % $scope.numCols].push(card); 44 45 cols[i % $scope.numCols].push(card);
$scope.cardTable[card.id] = {'colNum':i % $scope.numCols, 'obj':card}; 45 46 $scope.cardTable[card.id] = {'colNum':i % $scope.numCols, 'obj':card};
}); 46 47 });
// wait until the next digest cycle to update cardCols 47 48 // wait until the next digest cycle to update cardCols
48 49
$timeout(function() { 49 50 $timeout(function() {
$scope.cardCols = cols; 50 51 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 51 52 $timeout($scope.refreshColumnWidth);
}); 52 53 });
53 54
}; 54 55 };
55 56
angular.element($window).bind('resize', $scope.refreshLayout); 56 57 angular.element($window).bind('resize', $scope.refreshLayout);
57 58
$scope.refreshCards = function() { 58 59 $scope.refreshCards = function() {
$http.get('/api/sections/' + sectionId + '/feed/'). 59 60 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 60 61 success(function(data) {
console.log(data); 61 62 console.log(data);
$scope.cards = data; 62 63 $scope.cards = data;
$scope.refreshLayout(); 63 64 $scope.refreshLayout();
console.log('success in refresh cards...'); 64 65 console.log('success in refresh cards...');
}). 65 66 }).
error(function(err) { 66 67 error(function(err) {
console.log('refresh fail'); 67 68 console.log('refresh fail');
console.log(err); 68 69 console.log(err);
}); 69 70 });
}; 70 71 };
71 72
$scope.add = function(card) { 72 73 $scope.add = function(card) {
var colNum = 0; 73 74 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 74 75 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 75 76 var lowestColNum = 0;
while (colNum < $scope.numCols) { 76 77 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 77 78 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 78 79 lowestCol = $scope.cardCols[colNum];
break; 79 80 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 80 81 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 81 82 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 82 83 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 83 84 lowestColLen = $scope.cardCols[colNum].length;
} 84 85 }
colNum++; 85 86 colNum++;
} 86 87 }
console.log(card); 87 88 console.log(card);
$scope.cards.push(data); 88 89 $scope.cards.push(data);
$timeout(function() { 89 90 $timeout(function() {
lowestCol.unshift(card); 90 91 lowestCol.unshift(card);
$scope.cardTable[card.id] = {'colNum':lowestColNum, 'obj':card}; 91 92 $scope.cardTable[card.id] = {'colNum':lowestColNum, 'obj':card};
$timeout($scope.refreshColumnWidth); 92 93 $timeout($scope.refreshColumnWidth);
}); 93 94 });
}; 94 95 };
95 96
$scope.sortAdd = function(card, array) { 96 97 $scope.sortAdd = function(card, array) {
console.log('sort add'); 97 98 console.log('sort add');
array.forEach(function(ele, i, ary) { 98 99 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 99 100 if (ele.score <= card.score) {
ary.splice(i, 0, card); 100 101 ary.splice(i, 0, card);
return; 101 102 return;
} 102 103 }
}); 103 104 });
}; 104 105 };
105 106
$scope.hide = function(card) { 106 107 $scope.hide = function(card) {
console.log('hiding card'); 107 108 console.log('hiding card');
var found = -1; 108 109 var found = -1;
col = $scope.cardTable[card.id].colNum; 109 110 col = $scope.cardTable[card.id].colNum;
found = $scope.cardCols[col].indexOf(card); 110 111 found = $scope.cardCols[col].indexOf(card);
if (found != -1) { 111 112 if (found != -1) {
$scope.cardCols[col].splice(found, 1); 112 113 $scope.cardCols[col].splice(found, 1);
console.log('card hidden'); 113 114 console.log('card hidden');
return col; 114 115 return col;
} 115 116 }
console.log('Error finding card to hide:'); 116 117 console.log('Error finding card to hide:');
console.log(card); 117 118 console.log(card);
return -1; 118 119 return -1;
}; 119 120 };
120 121
$scope.update = function(id, new_score) { // NOT WORKING 121 122 $scope.update = function(id, new_score) {
/*card = $scope.cardTable[id].obj; 122 123 card = $scope.cardTable[id].obj;
if (new_score == card.score) { 123 124 if (new_score == card.score) {
console.log('score same, no update required'); 124 125 console.log('score same, no update required');
return; 125 126 return;
} 126 127 }
console.log('updating'); 127 128 console.log('updating');
card.score = new_score; 128 129 card.score = new_score;
console.log(card); 129 130 console.log(card);
131 column = $scope.cardCols[card.colNum];
132 var found = column.indexOf(card);
133 var i = 0;
134 for (; i < column.length; i++)
135 if (column[i].score < card.score) break;
136 column.splice(i, 0, column.splice(found, 1)[0]);
130 137
col = $scope.hide(card) 131 138 /*var col = $scope.hide(card)
if (col != -1) { 132 139 if (col != -1) {
$scope.sortAdd(card, $scope.cardCols[col]); 133 140 //scope.sortAdd(card, $scope.cardCols[col]);
}*/ 134 141 }*/
}; 135 142 };
136 143
var loc = window.location, new_uri; 137 144 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 138 145 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 139 146 new_uri = 'wss:';
} else { 140 147 } else {
new_uri = 'ws:'; 141 148 new_uri = 'ws:';
} 142 149 }
new_uri += '//' + loc.host; 143 150 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 144 151 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
145 152
ws.onopen = function() { 146 153 ws.onopen = function() {
console.log('websocket connected'); 147 154 console.log('websocket connected');
}; 148 155 };
ws.onmessage = function(e) { 149 156 ws.onmessage = function(e) {
data = JSON.parse(e.data); 150 157 data = JSON.parse(e.data);
console.log('got websocket message ' + e.data); 151 158 console.log('got websocket message ' + e.data);
console.log(data); 152 159 console.log(data);
if (data.event_type == 'new_card') { 153 160 if (data.event_type == 'new_card') {
$scope.add(data.flashcard); 154 161 $scope.add(data.flashcard);
} else if (data.event_type == 'score_change') { 155 162 } else if (data.event_type == 'score_change') {
$scope.update(data.flashcard_id, data.new_score); 156 163 $scope.update(data.flashcard_id, data.new_score);
} 157 164 }
}; 158 165 };
ws.onerror = function(e) { 159 166 ws.onerror = function(e) {
console.error(e); 160 167 console.error(e);
}; 161 168 };
ws.onclose = function(e) { 162 169 ws.onclose = function(e) {
console.log('connection closed'); 163 170 console.log('connection closed');
}; 164 171 };
165 172
var resetModal = function() { 166 173 var resetModal = function() {
$('#new-card-input').html(''); 167 174 $('#new-card-input').html('');
$('#newCard').closeModal(modal_options); 168 175 $('#newCard').closeModal(modal_options);
}; 169 176 };
170 177
$scope.pushCard = function() { 171 178 $scope.pushCard = function() {
var i = 0; 172 179 var i = 0;
var blanks = []; 173 180 var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 174 181 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 175 182 if (typeof node.data == 'undefined') {
console.log('undefined node'); 176 183 console.log('undefined node');
return resetModal(); 177 184 return resetModal();
} 178 185 }
node = $(node)[0]; 179 186 node = $(node)[0];
console.log(node); 180 187 console.log(node);
if (node.tagName == 'B') { 181 188 if (node.tagName == 'B') {
text = $(node).text(); 182 189 text = $(node).text();
blanks.push([i, i + text.length]); 183 190 blanks.push([i, i + text.length]);
i += text.length; 184 191 i += text.length;
} else { 185 192 } else {
i += node.data.length; 186 193 i += node.data.length;
} 187 194 }
}); 188 195 });
var myCard = { 189 196 var myCard = {
'text': $('#new-card-input').text().trim(), 190 197 'text': $('#new-card-input').text().trim(),
'mask': blanks, 191 198 'mask': blanks,
section: sectionId 192 199 section: sectionId
}; 193 200 };
if (myCard.text == '') { 194 201 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 195 202 console.log('blank flashcard not pushed:' + myCard.text);
return resetModal(); 196 203 return resetModal();
} 197 204 }
$http.post('/api/flashcards/', myCard). 198 205 $http.post('/api/flashcards/', myCard).
success(function(data) { 199 206 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 200 207 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 201 208 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 202 209 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 203 210 }
204 211
}). 205 212 }).
error(function(error) { 206 213 error(function(error) {
console.log('something went wrong pushing a card!'); 207 214 console.log('something went wrong pushing a card!');
}); 208 215 });
return resetModal(); 209 216 return resetModal();
}; 210 217 };
211 218
/* Key bindings for the whole feed window. Hotkey it up! */ 212 219 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 213 220 var listenForC = true;
214 221
// Need to pass these options into openmodal and leanmodal, 215 222 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 216 223 // otherwise the ready handler doesn't get called
217 224
modal_options = { 218 225 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 219 226 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 220 227 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 221 228 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 222 229 out_duration: 200, // Transition out duration
ready: function() { 223 230 ready: function() {
listenForC = false; 224 231 listenForC = false;
console.log('modal OPENING'); 225 232 console.log('modal OPENING');
$('#new-card-input').focus(); 226 233 $('#new-card-input').focus();
}, 227 234 },
complete: function() { 228 235 complete: function() {
listenForC = true; 229 236 listenForC = true;
console.log('modal done, closing'); 230 237 console.log('modal done, closing');
$('#new-card-input').blur(); 231 238 $('#new-card-input').blur();
} 232 239 }
}; 233 240 };
234 241
$(document).keydown(function(e) { 235 242 $(document).keydown(function(e) {
var keyed = e.which; 236 243 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 237 244 if (keyed == 67 && listenForC) { // "c" for compose
$('#newCard').openModal(modal_options); 238 245 $('#newCard').openModal(modal_options);
e.preventDefault(); 239 246 e.preventDefault();
listenForC = false; 240 247 listenForC = false;
return false; 241 248 return false;
} else if (keyed == 27) { // clear on ESC 242 249 } else if (keyed == 27) { // clear on ESC
listenForC = true; 243 250 listenForC = true;
document.getElementById('new-card-input').value = ''; 244 251 document.getElementById('new-card-input').value = '';
} 245 252 }
}); 246 253 });
$(document).ready(function() { 247 254 $(document).ready(function() {
$('.tooltipped').tooltip({delay: 50}); 248 255 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 249 256 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 250 257 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 251 258 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 252 259 if (e.which == 13) {
e.preventDefault(); 253 260 e.preventDefault();
$scope.pushCard(); 254 261 $scope.pushCard();
listenForC = true; 255 262 listenForC = true;
return false; 256 263 return false;
} 257 264 }
}); 258 265 });
$('button#blank-selected').click(function() { 259 266 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 260 267 console.log(window.getSelection());
document.execCommand('bold'); 261 268 document.execCommand('bold');
scripts/FlashcardDirective.js View file @ 4f1bc5f
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', '$state', '$window', 3 3 directive('flashcard', ['$http', '$state', '$window',
function($http, $state, $window) { 4 4 function($http, $state, $window) {
return { 5 5 return {
templateUrl: '/app/templates/flashcard.html', 6 6 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 7 7 restrict: 'E',
scope: { 8 8 scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html 9 9 flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html 10 10 refresh: '&' // eval refresh in parent html
}, 11 11 },
link: function(scope, element) { 12 12 link: function(scope, element) {
/* Handles width of the card */ 13 13 /* Handles width of the card */
scope.textPieces = []; 14 14 scope.textPieces = [];
15
scope.flashcard.mask.sort(function(a, b) { 16 15 scope.flashcard.mask.sort(function(a, b) {
return a[0] - b[0]; 17 16 return a[0] - b[0];
}); 18 17 });
var i = 0; 19 18 var i = 0;
scope.flashcard.mask.forEach(function(blank) { 20 19 scope.flashcard.mask.forEach(function(blank) {
scope.textPieces.push({text: scope.flashcard.text.slice(i, blank[0])}); 21 20 scope.textPieces.push({text: scope.flashcard.text.slice(i, blank[0])});
scope.textPieces.push({text: scope.flashcard.text.slice(blank[0], blank[1]), blank: true}); 22 21 scope.textPieces.push({text: scope.flashcard.text.slice(blank[0], blank[1]), blank: true});
i = blank[1]; 23 22 i = blank[1];
}); 24 23 });
scope.textPieces.push({text: scope.flashcard.text.slice(i)}); 25 24 scope.textPieces.push({text: scope.flashcard.text.slice(i)});
/* Pulls card from feed into deck */ 26 25 /* Pulls card from feed into deck */
scope.pullCard = function(flashcard) { 27 26 scope.pullCard = function(flashcard) {
flashcard.is_in_deck = true; 28 27 flashcard.is_in_deck = true;
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard). 29 28 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
success(function(data) { 30 29 success(function(data) {
console.log('pulled flashcard #' + flashcard.id); 31 30 console.log('pulled flashcard #' + flashcard.id);
//scope.startShrink = true; 32 31 //scope.startShrink = true;
//scope.refresh(flashcard); 33 32 //scope.refresh(flashcard);
}). 34 33 }).
error(function(data) { 35 34 error(function(data) {
console.log('failed to pull flashcard #' + flashcard.id); 36 35 console.log('failed to pull flashcard #' + flashcard.id);
}); 37 36 });
}; 38 37 };
39 38
/* Unpulls card from deck */ 40 39 /* Unpulls card from deck */
scope.unpullCard = function(flashcard) { 41 40 scope.unpullCard = function(flashcard) {
console.log('unpulling card...'); 42 41 console.log('unpulling card...');
flashcard.is_in_deck = false; 43 42 flashcard.is_in_deck = false;
$http.post('/api/flashcards/' + flashcard.id + '/unpull/', 44 43 $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
flashcard). 45 44 flashcard).
success(function(data) { 46 45 success(function(data) {
console.log('card unpull success'); 47 46 console.log('card unpull success');
//scope.startShrink = true; 48 47 //scope.startShrink = true;
//scope.refresh(flashcard); 49 48 //scope.refresh(flashcard);
}). 50 49 }).
error(function(data) { 51 50 error(function(data) {
console.log('card unpull FAILURE'); 52 51 console.log('card unpull FAILURE');
}); 53 52 });
}; 54 53 };
55 54
/* Hides card from feed */ 56 55 /* Hides card from feed */
scope.hideCard = function(flashcard) { 57 56 scope.hideCard = function(flashcard) {
if ($state.current.name == 'feed') { 58 57 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/hide/', 59 58 $http.post('/api/flashcards/' + flashcard.id + '/hide/',
flashcard). 60 59 flashcard).
success(function(data) { 61 60 success(function(data) {
console.log('card hide success'); 62 61 console.log('card hide success');
scope.startShrink = true; 63 62 scope.startShrink = true;
scope.refresh(flashcard); 64 63 scope.refresh(flashcard);
}). 65 64 }).
error(function(data) { 66 65 error(function(data) {
console.log('card hide FAILURE'); 67 66 console.log('card hide FAILURE');
}); 68 67 });
} 69 68 }
templates/flashcard.html View file @ 4f1bc5f
<div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false" 1 1 <div class="card flashy smallify cyan-text text-darken-2" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink}"> 2 2 ng-class="{'shrinky': startShrink}">
<div class="valign-wrapper"> 3 3 <div class="valign-wrapper">
<div class="card-content valign center-align"> 4 4 <div class="card-content valign center-align">
<span ng-repeat="piece in textPieces" 5 5 <span ng-repeat="piece in textPieces"
ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span> 6 6 ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>
</div> 7 7 </div>
</div> 8 8 </div>
<div class="card-overlay"> 9 9 <div class="card-overlay">
<div class="top-box no-user-select" ng-hide="flashcard.is_in_deck" 10 10 <div class="top-box no-user-select" ng-hide="flashcard.is_in_deck"
ng-click="pullCard(flashcard)"> 11 11 ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 12 12 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 13 13 </div>
<div class="top-box no-user-select" ng-show="flashcard.is_in_deck" 14 14 <div class="top-box no-user-select" ng-show="flashcard.is_in_deck"
ng-click="unpullCard(flashcard)"> 15 15 ng-click="unpullCard(flashcard)">
<div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div> 16 16 <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
</div> 17 17 </div>
<div class="bottom-box no-user-select"> 18 18 <div class="bottom-box no-user-select">
<div class="left-box"> 19 19 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 20 20 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 21 21 </div>
<div class="right-box" ng-click=" 22 22 <div class="right-box" ng-click="
hideCard(flashcard)"> 23 23 hideCard(flashcard)">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 24 24 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 25 25 </div>
26 26
</div> 27 27 </div>
</div> 28 28 </div>
<div ng-show="flashcard.is_in_deck" class="green-text" style="position:absolute; top:0px;right:0px"> 29 29 <div ng-show="flashcard.is_in_deck" class="green-text" style="position:absolute; top:0px;right:0px">
<div class="center-me"><i class="mdi-action-done small"></i></div> 30 30 <div class="center-me"><i class="mdi-action-done small"></i></div>
</div> 31 31 </div>
<div style="position:absolute; bottom:0px; right:5px"> 32 32 <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">
<span class="center-me">score:{{flashcard.score}}</span> 33 33 <span class="center-me">score:{{flashcard.score}}</span>
</div> 34 34 </div>
</div> 35 35 </div>