110swag / flashy-frontend

Commit 30f54ec222b113d817d0cbf8973f44600434013b

Authored by Kevin Mach 2015-06-03 16:11:36 -0700

Exists in master

edit stuff

Showing 18 changed files Side-by-side Diff

config.js
scripts/CardGridController.js
scripts/DeckController.js
scripts/HelpController.js
scripts/LoginController.js
scripts/StudyController.js
styles/flashy.css
templates/addclass.html
templates/cardlist.html
templates/deck.html
templates/feed.html
templates/flashcard.html
templates/help.html
templates/logout.html
templates/requestpasswordreset.html
templates/resetpassword.html
templates/settings.html
templates/study.html

...	...	@@ -53,7 +53,7 @@
53	53	};
54	54	});
55	55	$locationProvider.html5Mode(true);
56		- $urlRouterProvider.otherwise('/404');
	56	+ $urlRouterProvider.otherwise('/login');
57	57	var auth_resolve = {
58	58	authorize: function($q, $rootScope, $state, $stateParams, UserService) {
59	59	console.log('do we need to authorize a user for', $rootScope.nextState.name);
...	...	@@ -86,7 +86,7 @@
86	86	}).
87	87	state('root', {
88	88	resolve: auth_resolve,
89		- url: '/',
	89	+ url: '',
90	90	controller: 'RootController'
91	91	}).
92	92	state('feed', {

...	...	@@ -2,11 +2,11 @@
2	2	function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
3	3	sectionId = parseInt($stateParams.sectionId);
4	4	$scope.cards = []; // all cards
5		- $scope.cardCols = []; // organized data
	5	+ $scope.cardCols = null; // organized data
6	6	$scope.affectedCards = []; // cards affected by a position change move
7	7	$scope.numCols = 0;
8	8	$scope.height = 0; // height of a card
9		- $scope.section = $rootScope.SectionResource.get({sectionId: sectionId});
	9	+ $scope.section = $rootScope.SectionResource.get({sectionId: sectionId});
10	10	$scope.deck = new Deck(sectionId, {
11	11	cardHideCallback: function(card) {
12	12	$scope.hideCardFromGrid(card);
13	13
...	...	@@ -38,13 +38,14 @@
38	38	'font-size': 100 * width / 250 + '%',
39	39	height: (width * 3 / 5) + 'px'
40	40	});
	41	+ /*
41	42	$('.cardColumn .card.flashy i.small').css({
42	43	'font-size': 200 * width / 250 + '%'
43	44	});
44	45	$('.cardColumn .card.flashy i.medium').css({
45	46	'font-size': 400 * width / 250 + '%'
46		- });
47		- $scope.height = width * 3 / 5;
	47	+ });*/
	48	+ $scope.height = width * 3 / 5;
48	49	};
49	50
50	51	$scope.refreshLayout = function() {

...	...	@@ -9,8 +9,6 @@
9	9	$scope.deckPullCallback = $scope.addCardToGrid;
10	10	$scope.deckUnpullCallback = $scope.hideCardFromGrid;
11	11
12		-
13		-
14	12
15	13
16	14	$scope.refreshEditCardInput = function () {
...	...	@@ -99,9 +97,6 @@
99	97
100	98	}
101	99
102		-
103		-
104		-
105	100	}
106	101	);

...	...	@@ -22,7 +22,7 @@
22	22	// JSON OF FAQ ENTRIES
23	23	$scope.entries = [
24	24	{
25		- icon: 'mdi-editor-insert-emoticon small',
	25	+ // icon: 'mdi-editor-insert-emoticon small',
26	26	question: 'What is Flashy?',
27	27	answer: '<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.' +
28	28	'</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live' +
29	29
30	30
...	...	@@ -34,14 +34,18 @@
34	34	" and we'll notify you when you have a few cards which need to be reviewed.</p>"
35	35	},
36	36	{
37		- icon: 'mdi-file-cloud-queue small',
	37	+ // icon: 'mdi-file-cloud-queue small',
38	38	question: 'Does Flashy work outside of UCSD?',
39	39	answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!"
40	40	},
41	41	{
42		- icon: 'mdi-hardware-security small',
	42	+ // icon: 'mdi-hardware-security small',
43	43	question: 'How do registration and verification work?',
44	44	answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted."
	45	+ },
	46	+ {
	47	+ question: "My question isn't answered above",
	48	+ answer: ' <a href="mailto:or.so.help.me@flashy.cards">Send us an email!</a>'
45	49	}];
46	50
47	51	// Functions

...	...	@@ -7,7 +7,7 @@
7	7
8	8	if (UserService.isLoggedIn()) {
9	9	console.log('logged in already');
10		- $state.go('addclass');
	10	+ UserService.redirectToDefaultState($state);
11	11	}
12	12	$scope.uniqueError = false;
13	13	$scope.loginError = false;

1	1	angular.module('flashy.StudyController', ['ui.router']).
2	2
3		-controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'UserService',
4		- function($scope, $stateParams, $state, $http, UserService) {
5		- console.log('Flashy study controller content in this file. also hell0');
	3	+ controller('StudyController', function($scope, $stateParams, $state, $http, UserService, Flashcard) {
6	4
7		- $(document).ready(function() {
8		- $('.datepicker').pickadate({
9		- selectMonths: true, // Creates a dropdown to control month
10		- selectYears: 15 // Creates a dropdown of 15 years to control year
11		- });
	5	+ $('.datepicker').pickadate({
	6	+ selectMonths: true, // Creates a dropdown to control month
	7	+ selectYears: 15 // Creates a dropdown of 15 years to control year
	8	+ });
12	9
13		- $('select').material_select();
	10	+ $('select').material_select();
14	11
15		- // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
16		- $('.modal-trigger').leanModal({
	12	+ // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
	13	+ $('.modal-trigger').leanModal({
17	14	dismissible: true, // Modal can be dismissed by clicking outside of the modal
18	15	opacity: .5, // Opacity of modal background
19	16	in_duration: 300, // Transition in duration
20	17	out_duration: 200, // Transition out duration
21		- ready: function() { alert('Ready'); }, // Callback for Modal open
22		- complete: function() { alert('Closed'); } // Callback for Modal close
23		- }
24		- );
	18	+ ready: function() {
	19	+ alert('Ready');
	20	+ }, // Callback for Modal open
	21	+ complete: function() {
	22	+ alert('Closed');
	23	+ } // Callback for Modal close
	24	+ }
	25	+ );
25	26
26		- // Open by default
27		- $('#content-x').slideDown(250).addClass('open');
	27	+ // Open by default
	28	+ $('#content-x').slideDown(250).addClass('open');
	29	+ $('#content-dateselection').slideDown(250).addClass('open');
28	30
29		- // JQuery range slider initialization
30		- /*
31		- $(function() {
32		- $( "#slider-range" ).slider({
33		- range: true,
34		- min: 0,
35		- max: 500,
36		- values: [ 75, 300 ],
37		- slide: function( event, ui ) {
38		- $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
39		- }
40		- });
41		- $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
42		- " - $" + $( "#slider-range" ).slider( "values", 1 ) );
43		- });
44		- */
	31	+ // JQuery range slider initialization
	32	+ /*
	33	+ $(function() {
	34	+ $( "#slider-range" ).slider({
	35	+ range: true,
	36	+ min: 0,
	37	+ max: 500,
	38	+ values: [ 75, 300 ],
	39	+ slide: function( event, ui ) {
	40	+ $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
	41	+ }
	42	+ });
	43	+ $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
	44	+ " - $" + $( "#slider-range" ).slider( "values", 1 ) );
	45	+ });
	46	+ */
45	47
46		- $('#start-date').val('2015-03-15');
47		- $('#end-date').val('2015-06-12');
48		- });
	48	+ $('#start-date').val('2015-03-15');
	49	+ $('#end-date').val('2015-06-12');
49	50
50	51	sectionId = $stateParams.sectionId;
51	52	$scope.UserService = UserService;
...	...	@@ -60,7 +61,8 @@
60	61	/* Sets current study class to the one passed in (y) */
61	62	$scope.toggleSectionToStudy = function(id) {
62	63	console.log('toggle sect', id);
63		- $scope.sectionToStudy = id;
	64	+ if ($scope.sectionToStudy == id) $scope.sectionToStudy = null;
	65	+ else $scope.sectionToStudy = id;
64	66	};
65	67
66	68	/* Opens or closes content collapsible */
67	69
68	70
69	71
70	72
71	73
72	74
73	75
74	76
...	...	@@ -90,70 +92,65 @@
90	92
91	93	/* Fetches the quiz to display to user
92	94	* // TODO Hella work to be done, especially on dates regards!!!
93		- // FIXME e.g. date checks, eTC ETC the date range is supposed to be
94		- * 3/31 to 6/12/2015
	95	+ // FIXME e.g. date checks, eTC ETC the date range is supposed to be
	96	+ * 3/31 to 6/12/2015
95	97	*/
96	98	$scope.fetchQuiz = function() {
97		- console.log('fetching quiz...');
98		- // Interpret chosen section.
99		- var section = [];
100		- if ($scope.sectionToStudy != null) {
101		- section = [$scope.sectionToStudy];
102		- }
	99	+ console.log('fetching quiz...');
103	100
104		- // Interpret chosen dates.
105		- //console.log('startdate:', new Date($('#start-date').val()+'T00:00:00Z'));
106		- //console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');
	101	+ // Interpret chosen dates.
	102	+ //console.log('startdate:', new Date($('#start-date').val()+'T00:00:00Z'));
	103	+ //console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');
107	104
108		- //TODO: datetime range check YO!!!
	105	+ //TODO: datetime range check YO!!!
109	106
110		- var start = new Date($('#start-date').val());
111		- var end = new Date($('#end-date').val());
112		- var studyRequest = null;
	107	+ var start = new Date($('#start-date').val());
	108	+ var end = new Date($('#end-date').val());
113	109
114		- console.log($('#start-date').val());
115		- // Time to get quiz...
116		- /*
117		- if ($('#start-date').val() == null \|\| $('#end-date').val() == null) {
118		- studyRequest = {
119		- 'sections': section
120		- };
121		- } else {
122		- studyRequest = {
123		- 'sections': section,
124		- 'material_date_begin': start,
125		- 'material_date_end': end
126		- };
127		- }
128		- */
129		- studyRequest = {
130		- 'sections': section
131		- };
	110	+ console.log($('#start-date').val());
	111	+ // Time to get quiz...
	112	+ /*
	113	+ if ($('#start-date').val() == null \|\| $('#end-date').val() == null) {
	114	+ studyRequest = {
	115	+ 'sections': section
	116	+ };
	117	+ } else {
	118	+ studyRequest = {
	119	+ 'sections': section,
	120	+ 'material_date_begin': start,
	121	+ 'material_date_end': end
	122	+ };
	123	+ }
	124	+ */
132	125
133		- $http.post('/api/study/', studyRequest).
134		- success(function(data) {
135		- console.log('Fetched card:', data);
136		- $scope.quiz = data;
137		- console.log('fetch mask length:', data.mask.length == 0);
	126	+ studyRequest = {};
	127	+ if ($scope.sectionToStudy) studyRequest.sections = [$scope.sectionToStudy];
138	128
139		- // If the card has no blanks
140		- if (data.mask.length == 0) {
141		- $scope.text0 = data.text;
142		- $scope.text1 = '';
143		- $scope.textblank = '';
144		- $scope.hasBlanks = false;
145		- } else { // Blank exists! :-)
146		- $scope.text0 = data.text.slice(0, data.mask[0]);
147		- $scope.text1 = data.text.slice(data.mask[1]);
148		- $scope.textblank = data.text.slice(data.mask[0], data.mask[1]);
149		- $scope.hasBlanks = true;
150		- }
	129	+ $http.post('/api/study/', studyRequest).
	130	+ success(function(data) {
	131	+ data = new Flashcard(data);
	132	+ console.log('Fetched card:', data);
	133	+ $scope.quiz = data;
151	134
152		- $scope.cardCount += 1;
153		- $scope.quizModalFetch();
154		- }).error(function(err) {
155		- console.log('Fetch Error');
156		- });
	135	+ // If the card has no blanks
	136	+ if (data.mask.length == 0) {
	137	+ $scope.text0 = data.text;
	138	+ $scope.text1 = '';
	139	+ $scope.textblank = '';
	140	+ $scope.hasBlanks = false;
	141	+ } else { // Blank exists! :-)
	142	+ $scope.text0 = data.text.slice(0, data.mask[0]);
	143	+ $scope.text1 = data.text.slice(data.mask[1]);
	144	+ $scope.textblank = data.text.slice(data.mask[0], data.mask[1]);
	145	+ $scope.hasBlanks = true;
	146	+ }
	147	+
	148	+ $scope.cardCount += 1;
	149	+ $scope.quizModalFetch();
	150	+
	151	+ }).error(function(err) {
	152	+ console.log('Fetch Error');
	153	+ });
157	154	};
158	155
159	156	/* Transitions from the user input to the results modal */
160	157
161	158
162	159
...	...	@@ -161,40 +158,40 @@
161	158	console.log('my answer', ans);
162	159	//Answer sending
163	160	if (ans != '') {
164		- var quizAns = {
165		- 'pk': $scope.quiz.pk,
166		- 'response': ans
167		- };
	161	+ var quizAns = {
	162	+ 'pk': $scope.quiz.pk,
	163	+ 'response': ans
	164	+ };
168	165
169		- $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
170		- success(function(data) {
171		- $scope.quizModalClose();
172		- $scope.resultModalFetch();
173		- $scope.inResultsModal = true;
174		- }).error(function(err) {
175		- console.log('Fetch Error');
176		- });
	166	+ $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
	167	+ success(function(data) {
	168	+ $scope.quizModalClose();
	169	+ $scope.resultModalFetch();
	170	+ $scope.inResultsModal = true;
	171	+ }).error(function(err) {
	172	+ console.log('Fetch Error');
	173	+ });
177	174	} else {
178	175	console.log('NO ANSWER, NO GO!');
179	176	}
180	177	};
181	178
182	179	$scope.sendCorrectness = function(correctness) {
183		- var quizAns = {
184		- 'pk': $scope.quiz.pk,
185		- 'correct': correctness
186		- };
	180	+ var quizAns = {
	181	+ 'pk': $scope.quiz.pk,
	182	+ 'correct': correctness
	183	+ };
187	184
188		- $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
189		- success(function(data) {
190		- console.log('Fetched card:', data);
191		- $scope.resultModalClose();
192		- $scope.fetchQuiz();
193		- $scope.answer = ''; // reset answer
194		- }).error(function(err) {
195		- console.log('Fetch Error');
196		- });
197		- $scope.inResultsModal = false;
	185	+ $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
	186	+ success(function(data) {
	187	+ console.log('Fetched card:', data);
	188	+ $scope.resultModalClose();
	189	+ $scope.fetchQuiz();
	190	+ $scope.answer = ''; // reset answer
	191	+ }).error(function(err) {
	192	+ console.log('Fetch Error');
	193	+ });
	194	+ $scope.inResultsModal = false;
198	195	};
199	196
200	197	$(document).keydown(function(e) {
201	198
...	...	@@ -209,16 +206,16 @@
209	206	});
210	207
211	208
212		- /* OLD STUFF :in case you still neeed it */
	209	+ /* OLD STUFF :in case you still neeed it */
213	210	// Flashcard content
214	211	$scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk ';
215	212	//single card
216	213	$scope.samples =
217		- {
218		- 'name': 'lol',
219		- 'text': 'sample text here 111111 woo hoo I think it works',
220		- 'mask': [[0, 6], [16, 23]]
221		- };
	214	+ {
	215	+ 'name': 'lol',
	216	+ 'text': 'sample text here 111111 woo hoo I think it works',
	217	+ 'mask': [[0, 6], [16, 23]]
	218	+ };
222	219
223	220	// get text to display as array
224	221	$scope.displayText = [];
225	222
226	223
...	...	@@ -226,15 +223,15 @@
226	223	$scope.blankText = [];
227	224	var start = 0; // where to start next string break
228	225	for (var i = 0; i < $scope.samples.mask.length; i++) {
229		- $scope.displayText.push($scope.samples.text.substring(start, $scope.samples.mask[i][0]));
230		- $scope.blankText.push($scope.samples.text.substring($scope.samples.mask[i][0], $scope.samples.mask[i][1]));
231		- start = $scope.samples.mask[i][1];
	226	+ $scope.displayText.push($scope.samples.text.substring(start, $scope.samples.mask[i][0]));
	227	+ $scope.blankText.push($scope.samples.text.substring($scope.samples.mask[i][0], $scope.samples.mask[i][1]));
	228	+ start = $scope.samples.mask[i][1];
232	229	}
233	230	if (start != $scope.samples.mask.length - 1)
234		- $scope.displayText.push($scope.samples.text.substring(start));
	231	+ $scope.displayText.push($scope.samples.text.substring(start));
235	232
236	233	// user entered responses as array
237	234	$scope.blank = [];
238	235	}
239		-]);
	236	+);

