110swag / flashy-frontend

Commit 34a34281947f676a02854e14670c20869af80617

Authored by Melody 2015-05-16 21:32:09 -0700

Nicer new flashcard modal, more purple

Showing 3 changed files with 66 additions and 57 deletions Side-by-side Diff

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

...	...	@@ -64,4 +64,8 @@
64	64	.angucomplete-selected-row {
65	65	background-color:#aaaaff;
66	66	}
	67	+
	68	+.modal.bottom-sheet {
	69	+ position: relative;
	70	+}

...	...	@@ -32,8 +32,21 @@
32	32	$scope.text = '';
33	33	};
34	34
35		- $scope.flashcard = 'hi i am a flashcard';
	35	+ $scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t know how long I am right now. Is it good enough now?????????? Howz about now???';
36	36	$scope.text = '';
	37	+
	38	+ $(document).ready(function(){
	39	+ // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
	40	+ $('.modal-trigger').leanModal({
	41	+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
	42	+ opacity: 0, // Opacity of modal background
	43	+ in_duration: 300, // Transition in duration
	44	+ out_duration: 200, // Transition out duration
	45	+ /*ready: function() { alert('Ready'); }, // Callback for Modal open
	46	+ complete: function() { alert('Closed'); } // Callback for Modal close*/
	47	+ }
	48	+ );
	49	+ });
37	50
38	51	}]);

1		- <div class="col s9">
2		- <div class="row">
3		- <a class="waves-effect waves-light btn purple" ng-click="viewDeck()" style="top: 15px">View Deck</a>
4		- </div>
5		-
6		- <!--random dummy cards-->
7		- <div class="row">
8		- <div class="col s1 m2 l4">
9		- <div class="card-panel" ng-click="pullCard()">
10		- <span>{{ flashcard }}</span>
	1	+<body>
	2	+ <div class="col s12">
	3	+ <div class="row">
	4	+ <a class="waves-effect waves-light btn purple" ng-click="viewDeck()" style="top: 15px">View Deck</a>
11	5	</div>
12		- </div>
13	6
14		- <div class="col s1 m2 l4">
15		- <div class="card" ng-click="pullCard()">
16		- <div class="card-content">
17		- <span class="card-title activator grey-text text-darken-4">{{ flashcard }}<i class="mdi-navigation-more-vert right"></i></span>
	7	+ <!--random dummy cards-->
	8	+ <div class="row">
	9	+ <div class="col s6">
	10	+ <div class="card-panel deep-purple" ng-click="pullCard()">
	11	+ <span class="white-text">{{ flashcard }}</span>
	12	+ </div>
18	13	</div>
19		- <div class="card-reveal">
20		- <span class="card-title grey-text text-darken-4">{{ flashcard }}<i class="mdi-navigation-close right"></i></span>
21		- <p>Herro der. I see you have found me.</p>
22		- </div>
23		- </div>
24		- </div>
25	14
26		- <div class="col s1 m2 l4">
27		- <div class="card-panel" ng-click="pullCard()">
28		- <span>{{ flashcard }}</span>
29		- </div>
30		- </div>
31		-
32		- <!--New flashcard (still working on placement)-->
33		- <div class="row" ng-show="create">
34		- <form class="col s6 offset-s10" ng-submit="pushCard()">
35		- <div class="row">
36		- <div class="input-field col s12">
37		- <i class="mdi-editor-mode-edit prefix"></i>
38		- <textarea class="materialize-textarea" ng-model="text" name="text"></textarea>
39		- <label id="newCardSign" for="newCard">New Flashcard</label>
40		- <div class="container">
41		- <button class="btn waves-effect waves-light purple" type="submit" name="action">Submit
42		- <i class="mdi-content-send right"></i>
43		- </button>
	15	+ <div class="col s6">
	16	+ <div class="card-panel" ng-click="pullCard()">
	17	+ <span>{{ flashcard }}</span>
44	18	</div>
45	19	</div>
	20	+
	21	+ <!--Lil plus button in corner-->
	22	+ <div class="fixed-action-btn" ng-click="create = !create" style="bottom: 45px; right: 24px;">
	23	+ <a data-target="modal1" class="btn-floating btn-large purple modal-trigger" href="#newCard">
	24	+ <i class="large mdi-content-add"></i>
	25	+ </a>
	26	+ <!--Maybe this will come in handy later? Floating bubbles on mouseover-->
	27	+ <ul>
	28	+ <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
	29	+ <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
	30	+ <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
	31	+ <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
	32	+ </ul>
	33	+ </div>
46	34	</div>
47		- </form>
48		- </div>
49	35
50		- <!--Lil plus button in corner-->
51		- <div class="fixed-action-btn" ng-click="create = !create" style="bottom: 45px; right: 24px;">
52		- <a class="btn-floating btn-large purple">
53		- <i class="large mdi-content-add"></i>
54		- </a>
55		- <!--Maybe this will come in handy later? Floating bubbles on mouseover-->
56		- <ul>
57		- <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
58		- <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
59		- <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
60		- <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
61		- </ul>
62		- </div>
63		-</div>
	36	+ <div id="newCard" class="modal bottom-sheet">
	37	+ <div class="modal-content">
	38	+ <form>
	39	+ <div class="row">
	40	+ <div class="input-field">
	41	+ <i class="mdi-editor-mode-edit prefix"></i>
	42	+ <textarea class="materialize-textarea" ng-model="text" name="text"></textarea>
	43	+ <label id="newCardSign" for="newCard">New Flashcard</label>
	44	+ </div>
	45	+ </div>
	46	+ </form>
	47	+ </div>
	48	+ <div class="modal-footer">
	49	+ <button class="btn waves-effect waves-light purple modal-close" type="submit" ng-click="pushCard()">Submit
	50	+ <i class="mdi-content-send right"></i>
	51	+ </button>
	52	+ </div>
	53	+ </div>
	54	+ </div>
	55	+</body>