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 Inline Diff

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

.diclaimer {	1	1	.diclaimer {
color:#00AFD8;	2	2	color:#00AFD8;
}	3	3	}
	4	4
.form-section {	5	5	.form-section {
width: 330px;	6	6	width: 330px;
top: 50%;	7	7	top: 50%;
position: relative;	8	8	position: relative;
}	9	9	}
	10	10
.form-inputs {	11	11	.form-inputs {
margin-top: 0px;	12	12	margin-top: 0px;
border: 0px none;	13	13	border: 0px none;
font: 16px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial;	14	14	font: 16px/1.4 "Helvetica Neue","HelveticaNeue",Helvetica,Arial;
padding: 5px 10px 11px 13px;	15	15	padding: 5px 10px 11px 13px;
width: 100%;	16	16	width: 100%;
box-sizing: border-box;	17	17	box-sizing: border-box;
}	18	18	}
	19	19
.form-buttons {	20	20	.form-buttons {
margin-top: 10px;	21	21	margin-top: 10px;
width: 100%;	22	22	width: 100%;
font-size: 16px;	23	23	font-size: 16px;
}	24	24	}
	25	25
.form-buttons .last-button {	26	26	.form-buttons .last-button {
float: right;	27	27	float: right;
}	28	28	}
	29	29
.container {	30	30	.container {
position: relative;	31	31	position: relative;
width: 600px;	32	32	width: 600px;
height: 80px;	33	33	height: 80px;
}	34	34	}
	35	35
.angucomplete-dropdown {	36	36	.angucomplete-dropdown {
border-color: #ececec;	37	37	border-color: #ececec;
border-width: 1px;	38	38	border-width: 1px;
border-style: solid;	39	39	border-style: solid;
border-radius: 2px;	40	40	border-radius: 2px;
/width: 250px;/	41	41	/width: 250px;/
padding: 6px;	42	42	padding: 6px;
cursor: pointer;	43	43	cursor: pointer;
z-index: 9999;	44	44	z-index: 9999;
position: absolute;	45	45	position: absolute;
/*top: 32px;	46	46	/*top: 32px;
left: 0px;	47	47	left: 0px;
*/	48	48	*/
margin-top: -6px;	49	49	margin-top: -6px;
background-color: #ffffff;	50	50	background-color: #ffffff;
}	51	51	}
	52	52
.angucomplete-description {	53	53	.angucomplete-description {
font-size: 14px;	54	54	font-size: 14px;
}	55	55	}
	56	56
.angucomplete-row {	57	57	.angucomplete-row {
padding: 5px;	58	58	padding: 5px;
color: #000000;	59	59	color: #000000;
margin-bottom: 4px;	60	60	margin-bottom: 4px;
clear: both;	61	61	clear: both;

angular.module('flashy.FeedController', ['ui.router']).	1	1	angular.module('flashy.FeedController', ['ui.router']).
	2	2
controller('FeedController', ['$scope', '$state', '$http', function($scope, $state, $http) {	3	3	controller('FeedController', ['$scope', '$state', '$http', function($scope, $state, $http) {
console.log('Hello from feed');	4	4	console.log('Hello from feed');
	5	5
$scope.viewDeck = function() {	6	6	$scope.viewDeck = function() {
$state.go('deck');	7	7	$state.go('deck');
console.log('go to deck');	8	8	console.log('go to deck');
};	9	9	};
	10	10
$scope.pullCard = function() {	11	11	$scope.pullCard = function() {
console.log('card clicked');	12	12	console.log('card clicked');
};	13	13	};
	14	14
$scope.create = false; // show make flashcard	15	15	$scope.create = false; // show make flashcard
	16	16
$scope.pushCard = function() {	17	17	$scope.pushCard = function() {
console.log('make! card content:' + $scope.text);	18	18	console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now());	19	19	var pushed = new Date(Date.now());
console.log(pushed.toString());	20	20	console.log(pushed.toString());
	21	21
// attempt to make card :(	22	22	// attempt to make card :(
$http.post('/api/flashcards/', {'text': $scope.text, 'pushed': pushed, 'mask': []}).	23	23	$http.post('/api/flashcards/', {'text': $scope.text, 'pushed': pushed, 'mask': []}).
success(function(data) {	24	24	success(function(data) {
console.log('No way, really?');	25	25	console.log('No way, really?');
}).	26	26	}).
error(function(error) {	27	27	error(function(error) {
console.log('haha, n00b');	28	28	console.log('haha, n00b');
});	29	29	});
	30	30
$scope.create = false; // hide make flashcard	31	31	$scope.create = false; // hide make flashcard
$scope.text = '';	32	32	$scope.text = '';
};	33	33	};
	34	34
$scope.flashcard = 'hi i am a flashcard';	35	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???';
$scope.text = '';	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

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