110swag / flashy-frontend

Commit 80b664e098c10fe95b89fd62cd1048ce693f7eda

Authored by Andrew Buss 2015-06-02 17:22:46 -0700

switched back to cardCols for lecture until queueing works

Showing 4 changed files with 27 additions and 13 deletions Inline Diff

scripts/CardGridController.js
scripts/FeedController.js
styles/flashy.css
templates/feed.html

angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).controller('FeedController',	1	1	angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).controller('FeedController',
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {	2	2	function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {
angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);	3	3	angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);
	4	4
(function drawCols() {	5	5	(function drawCols() {
$interval(function() {	6	6	$interval(function() {
if ($scope.cardColsShow != $scope.cardCols) {	7	7	if ($scope.cardColsShow != $scope.cardCols) {
$scope.cardColsShow = $scope.cardCols;	8	8	$scope.cardColsShow = $scope.cardCols;
console.log('interval');	9	9	console.log('interval');
}	10	10	}
}, 1000);	11	11	}, 1000);
}());	12	12	}());
	13	13
$scope.updateCardScore = function(card) {	14	14	$scope.updateCardScore = function(card) {
console.log($scope.cardCols, card);	15	15	console.log($scope.cardCols, card);
// if no colNum is attached, then this doesn't exist on the feed yet	16	16	// if no colNum is attached, then this doesn't exist on the feed yet
if (!card.colNum) return;	17	17	if (!card.colNum) return;
$scope.cardCols[card.colNum].sort(function(a, b) {	18	18	$scope.cardCols[card.colNum].sort(function(a, b) {
return b.score - a.score;	19	19	return b.score - a.score;
});	20	20	});
$scope.updateColRanks($scope.cardCols[card.colNum]);	21	21	$scope.updateColRanks($scope.cardCols[card.colNum]);
};	22	22	};
	23	23
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');	24	24	$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) {	25	25	$scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data);	26	26	data = JSON.parse(e.data);
console.log('message', data);	27	27	console.log('message', data);
if (data.event_type == 'new_card') {	28	28	if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck));	29	29	$scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck));
} else if (data.event_type == 'score_change') {	30	30	} else if (data.event_type == 'score_change') {
card = new Flashcard(data.flashcard);	31	31	card = new Flashcard(data.flashcard);
card.score = data.flashcard.score;	32	32	card.score = data.flashcard.score;
$scope.updateCardScore(card);	33	33	$scope.updateCardScore(card);
}	34	34	}
});	35	35	});
	36	36
$scope.pushCard = function() {	37	37	$scope.pushCard = function() {
var myCard = {	38	38	var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix.	39	39	// we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(),	40	40	'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks,	41	41	'mask': $scope.newCardBlanks,
section: $scope.section.id	42	42	section: $scope.section.id
};	43	43	};
if (myCard.text == '') {	44	44	if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text);	45	45	console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard();	46	46	return closeNewCard();
}	47	47	}
$http.post('/api/flashcards/', myCard).	48	48	$http.post('/api/flashcards/', myCard).
success(function(data) {	49	49	success(function(data) {
console.log('flashcard pushed: ' + myCard.text);	50	50	console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) {	51	51	if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);	52	52	Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
}	53	53	}
});	54	54	});
return $scope.closeNewCardModal();	55	55	return $scope.closeNewCardModal();
};	56	56	};
	57	57
