110swag / flashy-frontend

Download as
Browse Code ยป

Commit 30f54ec222b113d817d0cbf8973f44600434013b

Authored by Kevin Mach
2 parents 45cc59836d 0f88be6464
Exists in master

edit stuff

Showing 18 changed files Inline Diff

config.js View file @ 30f54ec
angular.module('flashy', [ 1 1 angular.module('flashy', [
'flashy.LoginController', 2 2 'flashy.LoginController',
'flashy.RootController', 3 3 'flashy.RootController',
'flashy.FeedController', 4 4 'flashy.FeedController',
'flashy.DeckController', 5 5 'flashy.DeckController',
'flashy.ClassAddController', 6 6 'flashy.ClassAddController',
'flashy.RequestResetController', 7 7 'flashy.RequestResetController',
'flashy.StudyController', 8 8 'flashy.StudyController',
'flashy.UserService', 9 9 'flashy.UserService',
'flashy.FlashcardDirective', 10 10 'flashy.FlashcardDirective',
'flashy.FlashcardFactory', 11 11 'flashy.FlashcardFactory',
'flashy.ResetPasswordController', 12 12 'flashy.ResetPasswordController',
'flashy.VerifyEmailController', 13 13 'flashy.VerifyEmailController',
'flashy.CardListController', 14 14 'flashy.CardListController',
'flashy.HelpController', 15 15 'flashy.HelpController',
'flashy.SettingsController', 16 16 'flashy.SettingsController',
'ngCookies']). 17 17 'ngCookies']).
config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) { 18 18 config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
'use strict'; 19 19 'use strict';
$httpProvider.defaults.withCredentials = true; 20 20 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 21 21 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 22 22 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$resourceProvider.defaults.stripTrailingSlashes = false; 23 23 $resourceProvider.defaults.stripTrailingSlashes = false;
var arrayMethods = Object.getOwnPropertyNames(Array.prototype); 24 24 var arrayMethods = Object.getOwnPropertyNames(Array.prototype);
arrayMethods.forEach(attachArrayMethodsToNodeList); 25 25 arrayMethods.forEach(attachArrayMethodsToNodeList);
function attachArrayMethodsToNodeList(methodName) { 26 26 function attachArrayMethodsToNodeList(methodName) {
if (methodName !== 'length') { 27 27 if (methodName !== 'length') {
NodeList.prototype[methodName] = Array.prototype[methodName]; 28 28 NodeList.prototype[methodName] = Array.prototype[methodName];
} 29 29 }
} 30 30 }
31 31
$httpProvider.interceptors.push(function($q, $rootScope) { 32 32 $httpProvider.interceptors.push(function($q, $rootScope) {
return { 33 33 return {
'responseError': function(rejection) { // need a better redirect 34 34 'responseError': function(rejection) { // need a better redirect
if (rejection.status >= 500) { 35 35 if (rejection.status >= 500) {
console.log('got error'); 36 36 console.log('got error');
console.log(rejection); 37 37 console.log(rejection);
$rootScope.$broadcast('server_error', rejection); 38 38 $rootScope.$broadcast('server_error', rejection);
} 39 39 }
if (rejection.status == 403) { 40 40 if (rejection.status == 403) {
console.log(rejection); 41 41 console.log(rejection);
if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') { 42 42 if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') {
UserService.showLockedMessage(); 43 43 UserService.showLockedMessage();
UserService.logout(); 44 44 UserService.logout();
} 45 45 }
} 46 46 }
if (rejection.status == 429) { 47 47 if (rejection.status == 429) {
console.log(rejection); 48 48 console.log(rejection);
Materialize.toast('Your enthusiasm is appreciated, but we ask that you slow down a little!', 4000); 49 49 Materialize.toast('Your enthusiasm is appreciated, but we ask that you slow down a little!', 4000);
} 50 50 }
return $q.reject(rejection); 51 51 return $q.reject(rejection);
} 52 52 }
}; 53 53 };
}); 54 54 });
$locationProvider.html5Mode(true); 55 55 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/404'); 56 56 $urlRouterProvider.otherwise('/login');
var auth_resolve = { 57 57 var auth_resolve = {
authorize: function($q, $rootScope, $state, $stateParams, UserService) { 58 58 authorize: function($q, $rootScope, $state, $stateParams, UserService) {
console.log('do we need to authorize a user for', $rootScope.nextState.name); 59 59 console.log('do we need to authorize a user for', $rootScope.nextState.name);
if (UserService.noAuthRequired($rootScope.nextState)) { 60 60 if (UserService.noAuthRequired($rootScope.nextState)) {
console.log('no auth required for', $rootScope.nextState.name); 61 61 console.log('no auth required for', $rootScope.nextState.name);
return UserService.getUserData(); 62 62 return UserService.getUserData();
} 63 63 }
console.log('resolving user before continuing to ' + $rootScope.nextState.name); 64 64 console.log('resolving user before continuing to ' + $rootScope.nextState.name);
var redirectAsNeeded = function() { 65 65 var redirectAsNeeded = function() {
if (!UserService.isLoggedIn()) { 66 66 if (!UserService.isLoggedIn()) {
console.log(UserService.getUserData()); 67 67 console.log(UserService.getUserData());
console.log('making the user log in'); 68 68 console.log('making the user log in');
$state.go('login'); 69 69 $state.go('login');
} 70 70 }
if (!UserService.authorizedFor($rootScope.nextState, $rootScope.nextStateParams)) { 71 71 if (!UserService.authorizedFor($rootScope.nextState, $rootScope.nextStateParams)) {
console.log('user not authorized for ' + $rootScope.nextState.name); 72 72 console.log('user not authorized for ' + $rootScope.nextState.name);
$state.go('addclass'); 73 73 $state.go('addclass');
} 74 74 }
}; 75 75 };
if (UserService.isResolved()) return redirectAsNeeded(); 76 76 if (UserService.isResolved()) return redirectAsNeeded();
return UserService.getUserData().then(redirectAsNeeded); 77 77 return UserService.getUserData().then(redirectAsNeeded);
} 78 78 }
}; 79 79 };
$stateProvider. 80 80 $stateProvider.
state('login', { 81 81 state('login', {
resolve: auth_resolve, 82 82 resolve: auth_resolve,
url: '/login', 83 83 url: '/login',
templateUrl: 'templates/login.html', 84 84 templateUrl: 'templates/login.html',
controller: 'LoginController' 85 85 controller: 'LoginController'
}). 86 86 }).
state('root', { 87 87 state('root', {
resolve: auth_resolve, 88 88 resolve: auth_resolve,
url: '/', 89 89 url: '',
controller: 'RootController' 90 90 controller: 'RootController'
}). 91 91 }).
state('feed', { 92 92 state('feed', {
resolve: auth_resolve, 93 93 resolve: auth_resolve,
url: '/feed/{sectionId}', 94 94 url: '/feed/{sectionId}',
templateUrl: 'templates/feed.html', 95 95 templateUrl: 'templates/feed.html',
controller: 'FeedController' 96 96 controller: 'FeedController'
}). 97 97 }).
state('cardlist', { 98 98 state('cardlist', {
resolve: auth_resolve, 99 99 resolve: auth_resolve,
url: '/cards/{sectionId}', 100 100 url: '/cards/{sectionId}',
templateUrl: 'templates/cardlist.html', 101 101 templateUrl: 'templates/cardlist.html',
controller: 'CardListController' 102 102 controller: 'CardListController'
}). 103 103 }).
state('addclass', { 104 104 state('addclass', {
resolve: auth_resolve, 105 105 resolve: auth_resolve,
url: '/addclass', 106 106 url: '/addclass',
templateUrl: 'templates/addclass.html', 107 107 templateUrl: 'templates/addclass.html',
controller: 'ClassAddController' 108 108 controller: 'ClassAddController'
}). 109 109 }).
state('deck', { 110 110 state('deck', {
resolve: auth_resolve, 111 111 resolve: auth_resolve,
url: '/deck/{sectionId}', 112 112 url: '/deck/{sectionId}',
templateUrl: 'templates/deck.html', 113 113 templateUrl: 'templates/deck.html',
controller: 'DeckController' 114 114 controller: 'DeckController'
}). 115 115 }).
state('study', { 116 116 state('study', {
resolve: auth_resolve, 117 117 resolve: auth_resolve,
url: '/study', 118 118 url: '/study',
templateUrl: 'templates/study.html', 119 119 templateUrl: 'templates/study.html',
controller: 'StudyController' 120 120 controller: 'StudyController'
}). 121 121 }).
/*state('flashcard', { 122 122 /*state('flashcard', {
resolve: auth_resolve, 123 123 resolve: auth_resolve,
url: '/flashcard', 124 124 url: '/flashcard',
templateUrl: 'templates/flashcard.html', 125 125 templateUrl: 'templates/flashcard.html',
controller: 'FlashcardController' 126 126 controller: 'FlashcardController'
}).*/ 127 127 }).*/
state('settings', { 128 128 state('settings', {
resolve: auth_resolve, 129 129 resolve: auth_resolve,
url: '/settings', 130 130 url: '/settings',
templateUrl: 'templates/settings.html', 131 131 templateUrl: 'templates/settings.html',
controller: 'SettingsController' 132 132 controller: 'SettingsController'
}). 133 133 }).
state('requestpasswordreset', { 134 134 state('requestpasswordreset', {
url: '/requestpasswordreset', 135 135 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 136 136 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 137 137 controller: 'RequestResetController'
}). 138 138 }).
state('resetpassword', { 139 139 state('resetpassword', {
url: '/resetpassword/{uid}/{token}', 140 140 url: '/resetpassword/{uid}/{token}',
templateUrl: 'templates/resetpassword.html', 141 141 templateUrl: 'templates/resetpassword.html',
controller: 'ResetPasswordController' 142 142 controller: 'ResetPasswordController'
}). 143 143 }).
state('verifyemail', { 144 144 state('verifyemail', {
url: '/verifyemail/{key}', 145 145 url: '/verifyemail/{key}',
templateUrl: 'templates/verifyemail.html', 146 146 templateUrl: 'templates/verifyemail.html',
controller: 'VerifyEmailController' 147 147 controller: 'VerifyEmailController'
}). 148 148 }).
state('404', { 149 149 state('404', {
url: '/404', 150 150 url: '/404',
template: "<h1>This page doesn't exist!</h1>" 151 151 template: "<h1>This page doesn't exist!</h1>"
}). 152 152 }).
state('help', { 153 153 state('help', {
resolve: auth_resolve, 154 154 resolve: auth_resolve,
url: '/help', 155 155 url: '/help',
templateUrl: 'templates/help.html', 156 156 templateUrl: 'templates/help.html',
controller: 'HelpController' 157 157 controller: 'HelpController'
}); 158 158 });
}). 159 159 }).
run(function($rootScope, $state, $stateParams, $location, UserService) { 160 160 run(function($rootScope, $state, $stateParams, $location, UserService) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 161 161 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
console.log('failed to change state: ' + error); 162 162 console.log('failed to change state: ' + error);
$state.go('login'); 163 163 $state.go('login');
}); 164 164 });
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 165 165 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
$rootScope.nextState = toState; 166 166 $rootScope.nextState = toState;
$rootScope.nextStateParams = toParams; 167 167 $rootScope.nextStateParams = toParams;
console.log('changing state to', toState); 168 168 console.log('changing state to', toState);
if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) { 169 169 if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) {
localStorage.setItem('last_state', toState.name); 170 170 localStorage.setItem('last_state', toState.name);
localStorage.setItem('last_state_params', JSON.stringify(toParams)); 171 171 localStorage.setItem('last_state_params', JSON.stringify(toParams));
} 172 172 }
}); 173 173 });
}); 174 174 });
175 175
scripts/CardGridController.js View file @ 30f54ec
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'flashy.DeckFactory']).CardGridController = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'flashy.DeckFactory']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
sectionId = parseInt($stateParams.sectionId); 3 3 sectionId = parseInt($stateParams.sectionId);
$scope.cards = []; // all cards 4 4 $scope.cards = []; // all cards
$scope.cardCols = []; // organized data 5 5 $scope.cardCols = null; // organized data
$scope.affectedCards = []; // cards affected by a position change move 6 6 $scope.affectedCards = []; // cards affected by a position change move
$scope.numCols = 0; 7 7 $scope.numCols = 0;
$scope.height = 0; // height of a card 8 8 $scope.height = 0; // height of a card
$scope.section = $rootScope.SectionResource.get({sectionId: sectionId}); 9 9 $scope.section = $rootScope.SectionResource.get({sectionId: sectionId});
$scope.deck = new Deck(sectionId, { 10 10 $scope.deck = new Deck(sectionId, {
cardHideCallback: function(card) { 11 11 cardHideCallback: function(card) {
$scope.hideCardFromGrid(card); 12 12 $scope.hideCardFromGrid(card);
} 13 13 }
}); 14 14 });
15 15
Flashcard.linkDeck($scope.deck); 16 16 Flashcard.linkDeck($scope.deck);
17 17
$scope.moveQueue = []; 18 18 $scope.moveQueue = [];
19 19
$scope.procQueue; 20 20 $scope.procQueue;
$scope.addMove = function(m) { 21 21 $scope.addMove = function(m) {
if (!$scope.moveQueue) return m.go(); 22 22 if (!$scope.moveQueue) return m.go();
$scope.moveQueue.push(m); 23 23 $scope.moveQueue.push(m);
}; 24 24 };
25 25
$scope.showGrid = false; 26 26 $scope.showGrid = false;
//$scope.moveQueue = []; // queue of flashcard objects 27 27 //$scope.moveQueue = []; // queue of flashcard objects
$rootScope.currentSection = $scope.section; 28 28 $rootScope.currentSection = $scope.section;
29 29
$scope.refreshColumnWidth = function() { 30 30 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 31 31 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 32 32 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 33 33 $('.cardColumn').css({
width: width + 'px' 34 34 width: width + 'px'
}); 35 35 });
$('.cardColumn .card.flashy').css({ 36 36 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 37 37 width: width - 12 + 'px',
'font-size': 100 * width / 250 + '%', 38 38 'font-size': 100 * width / 250 + '%',
height: (width * 3 / 5) + 'px' 39 39 height: (width * 3 / 5) + 'px'
}); 40 40 });
41 /*
$('.cardColumn .card.flashy i.small').css({ 41 42 $('.cardColumn .card.flashy i.small').css({
'font-size': 200 * width / 250 + '%' 42 43 'font-size': 200 * width / 250 + '%'
}); 43 44 });
$('.cardColumn .card.flashy i.medium').css({ 44 45 $('.cardColumn .card.flashy i.medium').css({
'font-size': 400 * width / 250 + '%' 45 46 'font-size': 400 * width / 250 + '%'
}); 46 47 });*/
$scope.height = width * 3 / 5; 47 48 $scope.height = width * 3 / 5;
}; 48 49 };
49 50
$scope.refreshLayout = function() { 50 51 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 51 52 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
52 53
// check if we actually need to refresh the whole layout 53 54 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 54 55 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 55 56 $scope.numCols = numCols;
console.log('refreshing layout for ' + numCols + ' columns'); 56 57 console.log('refreshing layout for ' + numCols + ' columns');
$scope.cardCols = []; 57 58 $scope.cardCols = [];
var cols = []; 58 59 var cols = [];
for (var i = 0; i < numCols; i++) cols.push([]); 59 60 for (var i = 0; i < numCols; i++) cols.push([]);
var n = 0; 60 61 var n = 0;
$scope.cards.forEach(function(card, j) { 61 62 $scope.cards.forEach(function(card, j) {
card.colNum = n++ % numCols; 62 63 card.colNum = n++ % numCols;
cols[card.colNum].push(card); 63 64 cols[card.colNum].push(card);
}); 64 65 });
for (i in cols) $scope.updateColRanks(cols[i]); 65 66 for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols); 66 67 console.log(cols);
return $timeout(function() { 67 68 return $timeout(function() {
$scope.cardCols = cols; 68 69 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 69 70 $timeout($scope.refreshColumnWidth);
}); 70 71 });
}; 71 72 };
72 73
angular.element($window).bind('resize', $scope.refreshLayout); 73 74 angular.element($window).bind('resize', $scope.refreshLayout);
74 75
$scope.addCardToGrid = function(card) { 75 76 $scope.addCardToGrid = function(card) {
var colNum = 0; 76 77 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 77 78 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 78 79 var lowestColNum = 0;
while (colNum < $scope.numCols) { 79 80 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 80 81 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 81 82 lowestCol = $scope.cardCols[colNum];
break; 82 83 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 83 84 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 84 85 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 85 86 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 86 87 lowestColLen = $scope.cardCols[colNum].length;
} 87 88 }
colNum++; 88 89 colNum++;
} 89 90 }
console.log(card); 90 91 console.log(card);
$scope.cards.push(data); 91 92 $scope.cards.push(data);
lowestCol.unshift(card); 92 93 lowestCol.unshift(card);
card.colNum = lowestColNum; 93 94 card.colNum = lowestColNum;
$scope.updateColRanks(lowestCol); 94 95 $scope.updateColRanks(lowestCol);
$timeout($scope.refreshColumnWidth); 95 96 $timeout($scope.refreshColumnWidth);
96 97
}; 97 98 };
98 99
$scope.updateColRanks = function(col) { 99 100 $scope.updateColRanks = function(col) {
for (i in col) 100 101 for (i in col)
col[i].colRank = parseInt(i); 101 102 col[i].colRank = parseInt(i);
}; 102 103 };
103 104
$scope.hideCardFromGrid = function(card) { 104 105 $scope.hideCardFromGrid = function(card) {
console.log('hiding', card); 105 106 console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1); 106 107 $scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]); 107 108 $scope.updateColRanks($scope.cardCols[card.colNum]);
console.log($scope.cardCols); 108 109 console.log($scope.cardCols);
}; 109 110 };
scripts/DeckController.js View file @ 30f54ec
angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']). 1 1 angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']).
2 2
controller('DeckController', 3 3 controller('DeckController',
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) { 4 4 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
angular.module('flashy.CardGridController').CardGridController.apply(this, arguments).then(function() { 5 5 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments).then(function() {
$scope.refreshLayout(); 6 6 $scope.refreshLayout();
}); 7 7 });
$scope.cards = $scope.deck.cards; 8 8 $scope.cards = $scope.deck.cards;
$scope.deckPullCallback = $scope.addCardToGrid; 9 9 $scope.deckPullCallback = $scope.addCardToGrid;
$scope.deckUnpullCallback = $scope.hideCardFromGrid; 10 10 $scope.deckUnpullCallback = $scope.hideCardFromGrid;
11 11
12
13
14 12
15 13
$scope.refreshEditCardInput = function () { 16 14 $scope.refreshEditCardInput = function () {
17 15
18 16
console.log("CARD IS BEING EDITED"); 19 17 console.log("CARD IS BEING EDITED");
20 18
$scope.editCardText = $('#edit-card-input').text(); 21 19 $scope.editCardText = $('#edit-card-input').text();
22 20
$scope.submit_enabled = $scope.editCardText.length >= 5 && $scope.editCardText.length <= 160; 23 21 $scope.submit_enabled = $scope.editCardText.length >= 5 && $scope.editCardText.length <= 160;
24 22
25 23
26 24
var i = 0; 27 25 var i = 0;
$scope.editCardBlanks = []; 28 26 $scope.editCardBlanks = [];
$('#edit-card-input')[0].childNodes.forEach(function (node) { 29 27 $('#edit-card-input')[0].childNodes.forEach(function (node) {
node = $(node)[0]; 30 28 node = $(node)[0];
if (node.tagName == 'B') { 31 29 if (node.tagName == 'B') {
var text = $(node).text(); 32 30 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 33 31 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 34 32 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 35 33 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 36 34 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 37 35 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 38 36 if (leftspaces != text.length) $scope.editCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 39 37 i += text.length;
} else if (!node.data) { 40 38 } else if (!node.data) {
i += $(node).text().length; 41 39 i += $(node).text().length;
} else { 42 40 } else {
i += node.data.length; 43 41 i += node.data.length;
} 44 42 }
}); 45 43 });
$scope.editCardBlanks.sort(function (a, b) { 46 44 $scope.editCardBlanks.sort(function (a, b) {
return a[0] - b[0]; 47 45 return a[0] - b[0];
}); 48 46 });
i = 0; 49 47 i = 0;
newtext = ''; 50 48 newtext = '';
$scope.editCardBlanks.forEach(function (blank) { 51 49 $scope.editCardBlanks.forEach(function (blank) {
newtext += $scope.editCardText.slice(i, blank[0]); 52 50 newtext += $scope.editCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.editCardText.slice(blank[0], blank[1]) + '</b>'; 53 51 newtext += '<b>' + $scope.editCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 54 52 i = blank[1];
}); 55 53 });
newtext += $scope.editCardText.slice(i); 56 54 newtext += $scope.editCardText.slice(i);
//$scope.newCardFormattedText = newtext; 57 55 //$scope.newCardFormattedText = newtext;
58 56
59 57
}; 60 58 };
61 59
62 60
63 61
$scope.saveChanges = function () { 64 62 $scope.saveChanges = function () {
65 63
66 64
var myCard = { 67 65 var myCard = {
'text': $('#edit-card-input').text(), 68 66 'text': $('#edit-card-input').text(),
'mask': $scope.editCardBlanks, 69 67 'mask': $scope.editCardBlanks,
}; 70 68 };
scripts/HelpController.js View file @ 30f54ec
angular.module('flashy.HelpController', ['ui.router']). 1 1 angular.module('flashy.HelpController', ['ui.router']).
2 2
controller('HelpController', ['$scope', '$state', '$http', '$timeout', 'UserService', 3 3 controller('HelpController', ['$scope', '$state', '$http', '$timeout', 'UserService',
function($scope, $state, $http, $timeout, UserService) { 4 4 function($scope, $state, $http, $timeout, UserService) {
$scope.toggleContent = function(event, index) { 5 5 $scope.toggleContent = function(event, index) {
console.log(event, index); 6 6 console.log(event, index);
7 7
if ($('#content-' + index).hasClass('open')) { // let's close it 8 8 if ($('#content-' + index).hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 9 9 // Note: 250 is duration (ms) of animation
$('#content-' + index).slideUp(250).removeClass('open'); 10 10 $('#content-' + index).slideUp(250).removeClass('open');
} else { // let'd open it 11 11 } else { // let'd open it
$('#content-' + index).slideDown(250).addClass('open'); 12 12 $('#content-' + index).slideDown(250).addClass('open');
} 13 13 }
14 14
// event.currentTarget 15 15 // event.currentTarget
}; 16 16 };
17 17
$scope.closeContent = function(event) { 18 18 $scope.closeContent = function(event) {
19 19
}; 20 20 };
21 21
// JSON OF FAQ ENTRIES 22 22 // JSON OF FAQ ENTRIES
$scope.entries = [ 23 23 $scope.entries = [
{ 24 24 {
icon: 'mdi-editor-insert-emoticon small', 25 25 // icon: 'mdi-editor-insert-emoticon small',
question: 'What is Flashy?', 26 26 question: 'What is Flashy?',
answer: '<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.' + 27 27 answer: '<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.' +
'</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live' + 28 28 '</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live' +
" feed. Don't want to contribute cards? That's fine! By adding others' cards to your deck, you" + 29 29 " feed. Don't want to contribute cards? That's fine! By adding others' cards to your deck, you" +
' help identify high-quality cards which should remain at the top of the feed for others to choose.' + 30 30 ' help identify high-quality cards which should remain at the top of the feed for others to choose.' +
'</p><p>Based on the principles of spaced repetition, Flashy also intelligently determines which' + 31 31 '</p><p>Based on the principles of spaced repetition, Flashy also intelligently determines which' +
' cards you are most at risk of forgetting, based on your review history. Receive push ' + 32 32 ' cards you are most at risk of forgetting, based on your review history. Receive push ' +
"notifications on your Android device's Chrome browser without installing any other app," + 33 33 "notifications on your Android device's Chrome browser without installing any other app," +
" and we'll notify you when you have a few cards which need to be reviewed.</p>" 34 34 " and we'll notify you when you have a few cards which need to be reviewed.</p>"
}, 35 35 },
{ 36 36 {
icon: 'mdi-file-cloud-queue small', 37 37 // icon: 'mdi-file-cloud-queue small',
question: 'Does Flashy work outside of UCSD?', 38 38 question: 'Does Flashy work outside of UCSD?',
answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!" 39 39 answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!"
}, 40 40 },
{ 41 41 {
icon: 'mdi-hardware-security small', 42 42 // icon: 'mdi-hardware-security small',
question: 'How do registration and verification work?', 43 43 question: 'How do registration and verification work?',
answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted." 44 44 answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted."
45 },
46 {
47 question: "My question isn't answered above",
48 answer: ' <a href="mailto:or.so.help.me@flashy.cards">Send us an email!</a>'
}]; 45 49 }];
46 50
// Functions 47 51 // Functions
$scope.toggleContent = function(event, index) { 48 52 $scope.toggleContent = function(event, index) {
if ($('#content-' + index).hasClass('open')) { // let's close it 49 53 if ($('#content-' + index).hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 50 54 // Note: 250 is duration (ms) of animation
$('#content-' + index).slideUp(250).removeClass('open'); 51 55 $('#content-' + index).slideUp(250).removeClass('open');
} else { // let's open it 52 56 } else { // let's open it
$('#content-' + index).slideDown(250).addClass('open'); 53 57 $('#content-' + index).slideDown(250).addClass('open');
} 54 58 }
}; 55 59 };
56 60
$scope.expandAllContent = function() { 57 61 $scope.expandAllContent = function() {
for (var i = 0; i < $scope.entries.length; i++) { 58 62 for (var i = 0; i < $scope.entries.length; i++) {
$('#content-' + i).slideDown(0).addClass('open'); 59 63 $('#content-' + i).slideDown(0).addClass('open');
} 60 64 }
}; 61 65 };
62 66
scripts/LoginController.js View file @ 30f54ec
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
7 7
if (UserService.isLoggedIn()) { 8 8 if (UserService.isLoggedIn()) {
console.log('logged in already'); 9 9 console.log('logged in already');
$state.go('addclass'); 10 10 UserService.redirectToDefaultState($state);
} 11 11 }
$scope.uniqueError = false; 12 12 $scope.uniqueError = false;
$scope.loginError = false; 13 13 $scope.loginError = false;
$scope.login = function(email, password) { 14 14 $scope.login = function(email, password) {
$http.post('/api/login/', JSON.stringify({ 15 15 $http.post('/api/login/', JSON.stringify({
'email': email, 16 16 'email': email,
'password': password 17 17 'password': password
})). 18 18 })).
success(function(data) { 19 19 success(function(data) {
UserService.login(data); 20 20 UserService.login(data);
if (angular.isDefined($scope.returnToState)) 21 21 if (angular.isDefined($scope.returnToState))
$state.go($scope.returnToState.name, $scope.returnToStateParams); 22 22 $state.go($scope.returnToState.name, $scope.returnToStateParams);
else 23 23 else
UserService.redirectToDefaultState($state); 24 24 UserService.redirectToDefaultState($state);
}). 25 25 }).
error(function(data, status, header, config) { 26 26 error(function(data, status, header, config) {
if (data.detail) { // assume 'invalid email or pass' 27 27 if (data.detail) { // assume 'invalid email or pass'
$scope.loginError = true; 28 28 $scope.loginError = true;
} 29 29 }
console.log(data); 30 30 console.log(data);
}); 31 31 });
}; 32 32 };
$scope.signUp = function(email, password) { 33 33 $scope.signUp = function(email, password) {
$http.post('/api/register/', JSON.stringify({ 34 34 $http.post('/api/register/', JSON.stringify({
'email': email, 35 35 'email': email,
'password': password 36 36 'password': password
})). 37 37 })).
success(function(data) { 38 38 success(function(data) {
UserService.login(data); 39 39 UserService.login(data);
if (angular.isDefined($scope.returnToState)) 40 40 if (angular.isDefined($scope.returnToState))
$state.go($scope.returnToState.name, $scope.returnToStateParams); 41 41 $state.go($scope.returnToState.name, $scope.returnToStateParams);
else $state.go('addclass'); 42 42 else $state.go('addclass');
43 43
}). 44 44 }).
error(function(data, status, headers, config) { 45 45 error(function(data, status, headers, config) {
console.log(data.email); 46 46 console.log(data.email);
if (data.email == 'This field is required.') { 47 47 if (data.email == 'This field is required.') {
$scope.invalid = true; 48 48 $scope.invalid = true;
$scope.uniqueError = false; 49 49 $scope.uniqueError = false;
} else if (data.email == 'This field must be unique.') { 50 50 } else if (data.email == 'This field must be unique.') {
// assume 'email not unique' error 51 51 // assume 'email not unique' error
$scope.uniqueError = true; 52 52 $scope.uniqueError = true;
$scope.invalid = false; 53 53 $scope.invalid = false;
} 54 54 }
console.log(data); 55 55 console.log(data);
}); 56 56 });
57 57
}; 58 58 };
$scope.triggerPasswordReset = function() { 59 59 $scope.triggerPasswordReset = function() {
$state.go('requestpasswordreset'); 60 60 $state.go('requestpasswordreset');
}; 61 61 };
$(document).ready(function() { 62 62 $(document).ready(function() {
$('ul.tabs').tabs(); 63 63 $('ul.tabs').tabs();
scripts/StudyController.js View file @ 30f54ec
angular.module('flashy.StudyController', ['ui.router']). 1 1 angular.module('flashy.StudyController', ['ui.router']).
2 2
controller('StudyController', ['$scope', '$stateParams', '$state', '$http', 'UserService', 3 3 controller('StudyController', function($scope, $stateParams, $state, $http, UserService, Flashcard) {
function($scope, $stateParams, $state, $http, UserService) { 4
console.log('Flashy study controller content in this file. also hell0'); 5
6 4
$(document).ready(function() { 7 5 $('.datepicker').pickadate({
$('.datepicker').pickadate({ 8 6 selectMonths: true, // Creates a dropdown to control month
selectMonths: true, // Creates a dropdown to control month 9 7 selectYears: 15 // Creates a dropdown of 15 years to control year
selectYears: 15 // Creates a dropdown of 15 years to control year 10 8 });
}); 11
12 9
$('select').material_select(); 13 10 $('select').material_select();
14 11
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 15 12 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 16 13 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 17 14 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background 18 15 opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration 19 16 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 20 17 out_duration: 200, // Transition out duration
ready: function() { alert('Ready'); }, // Callback for Modal open 21 18 ready: function() {
complete: function() { alert('Closed'); } // Callback for Modal close 22 19 alert('Ready');
} 23 20 }, // Callback for Modal open
); 24 21 complete: function() {
22 alert('Closed');
23 } // Callback for Modal close
24 }
25 );
25 26
// Open by default 26 27 // Open by default
$('#content-x').slideDown(250).addClass('open'); 27 28 $('#content-x').slideDown(250).addClass('open');
29 $('#content-dateselection').slideDown(250).addClass('open');
28 30
// JQuery range slider initialization 29 31 // JQuery range slider initialization
/* 30 32 /*
$(function() { 31 33 $(function() {
$( "#slider-range" ).slider({ 32 34 $( "#slider-range" ).slider({
range: true, 33 35 range: true,
min: 0, 34 36 min: 0,
max: 500, 35 37 max: 500,
values: [ 75, 300 ], 36 38 values: [ 75, 300 ],
slide: function( event, ui ) { 37 39 slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 38 40 $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
} 39 41 }
}); 40 42 });
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + 41 43 $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) ); 42 44 " - $" + $( "#slider-range" ).slider( "values", 1 ) );
}); 43 45 });
*/ 44 46 */
45 47
$('#start-date').val('2015-03-15'); 46 48 $('#start-date').val('2015-03-15');
$('#end-date').val('2015-06-12'); 47 49 $('#end-date').val('2015-06-12');
}); 48
49 50
sectionId = $stateParams.sectionId; 50 51 sectionId = $stateParams.sectionId;
$scope.UserService = UserService; 51 52 $scope.UserService = UserService;
52 53
$scope.quiz = null; // The received FlashcardQuiz object. 53 54 $scope.quiz = null; // The received FlashcardQuiz object.
$scope.cardCount = 0; // Keeps track of cards in a study session. 54 55 $scope.cardCount = 0; // Keeps track of cards in a study session.
$scope.hasBlanks = true; // Whether current $scope.quiz has blanks. 55 56 $scope.hasBlanks = true; // Whether current $scope.quiz has blanks.
$scope.inResultsModal = false; // Whether user is @ results modal. 56 57 $scope.inResultsModal = false; // Whether user is @ results modal.
57 58
console.log('user sections', $scope.UserService.getUserData().sections); 58 59 console.log('user sections', $scope.UserService.getUserData().sections);
59 60
/* Sets current study class to the one passed in (y) */ 60 61 /* Sets current study class to the one passed in (y) */
$scope.toggleSectionToStudy = function(id) { 61 62 $scope.toggleSectionToStudy = function(id) {
console.log('toggle sect', id); 62 63 console.log('toggle sect', id);
$scope.sectionToStudy = id; 63 64 if ($scope.sectionToStudy == id) $scope.sectionToStudy = null;
65 else $scope.sectionToStudy = id;
}; 64 66 };
65 67
/* Opens or closes content collapsible */ 66 68 /* Opens or closes content collapsible */
$scope.toggleContent = function(event, index) { 67 69 $scope.toggleContent = function(event, index) {
if ($('#content-x').hasClass('open')) { // let's close it 68 70 if ($('#content-x').hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 69 71 // Note: 250 is duration (ms) of animation
$('#content-x').slideUp(250).removeClass('open'); 70 72 $('#content-x').slideUp(250).removeClass('open');
} else { // let's open it 71 73 } else { // let's open it
$('#content-x').slideDown(250).addClass('open'); 72 74 $('#content-x').slideDown(250).addClass('open');
} 73 75 }
}; 74 76 };
75 77
$scope.quizModalFetch = function() { 76 78 $scope.quizModalFetch = function() {
$('#quizup--question').openModal(); 77 79 $('#quizup--question').openModal();
$('#answer').focus(); 78 80 $('#answer').focus();
}; 79 81 };
$scope.quizModalClose = function() { 80 82 $scope.quizModalClose = function() {
$('#quizup--question').closeModal(); 81 83 $('#quizup--question').closeModal();
}; 82 84 };
83 85
$scope.resultModalFetch = function() { 84 86 $scope.resultModalFetch = function() {
$('#quizup--result').openModal(); 85 87 $('#quizup--result').openModal();
}; 86 88 };
$scope.resultModalClose = function() { 87 89 $scope.resultModalClose = function() {
$('#quizup--result').closeModal(); 88 90 $('#quizup--result').closeModal();
}; 89 91 };
90 92
/* Fetches the quiz to display to user 91 93 /* Fetches the quiz to display to user
* // TODO Hella work to be done, especially on dates regards!!! 92 94 * // TODO Hella work to be done, especially on dates regards!!!
// FIXME e.g. date checks, eTC ETC the date range is supposed to be 93 95 // FIXME e.g. date checks, eTC ETC the date range is supposed to be
* 3/31 to 6/12/2015 94 96 * 3/31 to 6/12/2015
*/ 95 97 */
$scope.fetchQuiz = function() { 96 98 $scope.fetchQuiz = function() {
console.log('fetching quiz...'); 97 99 console.log('fetching quiz...');
// Interpret chosen section. 98
var section = []; 99
if ($scope.sectionToStudy != null) { 100
section = [$scope.sectionToStudy]; 101
} 102
103 100
// Interpret chosen dates. 104 101 // Interpret chosen dates.
//console.log('startdate:', new Date($('#start-date').val()+'T00:00:00Z')); 105 102 //console.log('startdate:', new Date($('#start-date').val()+'T00:00:00Z'));
//console.log('enddate:', $('#end-date').val() + 'T00:00:00Z'); 106 103 //console.log('enddate:', $('#end-date').val() + 'T00:00:00Z');
107 104
//TODO: datetime range check YO!!! 108 105 //TODO: datetime range check YO!!!
109 106
var start = new Date($('#start-date').val()); 110 107 var start = new Date($('#start-date').val());
var end = new Date($('#end-date').val()); 111 108 var end = new Date($('#end-date').val());
var studyRequest = null; 112
113 109
console.log($('#start-date').val()); 114 110 console.log($('#start-date').val());
// Time to get quiz... 115 111 // Time to get quiz...
/* 116 112 /*
if ($('#start-date').val() == null || $('#end-date').val() == null) { 117 113 if ($('#start-date').val() == null || $('#end-date').val() == null) {
studyRequest = { 118 114 studyRequest = {
'sections': section 119 115 'sections': section
}; 120 116 };
} else { 121 117 } else {
studyRequest = { 122 118 studyRequest = {
'sections': section, 123 119 'sections': section,
'material_date_begin': start, 124 120 'material_date_begin': start,
'material_date_end': end 125 121 'material_date_end': end
}; 126 122 };
} 127 123 }
*/ 128 124 */
studyRequest = { 129
'sections': section 130
}; 131
132 125
$http.post('/api/study/', studyRequest). 133 126 studyRequest = {};
success(function(data) { 134 127 if ($scope.sectionToStudy) studyRequest.sections = [$scope.sectionToStudy];
console.log('Fetched card:', data); 135
$scope.quiz = data; 136
console.log('fetch mask length:', data.mask.length == 0); 137
138 128
// If the card has no blanks 139 129 $http.post('/api/study/', studyRequest).
if (data.mask.length == 0) { 140 130 success(function(data) {
$scope.text0 = data.text; 141 131 data = new Flashcard(data);
$scope.text1 = ''; 142 132 console.log('Fetched card:', data);
$scope.textblank = ''; 143 133 $scope.quiz = data;
$scope.hasBlanks = false; 144
} else { // Blank exists! :-) 145
$scope.text0 = data.text.slice(0, data.mask[0]); 146
$scope.text1 = data.text.slice(data.mask[1]); 147
$scope.textblank = data.text.slice(data.mask[0], data.mask[1]); 148
$scope.hasBlanks = true; 149
} 150
151 134
$scope.cardCount += 1; 152 135 // If the card has no blanks
$scope.quizModalFetch(); 153 136 if (data.mask.length == 0) {
}).error(function(err) { 154 137 $scope.text0 = data.text;
console.log('Fetch Error'); 155 138 $scope.text1 = '';
}); 156 139 $scope.textblank = '';
140 $scope.hasBlanks = false;
141 } else { // Blank exists! :-)
142 $scope.text0 = data.text.slice(0, data.mask[0]);
143 $scope.text1 = data.text.slice(data.mask[1]);
144 $scope.textblank = data.text.slice(data.mask[0], data.mask[1]);
145 $scope.hasBlanks = true;
146 }
147
148 $scope.cardCount += 1;
149 $scope.quizModalFetch();
150
151 }).error(function(err) {
152 console.log('Fetch Error');
153 });
}; 157 154 };
158 155
/* Transitions from the user input to the results modal */ 159 156 /* Transitions from the user input to the results modal */
$scope.sendAnswer = function(ans) { 160 157 $scope.sendAnswer = function(ans) {
console.log('my answer', ans); 161 158 console.log('my answer', ans);
//Answer sending 162 159 //Answer sending
if (ans != '') { 163 160 if (ans != '') {
var quizAns = { 164 161 var quizAns = {
'pk': $scope.quiz.pk, 165 162 'pk': $scope.quiz.pk,
'response': ans 166 163 'response': ans
}; 167 164 };
168 165
$http.patch('/api/study/' + $scope.quiz.pk, quizAns). 169 166 $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
success(function(data) { 170 167 success(function(data) {
$scope.quizModalClose(); 171 168 $scope.quizModalClose();
$scope.resultModalFetch(); 172 169 $scope.resultModalFetch();
$scope.inResultsModal = true; 173 170 $scope.inResultsModal = true;
}).error(function(err) { 174 171 }).error(function(err) {
console.log('Fetch Error'); 175 172 console.log('Fetch Error');
}); 176 173 });
} else { 177 174 } else {
console.log('NO ANSWER, NO GO!'); 178 175 console.log('NO ANSWER, NO GO!');
} 179 176 }
}; 180 177 };
181 178
$scope.sendCorrectness = function(correctness) { 182 179 $scope.sendCorrectness = function(correctness) {
var quizAns = { 183 180 var quizAns = {
'pk': $scope.quiz.pk, 184 181 'pk': $scope.quiz.pk,
'correct': correctness 185 182 'correct': correctness
}; 186 183 };
187 184
$http.patch('/api/study/' + $scope.quiz.pk, quizAns). 188 185 $http.patch('/api/study/' + $scope.quiz.pk, quizAns).
success(function(data) { 189 186 success(function(data) {
console.log('Fetched card:', data); 190 187 console.log('Fetched card:', data);
$scope.resultModalClose(); 191 188 $scope.resultModalClose();
$scope.fetchQuiz(); 192 189 $scope.fetchQuiz();
$scope.answer = ''; // reset answer 193 190 $scope.answer = ''; // reset answer
}).error(function(err) { 194 191 }).error(function(err) {
console.log('Fetch Error'); 195 192 console.log('Fetch Error');
}); 196 193 });
$scope.inResultsModal = false; 197 194 $scope.inResultsModal = false;
}; 198 195 };
199 196
$(document).keydown(function(e) { 200 197 $(document).keydown(function(e) {
var keyed = e.which; 201 198 var keyed = e.which;
if ($scope.inResultsModal) { 202 199 if ($scope.inResultsModal) {
if (keyed == 89) { // 'Y' keydown 203 200 if (keyed == 89) { // 'Y' keydown
$scope.sendCorrectness(true); 204 201 $scope.sendCorrectness(true);
} else if (keyed == 78) { // 'N' keydown 205 202 } else if (keyed == 78) { // 'N' keydown
$scope.sendCorrectness(false); 206 203 $scope.sendCorrectness(false);
} 207 204 }
} 208 205 }
}); 209 206 });
210 207
211 208
/* OLD STUFF :in case you still neeed it */ 212 209 /* OLD STUFF :in case you still neeed it */
// Flashcard content 213 210 // Flashcard content
$scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk '; 214 211 $scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk ';
//single card 215 212 //single card
$scope.samples = 216 213 $scope.samples =
{ 217 214 {
'name': 'lol', 218 215 'name': 'lol',
'text': 'sample text here 111111 woo hoo I think it works', 219 216 'text': 'sample text here 111111 woo hoo I think it works',
'mask': [[0, 6], [16, 23]] 220 217 'mask': [[0, 6], [16, 23]]
}; 221 218 };
222 219
// get text to display as array 223 220 // get text to display as array
$scope.displayText = []; 224 221 $scope.displayText = [];
// get answers to blanks as array 225 222 // get answers to blanks as array
$scope.blankText = []; 226 223 $scope.blankText = [];
var start = 0; // where to start next string break 227 224 var start = 0; // where to start next string break
for (var i = 0; i < $scope.samples.mask.length; i++) { 228 225 for (var i = 0; i < $scope.samples.mask.length; i++) {
$scope.displayText.push($scope.samples.text.substring(start, $scope.samples.mask[i][0])); 229 226 $scope.displayText.push($scope.samples.text.substring(start, $scope.samples.mask[i][0]));
$scope.blankText.push($scope.samples.text.substring($scope.samples.mask[i][0], $scope.samples.mask[i][1])); 230 227 $scope.blankText.push($scope.samples.text.substring($scope.samples.mask[i][0], $scope.samples.mask[i][1]));
start = $scope.samples.mask[i][1]; 231 228 start = $scope.samples.mask[i][1];
} 232 229 }
if (start != $scope.samples.mask.length - 1) 233 230 if (start != $scope.samples.mask.length - 1)
$scope.displayText.push($scope.samples.text.substring(start)); 234 231 $scope.displayText.push($scope.samples.text.substring(start));
235 232
// user entered responses as array 236 233 // user entered responses as array
$scope.blank = []; 237 234 $scope.blank = [];
} 238 235 }
]); 239 236 );
240 237
styles/flashy.css View file @ 30f54ec
๏ปฟ.no-user-select { 1 1 ๏ปฟ.no-user-select {
-moz-user-select: none; 2 2 -moz-user-select: none;
-webkit-user-select: none; 3 3 -webkit-user-select: none;
-ms-user-select: none; 4 4 -ms-user-select: none;
user-select: none; 5 5 user-select: none;
} 6 6 }
7 7
.angucomplete-dropdown { 8 8 .angucomplete-dropdown {
border-color: #ececec; 9 9 border-color: #ececec;
border-width: 1px; 10 10 border-width: 1px;
border-style: solid; 11 11 border-style: solid;
border-radius: 2px; 12 12 border-radius: 2px;
/*width: 250px;*/ 13 13 /*width: 250px;*/
padding: 6px; 14 14 padding: 6px;
cursor: pointer; 15 15 cursor: pointer;
z-index: 9999; 16 16 z-index: 9999;
position: absolute; 17 17 position: absolute;
/*top: 32px; 18 18 /*top: 32px;
left: 0px; 19 19 left: 0px;
*/ 20 20 */
margin-top: -6px; 21 21 margin-top: -6px;
background-color: #ffffff; 22 22 background-color: #ffffff;
} 23 23 }
24 24
.angucomplete-description { 25 25 .angucomplete-description {
font-size: 14px; 26 26 font-size: 14px;
} 27 27 }
28 28
.angucomplete-row { 29 29 .angucomplete-row {
padding: 5px; 30 30 padding: 5px;
color: #000000; 31 31 color: #000000;
margin-bottom: 4px; 32 32 margin-bottom: 4px;
clear: both; 33 33 clear: both;
} 34 34 }
35 35
.angucomplete-selected-row { 36 36 .angucomplete-selected-row {
background-color: #aaaaff; 37 37 background-color: #aaaaff;
} 38 38 }
39 39
.dropdown-content { 40 40 .dropdown-content {
z-index: 1000; 41 41 z-index: 1000;
} 42 42 }
43 43
/*.container .row {*/ 44 44 /*.container .row {*/
/*margin-left: 0;*/ 45 45 /*margin-left: 0;*/
/*margin-right: 0;*/ 46 46 /*margin-right: 0;*/
/*}*/ 47 47 /*}*/
48 48
/* Flashcard directive css */ 49 49 /* Flashcard directive css */
.card { 50 50 .card {
word-wrap: break-word; 51 51 word-wrap: break-word;
} 52 52 }
53 53
.card.flashy.in-deck { 54 54 .card.flashy.in-deck {
/*border: 3px solid rgba(0, 184, 76, 0.4);*/ 55 55 /*border: 3px solid rgba(0, 184, 76, 0.4);*/
} 56 56 }
57 57
.card.flashy { 58 58 .card.flashy {
z-index: 0; 59 59 z-index: 0;
border: 0px solid rgba(0, 184, 76, 0.4); 60 60 border: 0px solid rgba(0, 184, 76, 0.4);
background-color: #fff; 61 61 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 62 62 font-family: 'Titillium Web', sans-serif;
float: left; 63 63 float: left;
text-align: center; 64 64 text-align: center;
margin: 6px; 65 65 margin: 6px;
position: relative; 66 66 position: relative;
} 67 67 }
68 68
.card-overlay { 69 69 .card-overlay {
cursor: pointer; 70 70 cursor: pointer;
left: 0; 71 71 left: 0;
opacity: 0; 72 72 opacity: 0;
position: absolute; 73 73 position: absolute;
/*pointer-events: none;*/ 74 74 /*pointer-events: none;*/
top: 0; 75 75 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s, 76 76 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 77 77 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 78 78 /* animation effect to appear on off-hover */
visibility: hidden; 79 79 visibility: hidden;
height: 100%; 80 80 height: 100%;
width: 100%; 81 81 width: 100%;
} 82 82 }
83 83
.card-overlay i { 84 84 .card-overlay i {
color: #FFF; 85 85 color: #FFF;
left: 50%; 86 86 left: 50%;
87 position: absolute;
top: 50%; 87 88 top: 50%;
transform: translate(-50%, -50%); 88 89 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 89 90 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 90 91 }
91 92
.center-me:hover i { 92 93 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 93 94 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 94 95 }
95 96
.card:hover .card-overlay { 96 97 .card:hover .card-overlay {
opacity: 1.0; 97 98 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 98 99 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 99 100 visibility: visible;
} 100 101 }
101 102
.top-box { 102 103 .top-box {
background-color: rgba(0, 184, 76, 0.4); 103 104 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 104 105 height: 65%;
position: relative; 105 106 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 106 107 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 107 108 width: 100%;
} 108 109 }
109 110
.top-box:hover { 110 111 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 111 112 background-color: rgba(0, 184, 76, 0.5);
} 112 113 }
113 114
.bottom-box { 114 115 .bottom-box {
height: 35%; 115 116 height: 35%;
width: 100%; 116 117 width: 100%;
} 117 118 }
118 119
.left-box { 119 120 .left-box {
background-color: rgba(119, 146, 255, 0.5); 120 121 background-color: rgba(119, 146, 255, 0.5);
float: left; 121 122 float: left;
position: relative; 122 123 position: relative;
height: 100%; 123 124 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 124 125 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 125 126 width: 50%;
} 126 127 }
127 128
.left-box:hover { 128 129 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 129 130 background-color: rgba(119, 146, 255, 0.6);
} 130 131 }
131 132
.right-box { 132 133 .right-box {
background-color: rgba(255, 62, 76, 0.5); 133 134 background-color: rgba(255, 62, 76, 0.5);
float: right; 134 135 float: right;
height: 100%; 135 136 height: 100%;
position: relative; 136 137 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 137 138 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 138 139 width: 50%;
} 139 140 }
140 141
.right-box:hover { 141 142 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 142 143 background-color: rgba(255, 62, 76, 0.6);
} 143 144 }
144 145
.center-me { 145 146 .center-me {
height: 100%; 146 147 height: 100%;
margin: 0 auto; 147 148 margin: 0 auto;
text-align: center; 148 149 text-align: center;
vertical-align: middle; 149 150 vertical-align: middle;
width: 100%; 150 151 width: 100%;
} 151 152 }
152 153
/* Card Colors */ 153 154 /* Card Colors */
.card.flashy.cardcolor-blue div { 154 155 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 155 156 background-color: rgba(119, 158, 203, 0.5) !important;
} 156 157 }
157 158
.cardcolor-red div { 158 159 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 159 160 background-color: rgba(255, 105, 97, 0.5) !important;
} 160 161 }
161 162
.cardcolor-green div { 162 163 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 163 164 background-color: rgba(119, 190, 119, 0.5) !important;
} 164 165 }
165 166
.cardcolor-yellow div { 166 167 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 167 168 background-color: rgba(253, 253, 150, 0.5) !important;
} 168 169 }
169 170
/* Card Colors END */ 170 171 /* Card Colors END */
171 172
.modal.bottom-sheet { 172 173 .modal.bottom-sheet {
max-width: 600px; 173 174 max-width: 600px;
margin-left: auto; 174 175 margin-left: auto;
margin-right: auto; 175 176 margin-right: auto;
} 176 177 }
177 178
.feed-modal-input { 178 179 .feed-modal-input {
background-color: #D3D3D3; 179 180 background-color: #D3D3D3;
border-style: solid; 180 181 border-style: solid;
border-width: 1px; 181 182 border-width: 1px;
box-shadow: 2px 2px 5px #888888; 182 183 box-shadow: 2px 2px 5px #888888;
height: 24px; 183 184 height: 24px;
} 184 185 }
185 186
.input-field label { 186 187 .input-field label {
color: #00b3c2; 187 188 color: #00b3c2;
} 188 189 }
189 190
/* label focus color */ 190 191 /* label focus color */
.input-field input[type]:focus + label { 191 192 .input-field input[type]:focus + label {
color: #00b3c2; 192 193 color: #00b3c2;
} 193 194 }
194 195
/* label underline focus color */ 195 196 /* label underline focus color */
.input-field input[type]:focus { 196 197 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 197 198 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 198 199 box-shadow: 0 1px 0 0 #b388ff;
} 199 200 }
200 201
/* valid color */ 201 202 /* valid color */
.input-field input[type].valid { 202 203 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 203 204 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 204 205 box-shadow: 0 1px 0 0 #673ab7;
} 205 206 }
206 207
/* invalid color */ 207 208 /* invalid color */
.input-field input[type].invalid { 208 209 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 209 210 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 210 211 box-shadow: 0 1px 0 0 #673ab7;
} 211 212 }
212 213
/* icon prefix focus color */ 213 214 /* icon prefix focus color */
.input-field .prefix.active { 214 215 .input-field .prefix.active {
color: #b388ff; 215 216 color: #b388ff;
} 216 217 }
217 218
/* label focus color */ 218 219 /* label focus color */
.input-field textarea[type]:focus + label { 219 220 .input-field textarea[type]:focus + label {
color: #b388ff; 220 221 color: #b388ff;
} 221 222 }
222 223
/* label underline focus color */ 223 224 /* label underline focus color */
.input-field textarea[type]:focus { 224 225 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 225 226 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 226 227 box-shadow: 0 1px 0 0 #b388ff;
} 227 228 }
228 229
body { 229 230 body {
background-color: #e8e8e8; 230 231 background-color: #e8e8e8;
overflow-x: hidden; 231 232 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 232 233 font-family: 'Titillium Web', sans-serif;
height: 100%; 233 234 height: 100%;
} 234 235 }
235 236
html { 236 237 html {
background: transparent; 237 238 background: transparent;
height: 100%; 238 239 height: 100%;
} 239 240 }
240 241
.btn { 241 242 .btn {
background-color: #00b3c2; 242 243 background-color: #00b3c2;
} 243 244 }
244 245
.btn:hover { 245 246 .btn:hover {
background-color: #0097cb; 246 247 background-color: #0097cb;
} 247 248 }
248 249
.btn-floating { 249 250 .btn-floating {
background-color: #00b3c2; 250 251 background-color: #00b3c2;
} 251 252 }
252 253
.btn-floating:hover { 253 254 .btn-floating:hover {
background-color: #0097cb; 254 255 background-color: #0097cb;
} 255 256 }
256 257
.toggley { 257 258 .toggley {
float: left; 258 259 float: left;
margin: 10px; 259 260 margin: 10px;
} 260 261 }
261 262
#logo-container { 262 263 #logo-container {
margin-bottom: 18px; 263 264 margin-bottom: 18px;
} 264 265 }
265 266
#lean-overlay { 266 267 #lean-overlay {
display: none !important; 267 268 display: none !important;
} 268 269 }
269 270
nav { 270 271 nav {
background-color: #d2143f !important; 271 272 background-color: #d2143f !important;
} 272 273 }
273 274
main { 274 275 main {
min-height: 145px; 275 276 min-height: 145px;
} 276 277 }
277 278
.side-nav .collapsible-body { 278 279 .side-nav .collapsible-body {
width: 100%; 279 280 width: 100%;
} 280 281 }
281 282
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 282 283 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 283 284 background-color: #00b3c2;
} 284 285 }
285 286
nav .button-collapse { 286 287 nav .button-collapse {
margin: 0 20px; 287 288 margin: 0 20px;
} 288 289 }
289 290
.collapsible-body i { 290 291 .collapsible-body i {
font-size: 1rem !important; 291 292 font-size: 1rem !important;
} 292 293 }
293 294
.tabs .tab a { 294 295 .tabs .tab a {
color: #00b3c2; 295 296 color: #00b3c2;
} 296 297 }
297 298
.tabs .tab a:hover { 298 299 .tabs .tab a:hover {
color: #0041dd; 299 300 color: #0041dd;
} 300 301 }
301 302
.tabs .indicator { 302 303 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 303 304 border-bottom: 1px solid #00b3c2;
} 304 305 }
305 306
h2 { 306 307 h2 {
text-align: center; 307 308 text-align: center;
} 308 309 }
309 310
md-content.md-default-theme { 310 311 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 311 312 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 312 313 border: 1px solid #fff;
} 313 314 }
314 315
/*#sidenav-overlay { 315 316 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 316 317 background-color: rgba(0, 0, 0, 0) !important;
}*/ 317 318 }*/
.card-content { 318 319 .card-content {
width: 100%; 319 320 width: 100%;
} 320 321 }
321 322
.valign-wrapper { 322 323 .valign-wrapper {
height: 100%; 323 324 height: 100%;
} 324 325 }
325 326
/*.toast { 326 327 /*.toast {
height: 100px; 327 328 height: 100px;
width: 300px; 328 329 width: 300px;
line-height: 20px; 329 330 line-height: 20px;
max-height: 100px; 330 331 max-height: 100px;
word-wrap: normal; 331 332 word-wrap: normal;
}*/ 332 333 }*/
333 334
[ng-cloak] { 334 335 [ng-cloak] {
display: none !important; 335 336 display: none !important;
} 336 337 }
337 338
.cardColumn { 338 339 .cardColumn {
float: left; 339 340 float: left;
} 340 341 }
341 342
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */ 342 343 /* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter, 343 344 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 344 345 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 345 346 .repeated-card.ng-leave,
.repeated-card.ng-leave > flashcard > .card, 346 347 .repeated-card.ng-leave > flashcard > .card,
.repeated-card.ng-move, 347 348 .repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card { 348 349 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 349 350 -webkit-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
-moz-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 350 351 -moz-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
-o-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 351 352 -o-transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 352 353 transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
353 354
position: relative; 354 355 position: relative;
} 355 356 }
356 357
.card.flashy.card-moveUp { 357 358 .card.flashy.card-moveUp {
-webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 358 359 -webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
-moz-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 359 360 -moz-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
-o-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 360 361 -o-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 361 362 transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
//margin-top: 6px; 362 363 / / margin-top : 6 px;
position: relative; 363 364 position: relative;
} 364 365 }
365 366
.card.flashy.card-moveDown { 366 367 .card.flashy.card-moveDown {
z-index: 100; 367 368 z-index: 100;
-webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 368 369 -webkit-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
-moz-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 369 370 -moz-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
-o-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 370 371 -o-transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 371 372 transition: .8s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
//margin-top: 6px; 372 373 / / margin-top : 6 px;
position: relative; 373 374 position: relative;
} 374 375 }
375 376
/* 376 377
.repeated-card.ng-enter > flashcard > .card { 377 378 .repeated-card.ng-enter > flashcard > .card {
z-index: 1; 378 379 z-index: 1;
top: -236px; 379 380 top: -236px;
margin-bottom: -230px; 380 381 margin-bottom: -230px;
} 381 382 }
382 383
.repeated-card.ng-enter.ng-enter-active > flashcard > .card { 383 384 .repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px; 384 385 top: 0px;
margin-bottom: 6px; 385 386 margin-bottom: 6px;
} 386 387 }
387 388
.repeated-card.ng-leave > flashcard > .card { 388 389 .repeated-card.ng-leave > flashcard > .card {
z-index: -100; 389 390 z-index: -100;
top: 0px; 390 391 top: 0px;
margin-bottom: 6px; 391 392 margin-bottom: 6px;
} 392 393 }
393 394
.repeated-card.ng-leave.ng-leave-active > flashcard > .card { 394 395 .repeated-card.ng-leave.ng-leave-active > flashcard > .card {
z-index: -100; 395 396 z-index: -100;
opacity: 0; 396 397 opacity: 0;
top: -236px; 397 398 top: -236px;
margin-bottom: -230px; 398 399 margin-bottom: -230px;
} 399 400 }
400 401
.repeated-card.ng-move > flashcard > .card { 401
background-color:blue; 402
top: -250px; 403
} 404
405
.repeated-card.ng-move-active > flashcard > .card { 406
top: 0 407
} 408
409
.repeated-card.ng-move > flashcard > .card + div { 410
background-color:red; 411
top: -250px; 412
} 413
414
/* Animation CSS END */ 415 402 /* Animation CSS END */
416 403
.container, .push { 417 404 .container, .push {
height: 4em; 418 405 height: 4em;
} 419 406 }
420 407
#resetPasswordForm { 421 408 #resetPasswordForm {
display: block; 422 409 display: block;
margin-left: auto; 423 410 margin-left: auto;
margin-right: auto; 424 411 margin-right: auto;
} 425 412 }
426 413
#resetPWButton { 427 414 #resetPWButton {
margin-left: auto; 428 415 margin-left: auto;
margin-right: auto; 429 416 margin-right: auto;
display: block; 430 417 display: block;
width: 200px; 431 418 width: 200px;
} 432 419 }
433 420
.study-params { 434 421 .study-params {
background-color: #f6f6f6; 435 422 background-color: #f6f6f6;
height: 100%; 436 423 height: 100%;
overflow: hidden; 437 424 overflow: hidden;
transition: all 1.2s cubic-bezier(0, 0, 0.6, 1); 438 425 transition: all 1.2s cubic-bezier(0, 0, 0.6, 1);
will-change: opacity; 439 426 will-change: opacity;
} 440 427 }
441 428
.fadey.ng-enter { 442 429 .fadey.ng-enter {
opacity: 0.5; 443 430 opacity: 0.5;
transform: translate(-50%, -50%) rotate(90deg); 444 431 transform: translate(-50%, -50%) rotate(90deg);
} 445 432 }
446 433
.fadey.ng-enter-active { 447 434 .fadey.ng-enter-active {
opacity: 1; 448 435 opacity: 1;
transform: translate(-50%, -50%) rotate(0deg); 449 436 transform: translate(-50%, -50%) rotate(0deg);
} 450 437 }
451 438
.fadey.ng-leave { 452 439 .fadey.ng-leave {
opacity: 1; 453 440 opacity: 1;
} 454 441 }
455 442
.fadey.ng-leave-active { 456 443 .fadey.ng-leave-active {
opacity: 0; 457 444 opacity: 0;
} 458 445 }
459 446
/* REPLACEMENT FOR MATERIALIZE ACCORDION/COLLAPSIBLE 460 447 /* REPLACEMENT FOR MATERIALIZE ACCORDION/COLLAPSIBLE
* Refer to HelpController.js and help.html 461 448 * Refer to HelpController.js and help.html
* If enough popularity, will make a directive; Ask rlee if you need help */ 462 449 * If enough popularity, will make a directive; Ask rlee if you need help */
.st-accordion { 463 450 .st-accordion {
background-color: #fff; 464 451 background-color: #fff;
} 465 452 }
466 453
.st-accordion--item { 467 454 .st-accordion--item {
padding: 0 !important; /* override collection padding */ 468 455 padding: 0 !important; /* override collection padding */
} 469 456 }
470 457
.st-accordion--header { 471 458 .st-accordion--header {
border-bottom: 1px solid #ddd; 472 459 border-bottom: 1px solid #ddd;
cursor: pointer; 473 460 cursor: pointer;
padding: 10px; 474 461 padding: 10px;
transition: all 0.2s cubic-bezier(0.2, 0.5, 0.5, 1); 475 462 transition: all 0.2s cubic-bezier(0.2, 0.5, 0.5, 1);
} 476 463 }
477 464
.st-accordion--header:hover { 478 465 .st-accordion--header:hover {
background-color: #eee; 479 466 background-color: #eee;
} 480 467 }
481 468
.st-accordion--header.no-press { 482 469 .st-accordion--header.no-press {
cursor: default; 483 470 cursor: default;
} 484 471 }
472
.st-accordion--header.no-press:hover { 485 473 .st-accordion--header.no-press:hover {
background-color: #fff; 486 474 background-color: #fff;
} 487 475 }
488 476
.st-accordion--content { 489 477 .st-accordion--content {
background-color: rgba(0, 0, 0, 0.03); 490 478 background-color: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid #ddd; 491 479 border-bottom: 1px solid #ddd;
display: none; 492 480 display: none;
padding: 10px 20px; 493 481 padding: 10px 20px;
} 494 482 }
495 483
#new-card-input > b, 496 484 #new-card-input > b,
.card.flashy .card-content > b { 497 485 .card.flashy .card-content > b {
/*font-weight: ;*/ 498 486 /*font-weight: ;*/
border-bottom: 2px solid black; 499 487 border-bottom: 2px solid black;
border-radius: 2px; 500 488 border-radius: 2px;
opacity: 0.5; 501 489 opacity: 0.5;
} 502 490 }
503 491
input.answer { 504 492 input.answer {
font-size: 13pt; 505 493 font-size: 13pt;
float: left; 506
height: inherit; 507 494 height: inherit;
margin: 0 6px; 508 495 margin: 0 6px;
position: relative; 509 496 position: relative;
top: -2px; 510 497 top: -2px;
width: 120px; 511 498 width: 240px;
} 512 499 }
513 500
.quizup h4 { 514 501 .quizup h4 {
margin: 0; 515 502 margin: 0;
} 516 503 }
517 504
505 .quizup.modal {
506 max-height: 86%;
507 }
508
509 .modal.modal-fixed-footer {
510 }
511
.modal .modal-footer .btn { 518 512 .modal .modal-footer .btn {
margin: 6px 5px; 519 513 margin: 6px 5px;
} 520 514 }
521 515
#quizup--result .modal-footer { 522 516 #quizup--result .modal-footer {
text-align: center; 523 517 text-align: center;
} 524 518 }
525 519
.fetch { 526 520 .fetch {
left: 50%; 527 521 left: 50%;
transform: translate(-50%,0); 528 522 transform: translate(-50%, 0);
} 529 523 }
530 524
.card-facade { 531 525 .card-facade {
background-color: #fff; 532 526 background-color: #fff;
border: 0px solid rgba(0, 184, 76, 0.4); 533 527 border: 0px solid rgba(0, 184, 76, 0.4);
float: left; 534 528 float: left;
font-family: 'Titillium Web', sans-serif; 535 529 font-family: 'Titillium Web', sans-serif;
font-size: 120%; 536 530 font-size: 120%;
height: 180px; 537 531 height: 18vw;
532 max-height: 240px;
533 min-height: 180px;
534 left: 50%;
margin-bottom: 0; 538 535 margin-bottom: 0;
text-align: center; 539 536 text-align: center;
width: 300px; 540 537 transform: translate(-50%, 0%);
templates/addclass.html View file @ 30f54ec
<div class="" style="margin-top:32px;"> 1 1 <div class="" style="margin-top:32px;">
<div class="row" style="max-width:800px; width:90%; min-width:512px; margin: 0 auto"> 2 2 <div class="row" style="max-width:800px; width:90%; min-width:512px; margin: 0 auto">
<div class="offset-m2 col m8"> 3 3 <div class="offset-m2 col m8">
<h2 class="header">Add a class</h2> 4 4 <h2 class="header weight on-gray pad-below">ADD A CLASS</h2>
<md-content layout-padding="" layout="column" style="overflow:hidden"> 5 5 <md-content layout-padding="" layout="column" style="overflow:hidden">
6 6
<form ng-submit="$event.preventDefault()"> 7 7 <form ng-submit="$event.preventDefault()">
<div layout="row"> 8 8 <div layout="row">
<md-autocomplete flex="" 9 9 <md-autocomplete flex=""
md-autofocus="true" 10 10 md-autofocus="true"
md-selected-item="selectedItem" 11 11 md-selected-item="selectedItem"
md-search-text="searchText" 12 12 md-search-text="searchText"
md-items="item in trySearch(searchText)" 13 13 md-items="item in trySearch(searchText)"
md-item-text="item.short_name" 14 14 md-item-text="item.short_name"
md-selected-item-change="selectObject(event)" 15 15 md-selected-item-change="selectObject(event)"
md-autoselect="true" 16 16 md-autoselect="true"
> 17 17 >
<md-item-template> 18 18 <md-item-template>
<div layout="row"> 19 19 <div layout="row">
<i ng-show="!item.can_enroll" class="mdi-action-lock" style="margin-right:10px;"></i> 20 20 <i ng-show="!item.can_enroll" class="mdi-action-lock" style="margin-right:10px;"></i>
<i ng-show="item.is_enrolled" class="mdi-action-done" style="margin-right:10px;"></i> 21 21 <i ng-show="item.is_enrolled" class="mdi-action-done" style="margin-right:10px;"></i>
22 22
<div>{{item.short_name}}: {{item.course_title}} 23 23 <div>{{item.short_name}}: {{item.course_title}}
({{item.instructor}}) 24 24 ({{item.instructor}})
</div> 25 25 </div>
<div style="margin-left:auto;text-align:right;padding-left:30px"> 26 26 <div style="margin-left:auto;text-align:right;padding-left:30px">
{{item.lecture_times}} 27 27 {{item.lecture_times}}
</div> 28 28 </div>
</div> 29 29 </div>
</md-item-template> 30 30 </md-item-template>
<md-not-found> 31 31 <md-not-found>
No classes match "{{searchText}}". 32 32 No classes match "{{searchText}}".
</md-not-found> 33 33 </md-not-found>
</md-autocomplete> 34 34 </md-autocomplete>
<button class="btn waves-effect waves-light" 35 35 <button class="btn waves-effect waves-light"
ng-class="(selectedItem && !selectedItem.is_enrolled && selectedItem.can_enroll)?'':'disabled'" 36 36 ng-class="(selectedItem && !selectedItem.is_enrolled && selectedItem.can_enroll)?'':'disabled'"
type="submit" name="add" 37 37 type="submit" name="add"
ng-click="(selectedItem.can_enroll && !selectedItem.is_enrolled)?submit():0">Add 38 38 ng-click="(selectedItem.can_enroll && !selectedItem.is_enrolled)?submit():0">Add
<i class="mdi-content-add right"></i> 39 39 <i class="mdi-content-add right"></i>
</button> 40 40 </button>
</div> 41 41 </div>
42 42
</form> 43 43 </form>
</md-content> 44 44 </md-content>
<div ng-show="(selectedItem && !selectedItem.can_enroll)"> 45 45 <div ng-show="(selectedItem && !selectedItem.can_enroll)">
<h4>Restricted Enrollment</h4> 46 46 <h4 class="weight">Restricted Enrollment</h4>
Enrollment in this section has been restricted at the request of the instructor. Contact your instructor for 47 47 Enrollment in this section has been restricted at the request of the instructor. Contact your instructor for
permission to add this section. 48 48 permission to add this section.
</div> 49 49 </div>
<div ng-show="(selectedItem && selectedItem.is_enrolled)"> 50 50 <div ng-show="(selectedItem && selectedItem.is_enrolled)">
<h4>Already Enrolled</h4> 51 51 <h4 class="weight">Already Enrolled</h4>
You've already enrolled in this section! <a ui-sref="feed({sectionId:selectedItem.id})">Go to Feed</a>. 52 52 You've already enrolled in this section! <a ui-sref="feed({sectionId:selectedItem.id})">Go to Feed</a>.
</div> 53 53 </div>
</div> 54 54 </div>
</div> 55 55 </div>
</div> 56 56 </div>
templates/cardlist.html View file @ 30f54ec
<body> 1 1 <body>
<div class="row"> 2 2 <div class="row">
<a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a> 3 3 <a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a>
4 4
<div class="input-field col s6 right"> 5 5 <div class="input-field col s6 right">
<i class="mdi-action-search prefix"></i> 6 6 <i class="mdi-action-search prefix"></i>
<input id="search" type="text" class="validate" ng-model="searchText"/> 7 7 <input id="search" type="text" class="validate" ng-model="searchText"/>
<label for="search">Search</label> 8 8 <label for="search">Search</label>
</div> 9 9 </div>
</div> 10 10 </div>
11 11
<div class="row"> 12 12 <div class="row">
<form> 13 13 <form>
<div class="col s12"> 14 14 <div class="col s12">
<div class="col s2"> 15 15 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/> 16 16 <input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/>
<label for="weekOneCheck">Week One</label> 17 17 <label for="weekOneCheck">Week One</label>
</div> 18 18 </div>
<div class="col s2"> 19 19 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/> 20 20 <input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/>
<label for="weekTwoCheck">Week Two</label> 21 21 <label for="weekTwoCheck">Week Two</label>
</div> 22 22 </div>
<div class="col s2"> 23 23 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/> 24 24 <input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/>
<label for="weekThreeCheck">Week Three</label> 25 25 <label for="weekThreeCheck">Week Three</label>
</div> 26 26 </div>
<div class="col s2"> 27 27 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/> 28 28 <input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/>
<label for="weekFourCheck">Week Four</label> 29 29 <label for="weekFourCheck">Week Four</label>
</div> 30 30 </div>
<div class="col s2"> 31 31 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/> 32 32 <input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/>
<label for="weekFiveCheck">Week Five</label> 33 33 <label for="weekFiveCheck">Week Five</label>
</div> 34 34 </div>
</div> 35 35 </div>
<div class="col s12"> 36 36 <div class="col s12">
<div class="col s2"> 37 37 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/> 38 38 <input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/>
<label for="weekSixCheck">Week Six</label> 39 39 <label for="weekSixCheck">Week Six</label>
</div> 40 40 </div>
<div class="col s2"> 41 41 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/> 42 42 <input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/>
<label for="weekSevenCheck">Week Seven</label> 43 43 <label for="weekSevenCheck">Week Seven</label>
</div> 44 44 </div>
<div class="col s2"> 45 45 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/> 46 46 <input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/>
<label for="weekEightCheck">Week Eight</label> 47 47 <label for="weekEightCheck">Week Eight</label>
</div> 48 48 </div>
<div class="col s2"> 49 49 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/> 50 50 <input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/>
<label for="weekNineCheck">Week Nine</label> 51 51 <label for="weekNineCheck">Week Nine</label>
</div> 52 52 </div>
<div class="col s2"> 53 53 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/> 54 54 <input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/>
<label for="weekTenCheck">Week Ten</label> 55 55 <label for="weekTenCheck">Week Ten</label>
</div> 56 56 </div>
</div> 57 57 </div>
</form> 58 58 </form>
</div> 59 59 </div>
60 60
<div class="list" style="padding: 0px 25px"> 61 61 <div class="list" style="padding: 0px 25px">
62 <div class="card-panel s12" ng-repeat="week_cards in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num' | toArray: true | orderBy: 'material_week_num'">
63 <table class="bordered hoverable">
64 <thead>
65 <tr>
66 <th data-field="week">Week {{ week_cards.$key }}</th>
67 <th data-field="week" style="width: 50px; min-width: 50px">Day</th>
68 <th data-field="week" style="width: 120px; min-width: 120px">Actions</th>
69 </tr>
70 </thead>
71
72
73 <tbody>
74 <tr ng-repeat="card in week_cards" ng-show="show || !card.is_hidden">
75 <td>
76 <a href="" ng-click="card.unpull()"><i ng-show="card.isInDeck()" class="mdi-action-done small green-text"></i></a>
77 <span ng-bind-html="card | displayCard"></span></td>
78 <td>{{dayofweek(card)}}</td>
79
80 <td>
81 <a href="" class="tooltipped" ng-click="card.pull()" ng-show="!card.isInDeck()" data-position="bottom"
82 data-delay="50" data-tooltip="Add to Deck">
83 <i class="mdi-content-add-circle-outline small"></i></a>
84 <a href="" class="tooltipped" ng-click="card.unpull()" ng-show="card.isInDeck()" data-position="bottom"
85 data-delay="50" data-tooltip="Add to Deck">
86 <i class="mdi-content-remove-circle-outline small"></i></a>
87 <a href="" class="tooltipped" ng-click="card.hide()" ng-show="!card.is_hidden" data-position="bottom"
88 data-delay="50" data-tooltip="Hide">
89 <i class="mdi-action-visibility-off small"></i></a>
90 <a href="" class="tooltipped" ng-click="card.unhide()" ng-show="card.is_hidden" data-position="bottom"
91 data-delay="50" data-tooltip="Unhide">
92 <i class="mdi-action-visibility small"></i></a>
93 <a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag">
94 <i class="mdi-content-flag small"></i></a>
95 </td>
96 </tr>
97 </tbody>
98 </table>
99 </div>
100 </div>
101
102 <!--<div class="list" style="padding: 0px 25px">
<ul class="collection" 62 103 <ul class="collection"
ng-repeat="week_cards in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num' | toArray: true | orderBy: 'material_week_num'"> 63 104 ng-repeat="week_cards in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num' | toArray: true | orderBy: 'material_week_num'">
<li class="collection-header"><h3>Week {{ week_cards.$key }}</h3></li> 64 105 <li class="collection-header"><h3>Week {{ week_cards.$key }}</h3></li>
<li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" 65 106 <li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards"
ng-show="show || !card.is_hidden"> 66 107 ng-show="show || !card.is_hidden">
<i ng-show="card.isInDeck()" class="mdi-action-done small green-text"></i> 67 108 <i ng-show="card.isInDeck()" class="mdi-action-done small green-text"></i>
<span ng-bind-html="card | displayCard"></span> 68 109 <span ng-bind-html="card | displayCard"></span>
<span class="badge">{{dayofweek(card)}}</span> 69 110 <span class="badge">{{dayofweek(card)}}</span>
70 111
<p class="right-align" ng-show="expand"> 71 112 <p class="right-align" ng-show="expand">
<a href="" class="tooltipped" ng-click="card.pull()" ng-show="!card.isInDeck()" data-position="bottom" 72 113 <a href="" class="tooltipped" ng-click="card.pull()" ng-show="!card.isInDeck()" data-position="bottom"
data-delay="50" data-tooltip="Add to Deck"> 73 114 data-delay="50" data-tooltip="Add to Deck">
<i class="mdi-content-add-circle-outline small"></i></a> 74 115 <i class="mdi-content-add-circle-outline small"></i></a>
<a href="" class="tooltipped" ng-click="card.unpull()" ng-show="card.isInDeck()" data-position="bottom" 75 116 <a href="" class="tooltipped" ng-click="card.unpull()" ng-show="card.isInDeck()" data-position="bottom"
data-delay="50" data-tooltip="Add to Deck"> 76 117 data-delay="50" data-tooltip="Add to Deck">
<i class="mdi-content-remove-circle-outline small"></i></a> 77 118 <i class="mdi-content-remove-circle-outline small"></i></a>
<a href="" class="tooltipped" ng-click="card.hide()" ng-show="!card.is_hidden" data-position="bottom" 78 119 <a href="" class="tooltipped" ng-click="card.hide()" ng-show="!card.is_hidden" data-position="bottom"
data-delay="50" data-tooltip="Hide"> 79 120 data-delay="50" data-tooltip="Hide">
<i class="mdi-action-visibility-off small"></i></a> 80 121 <i class="mdi-action-visibility-off small"></i></a>
<a href="" class="tooltipped" ng-click="card.unhide()" ng-show="card.is_hidden" data-position="bottom" 81 122 <a href="" class="tooltipped" ng-click="card.unhide()" ng-show="card.is_hidden" data-position="bottom"
data-delay="50" data-tooltip="Unhide"> 82 123 data-delay="50" data-tooltip="Unhide">
<i class="mdi-action-visibility small"></i></a> 83 124 <i class="mdi-action-visibility small"></i></a>
<a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag"> 84 125 <a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag">
<i class="mdi-content-flag small"></i></a> 85 126 <i class="mdi-content-flag small"></i></a>
</p> 86 127 </p>
</li> 87 128 </li>
</ul> 88 129 </ul>
</div> 89 130 </div>-->
90 131
91 132
<div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;"> 92 133 <div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;">
templates/deck.html View file @ 30f54ec
๏ปฟ<!-- Edit Modal --> 1 1 ๏ปฟ<!-- Edit Modal -->
<div id="editModal" class="modal row" style="max-height:none;"> 2 2 <div id="editModal" class="modal row" style="max-height:none;">
<form id="edit-card-form"> 3 3 <form id="edit-card-form">
<div class="modal-content col"> 4 4 <div class="modal-content col">
<div class="row" style="margin-bottom:0"> 5 5 <div class="row" style="margin-bottom:0">
<div class="card cyan-text text-darken-2" 6 6 <div class="card cyan-text text-darken-2"
style="width:300px; height:180px; margin-bottom:0; font-size:120%;"> 7 7 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div class="valign-wrapper"> 8 8 <div class="valign-wrapper">
<div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;" 9 9 <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
class="card-content valign center-align" 10 10 class="card-content valign center-align"
contenteditable select-non-editable="true" ng-change="refreshEditCardInput()"> 11 11 contenteditable select-non-editable="true" ng-change="refreshEditCardInput()">
</div> 12 12 </div>
</div> 13 13 </div>
</div> 14 14 </div>
</div> 15 15 </div>
</div> 16 16 </div>
<div class="col"> 17 17 <div class="col">
<div class="row"> 18 18 <div class="row">
</div> 19 19 </div>
<div class="row"> 20 20 <div class="row">
<button class="btn modal-close" type="submit" ng-click="saveChanges()" 21 21 <button class="btn modal-close" type="submit" ng-click="saveChanges()"
data-position="left" 22 22 data-position="left"
data-delay="50" ng-class="submit_enabled?{}:'disabled'"> 23 23 data-delay="50" ng-class="submit_enabled?{}:'disabled'">
Save Changes 24 24 Save Changes
<i class="mdi-action-done right"></i> 25 25 <i class="mdi-action-done right"></i>
</button> 26 26 </button>
</div> 27 27 </div>
28 28
29 29
<div class="row"> 30 30 <div class="row">
<button class="btn modal-close red" ng-click="discardChanges()" 31 31 <button class="btn modal-close red" ng-click="discardChanges()"
data-position="left" 32 32 data-position="left"
data-delay="50"> 33 33 data-delay="50">
Discard Changes 34 34 Discard Changes
<i class="mdi-content-clear right"></i> 35 35 <i class="mdi-content-clear right"></i>
</button> 36 36 </button>
</div> 37 37 </div>
38 38
<div class="row"> 39 39 <div class="row">
<button id="blank-selected" style="float:left" class="btn" data-position="right" data-delay="50"> 40 40 <button id="blank-selected" style="float:left" class="btn" data-position="right" data-delay="50">
Blank Selected Text 41 41 Blank Selected Text
</button> 42 42 </button>
</div> 43 43 </div>
44 44
45 45
<div class="row" ng-show="editCardText" ng-style="(editCardText.length>160)?{color:'red'}:{}"> 46 46 <div class="row" ng-show="editCardText" ng-style="(editCardText.length>160)?{color:'red'}:{}">
{{editCardText.length}}/160 characters 47 47 {{editCardText.length}}/160 characters
</div> 48 48 </div>
<div class="row" ng-show="editCardText.length < 5"> 49 49 <div class="row" ng-show="editCardText.length < 5">
Please write a little more! 50 50 Please write a little more!
</div> 51 51 </div>
<div class="row" ng-show="editCardText.length > 140"> 52 52 <div class="row" ng-show="editCardText.length > 140">
Good flashcards have a<br> 53 53 Good flashcards have a<br>
single atomic fact 54 54 single atomic fact
</div> 55 55 </div>
</div> 56 56 </div>
</form> 57 57 </form>
</div> 58 58 </div>
59 59
60 60
61 61
62 62
63 63
64 64
<div class="row"> 65 65 <div class="row">
<h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it 66 66 <h2 class="weight" ng-cloak ng-show="cardCols && cards.length == 0">Your deck is empty.</h2>
here!</h2> 67 67 <h2 class="weight" ng-cloak ng-show="cardCols && cards.length == 0">Add a card from the feed to see it here.</h2>
68 68
templates/feed.html View file @ 30f54ec
<div id="editModal" class="modal row" style="max-height:none;"> 1 1 <div id="editModal" class="modal row" style="max-height:none;">
<form id="edit-card-form"> 2 2 <form id="edit-card-form">
<div class="modal-content col"> 3 3 <div class="modal-content col">
<div class="row" style="margin-bottom:0"> 4 4 <div class="row" style="margin-bottom:0">
<div class="card cyan-text text-darken-2" 5 5 <div class="card cyan-text text-darken-2"
style="width:300px; height:180px; margin-bottom:0; font-size:120%;"> 6 6 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div class="valign-wrapper"> 7 7 <div class="valign-wrapper">
<div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;" 8 8 <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
class="card-content valign center-align" 9 9 class="card-content valign center-align"
contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()"> 10 10 contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
</div> 11 11 </div>
</div> 12 12 </div>
</div> 13 13 </div>
</div> 14 14 </div>
</div> 15 15 </div>
<div class="col"> 16 16 <div class="col">
<div class="row"> 17 17 <div class="row">
</div> 18 18 </div>
<div class="row"> 19 19 <div class="row">
<button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()" 20 20 <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
data-position="left" 21 21 data-position="left"
data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'" 22 22 data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
data-tooltip="Enter"> 23 23 data-tooltip="Enter">
Edit 24 24 Edit
<i class="mdi-hardware-keyboard-return right"></i> 25 25 <i class="mdi-hardware-keyboard-return right"></i>
</button> 26 26 </button>
</div> 27 27 </div>
<div class="row"> 28 28 <div class="row">
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 29 29 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B"> 30 30 data-tooltip="Ctrl-B">
Blank Selected Text 31 31 Blank Selected Text
</button> 32 32 </button>
</div> 33 33 </div>
<div class="row" ng-show="flashcard.editCardText" 34 34 <div class="row" ng-show="flashcard.editCardText"
ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}"> 35 35 ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
{{flashcard.editCardText.length}}/160 characters 36 36 {{flashcard.editCardText.length}}/160 characters
</div> 37 37 </div>
<div class="row" ng-show="flashcard.editCardText.length < 5"> 38 38 <div class="row" ng-show="flashcard.editCardText.length < 5">
Please write a little more! 39 39 Please write a little more!
</div> 40 40 </div>
<div class="row" ng-show="flashcard.editCardText.length > 140"> 41 41 <div class="row" ng-show="flashcard.editCardText.length > 140">
Good flashcards have a<br> 42 42 Good flashcards have a<br>
single atomic fact 43 43 single atomic fact
</div> 44 44 </div>
</div> 45 45 </div>
</form> 46 46 </form>
</div> 47 47 </div>
48 48
49 49
<div class="row"> 50 50 <div class="row">
<h2 ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2> 51 51 <h2 class="weight" ng-cloak ng-show="showGrid && cards.length == 0">No cards. Be the first one to add a card!</h2>
52 52
<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols.length || !showGrid"> 53 53 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="!cardCols.length || !showGrid">
<div class="indeterminate"></div> 54 54 <div class="indeterminate"></div>
</div> 55 55 </div>
56 56
<div class="cardColumn" ng-repeat="col in cardCols"> 57 57 <div class="cardColumn" ng-repeat="col in cardCols">
<div class="repeated-card" ng-repeat="card in col"> 58 58 <div class="repeated-card" ng-repeat="card in col">
<flashcard flashcard-obj="card"/> 59 59 <flashcard flashcard-obj="card"/>
</div> 60 60 </div>
</div> 61 61 </div>
</div> 62 62 </div>
63 63
64 64
<!--Lil plus button in corner--> 65 65 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 24px; right: 24px;"> 66 66 <div class="fixed-action-btn" style="bottom: 24px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left" 67 67 <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" data-position="left"
data-delay="50" ng-click="openNewCardModal()" 68 68 data-delay="50" ng-click="openNewCardModal()"
data-tooltip="(C)ompose"> 69 69 data-tooltip="(C)ompose">
<i class="large mdi-content-add"></i> 70 70 <i class="large mdi-content-add"></i>
</a> 71 71 </a>
</div> 72 72 </div>
73 73
<div id="newCard" class="modal bottom-sheet row" style="max-height:none;"> 74 74 <div id="newCard" class="modal bottom-sheet row" style="max-height:none;">
<form id="new-card-form"> 75 75 <form id="new-card-form">
<div class="modal-content col"> 76 76 <div class="modal-content col">
<div class="row" style="margin-bottom:0"> 77 77 <div class="row" style="margin-bottom:0">
<div class="card cyan-text text-darken-2" 78 78 <div class="card cyan-text text-darken-2"
style="width:300px; height:180px; margin-bottom:0; font-size:120%;"> 79 79 style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
<div class="valign-wrapper"> 80 80 <div class="valign-wrapper">
<div id="new-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;" 81 81 <div id="new-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
class="card-content valign center-align" 82 82 class="card-content valign center-align"
contenteditable select-non-editable="true" ng-change="refreshNewCardInput()"> 83 83 contenteditable select-non-editable="true" ng-change="refreshNewCardInput()">
84 84
</div> 85 85 </div>
</div> 86 86 </div>
87 87
</div> 88 88 </div>
</div> 89 89 </div>
</div> 90 90 </div>
91 91
<div class="col"> 92 92 <div class="col">
<div class="row"> 93 93 <div class="row">
94 94
</div> 95 95 </div>
<div class="row"> 96 96 <div class="row">
<button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" 97 97 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()"
data-position="left" 98 98 data-position="left"
data-delay="50" ng-class="submit_enabled?{}:'disabled'" 99 99 data-delay="50" ng-class="submit_enabled?{}:'disabled'"
data-tooltip="Enter">Contribute 100 100 data-tooltip="Enter">Contribute
<i class="mdi-hardware-keyboard-return right"></i> 101 101 <i class="mdi-hardware-keyboard-return right"></i>
</button> 102 102 </button>
</div> 103 103 </div>
<div class="row"> 104 104 <div class="row">
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 105 105 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B">Blank Selected Text 106 106 data-tooltip="Ctrl-B">Blank Selected Text
</button> 107 107 </button>
</div> 108 108 </div>
<div class="row" ng-show="newCardText" ng-style="(newCardText.length>160)?{color:'red'}:{}"> 109 109 <div class="row" ng-show="newCardText" ng-style="(newCardText.length>160)?{color:'red'}:{}">
{{newCardText.length}}/160 characters 110 110 {{newCardText.length}}/160 characters
</div> 111 111 </div>
templates/flashcard.html View file @ 30f54ec
<div class="card flashy smallify black-text text-darken-2" 1 1 <div class="card flashy smallify black-text text-darken-2"
ng-class="{'in-deck':flashcard.isInDeck(), 'card-moveUp':flashcard.moveUp, 2 2 ng-class="{'in-deck':flashcard.isInDeck(), 'card-moveUp':flashcard.moveUp,
'card-moveDown':flashcard.moveDown}"> 3 3 'card-moveDown':flashcard.moveDown}">
<div class="valign-wrapper"> 4 4 <div class="valign-wrapper">
<div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div> 5 5 <div class="card-content valign center-align" ng-bind-html="flashcard.formatted_text"></div>
</div> 6 6 </div>
7 7
8 8
<div class="card-overlay"> 9 9 <div class="card-overlay">
<div class="top-box no-user-select" 10 10 <div class="top-box no-user-select"
ng-click="flashcard.pullUnpull()"> 11 11 ng-click="flashcard.pullUnpull()">
<div class="center-me"> 12 12 <div class="center-me">
<i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i> 13 13 <i ng-if="flashcard.isInDeck()" class="fadey mdi-content-remove-circle-outline medium"></i>
<i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i> 14 14 <i ng-if="!flashcard.isInDeck()" class="fadey mdi-content-add-circle-outline medium"></i>
</div> 15 15 </div>
</div> 16 16 </div>
<div class="bottom-box no-user-select"> 17 17 <div class="bottom-box no-user-select">
18 18
<div class="left-box"> 19 19 <div class="left-box">
<div class="center-me modal-trigger" href="#editModal" ng-click="flashcard.edit()"><i class="mdi-editor-border-color small"></i></div> 20 20 <div class="center-me modal-trigger" href="#editModal" ng-click="flashcard.edit()"><i class="mdi-editor-border-color small"></i></div>
</div> 21 21 </div>
22 22
<div class="right-box" ng-click="flashcard.hide()"> 23 23 <div class="right-box" ng-click="flashcard.hide()">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 24 24 <div class="center-me"><i class="mdi-action-visibility-off small"></i></div>
</div> 25 25 </div>
26 26
</div> 27 27 </div>
</div> 28 28 </div>
29 29
30 30
31 31
32 32
33 33
templates/help.html View file @ 30f54ec
<div class="container"> 1 1 <div class="container">
<div class="row"> 2 2 <div class="row">
<h2>FAQ</h2> 3 3 <h2 class="weight on-gray">FAQ</h2>
<button class="btn waves-effect waves-light" ng-click="expandAllContent()"> 4 4 <button class="btn waves-effect waves-light" ng-click="expandAllContent()">
Expand all 5 5 Expand all
</button> 6 6 </button>
<button class="btn waves-effect waves-light" ng-click="collapseAllContent()"> 7 7 <button class="btn waves-effect waves-light" ng-click="collapseAllContent()">
Collapse all 8 8 Collapse all
</button> 9 9 </button>
10 10
<!-- Please enter entries in JSON format in HelpController.js --> 11 11 <!-- Please enter entries in JSON format in HelpController.js -->
<ul class="collection st-accordion"> 12 12 <ul class="collection st-accordion">
<li class="st-accordion--item" ng-repeat="entry in entries"> 13 13 <li class="st-accordion--item" ng-repeat="entry in entries">
<div class="st-accordion--header" ng-click="toggleContent($event, $index)"> 14 14 <div class="st-accordion--header" ng-click="toggleContent($event, $index)">
<i class="{{entry.icon}}"></i> 15 15 <!-- <i class="{{entry.icon}}"></i> -->
{{entry.question}} 16 16 <span class="faq-questions">{{entry.question}}</span>
</div> 17 17 </div>
<div id="content-{{$index}}" class="st-accordion--contentopen faq-answers" 18 18 <div id="content-{{$index}}" class="st-accordion--contentopen faq-answers"
ng-bind-html="entry.answer"></div> 19 19 ng-bind-html="entry.answer"></div>
</li> 20 20 </li>
</ul> 21 21 </ul>
</div> 22 22 </div>
<h2>More questions?</h2> 23
24
<p><a href="mailto:or.so.help.me@flashy.cards">Contact us by email! </a></p> 25
</div> 26 23 </div>
27 24
templates/logout.html View file @ 30f54ec
<div class="container"> 1 1 <div class="container">
<div class="row"> 2 2 <div class="row">
<div class="card"> 3 3 <div class="card">
<h3 class="text-success heading">You have successfully logged out.</h3> 4 4 <h3 class="text-success heading weight">You have successfully logged out.</h3>
</div> 5 5 </div>
</div> 6 6 </div>
</div> 7 7 </div>
templates/requestpasswordreset.html View file @ 30f54ec
<div class="" style="margin-top:32px;"> 1 1 <div class="" style="margin-top:32px;">
<div class="row" style="max-width:512px; width:50%; min-width:256px; margin: 0 auto"> 2 2 <div class="row" style="max-width:512px; width:50%; min-width:256px; margin: 0 auto">
<div class="card"> 3 3 <div class="card">
<form class="col s12" name="passreset_form"> 4 4 <form class="col s12" name="passreset_form">
5 5
<div class="card-content"> 6 6 <div class="card-content">
<h2>Reset Password</h2> 7 7 <h2 class="weight">Reset Password</h2>
</div> 8 8 </div>
9 9
<div class="divider"></div> 10 10 <div class="divider"></div>
<div name="passreset" class="card-content"> 11 11 <div name="passreset" class="card-content">
<div class="section"> 12 12 <div class="section">
<div ng-show="error" role="error"> 13 13 <div ng-show="error" role="error">
<i style="color:#8E2323" class="mdi-alert-error"></i> 14 14 <i style="color:#8E2323" class="mdi-alert-error"></i>
<span style="color:#8E2323">Enter a valid email!</span> 15 15 <span style="color:#8E2323">Enter a valid email!</span>
</div> 16 16 </div>
</div> 17 17 </div>
<!--FORM INPUT--> 18 18 <!--FORM INPUT-->
<div class="input-field"> 19 19 <div class="input-field">
<label for="email">Enter Your Email</label> 20 20 <label for="email">Enter Your Email</label>
<input id="email" type="email" class="form-control" ng-model="user_email" placeholder="" required/> 21 21 <input id="email" type="email" class="form-control" ng-model="user_email" placeholder="" required/>
</div> 22 22 </div>
</div> 23 23 </div>
24 24
<div class="card-action"> 25 25 <div class="card-action">
<button class="btn waves-effect waves-light green right" type="submit" name="action" 26 26 <button class="btn waves-effect waves-light green right" type="submit" name="action"
ng-click="resetPass(user_email)">Reset 27 27 ng-click="resetPass(user_email)">Reset
</button> 28 28 </button>
<button class="btn waves-effect waves-light red" type="submit" name="action" 29 29 <button class="btn waves-effect waves-light red" type="submit" name="action"
ng-click="cancelReset()">Cancel 30 30 ng-click="cancelReset()">Cancel
</button> 31 31 </button>
32 32
</div> 33 33 </div>
</form> 34 34 </form>
templates/resetpassword.html View file @ 30f54ec
<div class="" style="margin-top:32px;"> 1 1 <div class="" style="margin-top:32px;">
<div class="row" style="max-width:512px; width:50%; min-width:256px; margin: 0 auto"> 2 2 <div class="row" style="max-width:512px; width:50%; min-width:256px; margin: 0 auto">
<div class="card"> 3 3 <div class="card">
<form class="col s12" name="resetpass_form"> 4 4 <form class="col s12" name="resetpass_form">
<div class="card-content"> 5 5 <div class="card-content">
<h2 class="">Reset Password</h2> 6 6 <h2 class="weight">Reset Password</h2>
</div> 7 7 </div>
<div class="divider"></div> 8 8 <div class="divider"></div>
<div class="card-content"> 9 9 <div class="card-content">
<!--ERRORS--> 10 10 <!--ERRORS-->
<div role="alert" ng-show="error"> 11 11 <div role="alert" ng-show="error">
<i style="color:#8E2323" class="mdi-alert-error"></i> 12 12 <i style="color:#8E2323" class="mdi-alert-error"></i>
<span style="color:#8E2323">Your password reset link is invalid. Perhaps it has already been used?</span> 13 13 <span style="color:#8E2323">Your password reset link is invalid. Perhaps it has already been used?</span>
</div> 14 14 </div>
<div role="alert" ng-show="mismatch && newPassword != confirmPassword"> 15 15 <div role="alert" ng-show="mismatch && newPassword != confirmPassword">
<i style="color:#8E2323" class="mdi-alert-error"></i> 16 16 <i style="color:#8E2323" class="mdi-alert-error"></i>
<span style="color:#8E2323">Passwords do not match!</span> 17 17 <span style="color:#8E2323">Passwords do not match!</span>
</div> 18 18 </div>
<div role="alert" ng-show="unacceptable && newPassword.length < 8"> 19 19 <div role="alert" ng-show="unacceptable && newPassword.length < 8">
<i style="color:#8E2323" class="mdi-alert-error"></i> 20 20 <i style="color:#8E2323" class="mdi-alert-error"></i>
<span style="color:#8E2323">Please make a password with at least 8 characters!</span> 21 21 <span style="color:#8E2323">Please make a password with at least 8 characters!</span>
</div> 22 22 </div>
<!--INPUTS--> 23 23 <!--INPUTS-->
<div class="input-field"> 24 24 <div class="input-field">
<input id="newpassword" type="password" class="validate" ng-model="newPassword" placeholder="" required/> 25 25 <input id="newpassword" type="password" class="validate" ng-model="newPassword" placeholder="" required/>
<label for="newpassword">Password</label> 26 26 <label for="newpassword">Password</label>
</div> 27 27 </div>
<div class="input-field"> 28 28 <div class="input-field">
<input id="confirmpassword" type="password" class="validate" ng-model="confirmPassword" placeholder="" 29 29 <input id="confirmpassword" type="password" class="validate" ng-model="confirmPassword" placeholder=""
required/> 30 30 required/>
<label for="confirmpassword">Confirm password</label> 31 31 <label for="confirmpassword">Confirm password</label>
</div> 32 32 </div>
</div> 33 33 </div>
34 34
<div class="card-action"> 35 35 <div class="card-action">
<button class="btn waves-effect waves-light green right" type="submit" name="submit" 36 36 <button class="btn waves-effect waves-light green right" type="submit" name="submit"
ng-click="confirmResetPass()">Confirm 37 37 ng-click="confirmResetPass()">Confirm
</button> 38 38 </button>
<button class="btn waves-effect waves-light red" type="submit" name="action" 39 39 <button class="btn waves-effect waves-light red" type="submit" name="action"
ng-click="cancelReset()">Cancel 40 40 ng-click="cancelReset()">Cancel
</button> 41 41 </button>
42 42
</div> 43 43 </div>
</form> 44 44 </form>
</div> 45 45 </div>
</div> 46 46 </div>
templates/settings.html View file @ 30f54ec
<div class="row" ng-show="showNotif"> 1 1 <div class="row" ng-show="showNotif">
<div class="col s12 m8 offset-m2 l6 offset-l3"> 2 2 <div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel"> 3 3 <div class="card-panel">
<h2>Notification Settings</h2> 4 4 <h2 class="weight">Notification Settings</h2>
<!-- 5 5 <!--
class="js-checkbox" name="notifbox" value="toggle notifs"> --> 6 6 class="js-checkbox" name="notifbox" value="toggle notifs"> -->
<form action="#"> 7 7 <form action="#">
<input type="checkbox" id="notifbox" class="js-checkbox"/> 8 8 <input type="checkbox" id="notifbox" class="js-checkbox"/>
<label for="notifbox">Enable notifications</label> 9 9 <label for="notifbox">Enable notifications</label>
</form> 10 10 </form>
</div> 11 11 </div>
</div> 12 12 </div>
</div> 13 13 </div>
14 14
<div class="row"> 15 15 <div class="row">
<div class="col s12 m8 offset-m2 l6 offset-l3"> 16 16 <div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel"> 17 17 <div class="card-panel">
18 18
<h2>Change Password</h2> 19 19 <h2 class="weight">Change Password</h2>
20 20
<form name="ChangePasswordForm"> 21 21 <form name="ChangePasswordForm">
22 22
<div class="row"> 23 23 <div class="row">
<div class="input-field col s12"> 24 24 <div class="input-field col s12">
<input id="password" required ng-minlegnth=1 type="password" name="oldpw" ng-model="oldPassword" class="validate"> 25 25 <input id="password" required ng-minlegnth=1 type="password" name="oldpw" ng-model="oldPassword" class="validate">
<label for="password">Old Password</label> 26 26 <label for="password">Old Password</label>
</div> 27 27 </div>
</div> 28 28 </div>
29 29
30 30
<div class="row"> 31 31 <div class="row">
<div class="input-field col s12"> 32 32 <div class="input-field col s12">
<input id="password" required ng-minlength=8 type="password" name="newpw" ng-model="newPassword" 33 33 <input id="password" required ng-minlength=8 type="password" name="newpw" ng-model="newPassword"
class="validate"> 34 34 class="validate">
<label for="password">New Password</label> 35 35 <label for="password">New Password</label>
</div> 36 36 </div>
</div> 37 37 </div>
38 38
<div role="alert"> 39 39 <div role="alert">
<span style="color:#8E2323" class="error" ng-show="ChangePasswordForm.newpw.$error.minlength"> 40 40 <span style="color:#8E2323" class="error" ng-show="ChangePasswordForm.newpw.$error.minlength">
New password must be at least 8 characters. </span> 41 41 New password must be at least 8 characters. </span>
</div> 42 42 </div>
43 43
<div class="row"> 44 44 <div class="row">
<div class="input-field col s12"> 45 45 <div class="input-field col s12">
<input id="password" required ng-minlength=8 compare-to="newPasword" type="password" name="confirmpw" 46 46 <input id="password" required ng-minlength=8 compare-to="newPasword" type="password" name="confirmpw"
ng-model="confirmedNewPassword" class="validate"> 47 47 ng-model="confirmedNewPassword" class="validate">
<label for="password">Confirm New Password</label> 48 48 <label for="password">Confirm New Password</label>
</div> 49 49 </div>
</div> 50 50 </div>
51 51
<div role="alert" ng-show="mismatch && newPassword != confirmPassword"> 52 52 <div role="alert" ng-show="mismatch && newPassword != confirmPassword">
<span style="color:#8E2323">Passwords do not match!</span> 53 53 <span style="color:#8E2323">Passwords do not match!</span>
</div> 54 54 </div>
55 55
56 56
</form> 57 57 </form>
<a class="waves-effect waves-light btn" id="resetPWButton" 58 58 <a class="waves-effect waves-light btn" id="resetPWButton"
ng-click="changePassword(oldPassword, newPassword, confirmedNewPassword)">Submit</a> 59 59 ng-click="changePassword(oldPassword, newPassword, confirmedNewPassword)">Submit</a>
</div> 60 60 </div>
</div> 61 61 </div>
</div> 62 62 </div>
63 63
<div class="row"> 64 64 <div class="row">
<div class="col s12 m8 offset-m2 l6 offset-l3"> 65 65 <div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel"> 66 66 <div class="card-panel">
67 67
<h2>Enrolled Classes</h2> 68 68 <h2 class="weight">Enrolled Classes</h2>
69 69
<div class="row" style="padding: 0px 25px"> 70 70 <div class="row" style="padding: 0px 25px">
<table class="hoverable responsive-table"> 71 71 <table class="hoverable">
<thead> 72 72 <thead>
<tr> 73 73 <tr>
<th data-field="id">Class</th> 74 74 <th data-field="id">Class</th>
<th data-field="drop">Drop</th> 75 75 <th data-field="drop">Drop</th>
</tr> 76 76 </tr>
</thead> 77 77 </thead>
78 78
<tbody> 79 79 <tbody>
<tr ng-repeat="section in UserService.getUserData().sections"> 80 80 <tr ng-repeat="section in UserService.getUserData().sections">
<td> 81 81 <td>
templates/study.html View file @ 30f54ec
<div class="container"> 1 1 <div class="container container--x">
<ul class="collection st-accordion"> 2 2 <ul class="collection st-accordion">
<li class="st-accordion--item"> 3 3 <li class="st-accordion--item">
<div class="st-accordion--header no-press"> 4 4 <div class="st-accordion--header no-press">
<i class="mdi-image-filter-drama"></i> 5 5 <i class="mdi-image-filter-drama"></i>
Choose your study parameters! 6 6 Choose a class to study (optional)
</div> 7 7 </div>
<div id="content-x" class="st-accordion--content"> 8 8 <div id="content-x" class="st-accordion--content">
<!-- lots of difficulty with materializecss select and angularjs. If we want to 9 9 <!-- lots of difficulty with materializecss select and angularjs. If we want to
refactor into a select(which prob looks better), maybe refer to this article: 10 10 refactor into a select(which prob looks better), maybe refer to this article:
http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button 11 11 http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button
--> 12 12 -->
<!-- Also suffered huge casualties trying to do radios...let's just do buttons... 13 13 <!-- Also suffered huge casualties trying to do radios...let's just do buttons...
--> 14 14 -->
15 15
<!-- Default: all classes button --> 16 16 <!-- Default: all classes button -->
<!-- Button for classes --> 17 17 <!-- Button for classes -->
<div class="row"> 18 18 <div class="row">
<div class="card-panel"> 19 19 <div class="card-panel">
<div class="row"> 20 20 <div class="row">
<!-- Default: all classes button --> 21
<a class="waves-effect waves-light btn toggley" 22
ng-init="sectionToStudy = null" 23
ng-click="toggleSectionToStudy(null)" 24
ng-class="{'pink white-text': sectionToStudy == null}"> 25
All classes</a> 26
27 21
<!-- Buttons of rest of classes --> 28 22 <!-- Buttons of rest of classes -->
<div ng-repeat="section in UserService.getUserData().sections"> 29 23 <div ng-repeat="section in UserService.getUserData().sections">
<a class="waves-effect waves-light btn toggley" 30 24 <a class="waves-effect waves-light btn-flat toggley"
ng-click="toggleSectionToStudy(section.id)" 31 25 ng-click="toggleSectionToStudy(section.id)"
ng-class="{'pink white-text': sectionToStudy == section.id}"> 32 26 ng-class="{'pink white-text': sectionToStudy == section.id}">
{{section.short_name}} 33 27 {{section.short_name}}
</a> 34 28 </a>
</div> 35 29 </div>
</div> 36 30 </div>
</div> 37 31 </div>
</div> 38 32 </div>
<!-- end of buttons for classes --> 39 33 </div>
34 </li>
35 <li class="st-accordion--item">
36 <div class="st-accordion--header no-press">
37 <i class="mdi-image-filter-drama"></i>
38 Choose a date range to study (optional)
39 </div>
40 <div id="content-dateselection" class="st-accordion--content open">
<div class="row"> 40 41 <div class="row">
<div class="card-panel"> 41 42 <div class="card-panel">
<div class="row"> 42 43 <div class="row">
<h3>Choose Date</h3> 43
<input id="start-date" type="date" class="" placeholder="Start Date"/> 44 44 <input id="start-date" type="date" class="" placeholder="Start Date"/>
<input id="end-date" type="date" class="" placeholder="End Date"/> 45 45 <input id="end-date" type="date" class="" placeholder="End Date"/>
46 46
47 47
<!-- JQUERY RANGE SLIDER --> 48 48 <!-- JQUERY RANGE SLIDER -->
<!-- 49 49 <!--
<p> 50 50 <p>
<label for="amount">Price range:</label> 51 51 <label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 52 52 <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p> 53 53 </p>
<div id="slider-range"></div> 54 54 <div id="slider-range"></div>
--> 55 55 -->
56 56
</div> 57 57 </div>
</div> 58 58 </div>
</div> 59 59 </div>
60
</div> 61 60 </div>
<!-- end of #content-x --> 62
</li> 63 61 </li>
</ul> 64 62 </ul>
65 63
<div class="row"> 66 64 <div class="row">
<div class="card-action"> 67 65 <div class="card-action">
<button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()"> 68 66 <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
Fetch! 69 67 Fetch!
<i class="mdi-content-send right"></i> 70 68 <i class="mdi-content-send right"></i>
</button> 71 69 </button>
</div> 72 70 </div>
</div> 73 71 </div>
</div> <!-- End of .container--> 74 72 </div> <!-- End of .container-->
75 73
76 74
<!-- Fetched card "quiz" --> 77 75 <!-- Fetched card "quiz" -->
<!-- Modal Structure --> 78 76 <!-- Modal Structure -->
<div id="quizup--question" class="quizup modal modal-fixed-footer"> 79 77 <div id="quizup--question" class="quizup modal modal-fixed-footer">
<button class="btn grey lighten-2 exiter" ng-click="quizModalClose()"><i class="mdi-content-clear"></i></button> 80 78 <button class="btn grey lighten-2 exiter" ng-click="quizModalClose()"><i class="mdi-content-clear"></i></button>
81 79
<form> 82 80 <form>
<div class="modal-content"> 83 81 <div class="modal-content">
<h4>Card #{{cardCount}}</h4> 84 82 <h4 class="weight">Card #{{cardCount}}</h4>
85 83
<p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p> 86 84 <p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p>
87 85
<div class="card card-facade valign-wrapper"> 88 86 <div class="card card-facade valign-wrapper">
<div class="card-content valign center-align"> 89 87 <div class="card-content valign center-align">
<div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div> 90 88 <div ng-if="!hasBlanks" class="quizup--text-frag">{{quiz.text}}</div>
91
<div class="quizup--text-frag">{{text0}}</div> 92
<input id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''" 93
ng-model="answer"></input> 94
<div class="quizup--text-frag">{{text1}}</div> 95
96 89
90 <div class="quizup--text-frag" ng-if="hasBlanks">{{text0}}</div>
91 <input ng-show="has-blanks" id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
92 ng-model="answer"></input>
93
94 <div ng-if="hasBlanks" class="quizup--text-frag">{{text1}}</div>
95
</div> 97 96 </div>
</div> 98 97 </div>
</div> 99 98 </div>
<div class="modal-footer"> 100 99 <div class="modal-footer">
<!-- Card has blanks button --> 101 100 <!-- Card has blanks button -->
<button class="btn" type="submit" 102 101 <button class="btn" type="submit"
ng-if="hasBlanks" 103 102 ng-if="hasBlanks"
ng-click="sendAnswer(answer)" 104 103 ng-click="sendAnswer(answer)"
ng-class="{'disabled': answer==''}" 105 104 ng-class="{'disabled': answer==''}"
data-tooltip="Enter">CHECK 106 105 data-tooltip="Enter">CHECK
<i class="mdi-hardware-keyboard-return right"></i> 107 106 <i class="mdi-hardware-keyboard-return right"></i>
</button> 108 107 </button>
<!-- No blanks button --> 109 108 <!-- No blanks button -->
<button class="btn" type="submit" 110 109 <button class="btn" type="submit"
ng-if="!hasBlanks" 111 110 ng-if="!hasBlanks"
ng-click="fetchQuiz()" 112 111 ng-click="fetchQuiz()"
data-tooltip="Enter">NEXT 113 112 data-tooltip="Enter">NEXT
<i class="mdi-hardware-keyboard-return right"></i> 114 113 <i class="mdi-hardware-keyboard-return right"></i>
</button> 115 114 </button>
</div> 116 115 </div>
</form> 117 116 </form>
</div> 118 117 </div>
119 118
<!-- Quiz results page that shows user answer and actual answer and allows 120 119 <!-- Quiz results page that shows user answer and actual answer and allows
User to choose correctness --> 121 120 User to choose correctness -->
<div id="quizup--result" class="quizup modal modal-fixed-footer"> 122 121 <div id="quizup--result" class="quizup modal modal-fixed-footer">
<button class="btn grey lighten-2 exiter" ng-click="resultModalClose()"><i class="mdi-content-clear"></i></button> 123 122 <button class="btn grey lighten-2 exiter" ng-click="resultModalClose()"><i class="mdi-content-clear"></i></button>
124 123
<form> 125 124 <form>
<div class="modal-content"> 126 125 <div class="modal-content">
<div class="modal-cardbox"> 127 126 <div class="modal-cardbox">
<h4>The answer</h4> 128 127 <h4 class="weight"> The answer</h4>
128
<div class="card card-facade valign-wrapper"> 129 129 <div class="card card-facade valign-wrapper">
<div class="card-content valign center-align"> 130 130 <div class="card-content valign center-align">
{{text0}} <u><b>{{textblank}}</b></u>{{text1}} 131 131 {{text0}} <u><b>{{textblank}}</b></u>{{text1}}
</div> 132 132 </div>
</div> 133 133 </div>
</div> 134 134 </div>
135 135
<div class="modal-cardbox"> 136 136 <div class="modal-cardbox">
<h4>Your response</h4> 137 137 <h4 class="weight">Your response</h4>
138
<div class="card card-facade valign-wrapper"> 138 139 <div class="card card-facade valign-wrapper">
<div class="card-content valign center-align"> 139 140 <div class="card-content valign center-align">
{{text0}} <u><b>{{answer}}</b></u>{{text1}} 140 141 {{text0}} <u><b>{{answer}}</b></u>{{text1}}
</div> 141 142 </div>
</div> 142 143 </div>
</div> 143 144 </div>
</div> 144 145 </div>
<div class="modal-footer"> 145 146 <div class="modal-footer">
Is your response correct? 146 147 Is your response correct?
<div class="quizup--button-box"> 147 148 <div class="quizup--button-box">
<button class="btn tooltipped green accent-3" 148 149 <button class="btn tooltipped green accent-3"
ng-click="sendCorrectness(true)" 149 150 ng-click="sendCorrectness(true)"
data-tooltip="Enter"><u>Y</u>ES 150 151 data-tooltip="Enter"><u>Y</u>ES
<i class="mdi-action-thumb-up right"></i> 151 152 <i class="mdi-action-thumb-up right"></i>