110swag / flashy-frontend

Authored by Andrew Buss 2015-05-19 16:36:47 -0700

Showing 6 changed files with 41 additions and 35 deletions Side-by-side Diff

...	...	@@ -7,6 +7,7 @@
7	7
8	8	<link rel="stylesheet" href="styles/flashier.css"/>
9	9	<link rel="stylesheet" href="styles/flashy.css"/>
	10	+ <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic\|Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' rel='stylesheet' type='text/css'>
10	11	</head>
11	12	<header>
12	13	<!--<a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a>-->

1	1	var app = angular.module('flashy.DeckController', ['ui.router']);
2	2
3		-app.controller('DeckController', ['$scope', '$http', '$stateParams',
4		- function($scope, $http, $stateParams) {
	3	+app.controller('DeckController', ['$scope', '$state', '$http', '$stateParams',
	4	+ function($scope, $state, $http, $stateParams) {
5	5	// cards array
6	6	sectionId = $stateParams.sectionId;
7	7	$scope.cards = [];
...	...	@@ -14,7 +14,10 @@
14	14	error(function(err) {
15	15	console.log('pulling feed failed');
16	16	});
17		-
	17	+ $scope.viewFeed = function() {
	18	+ $state.go('feed', {sectionId: sectionId});
	19	+ console.log('go to feed');
	20	+ };
18	21
19	22	// reorganize cards in array based on time
20	23	$scope.filter = function(card) {

1	1	angular.module('flashy.FlashcardDirective', []).
2	2
3		- directive('flashcard', ['$http', '$window', function ($http, $window) {
	3	+ directive('flashcard', ['$http', '$window', function($http, $window) {
4	4	return {
5	5	templateUrl: '/app/templates/flashcard.html',
6	6	restrict: 'E',
...	...	@@ -8,7 +8,7 @@
8	8	flashcard: '=flashcardObj' // flashcard-obj in html
9	9	},
10	10
11		- link: function (scope, element) {
	11	+ link: function(scope, element) {
12	12	function refresh_width() {
13	13	avail = $window.innerWidth;
14	14	if (avail > 992) avail -= 240;
15	15
...	...	@@ -16,14 +16,14 @@
16	16	element.children().css({
17	17	width: width + 'px',
18	18	height: (width * 3 / 5) + 'px',
19		- 'font-size': 100*(width / 250) + '%'
	19	+ 'font-size': 100 * (width / 250) + '%'
20	20	});
21	21	};
22	22	angular.element($window).bind('resize', refresh_width);
23	23	refresh_width();
24	24	// Put flashcard-specific functions here.
25	25	// This will probably include add/hide/modals/etc.
26		- scope.pullCard = function (flashcard) {
	26	+ scope.pullCard = function(flashcard) {
27	27	$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
28	28	console.log('pulled flashcard #' + flashcard.id);
29	29	};

...	...	@@ -55,12 +55,9 @@
55	55
56	56	.card.flashy {
57	57	float: left;
58		- /height: calc((992px / 4 - 6px 2) * 3 / 5);*/
	58	+ text-align: center;
59	59	margin: 6px;
60		- /max-height: 2in;/
61		- /max-width: calc(5 60px);*/
62		- /min-height: calc((992px / 4 - 6px 2) * 3 / 5);*/
63		- /min-width: calc(992px / 4 - 6px 2);*/
	60	+ font-family: 'Titillium Web', sans-serif;
64	61	}
65	62
66	63	.card-overlay {
...	...	@@ -69,7 +66,7 @@
69	66	position: absolute;
70	67	top: 0;
71	68	transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
72		- opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
	69	+ opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
73	70	/* animation effect to appear on off-hover */
74	71	visibility: hidden;
75	72	height: 100%;

1		-<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
	1	+<div class="row">
	2	+ <a class="btn" ng-click="viewFeed()" style="margin-top: 15px">View Feed</a>
	3	+</div>
	4	+
	5	+<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
2	6	<div class="row">
3	7	<div ng-repeat="card in cards">
4	8	<flashcard flashcard-obj="card"/>

1		- <div class="card flashy">
2		- <div class="card-content">
3		- <p>{{flashcard.text}}</p>
	1	+<div class="card flashy">
	2	+ <div class="card-content">
	3	+ <p>{{flashcard.text}}</p>
	4	+ </div>
	5	+ <div class="card-overlay">
	6	+ <a href="#">
	7	+ <div class="top-box" ng-click="pullCard(flashcard)">
	8	+ <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
4	9	</div>
5		- <div class="card-overlay">
6		- <a href="#">
7		- <div class="top-box" ng-click="pullCard(flashcard)">
8		- <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
9		- </div>
10		- </a>
11		- <div class="bottom-box">
12		- <a href="#">
13		- <div class="left-box">
14		- <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
15		- </div>
16		- </a>
17		- <a href="#">
18		- <div class="right-box">
19		- <div class="center-me"><i class="mdi-action-delete small"></i></div>
20		- </div>
21		- </a>
	10	+ </a>
	11	+
	12	+ <div class="bottom-box">
	13	+ <a href="#">
	14	+ <div class="left-box">
	15	+ <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
22	16	</div>
23		- </div>
	17	+ </a>
	18	+ <a href="#">
	19	+ <div class="right-box">
	20	+ <div class="center-me"><i class="mdi-action-delete small"></i></div>
	21	+ </div>
	22	+ </a>
24	23	</div>
	24	+ </div>
	25	+</div>