...	...	@@ -56,14 +56,14 @@
56	56	}
57	57
58	58	.card.flashy {
59		- z-index: 0;
	59	+ z-index: 0;
60	60	border: 0px solid rgba(0, 184, 76, 0.4);
61	61	background-color: #fff;
62	62	font-family: 'Titillium Web', sans-serif;
63	63	float: left;
64	64	text-align: center;
65	65	margin: 6px;
66		- position: relative;
	66	+ position: relative;
67	67	}
68	68
69	69	.card-overlay {
...	...	@@ -84,6 +84,7 @@
84	84	.card-overlay i {
85	85	color: #FFF;
86	86	left: 50%;
	87	+ position: absolute;
87	88	top: 50%;
88	89	transform: translate(-50%, -50%);
89	90	transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
90	91
91	92
92	93
93	94
94	95
...	...	@@ -350,30 +351,30 @@
350	351	-moz-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
351	352	-o-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
352	353	transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
353		-
	354	+
354	355	position: relative;
355	356	}
356	357
357	358	.card.flashy.card-moveUp {
358		- -webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
	359	+ -webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
359	360	-moz-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
360	361	-o-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
361	362	transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
362		- //margin-top: 6px;
	363	+/ / margin-top : 6 px;
363	364	position: relative;
364	365	}
365	366
366	367	.card.flashy.card-moveDown {
367		- z-index: 100;
368		- -webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
	368	+ z-index: 100;
	369	+ -webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
369	370	-moz-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
370	371	-o-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
371	372	transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
372		- //margin-top: 6px;
	373	+/ / margin-top : 6 px;
373	374	position: relative;
374	375	}
375	376
376		-/*
	377	+
377	378	.repeated-card.ng-enter > flashcard > .card {
378	379	z-index: 1;
379	380	top: -236px;
...	...	@@ -398,20 +399,6 @@
398	399	margin-bottom: -230px;
399	400	}
400	401
401		-.repeated-card.ng-move > flashcard > .card {
402		- background-color:blue;
403		- top: -250px;
404		-}
405		-
406		-.repeated-card.ng-move-active > flashcard > .card {
407		- top: 0
408		-}
409		-
410		-.repeated-card.ng-move > flashcard > .card + div {
411		- background-color:red;
412		- top: -250px;
413		-}
414		-
415	402	/* Animation CSS END */
416	403
417	404	.container, .push {
...	...	@@ -482,6 +469,7 @@
482	469	.st-accordion--header.no-press {
483	470	cursor: default;
484	471	}
	472	+
485	473	.st-accordion--header.no-press:hover {
486	474	background-color: #fff;
487	475	}
488	476
489	477
...	...	@@ -503,18 +491,24 @@
503	491
504	492	input.answer {
505	493	font-size: 13pt;
506		- float: left;
507	494	height: inherit;
508	495	margin: 0 6px;
509	496	position: relative;
510	497	top: -2px;
511		- width: 120px;
	498	+ width: 240px;
512	499	}
513	500
514	501	.quizup h4 {
515	502	margin: 0;
516	503	}
517	504
	505	+.quizup.modal {
	506	+ max-height: 86%;
	507	+}
	508	+
	509	+.modal.modal-fixed-footer {
	510	+}
	511	+
518	512	.modal .modal-footer .btn {
519	513	margin: 6px 5px;
520	514	}
...	...	@@ -525,7 +519,7 @@
525	519
526	520	.fetch {
527	521	left: 50%;
528		- transform: translate(-50%,0);
	522	+ transform: translate(-50%, 0);
529	523	}
530	524
531	525	.card-facade {
532	526
...	...	@@ -534,10 +528,16 @@
534	528	float: left;
535	529	font-family: 'Titillium Web', sans-serif;
536	530	font-size: 120%;
537		- height: 180px;
	531	+ height: 18vw;
	532	+ max-height: 240px;
	533	+ min-height: 180px;
	534	+ left: 50%;
538	535	margin-bottom: 0;
539	536	text-align: center;
540		- width: 300px;
	537	+ transform: translate(-50%, 0%);
	538	+ max-width: 400px;
	539	+ min-width: 300px;
	540	+ width: 30vw;
541	541	word-wrap: break-word;
542	542	}
543	543
...	...	@@ -555,8 +555,8 @@
555	555
556	556	.quizup--button-box {
557	557	float: right;
558		- height: 100%;
559		- width: 245px;
	558	+ height: 50px;
	559	+ width: 251px;
560	560	}
561	561
562	562	.exiter {
...	...	@@ -572,5 +572,52 @@
572	572
573	573	.faq-answers {
574	574	margin: 1%;
	575	+}
	576	+
	577	+.faq-questions {
	578	+ display: inline-block;
	579	+ font-size: 15pt;
	580	+ margin-left: 0.5%;
	581	+ padding-bottom: 0.5%;
	582	+}
	583	+
	584	+.study-panel {
	585	+ margin-left: 1%;
	586	+}
	587	+
	588	+.weight {
	589	+ letter-spacing: 1px;
	590	+ font-weight: 200;
	591	+ line-height: 58px;
	592	+ padding-top: 2%;
	593	+ padding-bottom: 7%;
	594	+ color: rgb(55, 55, 55);
	595	+}
	596	+
	597	+.on-gray {
	598	+ font-size: 80px;
	599	+}
	600	+
	601	+.pad-below {
	602	+ padding-bottom: 30%;
	603	+.container--x {
	604	+ width: 100%;
	605	+}
	606	+
	607	+@media screen and (min-width: 993px) {
	608	+ .container--x {
	609	+ width: 70%;
	610	+ }
	611	+}
	612	+
	613	+@media screen and (max-width: 993px) {
	614	+ .modal.modal-fixed-footer {
	615	+ height: 95%;
	616	+ max-height: 87%;
	617	+ width: 95%;
	618	+ }
	619	+ #quizup--result .modal-footer {
	620	+ height: 75px;
	621	+ }
575	622	}

1	1	<div class="" style="margin-top:32px;">
2	2	<div class="row" style="max-width:800px; width:90%; min-width:512px; margin: 0 auto">
3	3	<div class="offset-m2 col m8">
4		- <h2 class="header">Add a class</h2>
	4	+ <h2 class="header weight on-gray pad-below">ADD A CLASS</h2>
5	5	<md-content layout-padding="" layout="column" style="overflow:hidden">
6	6
7	7	<form ng-submit="$event.preventDefault()">
8	8
...	...	@@ -43,12 +43,12 @@
43	43	</form>
44	44	</md-content>
45	45	<div ng-show="(selectedItem && !selectedItem.can_enroll)">
46		- <h4>Restricted Enrollment</h4>
	46	+ <h4 class="weight">Restricted Enrollment</h4>
47	47	Enrollment in this section has been restricted at the request of the instructor. Contact your instructor for
48	48	permission to add this section.
49	49	</div>
50	50	<div ng-show="(selectedItem && selectedItem.is_enrolled)">
51		- <h4>Already Enrolled</h4>
	51	+ <h4 class="weight">Already Enrolled</h4>
52	52	You've already enrolled in this section! <a ui-sref="feed({sectionId:selectedItem.id})">Go to Feed</a>.
53	53	</div>
54	54	</div>

...	...	@@ -59,6 +59,47 @@
59	59	</div>
60	60
61	61	<div class="list" style="padding: 0px 25px">
	62	+ <div class="card-panel s12" ng-repeat="week_cards in cards \| filter:searchText \| filter:filterByDate \| groupBy: 'material_week_num' \| toArray: true \| orderBy: 'material_week_num'">
	63	+ <table class="bordered hoverable">
	64	+ <thead>
	65	+ <tr>
	66	+ <th data-field="week">Week {{ week_cards.$key }}</th>
	67	+ <th data-field="week" style="width: 50px; min-width: 50px">Day</th>
	68	+ <th data-field="week" style="width: 120px; min-width: 120px">Actions</th>
	69	+ </tr>
	70	+ </thead>
	71	+
	72	+
	73	+ <tbody>
	74	+ <tr ng-repeat="card in week_cards" ng-show="show \|\| !card.is_hidden">
	75	+ <td>
	76	+ <a href="" ng-click="card.unpull()"><i ng-show="card.isInDeck()" class="mdi-action-done small green-text"></i></a>
	77	+ <span ng-bind-html="card \| displayCard"></span></td>
	78	+ <td>{{dayofweek(card)}}</td>
	79	+
	80	+ <td>
	81	+ <a href="" class="tooltipped" ng-click="card.pull()" ng-show="!card.isInDeck()" data-position="bottom"
	82	+ data-delay="50" data-tooltip="Add to Deck">
	83	+ <i class="mdi-content-add-circle-outline small"></i></a>
	84	+ <a href="" class="tooltipped" ng-click="card.unpull()" ng-show="card.isInDeck()" data-position="bottom"
	85	+ data-delay="50" data-tooltip="Add to Deck">
	86	+ <i class="mdi-content-remove-circle-outline small"></i></a>
	87	+ <a href="" class="tooltipped" ng-click="card.hide()" ng-show="!card.is_hidden" data-position="bottom"
	88	+ data-delay="50" data-tooltip="Hide">
	89	+ <i class="mdi-action-visibility-off small"></i></a>
	90	+ <a href="" class="tooltipped" ng-click="card.unhide()" ng-show="card.is_hidden" data-position="bottom"
	91	+ data-delay="50" data-tooltip="Unhide">
	92	+ <i class="mdi-action-visibility small"></i></a>
	93	+ <a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag">
	94	+ <i class="mdi-content-flag small"></i></a>
	95	+ </td>
	96	+ </tr>
	97	+ </tbody>
	98	+ </table>
	99	+ </div>
	100	+</div>
	101	+
	102	+<!--<div class="list" style="padding: 0px 25px">
62	103	<ul class="collection"
63	104	ng-repeat="week_cards in cards \| filter:searchText \| filter:filterByDate \| groupBy: 'material_week_num' \| toArray: true \| orderBy: 'material_week_num'">
64	105	<li class="collection-header"><h3>Week {{ week_cards.$key }}</h3></li>
...	...	@@ -86,7 +127,7 @@
86	127	</p>
87	128	</li>
88	129	</ul>
89		-</div>
	130	+</div>-->
90	131
91	132
92	133	<div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;">

...	...	@@ -63,10 +63,10 @@
63	63
64	64
65	65	<div class="row">
66		- <h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it
67		- here!</h2>
	66	+ <h2 class="weight" ng-cloak ng-show="cardCols && cards.length == 0">Your deck is empty.</h2>
	67	+ <h2 class="weight" ng-cloak ng-show="cardCols && cards.length == 0">Add a card from the feed to see it here.</h2>
68	68
69		- <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
	69	+ <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols">
70	70	<div class="indeterminate"></div>
71	71	</div>
72	72

...	...	@@ -48,7 +48,7 @@
48	48
49	49
50	50	<div class="row">
51		- <h2 ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2>
	51	+ <h2 class="weight" ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2>
52	52
53	53	<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols.length \|\| !showGrid">
54	54	<div class="indeterminate"></div>

...	...	@@ -21,7 +21,7 @@
21	21	</div>
22	22
23	23	<div class="right-box" ng-click="flashcard.hide()">
24		- <div class="center-me"><i class="mdi-action-delete small"></i></div>
	24	+ <div class="center-me"><i class="mdi-action-visibility-off small"></i></div>
25	25	</div>
26	26
27	27	</div>
...	...	@@ -33,7 +33,7 @@
33	33
34	34	<div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:-9px;right:0px">
35	35	<div class="center-me"><i
36		- class="mdi-action-done small"></i></div>
	36	+ class="mdi-action-done small green-text"></i></div>
37	37	</div>
38	38	<div ng-show="window.debug_flashcards" style="position:absolute; bottom:0px; right:5px;">
39	39	<span class="center-me">score:{{flashcard.score}}</span>

1	1	<div class="container">
2	2	<div class="row">
3		- <h2>FAQ</h2>
	3	+ <h2 class="weight on-gray">FAQ</h2>
4	4	<button class="btn waves-effect waves-light" ng-click="expandAllContent()">
5	5	Expand all
6	6	</button>
7	7
...	...	@@ -12,16 +12,13 @@
12	12	<ul class="collection st-accordion">
13	13	<li class="st-accordion--item" ng-repeat="entry in entries">
14	14	<div class="st-accordion--header" ng-click="toggleContent($event, $index)">
15		- <i class="{{entry.icon}}"></i>
16		- {{entry.question}}
	15	+ <!-- <i class="{{entry.icon}}"></i> -->
	16	+ <span class="faq-questions">{{entry.question}}</span>
17	17	</div>
18	18	<div id="content-{{$index}}" class="st-accordion--contentopen faq-answers"
19	19	ng-bind-html="entry.answer"></div>
20	20	</li>
21	21	</ul>
22	22	</div>
23		- <h2>More questions?</h2>
24		-
25		- <p><a href="mailto:or.so.help.me@flashy.cards">Contact us by email! </a></p>
26	23	</div>

1	1	<div class="container">
2	2	<div class="row">
3	3	<div class="card">
4		- <h3 class="text-success heading">You have successfully logged out.</h3>
	4	+ <h3 class="text-success heading weight">You have successfully logged out.</h3>
5	5	</div>
6	6	</div>
7	7	</div>

...	...	@@ -4,7 +4,7 @@
4	4	<form class="col s12" name="passreset_form">
5	5
6	6	<div class="card-content">
7		- <h2>Reset Password</h2>
	7	+ <h2 class="weight">Reset Password</h2>
8	8	</div>
9	9
10	10	<div class="divider"></div>

...	...	@@ -3,7 +3,7 @@
3	3	<div class="card">
4	4	<form class="col s12" name="resetpass_form">
5	5	<div class="card-content">
6		- <h2 class="">Reset Password</h2>
	6	+ <h2 class="weight">Reset Password</h2>
7	7	</div>
8	8	<div class="divider"></div>
9	9	<div class="card-content">

1	1	<div class="row" ng-show="showNotif">
2	2	<div class="col s12 m8 offset-m2 l6 offset-l3">
3	3	<div class="card-panel">
4		- <h2>Notification Settings</h2>
	4	+ <h2 class="weight">Notification Settings</h2>
5	5	<!--
6	6	class="js-checkbox" name="notifbox" value="toggle notifs"> -->
7	7	<form action="#">
...	...	@@ -16,7 +16,7 @@
16	16	<div class="col s12 m8 offset-m2 l6 offset-l3">
17	17	<div class="card-panel">
18	18
19		- <h2>Change Password</h2>
	19	+ <h2 class="weight">Change Password</h2>
20	20
21	21	<form name="ChangePasswordForm">
22	22
23	23
...	...	@@ -65,10 +65,10 @@
65	65	<div class="col s12 m8 offset-m2 l6 offset-l3">
66	66	<div class="card-panel">
67	67
68		- <h2>Enrolled Classes</h2>
	68	+ <h2 class="weight">Enrolled Classes</h2>
69	69
70	70	<div class="row" style="padding: 0px 25px">
71		- <table class="hoverable responsive-table">
	71	+ <table class="hoverable">
72	72	<thead>
73	73	<tr>
74	74	<th data-field="id">Class</th>

1		-<div class="container">
	1	+<div class="container container--x">
2	2	<ul class="collection st-accordion">
3	3	<li class="st-accordion--item">
4	4	<div class="st-accordion--header no-press">
5	5	<i class="mdi-image-filter-drama"></i>
6		- Choose your study parameters!
	6	+ Choose a class to study (optional)
7	7	</div>
8	8	<div id="content-x" class="st-accordion--content">
9	9	<!-- lots of difficulty with materializecss select and angularjs. If we want to
10	10
...	...	@@ -18,16 +18,10 @@
18	18	<div class="row">
19	19	<div class="card-panel">
20	20	<div class="row">
21		- <!-- Default: all classes button -->
22		- <a class="waves-effect waves-light btn toggley"
23		- ng-init="sectionToStudy = null"
24		- ng-click="toggleSectionToStudy(null)"
25		- ng-class="{'pink white-text': sectionToStudy == null}">
26		- All classes</a>
27	21
28	22	<!-- Buttons of rest of classes -->
29	23	<div ng-repeat="section in UserService.getUserData().sections">
30		- <a class="waves-effect waves-light btn toggley"
	24	+ <a class="waves-effect waves-light btn-flat toggley"
31	25	ng-click="toggleSectionToStudy(section.id)"
32	26	ng-class="{'pink white-text': sectionToStudy == section.id}">
33	27	{{section.short_name}}
34	28
...	...	@@ -36,11 +30,17 @@
36	30	</div>
37	31	</div>
38	32	</div>
39		- <!-- end of buttons for classes -->
	33	+ </div>
	34	+ </li>
	35	+ <li class="st-accordion--item">
	36	+ <div class="st-accordion--header no-press">
	37	+ <i class="mdi-image-filter-drama"></i>
	38	+ Choose a date range to study (optional)
	39	+ </div>
	40	+ <div id="content-dateselection" class="st-accordion--content open">
40	41	<div class="row">
41	42	<div class="card-panel">
42	43	<div class="row">
43		- <h3>Choose Date</h3>
44	44	<input id="start-date" type="date" class="" placeholder="Start Date"/>
45	45	<input id="end-date" type="date" class="" placeholder="End Date"/>
46	46
47	47
...	...	@@ -57,9 +57,7 @@
57	57	</div>
58	58	</div>
59	59	</div>
60		-
61	60	</div>
62		- <!-- end of #content-x -->
63	61	</li>
64	62	</ul>
65	63
66	64
67	65
...	...	@@ -81,19 +79,20 @@
81	79
82	80	<form>
83	81	<div class="modal-content">
84		- <h4>Card #{{cardCount}}</h4>
	82	+ <h4 class="weight">Card #{{cardCount}}</h4>
85	83
86	84	<p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p>
87	85
88	86	<div class="card card-facade valign-wrapper">
89	87	<div class="card-content valign center-align">
90	88	<div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div>
91		-
92		- <div class="quizup--text-frag">{{text0}}</div>
93		- <input id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
94		- ng-model="answer"></input>
95		- <div class="quizup--text-frag">{{text1}}</div>
96	89
	90	+ <div class="quizup--text-frag" ng-if="hasBlanks">{{text0}}</div>
	91	+ <input ng-show="has-blanks" id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
	92	+ ng-model="answer"></input>
	93	+
	94	+ <div ng-if="hasBlanks" class="quizup--text-frag">{{text1}}</div>
	95	+
97	96	</div>
98	97	</div>
99	98	</div>
...	...	@@ -125,7 +124,8 @@
125	124	<form>
126	125	<div class="modal-content">
127	126	<div class="modal-cardbox">
128		- <h4>The answer</h4>
	127	+ <h4 class="weight"> The answer</h4>
	128	+
129	129	<div class="card card-facade valign-wrapper">
130	130	<div class="card-content valign center-align">
131	131	{{text0}} <u><b>{{textblank}}</b></u>{{text1}}
...	...	@@ -134,7 +134,8 @@
134	134	</div>
135	135
136	136	<div class="modal-cardbox">
137		- <h4>Your response</h4>
	137	+ <h4 class="weight">Your response</h4>
	138	+
138	139	<div class="card card-facade valign-wrapper">
139	140	<div class="card-content valign center-align">
140	141	{{text0}} <u><b>{{answer}}</b></u>{{text1}}