110swag / flashy-frontend

Commit 8d9349224f019d5656550ac7995a4ab673c350d1

Authored by Andrew Buss 2015-06-03 05:43:07 -0700

restyle study settings somewhat

Showing 3 changed files with 99 additions and 42 deletions Side-by-side Diff

scripts/FlashcardFactory.js
templates/deck.html
templates/study.html

...	...	@@ -81,8 +81,6 @@
81	81	});
82	82
83	83	};
84		-
85		-
86	84
87	85	Flashcard.prototype.refreshEditCardInput = function () {
88	86

1		-<div class="row">
2		- <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 here!</h2>
	1	+<div id="editModal" class="modal row" style="max-height:none;">
	2	+ <form id="edit-card-form">
	3	+ <div class="modal-content col">
	4	+ <div class="row" style="margin-bottom:0">
	5	+ <div class="card cyan-text text-darken-2"
	6	+ style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
	7	+ <div class="valign-wrapper">
	8	+ <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
	9	+ class="card-content valign center-align"
	10	+ contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
	11	+ </div>
	12	+ </div>
	13	+ </div>
	14	+ </div>
	15	+ </div>
	16	+ <div class="col">
	17	+ <div class="row">
	18	+ </div>
	19	+ <div class="row">
	20	+ <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
	21	+ data-position="left"
	22	+ data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
	23	+ data-tooltip="Enter">
	24	+ Edit
	25	+ <i class="mdi-hardware-keyboard-return right"></i>
	26	+ </button>
	27	+ </div>
	28	+ <div class="row">
	29	+ <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
	30	+ data-tooltip="Ctrl-B">
	31	+ Blank Selected Text
	32	+ </button>
	33	+ </div>
	34	+ <div class="row" ng-show="flashcard.editCardText"
	35	+ ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
	36	+ {{flashcard.editCardText.length}}/160 characters
	37	+ </div>
	38	+ <div class="row" ng-show="flashcard.editCardText.length < 5">
	39	+ Please write a little more!
	40	+ </div>
	41	+ <div class="row" ng-show="flashcard.editCardText.length > 140">
	42	+ Good flashcards have a<br>
	43	+ single atomic fact
	44	+ </div>
	45	+ </div>
	46	+ </form>
	47	+</div>
	48	+
	49	+<div class="row">
	50	+ <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
	51	+ here!</h2>
3	52
4	53	<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
5	54	<div class="indeterminate"></div>

...	...	@@ -15,53 +15,61 @@
15	15
16	16	<!-- Default: all classes button -->
17	17	<!-- Button for classes -->
18		- <div class="card">
19		- <!-- Default: all classes button -->
20		- <a class="waves-effect waves-light btn toggley"
21		- ng-init="sectionToStudy = null"
22		- ng-click="toggleSectionToStudy(null)"
23		- ng-class="{'pink white-text': sectionToStudy == null}">
24		- All classes</a>
	18	+ <div class="row">
	19	+ <div class="card-panel">
	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>
25	27
26		- <!-- Buttons of rest of classes -->
27		- <div ng-repeat="section in UserService.getUserData().sections">
28		- <a class="waves-effect waves-light btn toggley"
29		- ng-click="toggleSectionToStudy(section.id)"
30		- ng-class="{'pink white-text': sectionToStudy == section.id}">
31		- {{section.short_name}}
32		- </a>
	28	+ <!-- Buttons of rest of classes -->
	29	+ <div ng-repeat="section in UserService.getUserData().sections">
	30	+ <a class="waves-effect waves-light btn toggley"
	31	+ ng-click="toggleSectionToStudy(section.id)"
	32	+ ng-class="{'pink white-text': sectionToStudy == section.id}">
	33	+ {{section.short_name}}
	34	+ </a>
	35	+ </div>
	36	+ </div>
33	37	</div>
34		- </div> <!-- end of buttons for classes -->
	38	+ </div>
	39	+ <!-- end of buttons for classes -->
35	40	<div class="row">
36		- <div class="card">
37		- <h3>Choose Date</h3>
38		- <input id="start-date" type="date" class="" placeholder="Start Date"/>
39		- <input id="end-date" type="date" class="" placeholder="End Date"/>
	41	+ <div class="card-panel">
	42	+ <div class="row">
	43	+ <h3>Choose Date</h3>
	44	+ <input id="start-date" type="date" class="" placeholder="Start Date"/>
	45	+ <input id="end-date" type="date" class="" placeholder="End Date"/>
40	46
41	47
42		- <!-- JQUERY RANGE SLIDER -->
43		- <!--
44		- <p>
45		- <label for="amount">Price range:</label>
46		- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
47		- </p>
48		- <div id="slider-range"></div>
49		- -->
	48	+ <!-- JQUERY RANGE SLIDER -->
	49	+ <!--
	50	+ <p>
	51	+ <label for="amount">Price range:</label>
	52	+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	53	+ </p>
	54	+ <div id="slider-range"></div>
	55	+ -->
50	56
	57	+ </div>
51	58	</div>
52	59	</div>
53	60
54		- </div> <!-- end of #content-x -->
	61	+ </div>
	62	+ <!-- end of #content-x -->
55	63	</li>
56	64	</ul>
57	65
58	66	<div class="row">
59		- <div class="card-action">
60		- <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
61		- Fetch!
62		- <i class="mdi-content-send right"></i>
63		- </button>
64		- </div>
	67	+ <div class="card-action">
	68	+ <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
	69	+ Fetch!
	70	+ <i class="mdi-content-send right"></i>
	71	+ </button>
	72	+ </div>
65	73	</div>
66	74	</div> <!-- End of .container-->
67	75
68	76
...	...	@@ -72,12 +80,13 @@
72	80	<form>
73	81	<div class="modal-content">
74	82	<h4>Card #{{cardCount}}</h4>
	83	+
75	84	<p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p>
76	85
77	86	<p>{{text0}}
78		- <input id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
79		- ng-model="answer"></input>
80		- {{text1}}</p>
	87	+ <input id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
	88	+ ng-model="answer"></input>
	89	+ {{text1}}</p>
81	90	</div>
82	91	<div class="modal-footer">
83	92	<!-- Card has blanks button -->
84	93
...	...	@@ -105,12 +114,13 @@
105	114	<form>
106	115	<div class="modal-content">
107	116	<h4>The answer</h4>
	117	+
108	118	<div>
109	119	{{text0}} <u><b>{{textblank}}</b></u> {{text1}}
110	120	</div>
111	121	<hr>
112	122	<h4>Your response</h4>
113		- {{text0}} <u><b>{{answer}}</b></u> {{text1}}
	123	+ {{text0}} <u><b>{{answer}}</b></u> {{text1}}
114	124	</div>
115	125	<div class="modal-footer">
116	126	Is your response correct?