110swag / flashy-frontend

Download as
Browse Code ยป

Commit 20ed06e1b5a4b2f5675f96d5eeb15248d9786d00

Authored by Andrew Buss
1 parent 0adf8f867a
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

make cardgridcontroller an actual controller; deck almost works now

Showing 4 changed files with 28 additions and 34 deletions Inline Diff

scripts/CardGridController.js View file @ 20ed06e
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
$scope.cards = []; 3 3 $scope.cards = [];
$scope.deck = []; 4 4 $scope.deck = [];
$scope.cardCols = []; // organized data 5 5 $scope.cardCols = []; // organized data
$scope.numCols = 0; 6 6 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 7 7 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 8 8 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 9 9 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$scope.showGrid = false; 10 10 $scope.showGrid = false;
$scope.moveQueue = []; 11 11 $scope.moveQueue = [];
$rootScope.currentSection = $scope.section; 12 12 $rootScope.currentSection = $scope.section;
13 13
if (!UserService.isInSection($scope.sectionId)) { 14 14 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 15 15 console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass'); 16 16 $state.go('addclass');
} 17 17 }
18 18
$scope.refreshColumnWidth = function() { 19 19 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 20 20 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 21 21 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 22 22 $('.cardColumn').css({
width: width + 'px', 23 23 width: width + 'px',
'font-size': 100 * width / 250 + '%' 24 24 'font-size': 100 * width / 250 + '%'
}); 25 25 });
$('.cardColumn .card.flashy').css({ 26 26 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 27 27 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 28 28 height: (width * 3 / 5) + 'px'
}); 29 29 });
}; 30 30 };
31 31
$scope.refreshLayout = function() { 32 32 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 33 33 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
34 34
// check if we actually need to refresh the whole layout 35 35 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 36 36 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 37 37 $scope.numCols = numCols;
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 38 38 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 39 39 $scope.cardCols = [];
var cols = []; 40 40 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 41 41 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 42 42 $scope.cards.forEach(function(card, i) {
card.colNum = i % $scope.numCols; 43 43 card.colNum = i % $scope.numCols;
cols[card.colNum].push(card); 44 44 cols[card.colNum].push(card);
}); 45 45 });
for (i in cols) $scope.updateColRanks(cols[i]); 46 46 for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols); 47 47 console.log(cols);
return $timeout(function() { 48 48 return $timeout(function() {
$scope.cardCols = cols; 49 49 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 50 50 $timeout($scope.refreshColumnWidth);
}); 51 51 });
52 52
}; 53 53 };
54 54
angular.element($window).bind('resize', $scope.refreshLayout); 55 55 angular.element($window).bind('resize', $scope.refreshLayout);
56 56
$scope.ws_host = window.location.origin.replace('http', 'ws'); 57 57 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 58 58 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 59 59 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 60 60 console.log('deck ws open');
}); 61 61 });
62 62
$scope.deck_ws.onMessage(function(message) { 63 63 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 64 64 data = JSON.parse(message.data);
console.log('message', data); 65 65 console.log('message', data);
card = new Flashcard(data.flashcard.id); 66 66 card = new Flashcard(data.flashcard.id);
if (data.event_type == 'card_pulled') { 67 67 if (data.event_type == 'card_pulled') {
$scope.deck[card.id] = card; 68 68 $scope.deck[card.id] = card;
} 69 69 }
if (data.event_type == 'card_unpulled') { 70 70 if (data.event_type == 'card_unpulled') {
$scope.deck[card.id] = undefined; 71 71 $scope.deck[card.id] = undefined;
} 72 72 }
if (data.event_type == 'card_hidden') { 73 73 if (data.event_type == 'card_hidden') {
$scope.hideCardFromGrid(card); 74 74 $scope.hideCardFromGrid(card);
} 75 75 }
}); 76 76 });
77 77
$scope.cardInDeck = function(id) { 78 78 $scope.cardInDeck = function(id) {
return $scope.deck[id]; 79 79 return $scope.deck[id];
}; 80 80 };
$scope.addCardToGrid = function(card) { 81 81 $scope.addCardToGrid = function(card) {
var colNum = 0; 82 82 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 83 83 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 84 84 var lowestColNum = 0;
while (colNum < $scope.numCols) { 85 85 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 86 86 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 87 87 lowestCol = $scope.cardCols[colNum];
break; 88 88 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 89 89 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 90 90 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 91 91 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 92 92 lowestColLen = $scope.cardCols[colNum].length;
} 93 93 }
colNum++; 94 94 colNum++;
} 95 95 }
console.log(card); 96 96 console.log(card);
$scope.cards.push(data); 97 97 $scope.cards.push(data);
lowestCol.unshift(card); 98 98 lowestCol.unshift(card);
card.colNum = lowestColNum; 99 99 card.colNum = lowestColNum;
$scope.updateColRanks(lowestCol); 100 100 $scope.updateColRanks(lowestCol);
$timeout($scope.refreshColumnWidth); 101 101 $timeout($scope.refreshColumnWidth);
102 102
}; 103 103 };
104 104
$scope.updateColRanks = function(col) { 105 105 $scope.updateColRanks = function(col) {
for (i in col) 106 106 for (i in col)
col[i].colRank = parseInt(i); 107 107 col[i].colRank = parseInt(i);
}; 108 108 };
109
$scope.hideCardFromGrid = function(card) { 109 110 $scope.hideCardFromGrid = function(card) {
console.log('hiding', card); 110 111 console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1); 111 112 $scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]); 112 113 $scope.updateColRanks($scope.cardCols[card.colNum]);
console.log($scope.cardCols); 113 114 console.log($scope.cardCols);
}; 114 115 };
115 116
$http.get('/api/sections/' + $scope.sectionId + '/deck/'). 116
success(function(data) { 117
for (i in data) $scope.deck[data[i].id] = data[i]; 118
console.log("got user's deck"); 119
}). 120
error(function(err) { 121
console.log('get deck failed'); 122
}); 123
scripts/DeckController.js View file @ 20ed06e
angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']). 1 1 angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']).
2 2
controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) { 3 3 controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
angular.module('flashy.CardGridController').controller.apply(this, arguments); 4 4 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments).then(function() {
5 $scope.refreshLayout();
6 });
$scope.cards = $scope.deck; 5 7 $scope.cards = $scope.deck;
$scope.refreshLayout(); 6
} 7 8 }
); 8 9 );
9 10
scripts/FeedController.js View file @ 20ed06e
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']). 1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).controller('FeedController',
2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
3 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);
2 4
controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 3
angular.module('flashy.CardGridController').controller.apply(this, arguments); 4
5
$scope.refreshCards = function() { 6
$http.get('/api/sections/' + $scope.sectionId + '/feed/'). 7
success(function(data) { 8
console.log(data); 9
$scope.cards = data.map(function(card) { 10
return new Flashcard(card, $scope.deck); 11
}); 12
$scope.refreshLayout().then(function() { 13
$timeout($scope.refreshColumnWidth).then(function() { 14
$scope.showGrid = true; 15
}); 16
console.log('layout done'); 17
}); 18
}); 19
}; 20
21
$scope.sortAdd = function(card, array) { 22 5 $scope.sortAdd = function(card, array) {
console.log('sort add'); 23 6 console.log('sort add');
array.forEach(function(ele, i, ary) { 24 7 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 25 8 if (ele.score <= card.score) {
ary.splice(i, 0, card); 26 9 ary.splice(i, 0, card);
return; 27 10 return;
} 28 11 }
}); 29 12 });
}; 30 13 };
31 14
$scope.updateCardScore = function(card) { 32 15 $scope.updateCardScore = function(card) {
console.log($scope.cardCols, card); 33 16 console.log($scope.cardCols, card);
// if no colNum is attached, then this doesn't exist on the feed yet 34 17 // if no colNum is attached, then this doesn't exist on the feed yet
if (!card.colNum) return; 35 18 if (!card.colNum) return;
$scope.cardCols[card.colNum].sort(function(a, b) { 36 19 $scope.cardCols[card.colNum].sort(function(a, b) {
return b.score - a.score; 37 20 return b.score - a.score;
}); 38 21 });
$scope.updateColRanks($scope.cardCols[card.colNum]); 39 22 $scope.updateColRanks($scope.cardCols[card.colNum]);
}; 40 23 };
41 24
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 42 25 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) { 43 26 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 44 27 data = JSON.parse(e.data);
console.log('message', data); 45 28 console.log('message', data);
if (data.event_type == 'new_card') { 46 29 if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck)); 47 30 $scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck));
} else if (data.event_type == 'score_change') { 48 31 } else if (data.event_type == 'score_change') {
card = new Flashcard(data.flashcard); 49 32 card = new Flashcard(data.flashcard);
card.score = data.flashcard.score; 50 33 card.score = data.flashcard.score;
$scope.updateCardScore(card); 51 34 $scope.updateCardScore(card);
} 52 35 }
}); 53 36 });
54 37
$scope.pushCard = function() { 55 38 $scope.pushCard = function() {
var myCard = { 56 39 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 57 40 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 58 41 'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks, 59 42 'mask': $scope.newCardBlanks,
section: $scope.section.id 60 43 section: $scope.section.id
}; 61 44 };
if (myCard.text == '') { 62 45 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 63 46 console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard(); 64 47 return closeNewCard();
} 65 48 }
$http.post('/api/flashcards/', myCard). 66 49 $http.post('/api/flashcards/', myCard).
success(function(data) { 67 50 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 68 51 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 69 52 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 70 53 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 71 54 }
}); 72 55 });
return $scope.closeNewCardModal(); 73 56 return $scope.closeNewCardModal();
}; 74 57 };
75 58
/* Key bindings for the whole feed window. Hotkey it up! */ 76 59 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 77 60 var listenForC = true;
78 61
// Need to pass these options into openmodal and leanmodal, 79 62 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 80 63 // otherwise the ready handler doesn't get called
81 64
modal_options = { 82 65 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 83 66 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 84 67 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 85 68 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 86 69 out_duration: 200, // Transition out duration
ready: function() { 87 70 ready: function() {
$('#new-card-input').focus(); 88 71 $('#new-card-input').focus();
document.execCommand('selectAll', false, null); 89 72 document.execCommand('selectAll', false, null);
} 90 73 }
}; 91 74 };
92 75
$(document).keydown(function(e) { 93 76 $(document).keydown(function(e) {
var keyed = e.which; 94 77 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 95 78 if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal(); 96 79 $scope.openNewCardModal();
e.preventDefault(); 97 80 e.preventDefault();
return false; 98 81 return false;
} else if (keyed == 27) { // clear on ESC 99 82 } else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal(); 100 83 $scope.closeNewCardModal();
} 101 84 }
}); 102 85 });
103 86
$scope.openNewCardModal = function() { 104 87 $scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options); 105 88 $('#newCard').openModal(modal_options);
listenForC = false; 106 89 listenForC = false;
$('#new-card-input').html('Write a flashcard!'); 107 90 $('#new-card-input').html('Write a flashcard!');
}; 108 91 };
109 92
$scope.closeNewCardModal = function() { 110 93 $scope.closeNewCardModal = function() {
listenForC = true; 111 94 listenForC = true;
$('#new-card-input').html('').blur(); 112 95 $('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options); 113 96 $('#newCard').closeModal(modal_options);
}; 114 97 };
115 98
$('.tooltipped').tooltip({delay: 50}); 116 99 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 117 100 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 118 101 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 119 102 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 120 103 if (e.which == 13) {
e.preventDefault(); 121 104 e.preventDefault();
if ($scope.submit_enabled) { 122 105 if ($scope.submit_enabled) {
$scope.pushCard(); 123 106 $scope.pushCard();
listenForC = true; 124 107 listenForC = true;
} 125 108 }
return false; 126 109 return false;
} else { 127 110 } else {
128 111
} 129 112 }
}); 130 113 });
$('button#blank-selected').click(function() { 131 114 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 132 115 console.log(window.getSelection());
document.execCommand('bold'); 133 116 document.execCommand('bold');
}); 134 117 });
$scope.refreshCards(); 135 118 $scope.refreshCards();
$scope.newCardBlanks = []; 136 119 $scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() { 137 120 $scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text(); 138 121 $scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160; 139 122 $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0; 140 123 var i = 0;
$scope.newCardBlanks = []; 141 124 $scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 142 125 $('#new-card-input')[0].childNodes.forEach(function(node) {
node = $(node)[0]; 143 126 node = $(node)[0];
if (node.tagName == 'B') { 144 127 if (node.tagName == 'B') {
var text = $(node).text(); 145 128 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 146 129 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 147 130 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 148 131 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 149 132 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 150 133 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 151 134 if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 152 135 i += text.length;
} else if (!node.data) { 153 136 } else if (!node.data) {
i += $(node).text().length; 154 137 i += $(node).text().length;
} else { 155 138 } else {
i += node.data.length; 156 139 i += node.data.length;
} 157 140 }
}); 158 141 });
$scope.newCardBlanks.sort(function(a, b) { 159 142 $scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0]; 160 143 return a[0] - b[0];
}); 161 144 });
i = 0; 162 145 i = 0;
newtext = ''; 163 146 newtext = '';
$scope.newCardBlanks.forEach(function(blank) { 164 147 $scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]); 165 148 newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>'; 166 149 newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 167 150 i = blank[1];
}); 168 151 });
newtext += $scope.newCardText.slice(i); 169 152 newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext; 170 153 //$scope.newCardFormattedText = newtext;
}; 171 154 };
$scope.shuffleCards = function() { 172 155 $scope.shuffleCards = function() {
$timeout(function() { 173 156 $timeout(function() {
(function(o) { 174 157 (function(o) {
for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 175 158 for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o; 176 159 return o;
})($scope.cardCols[0]); 177 160 })($scope.cardCols[0]);
}); 178 161 });
}; 179 162 };
$scope.$on('$destroy', function() { 180 163 $scope.$on('$destroy', function() {
$scope.feed_ws.close(); 181 164 $scope.feed_ws.close();
}); 182 165 });
166 return $http.get('/api/sections/' + $scope.sectionId + '/feed/').
templates/feed.html View file @ 20ed06e
<div class="row"> 1 1 <div class="row">
<h2 ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2> 2 2 <h2 ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2>
3 3
<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols.length || !showGrid"> 4 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols.length || !showGrid">
<div class="indeterminate"></div> 5 5 <div class="indeterminate"></div>
</div> 6 6 </div>
7 7
<div class="cardColumn" ng-repeat="col in cardCols" > 8 8 <div class="cardColumn" ng-repeat="col in cardCols">
<div class="repeated-card" ng-repeat="card in col"> 9 9 <div class="repeated-card" ng-repeat="card in col">
<flashcard flashcard-obj="card"/> 10 10 <flashcard flashcard-obj="card"/>
</div> 11 11 </div>
</div> 12 12 </div>
</div> 13 13 </div>
14 14
15 15
<!--Lil plus button in corner--> 16 16 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 96px; right: 24px;"> 17 17 <div class="fixed-action-btn" style="bottom: 96px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left" 18 18 <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left"
data-delay="50" ng-click="openNewCardModal()" 19 19 data-delay="50" ng-click="openNewCardModal()"
data-tooltip="(C)ompose"> 20 20 data-tooltip="(C)ompose">
<i class="large mdi-content-add"></i> 21 21 <i class="large mdi-content-add"></i>
</a> 22 22 </a>
</div> 23 23 </div>
24 24
<div id="newCard" class="modal bottom-sheet row" style="max-height:none;"> 25 25 <div id="newCard" class="modal bottom-sheet row" style="max-height:none;">
<form id="new-card-form"> 26 26 <form id="new-card-form">
<div class="modal-content col"> 27 27 <div class="modal-content col">
<div class="row" style="margin-bottom:0"> 28 28 <div class="row" style="margin-bottom:0">
<div class="card cyan-text text-darken-2" 29 29 <div class="card cyan-text text-darken-2"
style="width:300px; height:180px; margin-bottom:0; font-size:120%;"> 30 30 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div class="valign-wrapper"> 31 31 <div class="valign-wrapper">
<div id="new-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;" 32 32 <div id="new-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
class="card-content valign center-align" 33 33 class="card-content valign center-align"
contenteditable select-non-editable="true" ng-change="refreshNewCardInput()"> 34 34 contenteditable select-non-editable="true" ng-change="refreshNewCardInput()">
35 35
</div> 36 36 </div>
</div> 37 37 </div>
38 38
</div> 39 39 </div>
</div> 40 40 </div>
</div> 41 41 </div>
42 42
<div class="col"> 43 43 <div class="col">
<div class="row"> 44 44 <div class="row">
45 45
</div> 46 46 </div>
<div class="row"> 47 47 <div class="row">
<button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" 48 48 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()"
data-position="left" 49 49 data-position="left"
data-delay="50" ng-class="submit_enabled?{}:'disabled'" 50 50 data-delay="50" ng-class="submit_enabled?{}:'disabled'"
data-tooltip="Enter">Contribute 51 51 data-tooltip="Enter">Contribute
<i class="mdi-hardware-keyboard-return right"></i> 52 52 <i class="mdi-hardware-keyboard-return right"></i>
</button> 53 53 </button>
</div> 54 54 </div>
<div class="row"> 55 55 <div class="row">
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 56 56 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B">Blank Selected Text 57 57 data-tooltip="Ctrl-B">Blank Selected Text
</button> 58 58 </button>
</div> 59 59 </div>
<div class="row" ng-show="newCardText" ng-style="(newCardText.length>160)?{color:'red'}:{}"> 60 60 <div class="row" ng-show="newCardText" ng-style="(newCardText.length>160)?{color:'red'}:{}">
{{newCardText.length}}/160 characters 61 61 {{newCardText.length}}/160 characters
</div> 62 62 </div>
<div class="row" ng-show="newCardText.length < 5"> 63 63 <div class="row" ng-show="newCardText.length < 5">
Please write a little more! 64 64 Please write a little more!