110swag / flashy-frontend

Download as
Browse Code ยป

Commit a0d3b9b1dd63c425e0ec5e7deb7bde610e757674

Authored by Andrew Buss
1 parent aac0218e83
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

tiny style tweaks

Showing 4 changed files with 22 additions and 21 deletions Inline Diff

home.html View file @ a0d3b9b
<!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"/>
<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' 10 10 <link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
rel='stylesheet' type='text/css'> 11 11 rel='stylesheet' type='text/css'>
<title>Flashy</title> 12 12 <title>Flashy</title>
</head> 13 13 </head>
<header> 14 14 <header>
<a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i 15 15 <a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i
class="medium mdi-navigation-menu"></i></a> 16 16 class="medium mdi-navigation-menu"></i></a>
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed"> 17 17 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed">
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 18 18 <li class="logo"><a href="//flashy.cards/" id="logo-container">
19 19
<h1>Flashy</h1> 20 20 <h1>Flashy</h1>
</a></li> 21 21 </a></li>
<li class="no-padding"> 22 22 <li class="no-padding">
<ul class="collapsible" data-collapsible="accordion"> 23 23 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 24 24 <li class="bold">
<a class="collapsible-header black-text">Classes</a> 25 25 <a class="collapsible-header black-text">Classes</a>
</li> 26 26 </li>
<div class="collapsible-body" style="display: block"> 27 27 <div class="collapsible-body" style="display: block">
<ul> 28 28 <ul>
<li ui-sref-active="active" ng-repeat="section in sections"> 29 29 <li ui-sref-active="active" ng-repeat="section in sections">
<a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 30 30 <a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
</li> 31 31 </li>
</ul> 32 32 </ul>
</div> 33 33 </div>
</ul> 34 34 </ul>
</li> 35 35 </li>
<!--<li class="bold"> 36 36 <!--<li class="bold">
<a>Classes:</a></li> 37 37 <a>Classes:</a></li>
<div ng-repeat="section in sections"> 38 38 <div ng-repeat="section in sections">
<li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 39 39 <li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
</li> 40 40 </li>
</div>--> 41 41 </div>-->
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 42 42 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
<li class="bold"><a ui-sref="study">Study</a></li> 43 43 <li class="bold"><a ui-sref="study">Study</a></li>
<li class="bold"><a ui-sref="logout">Logout</a></li> 44 44 <li class="bold"><a ui-sref="logout">Logout</a></li>
</ul> 45 45 </ul>
46 46
</header> 47 47 </header>
<body ng-controller="RootController"> 48 48 <body ng-controller="RootController">
49 49
<main> 50 50 <main>
<div class="" ui-view></div> 51 51 <div class="" ui-view></div>
</main> 52 52 </main>
53 53
</body> 54 54 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 55 55 <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> 56 56 <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> 57 57 <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> 58 58 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.min.js"></script> 59 59 <script type="text/javascript" src="scripts/materialize.min.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 60 60 <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> 61 61 <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> 62 62 <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> 63 63 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 64 64 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
65 65
66 66
<script src="config.js"></script> 67 67 <script src="config.js"></script>
68 68
<!-- Controllers --> 69 69 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 70 70 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 71 71 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 72 72 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 73 73 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 74 74 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 75 75 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 76 76 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 77 77 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 78 78 <script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/CardListController.js"></script> 79 79 <script src="scripts/CardListController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 80 80 <script src="scripts/VerifyEmailController.js"></script>
<!--<script src="scripts/SidebarController.js"></script>--> 81 81 <!--<script src="scripts/SidebarController.js"></script>-->
scripts/FeedController.js View file @ a0d3b9b
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
var loc = window.location, new_uri; 7 8 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 8 9 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 9 10 new_uri = 'wss:';
} else { 10 11 } else {
new_uri = 'ws:'; 11 12 new_uri = 'ws:';
} 12 13 }
new_uri += '//' + loc.host; 13 14 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 14 15 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
15 16
ws.onopen = function() { 16 17 ws.onopen = function() {
console.log('websocket connected'); 17 18 console.log('websocket connected');
}; 18 19 };
ws.onmessage = function(e) { 19 20 ws.onmessage = function(e) {
console.log('got websocket message ' + e.data); 20 21 console.log('got websocket message ' + e.data);
$scope.refreshCards(); 21 22 $scope.refreshCards();
}; 22 23 };
ws.onerror = function(e) { 23 24 ws.onerror = function(e) {
console.error(e); 24 25 console.error(e);
}; 25 26 };
ws.onclose = function(e) { 26 27 ws.onclose = function(e) {
console.log('connection closed'); 27 28 console.log('connection closed');
}; 28 29 };
29 30
$http.get('/api/sections/' + sectionId + '/feed/'). 30 31 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 31 32 success(function(data) {
console.log(data); 32 33 console.log(data);
$scope.cards = data; 33 34 $scope.cards = data;
}). 34 35 }).
error(function(err) { 35 36 error(function(err) {
console.log('pulling feed failed'); 36 37 console.log('pulling feed failed');
}); 37 38 });
38 39
$scope.viewDeck = function() { 39 40 $scope.viewDeck = function() {
$state.go('deck', {sectionId: sectionId}); 40 41 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 41 42 console.log('go to deck');
}; 42 43 };
43 44
$scope.pushCard = function() { 44 45 $scope.pushCard = function() {
console.log('make! card content:' + $scope.text); 45 46 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 46 47 var pushed = new Date(Date.now());
console.log(pushed.toString()); 47 48 console.log(pushed.toString());
text = $scope.text; 48 49 text = $scope.text;
// attempt to make card :( 49 50 // attempt to make card :(
var myCard = { 50 51 var myCard = {
'text': $scope.text, 51 52 'text': $scope.text,
'material_date': pushed, 52 53 'material_date': pushed,
'mask': '[]', 53 54 'mask': '[]',
section: sectionId 54 55 section: sectionId
}; 55 56 };
$http.post('/api/flashcards/', myCard). 56 57 $http.post('/api/flashcards/', myCard).
success(function(data) { 57 58 success(function(data) {
console.log('pushed a card!'); 58 59 console.log('pushed a card!');
$scope.cards.unshift(myCard); // Add right away 59 60 $scope.cards.unshift(myCard); // Add right away
$scope.refreshCards(); // Refresh list 60 61 $scope.refreshCards(); // Refresh list
listenForC = true; 61 62 listenForC = true;
}). 62 63 }).
error(function(error) { 63 64 error(function(error) {
console.log('haha, n00b'); 64 65 console.log('haha, n00b');
}); 65 66 });
66 67
$scope.text = ''; 67 68 $scope.text = '';
}; 68 69 };
69 70
$scope.refreshCards = function() { 70 71 $scope.refreshCards = function() {
$http.get('/api/sections/' + sectionId + '/feed/'). 71 72 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 72 73 success(function(data) {
console.log(data); 73 74 console.log(data);
$scope.cards = data; 74 75 $scope.cards = data;
console.log('success in refresh cards...'); 75 76 console.log('success in refresh cards...');
}). 76 77 }).
error(function(err) { 77 78 error(function(err) {
console.log('refresh fail'); 78 79 console.log('refresh fail');
}); 79 80 });
}; 80 81 };
81 82
/* Key bindings for the whole feed window. Hotkey it up! */ 82 83 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 83 84 var listenForC = true;
$(document).keydown(function(e) { 84 85 $(document).keydown(function(e) {
var keyed = e.which; 85 86 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" or "C" for compose 86 87 if (keyed == 67 && listenForC) { // "c" or "C" for compose
$('#newCard').openModal(); 87 88 $('#newCard').openModal();
listenForC = false; 88 89 listenForC = false;
return false; 89 90 return false;
} else if (keyed == 13 || keyed == 27) { // enter or esc, respectively 90 91 } else if (keyed == 13 || keyed == 27) { // enter or esc, respectively
listenForC = true; 91 92 listenForC = true;
document.getElementById('new-card-input').value = ''; 92 93 document.getElementById('new-card-input').value = '';
} 93 94 }
}); 94 95 });
95 96
$scope.flashcard = ''; 96 97 $scope.flashcard = '';
$scope.text = ''; 97 98 $scope.text = '';
98 99
$(document).ready(function() { 99 100 $(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 100 101 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 101 102 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 102 103 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 103 104 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 104 105 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 105 106 out_duration: 200, // Transition out duration
ready: function() { 106 107 ready: function() {
listenForC = false; 107 108 listenForC = false;
console.log('modal OPENING'); 108 109 console.log('modal OPENING');
$('#new-card-input').focus(); 109 110 $('#new-card-input').focus();
}, 110 111 },
complete: function() { 111 112 complete: function() {
listenForC = true; 112 113 listenForC = true;
scripts/FlashcardDirective.js View file @ a0d3b9b
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', '$state', '$window', 3 3 directive('flashcard', ['$http', '$state', '$window',
function ($http, $state, $window) { 4 4 function($http, $state, $window) {
return { 5 5 return {
templateUrl: '/app/templates/flashcard.html', 6 6 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 7 7 restrict: 'E',
scope: { 8 8 scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html 9 9 flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html 10 10 refresh: '&' // eval refresh in parent html
}, 11 11 },
link: function (scope, element) { 12 12 link: function(scope, element) {
/* Handles width of the card */ 13 13 /* Handles width of the card */
function refresh_width() { 14 14 function refresh_width() {
avail = $window.innerWidth - 17; 15 15 avail = $window.innerWidth - 17;
if (avail > 992) avail -= 240; 16 16 if (avail > 992) avail -= 240;
width = Math.floor(avail / Math.floor(avail / 250) - 12); 17 17 width = Math.floor(avail / Math.floor(avail / 250) - 12);
element.children().css({ 18 18 element.children().css({
width: width + 'px', 19 19 width: width + 'px',
height: (width * 3 / 5) + 'px', 20 20 height: (width * 3 / 5) + 'px',
'font-size': 100 * width / 250 + '%' 21 21 'font-size': 100 * width / 250 + '%'
}); 22 22 });
}; 23 23 };
angular.element($window).bind('resize', refresh_width); 24 24 angular.element($window).bind('resize', refresh_width);
refresh_width(); 25 25 refresh_width();
26 26
/* Pulls card from feed into deck */ 27 27 /* Pulls card from feed into deck */
scope.pullCard = function (flashcard) { 28 28 scope.pullCard = function(flashcard) {
if ($state.current.name == 'feed') { 29 29 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard). 30 30 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
success(function (data) { 31 31 success(function(data) {
console.log('pulled flashcard #' + flashcard.id); 32 32 console.log('pulled flashcard #' + flashcard.id);
scope.startShrink = true; 33 33 scope.startShrink = true;
scope.refresh(); 34 34 scope.refresh();
}). 35 35 }).
error(function (data) { 36 36 error(function(data) {
console.log('failed to pull flashcard #' + flashcard.id); 37 37 console.log('failed to pull flashcard #' + flashcard.id);
}); 38 38 });
} 39 39 }
}; 40 40 };
41 41
/* Unpulls card from deck */ 42 42 /* Unpulls card from deck */
scope.unpullCard = function (flashcard) { 43 43 scope.unpullCard = function(flashcard) {
if ($state.current.name == 'deck') { 44 44 if ($state.current.name == 'deck') {
console.log('unpulling card...'); 45 45 console.log('unpulling card...');
46 46
$http.post('/api/flashcards/' + flashcard.id + '/unpull/', 47 47 $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
flashcard). 48 48 flashcard).
success(function (data) { 49 49 success(function(data) {
console.log('card unpull success'); 50 50 console.log('card unpull success');
scope.startShrink = true; 51 51 scope.startShrink = true;
scope.refresh(); 52 52 scope.refresh();
}). 53 53 }).
error(function (data) { 54 54 error(function(data) {
console.log('card unpull FAILURE'); 55 55 console.log('card unpull FAILURE');
}); 56 56 });
} 57 57 }
}; 58 58 };
59 59
/* Hides card from feed */ 60 60 /* Hides card from feed */
scope.hideCard = function (flashcard) { 61 61 scope.hideCard = function(flashcard) {
if ($state.current.name == 'feed') { 62 62 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/hide/', 63 63 $http.post('/api/flashcards/' + flashcard.id + '/hide/',
flashcard). 64 64 flashcard).
success(function (data) { 65 65 success(function(data) {
console.log('card hide success'); 66 66 console.log('card hide success');
scope.startShrink = true; 67 67 scope.startShrink = true;
scope.refresh(); 68 68 scope.refresh();
}). 69 69 }).
error(function (data) { 70 70 error(function(data) {
console.log('card hide FAILURE'); 71 71 console.log('card hide FAILURE');
}); 72 72 });
} 73 73 }
}; 74 74 };
} 75 75 }
}; 76 76 };
}]); 77 77 }]);
78 78
scripts/LoginController.js View file @ a0d3b9b
angular.module('flashy.LoginController', ['ui.router']). 1 1 angular.module('flashy.LoginController', ['ui.router']).
2 2
controller('LoginController', ['$rootScope', '$scope', '$state', '$http', 'UserService', 3 3 controller('LoginController', ['$rootScope', '$scope', '$state', '$http', 'UserService',
function ($rootScope, $scope, $state, $http, UserService) { 4 4 function($rootScope, $scope, $state, $http, UserService) {
'use strict'; 5 5 'use strict';
// If we're logged in, there's nothing to do here 6 6 // If we're logged in, there's nothing to do here
if (UserService.isLoggedIn()) $state.go('addclass'); 7 7 if (UserService.isLoggedIn()) $state.go('addclass');
$scope.uniqueError = false; 8 8 $scope.uniqueError = false;
$scope.loginError = false; 9 9 $scope.loginError = false;
$scope.login = function (email, password) { 10 10 $scope.login = function(email, password) {
$http.post('/api/login/', JSON.stringify({ 11 11 $http.post('/api/login/', JSON.stringify({
'email': email, 12 12 'email': email,
'password': password 13 13 'password': password
})). 14 14 })).
success(function (data) { 15 15 success(function(data) {
UserService.setUserData(data); 16 16 UserService.setUserData(data);
if (angular.isDefined($scope.returnToState)) 17 17 if (angular.isDefined($scope.returnToState))
$state.go($scope.returnToState.name, $scope.returnToStateParams); 18 18 $state.go($scope.returnToState.name, $scope.returnToStateParams);
else $state.go('addclass'); 19 19 else $state.go('addclass');
console.log(data); 20 20 console.log(data);
}). 21 21 }).
error(function (data, status, header, config) { 22 22 error(function(data, status, header, config) {
if (data.detail) { // assume 'invalid email or pass' 23 23 if (data.detail) { // assume 'invalid email or pass'
$scope.loginError = true; 24 24 $scope.loginError = true;
} 25 25 }
console.log(data); 26 26 console.log(data);
}); 27 27 });
}; 28 28 };
$scope.signUp = function (email, password) { 29 29 $scope.signUp = function(email, password) {
$http.post('/api/register/', JSON.stringify({ 30 30 $http.post('/api/register/', JSON.stringify({
'email': email, 31 31 'email': email,
'password': password 32 32 'password': password
})). 33 33 })).
success(function (data) { 34 34 success(function(data) {
if (angular.isDefined($scope.returnToState)) 35 35 if (angular.isDefined($scope.returnToState))
$state.go($scope.returnToState.name, $scope.returnToStateParams); 36 36 $state.go($scope.returnToState.name, $scope.returnToStateParams);
else $state.go('addclass'); 37 37 else $state.go('addclass');
console.log(data); 38 38 console.log(data);
}). 39 39 }).
error(function (data, status, headers, config) { 40 40 error(function(data, status, headers, config) {
console.log(data.email); 41 41 console.log(data.email);
if (data.email == 'This field is required.') { 42 42 if (data.email == 'This field is required.') {
$scope.invalid = true; 43 43 $scope.invalid = true;
$scope.uniqueError = false; 44 44 $scope.uniqueError = false;
} else if (data.email == 'This field must be unique.') { 45 45 } else if (data.email == 'This field must be unique.') {
// assume 'email not unique' error 46 46 // assume 'email not unique' error
$scope.uniqueError = true; 47 47 $scope.uniqueError = true;
$scope.invalid = false; 48 48 $scope.invalid = false;
} 49 49 }
console.log(data); 50 50 console.log(data);
}); 51 51 });
52 52
}; 53 53 };
$scope.triggerPasswordReset = function () { 54 54 $scope.triggerPasswordReset = function() {
$state.go('requestpasswordreset'); 55 55 $state.go('requestpasswordreset');
}; 56 56 };
$(document).ready(function () { 57 57 $(document).ready(function() {
$('ul.tabs').tabs(); 58 58 $('ul.tabs').tabs();
}); 59 59 });
} 60 60 }
]); 61 61 ]);
62 62