/* Key bindings for the whole feed window. Hotkey it up! */	58	58	/* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true;	59	59	var listenForC = true;
	60	60
// Need to pass these options into openmodal and leanmodal,	61	61	// Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called	62	62	// otherwise the ready handler doesn't get called
	63	63
modal_options = {	64	64	modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal	65	65	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background	66	66	opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration	67	67	in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration	68	68	out_duration: 200, // Transition out duration
ready: function() {	69	69	ready: function() {
$('#new-card-input').focus();	70	70	$('#new-card-input').focus();
document.execCommand('selectAll', false, null);	71	71	document.execCommand('selectAll', false, null);
}	72	72	}
};	73	73	};
	74	74
$(document).keydown(function(e) {	75	75	$(document).keydown(function(e) {
var keyed = e.which;	76	76	var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose	77	77	if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal();	78	78	$scope.openNewCardModal();
e.preventDefault();	79	79	e.preventDefault();
return false;	80	80	return false;
} else if (keyed == 27) { // clear on ESC	81	81	} else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal();	82	82	$scope.closeNewCardModal();
}	83	83	}
});	84	84	});
	85	85
$scope.openNewCardModal = function() {	86	86	$scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options);	87	87	$('#newCard').openModal(modal_options);
listenForC = false;	88	88	listenForC = false;
$('#new-card-input').html('Write a flashcard!');	89	89	$('#new-card-input').html('Write a flashcard!');
};	90	90	};
	91	91
$scope.closeNewCardModal = function() {	92	92	$scope.closeNewCardModal = function() {
listenForC = true;	93	93	listenForC = true;
$('#new-card-input').html('').blur();	94	94	$('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options);	95	95	$('#newCard').closeModal(modal_options);
};	96	96	};
	97	97
$('.tooltipped').tooltip({delay: 50});	98	98	$('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered	99	99	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options);	100	100	$('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) {	101	101	$('#new-card-input').on('keydown', function(e) {
if (e.which == 13) {	102	102	if (e.which == 13) {
e.preventDefault();	103	103	e.preventDefault();
if ($scope.submit_enabled) {	104	104	if ($scope.submit_enabled) {
$scope.pushCard();	105	105	$scope.pushCard();
listenForC = true;	106	106	listenForC = true;
}	107	107	}
return false;	108	108	return false;
} else {	109	109	} else {
	110	110
}	111	111	}
});	112	112	});
$('button#blank-selected').click(function() {	113	113	$('button#blank-selected').click(function() {
console.log(window.getSelection());	114	114	console.log(window.getSelection());
document.execCommand('bold');	115	115	document.execCommand('bold');
});	116	116	});
$scope.newCardBlanks = [];	117	117	$scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() {	118	118	$scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text();	119	119	$scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;	120	120	$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0;	121	121	var i = 0;
$scope.newCardBlanks = [];	122	122	$scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) {	123	123	$('#new-card-input')[0].childNodes.forEach(function(node) {
node = $(node)[0];	124	124	node = $(node)[0];
if (node.tagName == 'B') {	125	125	if (node.tagName == 'B') {
var text = $(node).text();	126	126	var text = $(node).text();
var leftspaces = 0, rightspaces = 0;	127	127	var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js	128	128	// awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;	129	129	while (text[leftspaces] == ' ' \|\| text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;	130	130	while (text[text.length - 1 - rightspaces] == ' ' \|\| text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length);	131	131	console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);	132	132	if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length;	133	133	i += text.length;
} else if (!node.data) {	134	134	} else if (!node.data) {
i += $(node).text().length;	135	135	i += $(node).text().length;
} else {	136	136	} else {
i += node.data.length;	137	137	i += node.data.length;
}	138	138	}
});	139	139	});
$scope.newCardBlanks.sort(function(a, b) {	140	140	$scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0];	141	141	return a[0] - b[0];
});	142	142	});
i = 0;	143	143	i = 0;
newtext = '';	144	144	newtext = '';
$scope.newCardBlanks.forEach(function(blank) {	145	145	$scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]);	146	146	newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';	147	147	newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1];	148	148	i = blank[1];
});	149	149	});
newtext += $scope.newCardText.slice(i);	150	150	newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext;	151	151	//$scope.newCardFormattedText = newtext;
};	152	152	};
$scope.shuffleCards = function() {	153	153	$scope.shuffleCards = function() {
$timeout(function() {	154	154	$timeout(function() {
(function(o) {	155	155	(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);	156	156	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;	157	157	return o;
})($scope.cardCols[0]);	158	158	})($scope.cardCols[0]);
});	159	159	});
};	160	160	};
$scope.$on('$destroy', function() {	161	161	$scope.$on('$destroy', function() {
$scope.feed_ws.close();	162	162	$scope.feed_ws.close();
});	163	163	});
return $http.get('/api/sections/' + $scope.sectionId + '/feed/').	164	164	return $http.get('/api/sections/' + $scope.sectionId + '/feed/').
success(function(data) {	165	165	success(function(data) {
console.log(data);	166	166	console.log(data);
$scope.cards = data.map(function(card) {	167	167	$scope.cards = data.map(function(card) {
return new Flashcard(card, $scope.deck);	168	168	return new Flashcard(card, $scope.deck);
});	169	169	});
$scope.refreshLayout().then(function() {	170	170	$scope.refreshLayout().then(function() {
$timeout($scope.refreshColumnWidth).then(function() {	171	171	$timeout($scope.refreshColumnWidth).then(function() {
$scope.showGrid = true;	172	172	$scope.showGrid = true;
});	173	173	});
console.log('layout done');	174	174	console.log('layout done');
});	175	175	});

.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	61	/transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);/
}	62	62	}
	63	63
/.card.flashy.shrinky {/	64	64	/.card.flashy.shrinky {/
/height: 0;/	65	65	/height: 0;/
/opacity: 0;/	66	66	/opacity: 0;/
/overflow: hidden;/	67	67	/overflow: hidden;/
/}/	68	68	/}/
	69	69
.card-overlay {	70	70	.card-overlay {
cursor: pointer;	71	71	cursor: pointer;
left: 0;	72	72	left: 0;
opacity: 0;	73	73	opacity: 0;
position: absolute;	74	74	position: absolute;
/pointer-events: none;/	75	75	/pointer-events: none;/
top: 0;	76	76	top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,	77	77	transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1);	78	78	opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */	79	79	/* animation effect to appear on off-hover */
visibility: hidden;	80	80	visibility: hidden;
height: 100%;	81	81	height: 100%;
width: 100%;	82	82	width: 100%;
}	83	83	}
	84	84
