110swag / flashy-frontend

Download as
Browse Code ยป

Commit d469992f486ea8fffa3311879beca66d4c7a3c89

Authored by Rachel Lee
2 parents cb1ad91980 778502213c
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Fixing deck and feed unpull and pull a little, and refresh.

Showing 8 changed files Inline Diff

home.html View file @ d469992
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<link rel="stylesheet" 5 5 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 6 6 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
7 7
<link rel="stylesheet" href="styles/flashier.css"/> 8 8 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 9 9 <link rel="stylesheet" href="styles/flashy.css"/>
</head> 10 10 </head>
<header> 11 11 <header>
<!--<a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a>--> 12 12 <!--<a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a>-->
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed"> 13 13 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed">
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 14 14 <li class="logo"><a href="//flashy.cards/" id="logo-container">
15 15
<h1>Flashy</h1> 16 16 <h1>Flashy</h1>
</a></li> 17 17 </a></li>
<li class="bold"> 18 18 <li class="bold">
<a>Classes:</a></li> 19 19 <a>Classes:</a></li>
<div ng-repeat="section in sections"> 20 20 <div ng-repeat="section in sections">
<li class="bold class"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a></li> 21 21 <li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
22 </li>
</div> 22 23 </div>
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 23 24 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
<li class="bold"><a ui-sref="study">Study</a></li> 24 25 <li class="bold"><a ui-sref="study">Study</a></li>
<li class="bold"><a ui-sref="logout">Logout</a></li> 25 26 <li class="bold"><a ui-sref="logout">Logout</a></li>
</ul> 26 27 </ul>
</header> 27 28 </header>
<body ng-controller="RootController"> 28 29 <body ng-controller="RootController">
29 30
<main> 30 31 <main>
<div class="" ui-view></div> 31 32 <div class="" ui-view></div>
</main> 32 33 </main>
33 34
</body> 34 35 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 35 36 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 36 37 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 37 38 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 38 39 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.min.js"></script> 39 40 <script type="text/javascript" src="scripts/materialize.min.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 40 41 <script type="text/javascript" src="scripts/jquery.collapsible.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script> 41 42 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 42 43 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 43 44 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
44 45
<script src="config.js"></script> 45 46 <script src="config.js"></script>
46 47
<!-- Controllers --> 47 48 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 48 49 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 49 50 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 50 51 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 51 52 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 52 53 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 53 54 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 54 55 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 55 56 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 56 57 <script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 57 58 <script src="scripts/VerifyEmailController.js"></script>
<!--<script src="scripts/SidebarController.js"></script>--> 58 59 <!--<script src="scripts/SidebarController.js"></script>-->
59 60
<!-- Services --> 60 61 <!-- Services -->
scripts/DeckController.js View file @ d469992
var app = angular.module('flashy.DeckController', ['ui.router']); 1 1 var app = angular.module('flashy.DeckController', ['ui.router']);
2 2
app.controller('DeckController', ['$scope', '$http', '$stateParams', 3 3 app.controller('DeckController', ['$scope', '$http', '$stateParams',
function($scope, $http, $stateParams) { 4 4 function($scope, $http, $stateParams) {
// cards array 5 5 // cards array
sectionId = $stateParams.sectionId; 6 6 sectionId = $stateParams.sectionId;
$scope.cards = []; 7 7 $scope.cards = [];
8 8
// Populate our page with cards. 9 9 // Populate our page with cards.
$http.get('/api/sections/' + sectionId + '/deck/'). 10 10 $http.get('/api/sections/' + sectionId + '/deck/').
success(function(data) { 11 11 success(function(data) {
console.log(data); 12 12 console.log(data);
$scope.cards = data; 13 13 $scope.cards = data;
}). 14 14 }).
error(function(err) { 15 15 error(function(err) {
console.log('pulling feed failed'); 16 16 console.log('pulling feed failed');
}); 17 17 });
18 18
/* Lets page refresh the cards shown on the page. */ 19 19 /* Lets page refresh the cards shown on the page. */
$scope.refreshCards = function() { 20 20 $scope.refreshCards = function() {
console.log('refreshing cards...'); 21 21 var myDelay = 260; // ms
var myDelay = 350; // ms 22 22
setTimeout(function() { 23 23 setTimeout(function() {
$http.get('/api/sections/' + sectionId + '/deck/'). 24 24 $http.get('/api/sections/' + sectionId + '/deck/').
success(function(data) { 25 25 success(function(data) {
console.log(data); 26 26 console.log(data);
$scope.cards = data; 27 27 $scope.cards = data;
console.log('success in refresh cards...'); 28 28 console.log('success in refresh cards...');
}). 29 29 }).
error(function(err) { 30 30 error(function(err) {
console.log('refresh fail'); 31 31 console.log('refresh fail');
}); 32 32 });
}, myDelay); 33 33 }, myDelay);
} 34 34 }
35 35
36 36
/* all kmach's stuff below, do not touch */ 37 37 /* all kmach's stuff below, do not touch */
// reorganize cards in array based on time 38 38 // reorganize cards in array based on time
$scope.filter = function(card) { 39 39 $scope.filter = function(card) {
40 40
// get index of card 41 41 // get index of card
var index = $scope.cards.indexOf(card); 42 42 var index = $scope.cards.indexOf(card);
43 43
//$scope.cards[index]; 44 44 //$scope.cards[index];
45 45
46 46
}; 47 47 };
48 48
49 // remove card from deck
50 $scope.removeCard = function(card) {
49 51
$scope.editCard = function(card) { 50 52 // get index of card
var index = $scope.cards.indexOf(card); 51 53 var index = $scope.cards.indexOf(card);
52 54
$('.modal-trigger').leanModal({ 53 55 $scope.cards.splice(index, 1);
dismissible: true, // Modal can be dismissed by clicking outside of the modal 54
opacity: .5, // Opacity of modal background 55
in_duration: 300, // Transition in duration 56
out_duration: 200, // Transition out duration 57
ready: function() { 58
59 56
$scope.editableContent = $scope.cards[index].content; 60 57 alert('Removed card!');
}, // Callback for Modal open 61 58 };
complete: function() { 62
63 59
$scope.cards[index].content = $scope.editableContent; 64
65 60
} // Callback for Modal close 66 61 $scope.editCard = function(card) {
} 67
); 68
//alert($scope.cards[index].content); 69
70 62
// post flashcard edits 71 63 var index = $scope.cards.indexOf(card);
/*$http.post('/api/flashcards/', { 'text': $scope.editedContent }). 72
success(function (data) { 73
console.log('No way, really?'); 74
}). 75
error(function (error) { 76
console.log('haha, n00b'); 77
}); 78
79 64
*/ 80 65 $('.modal-trigger').leanModal({
}; 81 66 dismissible: true, // Modal can be dismissed by clicking outside of the modal
67 opacity: .5, // Opacity of modal background
68 in_duration: 300, // Transition in duration
69 out_duration: 200, // Transition out duration
70 ready: function() {
82 71
83 72
73 $scope.editableContent = $scope.cards[index].content;
74 }, // Callback for Modal open
75 complete: function() {
84 76
// get all cards from your deck and push into array 85 77 $scope.cards[index].content = $scope.editableContent;
/*$http.get('/api/sections/{pk}/deck'). 86
success(function(data) { 87
88 78
79 } // Callback for Modal close
80 }
81 );
89 82
90 83
for (var i = 0; i < data.length; i++) { 91 84 //alert($scope.cards[index].content);
cards.push({ 'title': data[i].title, 'content': data[i].content }); 92
} 93
}). 94
error(function(data) { 95
96 85
console.log('no cards?!!'); 97 86 // post flashcard edits
87 /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
88 success(function (data) {
89 console.log('No way, really?');
90 }).
91 error(function (error) {
92 console.log('haha, n00b');
93 });
98 94
});*/ 99 95 */
96 };
100 97
101 98
}]); 102 99 // get all cards from your deck and push into array
100 /*$http.get('/api/sections/{pk}/deck').
101 success(function(data) {
102
103
104
105 for (var i = 0; i < data.length; i++) {
106 cards.push({ 'title': data[i].title, 'content': data[i].content });
107 }
108 }).
109 error(function(data) {
110
111 console.log('no cards?!!');
112
scripts/FeedController.js View file @ d469992
angular.module('flashy.FeedController', ['ui.router']). 1 1 angular.module('flashy.FeedController', ['ui.router']).
2 2
controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function($scope, $stateParams, $state, $http) { 3 3 controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function($scope, $stateParams, $state, $http) {
console.log('Hello from feed'); 4 4 console.log('Hello from feed');
sectionId = $stateParams.sectionId; 5 5 sectionId = $stateParams.sectionId;
$scope.cards = []; 6 6 $scope.cards = [];
7 7
$http.get('/api/sections/' + sectionId + '/feed/'). 8 8 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 9 9 success(function(data) {
console.log(data); 10 10 console.log(data);
$scope.cards = data; 11 11 $scope.cards = data;
}). 12 12 }).
error(function(err) { 13 13 error(function(err) {
console.log('pulling feed failed'); 14 14 console.log('pulling feed failed');
}); 15 15 });
16 16
$scope.viewDeck = function() { 17 17 $scope.viewDeck = function() {
$state.go('deck', {sectionId: sectionId}); 18 18 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 19 19 console.log('go to deck');
}; 20 20 };
21 21
$scope.pushCard = function() { 22 22 $scope.pushCard = function() {
console.log('make! card content:' + $scope.text); 23 23 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 24 24 var pushed = new Date(Date.now());
console.log(pushed.toString()); 25 25 console.log(pushed.toString());
text = $scope.text; 26 26 text = $scope.text;
// attempt to make card :( 27 27 // attempt to make card :(
var myCard = { 28 28 var myCard = {
'text': $scope.text, 29 29 'text': $scope.text,
'material_date': pushed, 30 30 'material_date': pushed,
'mask': '[]', 31 31 'mask': '[]',
section: sectionId 32 32 section: sectionId
}; 33 33 };
$http.post('/api/flashcards/', myCard). 34 34 $http.post('/api/flashcards/', myCard).
success(function(data) { 35 35 success(function(data) {
console.log('pushed a card!'); 36 36 console.log('pushed a card!');
$scope.cards.push(myCard); 37 37 $scope.cards.push(myCard); // Add right away
38 $scope.refreshCards(); // Refresh list
}). 38 39 }).
error(function(error) { 39 40 error(function(error) {
console.log('haha, n00b'); 40 41 console.log('haha, n00b');
}); 41 42 });
42 43
$scope.text = ''; 43 44 $scope.text = '';
}; 44 45 };
46
47 $scope.refreshCards = function() {
48 $http.get('/api/sections/' + sectionId + '/feed/').
49 success(function(data) {
50 console.log(data);
51 $scope.cards = data;
52 console.log('success in refresh cards...');
53 }).
54 error(function(err) {
55 console.log('refresh fail');
56 });
57 }
58
45 59
$scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' + 46 60 $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???'; 47 61 'know how long I am right now. Is it good enough now?????????? Howz about now???';
$scope.text = ''; 48 62 $scope.text = '';
49 63
$(document).ready(function() { 50 64 $(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 51 65 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 52 66 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 53 67 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 54 68 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 55 69 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 56 70 out_duration: 200, // Transition out duration
ready: function() { 57 71 ready: function() {
$('input:text:visible:first').focus(); 58 72 $('input:text:visible:first').focus();
}, 59 73 },
scripts/FlashcardDirective.js View file @ d469992
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', '$state', function($http, $state) { 3 3 directive('flashcard', ['$http', '$state', '$window',
4 function($http, $state, $window) {
return { 4 5 return {
templateUrl: '/app/templates/flashcard.html', 5 6 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 6 7 restrict: 'E',
scope: { 7 8 scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html 8 9 flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html 9 10 refresh: '&' // eval refresh in parent html
}, 10 11 },
link: function(scope, element) { 11 12 link: function(scope, element) {
13 function refresh_width() {
14 avail = $window.innerWidth;
15 if (avail > 992) avail -= 240;
16 width = Math.floor(avail / Math.floor(avail / 250) - 12);
17 element.children().css({width: width + 'px', height: (width * 3 / 5) + 'px'});
18 };
19 angular.element($window).bind('resize', refresh_width);
20 refresh_width();
21
/* Pulls card from feed into deck */ 12 22 /* Pulls card from feed into deck */
scope.pullCard = function(flashcard) { 13 23 scope.pullCard = function(flashcard) {
console.log('call pull card...') 14
if ($state.current.name == 'feed') { 15 24 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard). 16 25 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
success(function(data) { 17 26 success(function(data) {
console.log('pulled flashcard #' + flashcard.id); 18 27 console.log('pulled flashcard #' + flashcard.id);
28 scope.startShrink = true;
29 scope.refresh();
}). 19 30 }).
error(function(data) { 20 31 error(function(data) {
console.log('failed to pull flashcard #' + flashcard.id); 21 32 console.log('failed to pull flashcard #' + flashcard.id);
}); 22 33 });
} 23 34 }
}; 24 35 };
25 36
/* Unpulls card from deck */ 26 37 /* Unpulls card from deck */
scope.unpullCard = function(flashcard) { 27 38 scope.unpullCard = function(flashcard) {
console.log('call unpull card...') 28
if ($state.current.name == 'deck') { 29 39 if ($state.current.name == 'deck') {
console.log('unpulling card...') 30 40 console.log('unpulling card...')
31 41
$http.post('/api/flashcards/' + flashcard.id + '/unpull/', 32 42 $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
flashcard). 33 43 flashcard).
success(function(data) { 34 44 success(function(data) {
console.log('card unpull success') 35 45 console.log('card unpull success')
46 scope.startShrink = true;
47 scope.refresh();
}). 36 48 }).
error(function(data) { 37 49 error(function(data) {
console.log('card unpull FAILURE') 38 50 console.log('card unpull FAILURE')
}); 39 51 });
} 40 52 }
}; 41 53 };
42 54
/* Hides card from feed */ 43 55 /* Hides card from feed */
scope.hideCard = function(flashcard) { 44 56 scope.hideCard = function(flashcard) {
console.log('call hide card...') 45
if ($state.current.name == 'feed') { 46 57 if ($state.current.name == 'feed') {
console.log('hiding card...') 47
48
$http.post('/api/flashcards/' + flashcard.id + '/hide/', 49 58 $http.post('/api/flashcards/' + flashcard.id + '/hide/',
flashcard). 50 59 flashcard).
success(function(data) { 51 60 success(function(data) {
console.log('card hide success') 52 61 console.log('card hide success')
62 scope.startShrink = true;
63 scope.refresh();
}). 53 64 }).
error(function(data) { 54 65 error(function(data) {
console.log('card hide FAILURE') 55 66 console.log('card hide FAILURE')
}); 56 67 });
} 57 68 }
scripts/RootController.js View file @ d469992
angular.module('flashy.RootController', ['ui.router']). 1 1 angular.module('flashy.RootController', ['ui.router']).
2 2
controller('RootController', ['$rootScope', '$scope', '$state', 'UserService', function($rootScope, $scope, $state, UserService) { 3 3 controller('RootController', ['$rootScope', '$scope', '$state', 'UserService', function($rootScope, $scope, $state, UserService) {
//UserService.getUserData(); 4 4 //UserService.getUserData();
//$('#top').collapsible('accordion'); 5 5 //$('#top').collapsible('accordion');
$('.button-collapse').sideNav(); 6 6 $('.button-collapse').sideNav();
if (UserService.isLoggedIn()) $state.go('login'); 7 7 if (UserService.isLoggedIn()) $state.go('login');
else $state.go('addclass'); 8 8 else $state.go('addclass');
$rootScope.isLoggedIn = false; 9 9 $rootScope.isLoggedIn = false;
console.log(UserService._user); 10 10 console.log(UserService._user);
UserService.getUserData().then(function(data) { 11 11 UserService.getUserData().then(function(data) {
console.log(data); 12 12 console.log(data);
$rootScope.user = data; 13 13 $rootScope.user = data;
}); 14 14 });
15 15
$('.button-collapse').sideNav({ 16 16 $('.button-collapse').sideNav({
menuWidth: 300, // Default is 240 17 17 menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin 18 18 edge: 'right', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 19 19 closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
} 20 20 }
); 21 21 );
22
}]); 22 23 }]);
23 24
styles/flashy.css View file @ d469992
๏ปฟ.angucomplete-dropdown { 1 1 ๏ปฟ.no-user-select {
2 -moz-user-select: none;
3 -webkit-user-select: none;
4 -ms-user-select: none;
5 user-select: none;
6 }
7
8 .angucomplete-dropdown {
border-color: #ececec; 2 9 border-color: #ececec;
border-width: 1px; 3 10 border-width: 1px;
border-style: solid; 4 11 border-style: solid;
border-radius: 2px; 5 12 border-radius: 2px;
/*width: 250px;*/ 6 13 /*width: 250px;*/
padding: 6px; 7 14 padding: 6px;
cursor: pointer; 8 15 cursor: pointer;
z-index: 9999; 9 16 z-index: 9999;
position: absolute; 10 17 position: absolute;
/*top: 32px; 11 18 /*top: 32px;
left: 0px; 12 19 left: 0px;
*/ 13 20 */
margin-top: -6px; 14 21 margin-top: -6px;
background-color: #ffffff; 15 22 background-color: #ffffff;
} 16 23 }
17 24
.angucomplete-description { 18 25 .angucomplete-description {
font-size: 14px; 19 26 font-size: 14px;
} 20 27 }
21 28
.angucomplete-row { 22 29 .angucomplete-row {
padding: 5px; 23 30 padding: 5px;
color: #000000; 24 31 color: #000000;
margin-bottom: 4px; 25 32 margin-bottom: 4px;
clear: both; 26 33 clear: both;
} 27 34 }
28 35
.angucomplete-selected-row { 29 36 .angucomplete-selected-row {
background-color: #aaaaff; 30 37 background-color: #aaaaff;
} 31 38 }
32 39
.container .row { 33 40 .container .row {
margin-left: 0; 34 41 margin-left: 0;
margin-right: 0; 35 42 margin-right: 0;
} 36 43 }
37 44
ul.side-nav.fixed li { 38 45 ul.side-nav.fixed li {
font-size: 24px; 39 46 font-size: 24px;
} 40 47 }
41 48
ul.side-nav.fixed li.class a { 42 49 ul.side-nav.fixed li.class a {
height: 36px; 43 50 height: 36px;
line-height: normal; 44 51 line-height: normal;
} 45 52 }
46 53
ul.side-nav.fixed li a { 47 54 ul.side-nav.fixed li a {
font-size: 24px; 48 55 font-size: 24px;
} 49 56 }
50 57
/* Flashcard directive css */ 51 58 /* Flashcard directive css */
.card { 52 59 .card {
word-wrap: break-word; 53 60 word-wrap: break-word;
} 54 61 }
55 62
.card.flashy { 56 63 .card.flashy {
float: left; 57 64 float: left;
height: calc((992px / 4 - 6px * 2) * 3 / 5); 58 65 /*height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
margin: 6px; 59 66 margin: 6px;
max-height: 2in; 60 67 /*max-height: 2in;*/
max-width: calc(5 * 60px); 61 68 /*max-width: calc(5 * 60px);*/
min-height: calc((992px / 4 - 6px * 2) * 3 / 5); 62 69 /*min-height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
/*min-width: calc(992px / 4 - 6px * 2);*/ 63 70 /*min-width: calc(992px / 4 - 6px * 2);*/
transition: all 0.3s cubic-bezier(0, 0, 0.6, 1); 64 71 transition: all 0.255s cubic-bezier(0, 0, 0.6, 1);
width: calc(992px / 4 - 6px * 2); 65 72 width: calc(992px / 4 - 6px * 2);
} 66 73 }
67 74
.card.flashy.shrinky { 68 75 .card.flashy.shrinky {
margin: 0; 69 76 border: 5px solid #ff0000;
opacity: 0; 70
overflow: hidden; 71
padding: 0; 72
width: 0; 73
} 74
75
/* 76
.smallify { 77
height: 0; 78 77 height: 0;
opacity: 0; 79 78 opacity: 0;
overflow: hidden; 80 79 overflow: hidden;
padding: 0; 81
width: 0; 82
} 83 80 }
*/ 84
85 81
.card-overlay { 86 82 .card-overlay {
83 cursor: pointer;
left: 0; 87 84 left: 0;
opacity: 0; 88 85 opacity: 0;
position: absolute; 89 86 position: absolute;
top: 0; 90 87 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 91 88 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 92 89 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 93 90 /* animation effect to appear on off-hover */
visibility: hidden; 94 91 visibility: hidden;
height: 100%; 95 92 height: 100%;
width: 100%; 96 93 width: 100%;
} 97 94 }
98 95
.card-overlay i { 99 96 .card-overlay i {
color: #FFF; 100 97 color: #FFF;
left: 50%; 101 98 left: 50%;
position: absolute; 102 99 position: absolute;
top: 50%; 103 100 top: 50%;
transform: translate(-50%, -50%); 104 101 transform: translate(-50%, -50%);
} 105 102 }
106 103
.card:hover .card-overlay { 107 104 .card:hover .card-overlay {
opacity: 1; 108 105 opacity: 1;
transition-delay: 0s; /* animation effect to appear on hover */ 109 106 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 110 107 visibility: visible;
} 111 108 }
112 109
.top-box { 113 110 .top-box {
background-color: rgba(0, 10, 203, 0.6); 114 111 background-color: rgba(0, 10, 203, 0.6);
height: 65%; 115 112 height: 65%;
position: relative; 116 113 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 117 114 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 118 115 width: 100%;
} 119 116 }
120 117
.top-box:hover { 121 118 .top-box:hover {
background-color: rgba(0, 10, 203, 0.7); 122 119 background-color: rgba(0, 10, 203, 0.7);
} 123 120 }
124 121
.bottom-box { 125 122 .bottom-box {
height: 35%; 126 123 height: 35%;
width: 100%; 127 124 width: 100%;
} 128 125 }
129 126
.left-box { 130 127 .left-box {
background-color: rgba(15, 0, 155, 0.6); 131 128 background-color: rgba(15, 0, 155, 0.6);
float: left; 132 129 float: left;
position: relative; 133 130 position: relative;
height: 100%; 134 131 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 135 132 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 136 133 width: 50%;
} 137 134 }
138 135
.left-box:hover { 139 136 .left-box:hover {
background-color: rgba(15, 0, 155, 0.7); 140 137 background-color: rgba(15, 0, 155, 0.7);
} 141 138 }
142 139
.right-box { 143 140 .right-box {
background-color: rgba(0, 81, 189, 0.6); 144 141 background-color: rgba(0, 81, 189, 0.6);
float: right; 145 142 float: right;
height: 100%; 146 143 height: 100%;
position: relative; 147 144 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 148 145 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 149 146 width: 50%;
} 150 147 }
151 148
.right-box:hover { 152 149 .right-box:hover {
background-color: rgba(0, 81, 189, 0.7); 153 150 background-color: rgba(0, 81, 189, 0.7);
} 154 151 }
155 152
.center-me { 156 153 .center-me {
margin: 0 auto; 157 154 margin: 0 auto;
text-align: center; 158 155 text-align: center;
vertical-align: middle; 159 156 vertical-align: middle;
} 160 157 }
161 158
.modal.bottom-sheet { 162 159 .modal.bottom-sheet {
width: 40%; 163 160 width: 40%;
margin-left: auto; 164 161 margin-left: auto;
margin-right: auto; 165 162 margin-right: auto;
} 166 163 }
167 164
/* label color */ 168 165 /* label color */
.input-field label { 169 166 .input-field label {
color: #673ab7; 170 167 color: #673ab7;
} 171 168 }
172 169
/* label focus color */ 173 170 /* label focus color */
.input-field input[type]:focus + label { 174 171 .input-field input[type]:focus + label {
color: #b388ff; 175 172 color: #b388ff;
} 176 173 }
177 174
/* label underline focus color */ 178 175 /* label underline focus color */
.input-field input[type]:focus { 179 176 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 180 177 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 181 178 box-shadow: 0 1px 0 0 #b388ff;
} 182 179 }
183 180
/* valid color */ 184 181 /* valid color */
.input-field input[type].valid { 185 182 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 186 183 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 187 184 box-shadow: 0 1px 0 0 #673ab7;
} 188 185 }
189 186
/* invalid color */ 190 187 /* invalid color */
.input-field input[type].invalid { 191 188 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 192 189 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 193 190 box-shadow: 0 1px 0 0 #673ab7;
} 194 191 }
195 192
/* icon prefix focus color */ 196 193 /* icon prefix focus color */
.input-field .prefix.active { 197 194 .input-field .prefix.active {
color: #b388ff; 198 195 color: #b388ff;
} 199 196 }
200 197
/* label focus color */ 201 198 /* label focus color */
.input-field textarea[type]:focus + label { 202 199 .input-field textarea[type]:focus + label {
color: #b388ff; 203 200 color: #b388ff;
} 204 201 }
205 202
templates/feed.html View file @ d469992
<div class="row"> 1 1 <div class="row">
<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a> 2 2 <a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a>
</div> 3 3 </div>
4 4
<!--cards--> 5 5 <!--cards-->
<div class="row"> 6 6 <div class="row">
<div ng-repeat="card in cards"> 7 7 <div ng-repeat="card in cards">
<flashcard flashcard-obj="card"/> 8 8 <flashcard flashcard-obj="card" refresh="refreshCards()" />
</div> 9 9 </div>
</div> 10 10 </div>
11 11
12 12
<!--Lil plus button in corner--> 13 13 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> 14 14 <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard"> 15 15 <a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">
<i class="large mdi-content-add"></i> 16 16 <i class="large mdi-content-add"></i>
</a> 17 17 </a>
<!--Maybe this will come in handy later? Floating bubbles on mouseover--> 18 18 <!--Maybe this will come in handy later? Floating bubbles on mouseover-->
<ul> 19 19 <ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li> 20 20 <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> 21 21 <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> 22 22 <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> 23 23 <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
</ul> 24 24 </ul>
</div> 25 25 </div>
26 26
<form> 27 27 <form>
<div id="newCard" class="modal bottom-sheet"> 28 28 <div id="newCard" class="modal bottom-sheet">
<div class="modal-content"> 29 29 <div class="modal-content">
<div class="row"> 30 30 <div class="row">
<div class="input-field"> 31 31 <div class="input-field">
<i class="mdi-editor-mode-edit prefix"></i> 32 32 <i class="mdi-editor-mode-edit prefix"></i>
<input class="materialize-textarea" ng-model="text" type="text"/> 33 33 <input class="materialize-textarea" ng-model="text" type="text"/>
<label id="newCardSign" for="newCard">New Flashcard</label> 34 34 <label id="newCardSign" for="newCard">New Flashcard</label>
</div> 35 35 </div>
</div> 36 36 </div>
</div> 37 37 </div>
<div class="modal-footer"> 38 38 <div class="modal-footer">
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit 39 39 <button class="btn modal-close" type="submit" ng-click="pushCard()">Submit
<i class="mdi-content-send right"></i> 40 40 <i class="mdi-content-send right"></i>
</button> 41 41 </button>
templates/flashcard.html View file @ d469992
<div class="card flashy smallify" ng-init="startShrink = false" 1 1 <div class="card flashy smallify" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink}"> 2 2 ng-class="{'shrinky': startShrink}">
<div class="card-content"> 3 3 <div class="card-content">
<p>{{flashcard.text}}</p> 4 4 <p>{{flashcard.text}}</p>
</div> 5 5 </div>
<div class="card-overlay"> 6 6 <div class="card-overlay">
<div class="top-box" ng-click="pullCard(flashcard)"> 7 7 <div class="top-box no-user-select"
8 ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 8 9 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 9 10 </div>
10 11
<div class="bottom-box"> 11 12 <div class="bottom-box no-user-select">
<div class="left-box"> 12 13 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 13 14 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 14 15 </div>
<div class="right-box" ng-click="startShrink = true; unpullCard(flashcard); 15 16 <div class="right-box" ng-click="unpullCard(flashcard);
hideCard(flashcard); refresh()"> 16 17 hideCard(flashcard)">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 17 18 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 18 19 </div>
19 20
</div> 20 21 </div>
</div> 21 22 </div>
</div> 22 23 </div>
23 24