110swag / flashy-frontend

Commit bac1b3d8dec13fea64fb99222b60007b917c250e

Authored by Melody 10 years ago

Purple

Showing 3 changed files with 44 additions and 19 deletions Inline Diff

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

.angucomplete-dropdown {	1	1	.angucomplete-dropdown {
border-color: #ececec;	2	2	border-color: #ececec;
border-width: 1px;	3	3	border-width: 1px;
border-style: solid;	4	4	border-style: solid;
border-radius: 2px;	5	5	border-radius: 2px;
/width: 250px;/	6	6	/width: 250px;/
padding: 6px;	7	7	padding: 6px;
cursor: pointer;	8	8	cursor: pointer;
z-index: 9999;	9	9	z-index: 9999;
position: absolute;	10	10	position: absolute;
/*top: 32px;	11	11	/*top: 32px;
left: 0px;	12	12	left: 0px;
*/	13	13	*/
margin-top: -6px;	14	14	margin-top: -6px;
background-color: #ffffff;	15	15	background-color: #ffffff;
}	16	16	}
	17	17
.angucomplete-description {	18	18	.angucomplete-description {
font-size: 14px;	19	19	font-size: 14px;
}	20	20	}
	21	21
.angucomplete-row {	22	22	.angucomplete-row {
padding: 5px;	23	23	padding: 5px;
color: #000000;	24	24	color: #000000;
margin-bottom: 4px;	25	25	margin-bottom: 4px;
clear: both;	26	26	clear: both;
}	27	27	}
	28	28
.angucomplete-selected-row {	29	29	.angucomplete-selected-row {
background-color:#aaaaff;	30	30	background-color:#aaaaff;
}	31	31	}
	32	32
.container {	33	33	.container {
position: relative;	34	34	position: relative;
width: 600px;	35	35	width: 600px;
height: 80px;	36	36	height: 80px;
}	37	37	}
	38	38
.modal.bottom-sheet {	39	39	.modal.bottom-sheet {
width: 40%;	40	40	width: 40%;
margin-left: auto;	41	41	margin-left: auto;
margin-right: auto;	42	42	margin-right: auto;
}	43	43	}
	44	44
<<<<<<< HEAD	45	45	<<<<<<< HEAD
/* label color */	46	46	/* label color */
.input-field label {	47	47	.input-field label {
color: #673ab7;	48	48	color: #673ab7;
}	49	49	}
	50	50
/* label focus color */	51	51	/* label focus color */
.input-field input[type]:focus + label {	52	52	.input-field input[type]:focus + label {
color: #b388ff;	53	53	color: #b388ff;
}	54	54	}
	55	55
/* label underline focus color */	56	56	/* label underline focus color */
.input-field input[type]:focus {	57	57	.input-field input[type]:focus {
border-bottom: 1px solid #b388ff;	58	58	border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff;	59	59	box-shadow: 0 1px 0 0 #b388ff;
}	60	60	}
	61	61
/* valid color */	62	62	/* valid color */
.input-field input[type].valid {	63	63	.input-field input[type].valid {
border-bottom: 1px solid #673ab7;	64	64	border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7;	65	65	box-shadow: 0 1px 0 0 #673ab7;
}	66	66	}
	67	67
/* invalid color */	68	68	/* invalid color */
.input-field input[type].invalid {	69	69	.input-field input[type].invalid {
border-bottom: 1px solid #673ab7;	70	70	border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7;	71	71	box-shadow: 0 1px 0 0 #673ab7;
}	72	72	}
	73	73
/* icon prefix focus color */	74	74	/* icon prefix focus color */
.input-field .prefix.active {	75	75	.input-field .prefix.active {
color: #b388ff;	76	76	color: #b388ff;
}	77	77	}
	78	78
/* label focus color */	79	79	/* label focus color */

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
		6	$scope.cards = [];
		7
		8
		9	$scope.cards[0] = { 'id': 1, 'title': 'title1', 'content': 'abc' };
		10	$scope.cards[1] = { 'id': 2, 'title': 'title2', 'content': 'xyz' };
		11	$scope.cards[2] = { 'id': 2, 'title': 'title3', 'content': 'qwe' };
		12
		13	$http.get("/api/sections/{pk}/flashcards").
		14	success(function(data) {
		15	for (var i = 0; i < data.length; i++) {
		16	cards.push({ 'title': data[i].title, 'content': data[i].content });
		17	}
		18	}).
		19	error(function(err) {
		20	console.log('no');
		21	});
		22
$scope.viewDeck = function() {	6	23	$scope.viewDeck = function() {
$state.go('deck');	7	24	$state.go('deck');
console.log('go to deck');	8	25	console.log('go to deck');
};	9	26	};
	10	27
$scope.pullCard = function() {	11	28	$scope.pullCard = function(card) {
console.log('card clicked');	12	29	var index = $scope.cards.indexOf(card);
		30
		31	console.log($scope.cards[index]);
};	13	32	};
	14	33
$scope.create = false; // show make flashcard	15
	16
$scope.pushCard = function() {	17	34	$scope.pushCard = function() {
console.log('make! card content:' + $scope.text);	18	35	console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now());	19	36	var pushed = new Date(Date.now());
console.log(pushed.toString());	20	37	console.log(pushed.toString());
	21	38
// attempt to make card :(	22	39	// attempt to make card :(
$http.post('/api/flashcards/', {'text': $scope.text, 'pushed': pushed, 'mask': []}).	23	40	$http.post('/api/flashcards/', {'text': $scope.text, 'pushed': pushed, 'mask': []}).
success(function(data) {	24	41	success(function(data) {
console.log('No way, really?');	25	42	console.log('No way, really?');
}).	26	43	}).
error(function(error) {	27	44	error(function(error) {
console.log('haha, n00b');	28	45	console.log('haha, n00b');
});	29	46	});
	30	47
$scope.create = false; // hide make flashcard	31
$scope.text = '';	32	48	$scope.text = '';
};	33	49	};
	34	50
$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???';	35	51	$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	52	$scope.text = '';
	37	53
$(document).ready(function(){	38	54	$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered	39	55	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({	40	56	$('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal	41	57	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background	42	58	opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration	43	59	in_duration: 300, // Transition in duration

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