.card-overlay i {	85	85	.card-overlay i {
color: #FFF;	86	86	color: #FFF;
left: 50%;	87	87	left: 50%;
position: absolute;	88	88	position: absolute;
top: 50%;	89	89	top: 50%;
transform: translate(-50%, -50%);	90	90	transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	91	91	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
}	92	92	}
	93	93
.center-me:hover i {	94	94	.center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);	95	95	text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}	96	96	}
	97	97
.card:hover .card-overlay {	98	98	.card:hover .card-overlay {
opacity: 1.0;	99	99	opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */	100	100	transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible;	101	101	visibility: visible;
}	102	102	}
	103	103
.top-box {	104	104	.top-box {
background-color: rgba(0, 184, 76, 0.4);	105	105	background-color: rgba(0, 184, 76, 0.4);
height: 65%;	106	106	height: 65%;
position: relative;	107	107	position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	108	108	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%;	109	109	width: 100%;
}	110	110	}
	111	111
.top-box:hover {	112	112	.top-box:hover {
background-color: rgba(0, 184, 76, 0.5);	113	113	background-color: rgba(0, 184, 76, 0.5);
}	114	114	}
	115	115
.bottom-box {	116	116	.bottom-box {
height: 35%;	117	117	height: 35%;
width: 100%;	118	118	width: 100%;
}	119	119	}
	120	120
.left-box {	121	121	.left-box {
background-color: rgba(119, 146, 255, 0.5);	122	122	background-color: rgba(119, 146, 255, 0.5);
float: left;	123	123	float: left;
position: relative;	124	124	position: relative;
height: 100%;	125	125	height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	126	126	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%;	127	127	width: 50%;
}	128	128	}
	129	129
.left-box:hover {	130	130	.left-box:hover {
background-color: rgba(119, 146, 255, 0.6);	131	131	background-color: rgba(119, 146, 255, 0.6);
}	132	132	}
	133	133
.right-box {	134	134	.right-box {
background-color: rgba(255, 62, 76, 0.5);	135	135	background-color: rgba(255, 62, 76, 0.5);
float: right;	136	136	float: right;
height: 100%;	137	137	height: 100%;
position: relative;	138	138	position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;	139	139	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%;	140	140	width: 50%;
}	141	141	}
	142	142
.right-box:hover {	143	143	.right-box:hover {
background-color: rgba(255, 62, 76, 0.6);	144	144	background-color: rgba(255, 62, 76, 0.6);
}	145	145	}
	146	146
.center-me {	147	147	.center-me {
height: 100%;	148	148	height: 100%;
margin: 0 auto;	149	149	margin: 0 auto;
text-align: center;	150	150	text-align: center;
vertical-align: middle;	151	151	vertical-align: middle;
width: 100%;	152	152	width: 100%;
}	153	153	}
	154	154
/* Card Colors */	155	155	/* Card Colors */
.card.flashy.cardcolor-blue div {	156	156	.card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important;	157	157	background-color: rgba(119, 158, 203, 0.5) !important;
}	158	158	}
	159	159
.cardcolor-red div {	160	160	.cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important;	161	161	background-color: rgba(255, 105, 97, 0.5) !important;
}	162	162	}
	163	163
.cardcolor-green div {	164	164	.cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important;	165	165	background-color: rgba(119, 190, 119, 0.5) !important;
}	166	166	}
	167	167
.cardcolor-yellow div {	168	168	.cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important;	169	169	background-color: rgba(253, 253, 150, 0.5) !important;
}	170	170	}
	171	171
/* Card Colors END */	172	172	/* Card Colors END */
	173	173
.modal.bottom-sheet {	174	174	.modal.bottom-sheet {
max-width: 600px;	175	175	max-width: 600px;
margin-left: auto;	176	176	margin-left: auto;
margin-right: auto;	177	177	margin-right: auto;
}	178	178	}
	179	179
.feed-modal-input {	180	180	.feed-modal-input {
background-color: #D3D3D3;	181	181	background-color: #D3D3D3;
border-style: solid;	182	182	border-style: solid;
border-width: 1px;	183	183	border-width: 1px;
box-shadow: 2px 2px 5px #888888;	184	184	box-shadow: 2px 2px 5px #888888;
height: 24px;	185	185	height: 24px;
}	186	186	}
	187	187
.input-field label {	188	188	.input-field label {
color: #00b3c2;	189	189	color: #00b3c2;
}	190	190	}
	191	191
/* label focus color */	192	192	/* label focus color */
.input-field input[type]:focus + label {	193	193	.input-field input[type]:focus + label {
color: #00b3c2;	194	194	color: #00b3c2;
}	195	195	}
	196	196
/* label underline focus color */	197	197	/* label underline focus color */
.input-field input[type]:focus {	198	198	.input-field input[type]:focus {
border-bottom: 1px solid #00b3c2;	199	199	border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff;	200	200	box-shadow: 0 1px 0 0 #b388ff;
}	201	201	}
	202	202
/* valid color */	203	203	/* valid color */
.input-field input[type].valid {	204	204	.input-field input[type].valid {
border-bottom: 1px solid #00c28f;	205	205	border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7;	206	206	box-shadow: 0 1px 0 0 #673ab7;
}	207	207	}
	208	208
/* invalid color */	209	209	/* invalid color */
.input-field input[type].invalid {	210	210	.input-field input[type].invalid {
border-bottom: 1px solid #673ab7;	211	211	border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7;	212	212	box-shadow: 0 1px 0 0 #673ab7;
}	213	213	}
	214	214
/* icon prefix focus color */	215	215	/* icon prefix focus color */
.input-field .prefix.active {	216	216	.input-field .prefix.active {
color: #b388ff;	217	217	color: #b388ff;
}	218	218	}
	219	219
/* label focus color */	220	220	/* label focus color */
.input-field textarea[type]:focus + label {	221	221	.input-field textarea[type]:focus + label {
color: #b388ff;	222	222	color: #b388ff;
}	223	223	}
	224	224
/* label underline focus color */	225	225	/* label underline focus color */
.input-field textarea[type]:focus {	226	226	.input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2;	227	227	border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff;	228	228	box-shadow: 0 1px 0 0 #b388ff;
}	229	229	}
	230	230
body {	231	231	body {
background-color: #e8e8e8;	232	232	background-color: #e8e8e8;
overflow-x: hidden;	233	233	overflow-x: hidden;
font-family: 'Titillium Web', sans-serif;	234	234	font-family: 'Titillium Web', sans-serif;
height: 100%;	235	235	height: 100%;
}	236	236	}
	237	237
html {	238	238	html {
background: transparent;	239	239	background: transparent;
height: 100%;	240	240	height: 100%;
}	241	241	}
	242	242
.btn {	243	243	.btn {
background-color: #00b3c2;	244	244	background-color: #00b3c2;
}	245	245	}
	246	246
.btn:hover {	247	247	.btn:hover {
background-color: #0097cb;	248	248	background-color: #0097cb;
}	249	249	}
	250	250
.btn-floating {	251	251	.btn-floating {
background-color: #00b3c2;	252	252	background-color: #00b3c2;
}	253	253	}
	254	254
.btn-floating:hover {	255	255	.btn-floating:hover {
background-color: #0097cb;	256	256	background-color: #0097cb;
}	257	257	}
	258	258
.toggley {	259	259	.toggley {
float: left;	260	260	float: left;
margin: 10px;	261	261	margin: 10px;
}	262	262	}
	263	263
#logo-container {	264	264	#logo-container {
margin-bottom: 18px;	265	265	margin-bottom: 18px;
}	266	266	}
	267	267
#lean-overlay {	268	268	#lean-overlay {
display: none !important;	269	269	display: none !important;
}	270	270	}
	271	271
nav {	272	272	nav {
background-color: #d2143f !important;	273	273	background-color: #d2143f !important;
}	274	274	}
	275	275
main {	276	276	main {
min-height: 145px;	277	277	min-height: 145px;
}	278	278	}
	279	279
.side-nav .collapsible-body {	280	280	.side-nav .collapsible-body {
width: 100%;	281	281	width: 100%;
}	282	282	}
	283	283
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {	284	284	.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2;	285	285	background-color: #00b3c2;
}	286	286	}
	287	287
nav .button-collapse {	288	288	nav .button-collapse {
margin: 0 20px;	289	289	margin: 0 20px;
}	290	290	}
	291	291
.collapsible-body i {	292	292	.collapsible-body i {
font-size: 1rem !important;	293	293	font-size: 1rem !important;
}	294	294	}
	295	295
.tabs .tab a {	296	296	.tabs .tab a {
color: #00b3c2;	297	297	color: #00b3c2;
}	298	298	}
	299	299
.tabs .tab a:hover {	300	300	.tabs .tab a:hover {
color: #0041dd;	301	301	color: #0041dd;
}	302	302	}
	303	303
.tabs .indicator {	304	304	.tabs .indicator {
border-bottom: 1px solid #00b3c2;	305	305	border-bottom: 1px solid #00b3c2;
}	306	306	}
	307	307
h2 {	308	308	h2 {
text-align: center;	309	309	text-align: center;
}	310	310	}
	311	311
md-content.md-default-theme {	312	312	md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0);	313	313	background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff;	314	314	border: 1px solid #fff;
}	315	315	}
	316	316
/*#sidenav-overlay {	317	317	/*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important;	318	318	background-color: rgba(0, 0, 0, 0) !important;
}*/	319	319	}*/
.card-content {	320	320	.card-content {
width: 100%;	321	321	width: 100%;
}	322	322	}
	323	323
.valign-wrapper {	324	324	.valign-wrapper {
height: 100%;	325	325	height: 100%;
}	326	326	}
	327	327
/*.toast {	328	328	/*.toast {
height: 100px;	329	329	height: 100px;
width: 300px;	330	330	width: 300px;
line-height: 20px;	331	331	line-height: 20px;
max-height: 100px;	332	332	max-height: 100px;
word-wrap: normal;	333	333	word-wrap: normal;
}*/	334	334	}*/
	335	335
[ng-cloak] {	336	336	[ng-cloak] {
display: none !important;	337	337	display: none !important;
}	338	338	}
	339	339
.cardColumn {	340	340	.cardColumn {
float: left;	341	341	float: left;
}	342	342	}
	343	343
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */	344	344	/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter,	345	345	.repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card,	346	346	.repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave,	347	347	.repeated-card.ng-leave,
.repeated-card.ng-leave > flashcard > .card,	348	348	.repeated-card.ng-leave > flashcard > .card,
.repeated-card.ng-move,	349	349	.repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card {	350	350	.repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);	351	351	-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	352	-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	353	-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	354	transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
position: relative;	355	355	position: relative;
}	356	356	}
	357	357
.repeated-card.ng-enter > flashcard > .card {	358	358	.repeated-card.ng-enter > flashcard > .card {
z-index: 1;	359	359	z-index: 1;
top: -236px;	360	360	top: -236px;
margin-bottom: -230px;	361	361	margin-bottom: -230px;
}	362	362	}
	363	363
.repeated-card.ng-enter.ng-enter-active > flashcard > .card {	364	364	.repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px;	365	365	top: 0px;
margin-bottom: 6px;	366	366	margin-bottom: 6px;
}	367	367	}
	368	368
.repeated-card.ng-leave > flashcard > .card {	369	369	.repeated-card.ng-leave > flashcard > .card {
z-index: -100;	370	370	z-index: -100;
top: 0px;	371	371	top: 0px;
margin-bottom: 6px;	372	372	margin-bottom: 6px;
}	373	373	}
	374	374
.repeated-card.ng-leave.ng-leave-active > flashcard > .card {	375	375	.repeated-card.ng-leave.ng-leave-active > flashcard > .card {
z-index: -100;	376	376	z-index: -100;
opacity: 0;	377	377	opacity: 0;
top: -236px;	378	378	top: -236px;
margin-bottom: -230px;	379	379	margin-bottom: -230px;
}	380	380	}
	381	381
		382	.repeated-card.ng-move > flashcard > .card {
		383	background-color:blue;
		384	top: -250px;
		385	}
		386
		387	.repeated-card.ng-move-active > flashcard > .card {
		388	top: 0
		389	}
		390
		391	.repeated-card.ng-move > flashcard > .card + div {
		392	background-color:red;
		393	top: -250px;
		394	}

<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 cardColsShow">	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!

angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =	1	1	angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {	2	2	function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {
$scope.cards = []; // all cards	3	3	$scope.cards = []; // all cards
$scope.deck = [];	4	4	$scope.deck = [];
$scope.cardCols = []; // organized data	5	5	$scope.cardCols = []; // organized data
$scope.cardColsShow = []; // displayed data	6	6	$scope.cardColsShow = []; // displayed data
$scope.numCols = 0;	7	7	$scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards: {'colNum':col, 'obj':card}	8	8	$scope.cardTable = {}; // look up table of cards: {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId);	9	9	$scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});	10	10	$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$scope.showGrid = false;	11	11	$scope.showGrid = false;
//$scope.moveQueue = []; // queue of flashcard objects	12	12	//$scope.moveQueue = []; // queue of flashcard objects
$rootScope.currentSection = $scope.section;	13	13	$rootScope.currentSection = $scope.section;
	14	14
if (!UserService.isInSection($scope.sectionId)) {	15	15	if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId);	16	16	console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass');	17	17	$state.go('addclass');
}	18	18	}
	19	19
$scope.refreshColumnWidth = function() {	20	20	$scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17;	21	21	avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250));	22	22	width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({	23	23	$('.cardColumn').css({
width: width + 'px',	24	24	width: width + 'px',
'font-size': 100 * width / 250 + '%'	25	25	'font-size': 100 * width / 250 + '%'
});	26	26	});
$('.cardColumn .card.flashy').css({	27	27	$('.cardColumn .card.flashy').css({
width: width - 12 + 'px',	28	28	width: width - 12 + 'px',
height: (width * 3 / 5) + 'px'	29	29	height: (width * 3 / 5) + 'px'
});	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 ' + numCols + ' columns');	38	38	console.log('refreshing layout for ' + numCols + ' columns');
$scope.cardCols = [];	39	39	$scope.cardCols = [];
var cols = [];	40	40	var cols = [];