110swag / flashy-frontend

Download as
Browse Code ยป

Commit 032de657c53d4084a910ba63e484e5d2e406e881

Authored by Kevin Mach
1 parent 9e1121cc9c
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

added settings page, controller needs work

Showing 5 changed files with 73 additions and 0 deletions Inline Diff

config.js View file @ 032de65
angular.module('flashy', [ 1 1 angular.module('flashy', [
'flashy.LogoutController', 2 2 'flashy.LogoutController',
'flashy.LoginController', 3 3 'flashy.LoginController',
'flashy.RootController', 4 4 'flashy.RootController',
'flashy.FeedController', 5 5 'flashy.FeedController',
'flashy.DeckController', 6 6 'flashy.DeckController',
'flashy.ClassAddController', 7 7 'flashy.ClassAddController',
'flashy.RequestResetController', 8 8 'flashy.RequestResetController',
'flashy.StudyController', 9 9 'flashy.StudyController',
'flashy.UserService', 10 10 'flashy.UserService',
'flashy.FlashcardDirective', 11 11 'flashy.FlashcardDirective',
'flashy.ResetPasswordController', 12 12 'flashy.ResetPasswordController',
'flashy.VerifyEmailController', 13 13 'flashy.VerifyEmailController',
'flashy.CardListController', 14 14 'flashy.CardListController',
15 'flashy.SettingsController',
'ngCookies']). 15 16 'ngCookies']).
config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) { 16 17 config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
'use strict'; 17 18 'use strict';
$httpProvider.defaults.withCredentials = true; 18 19 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 19 20 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 20 21 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$resourceProvider.defaults.stripTrailingSlashes = false; 21 22 $resourceProvider.defaults.stripTrailingSlashes = false;
var arrayMethods = Object.getOwnPropertyNames(Array.prototype); 22 23 var arrayMethods = Object.getOwnPropertyNames(Array.prototype);
arrayMethods.forEach(attachArrayMethodsToNodeList); 23 24 arrayMethods.forEach(attachArrayMethodsToNodeList);
function attachArrayMethodsToNodeList(methodName) { 24 25 function attachArrayMethodsToNodeList(methodName) {
if (methodName !== 'length') { 25 26 if (methodName !== 'length') {
NodeList.prototype[methodName] = Array.prototype[methodName]; 26 27 NodeList.prototype[methodName] = Array.prototype[methodName];
} 27 28 }
}; 28 29 };
29 30
$httpProvider.interceptors.push(function($q) { 30 31 $httpProvider.interceptors.push(function($q) {
return { 31 32 return {
'responseError': function(rejection) { 32 33 'responseError': function(rejection) {
if (rejection.status >= 500) { 33 34 if (rejection.status >= 500) {
console.log('got error'); 34 35 console.log('got error');
console.log(rejection); 35 36 console.log(rejection);
$('body').html('<div class="card">Sorry, the server is not serving requests properly. Try again later</div>'); 36 37 $('body').html('<div class="card">Sorry, the server is not serving requests properly. Try again later</div>');
} 37 38 }
return $q.reject(rejection); 38 39 return $q.reject(rejection);
} 39 40 }
}; 40 41 };
}); 41 42 });
$locationProvider.html5Mode(true); 42 43 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/404'); 43 44 $urlRouterProvider.otherwise('/404');
var auth_resolve = { 44 45 var auth_resolve = {
authorize: function($q, $state, $stateParams, UserService) { 45 46 authorize: function($q, $state, $stateParams, UserService) {
console.log('resolving user before continuing'); 46 47 console.log('resolving user before continuing');
var redirectAsNeeded = function() { 47 48 var redirectAsNeeded = function() {
if (!UserService.isLoggedIn()) { 48 49 if (!UserService.isLoggedIn()) {
console.log(UserService.getUserData()); 49 50 console.log(UserService.getUserData());
console.log('making the user log in'); 50 51 console.log('making the user log in');
$state.go('login'); 51 52 $state.go('login');
} 52 53 }
if (!UserService.authorizedFor($state, $stateParams)) { 53 54 if (!UserService.authorizedFor($state, $stateParams)) {
$state.go('addclass'); 54 55 $state.go('addclass');
} 55 56 }
}; 56 57 };
if (UserService.isResolved()) return redirectAsNeeded(); 57 58 if (UserService.isResolved()) return redirectAsNeeded();
return UserService.getUserData().then(redirectAsNeeded); 58 59 return UserService.getUserData().then(redirectAsNeeded);
} 59 60 }
}; 60 61 };
$stateProvider. 61 62 $stateProvider.
state('login', { 62 63 state('login', {
url: '/login', 63 64 url: '/login',
templateUrl: 'templates/login.html', 64 65 templateUrl: 'templates/login.html',
controller: 'LoginController' 65 66 controller: 'LoginController'
}). 66 67 }).
state('logout', { 67 68 state('logout', {
resolve: auth_resolve, 68 69 resolve: auth_resolve,
url: '/logout', 69 70 url: '/logout',
templateUrl: 'templates/logout.html', 70 71 templateUrl: 'templates/logout.html',
controller: 'LogoutController' 71 72 controller: 'LogoutController'
}). 72 73 }).
state('root', { 73 74 state('root', {
resolve: auth_resolve, 74 75 resolve: auth_resolve,
url: '/', 75 76 url: '/',
controller: 'RootController' 76 77 controller: 'RootController'
}). 77 78 }).
state('feed', { 78 79 state('feed', {
resolve: auth_resolve, 79 80 resolve: auth_resolve,
url: '/feed/{sectionId}', 80 81 url: '/feed/{sectionId}',
templateUrl: 'templates/feed.html', 81 82 templateUrl: 'templates/feed.html',
controller: 'FeedController' 82 83 controller: 'FeedController'
}). 83 84 }).
state('cardlist', { 84 85 state('cardlist', {
resolve: auth_resolve, 85 86 resolve: auth_resolve,
url: '/cards/{sectionId}', 86 87 url: '/cards/{sectionId}',
templateUrl: 'templates/cardlist.html', 87 88 templateUrl: 'templates/cardlist.html',
controller: 'CardListController' 88 89 controller: 'CardListController'
}). 89 90 }).
state('addclass', { 90 91 state('addclass', {
resolve: auth_resolve, 91 92 resolve: auth_resolve,
url: '/addclass', 92 93 url: '/addclass',
templateUrl: 'templates/addclass.html', 93 94 templateUrl: 'templates/addclass.html',
controller: 'ClassAddController' 94 95 controller: 'ClassAddController'
}). 95 96 }).
state('deck', { 96 97 state('deck', {
resolve: auth_resolve, 97 98 resolve: auth_resolve,
url: '/deck/{sectionId}', 98 99 url: '/deck/{sectionId}',
templateUrl: 'templates/deck.html', 99 100 templateUrl: 'templates/deck.html',
controller: 'DeckController' 100 101 controller: 'DeckController'
}). 101 102 }).
state('study', { 102 103 state('study', {
resolve: auth_resolve, 103 104 resolve: auth_resolve,
url: '/study', 104 105 url: '/study',
templateUrl: 'templates/study.html', 105 106 templateUrl: 'templates/study.html',
controller: 'StudyController' 106 107 controller: 'StudyController'
}). 107 108 }).
state('flashcard', { 108 109 state('flashcard', {
resolve: auth_resolve, 109 110 resolve: auth_resolve,
url: '/flashcard', 110 111 url: '/flashcard',
templateUrl: 'templates/flashcard.html', 111 112 templateUrl: 'templates/flashcard.html',
controller: 'FlashcardController' 112 113 controller: 'FlashcardController'
}). 113 114 }).
115 state('settings', {
116 resolve: auth_resolve,
117 url: '/settings',
118 templateUrl: 'templates/settings.html',
119 controller: 'SettingsController'
120 }).
state('requestpasswordreset', { 114 121 state('requestpasswordreset', {
url: '/requestpasswordreset', 115 122 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 116 123 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 117 124 controller: 'RequestResetController'
}). 118 125 }).
state('resetpassword', { 119 126 state('resetpassword', {
url: '/resetpassword/{uid}/{token}', 120 127 url: '/resetpassword/{uid}/{token}',
templateUrl: 'templates/resetpassword.html', 121 128 templateUrl: 'templates/resetpassword.html',
controller: 'ResetPasswordController' 122 129 controller: 'ResetPasswordController'
}). 123 130 }).
state('verifyemail', { 124 131 state('verifyemail', {
resolve: auth_resolve, 125 132 resolve: auth_resolve,
url: '/verifyemail/{key}', 126 133 url: '/verifyemail/{key}',
templateUrl: 'templates/verifyemail.html', 127 134 templateUrl: 'templates/verifyemail.html',
controller: 'VerifyEmailController' 128 135 controller: 'VerifyEmailController'
}). 129 136 }).
state('404', { 130 137 state('404', {
url: '/404', 131 138 url: '/404',
template: "<h1>This page doesn't exist!</h1>" 132 139 template: "<h1>This page doesn't exist!</h1>"
}); 133 140 });
}). 134 141 }).
run(function($rootScope, $state, $stateParams, $location, UserService) { 135 142 run(function($rootScope, $state, $stateParams, $location, UserService) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 136 143 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
console.log('failed to change state: ' + error); 137 144 console.log('failed to change state: ' + error);
$state.go('login'); 138 145 $state.go('login');
}); 139 146 });
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 140 147 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) { 141 148 if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) {
localStorage.setItem('last_state', toState.name); 142 149 localStorage.setItem('last_state', toState.name);
localStorage.setItem('last_state_params', JSON.stringify(toParams)); 143 150 localStorage.setItem('last_state_params', JSON.stringify(toParams));
} 144 151 }
}); 145 152 });
home.html View file @ 032de65
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" 6 6 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 7 7 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
8 8
<link rel="stylesheet" href="styles/flashier.css"/> 9 9 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 10 10 <link rel="stylesheet" href="styles/flashy.css"/>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' 11 11 <link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
rel='stylesheet' type='text/css'> 12 12 rel='stylesheet' type='text/css'>
<title>Flashy</title> 13 13 <title>Flashy</title>
</head> 14 14 </head>
<body ng-controller="RootController"> 15 15 <body ng-controller="RootController">
<header> 16 16 <header>
<nav> 17 17 <nav>
<div class="nav-wrapper"> 18 18 <div class="nav-wrapper">
<a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo" 19 19 <a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo"
class="left button-collapse hide-on-med-and-up"><i 20 20 class="left button-collapse hide-on-med-and-up"><i
class="mdi-navigation-menu"></i></a> 21 21 class="mdi-navigation-menu"></i></a>
<ul ng-show="currentSection.id && UserService.isLoggedIn()" class="left hide-on-small-and-down"> 22 22 <ul ng-show="currentSection.id && UserService.isLoggedIn()" class="left hide-on-small-and-down">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped" 23 23 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"
data-position="bottom" 24 24 data-position="bottom"
data-delay="50" data-tooltip="Feed"><i 25 25 data-delay="50" data-tooltip="Feed"><i
class="mdi-action-view-module"></i></a></li> 26 26 class="mdi-action-view-module"></i></a></li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped" 27 27 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"
data-position="bottom" 28 28 data-position="bottom"
data-delay="50" data-tooltip="Deck"><i 29 29 data-delay="50" data-tooltip="Deck"><i
class="mdi-action-view-carousel"></i></a></li> 30 30 class="mdi-action-view-carousel"></i></a></li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped" 31 31 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"
data-position="bottom" 32 32 data-position="bottom"
data-delay="50" data-tooltip="Card List"><i 33 33 data-delay="50" data-tooltip="Card List"><i
class="mdi-action-view-list"></i></a></li> 34 34 class="mdi-action-view-list"></i></a></li>
</ul> 35 35 </ul>
<a href="#" class="brand-logo center">Flashy</a> 36 36 <a href="#" class="brand-logo center">Flashy</a>
37 37
<ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down"> 38 38 <ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down">
<!-- User's classes dropdown --> 39 39 <!-- User's classes dropdown -->
<ul id="classDropdown" class="dropdown-content"> 40 40 <ul id="classDropdown" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 41 41 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 42 42 <a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 43 43 </li>
<li class="divider"></li> 44 44 <li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li> 45 45 <li><a ui-sref="addclass">Add Class</a></li>
</ul> 46 46 </ul>
47 47
<li><a style="width:175px;" class="dropdown-button ng-cloak" href="#!" data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i 48 48 <li><a style="width:175px;" class="dropdown-button ng-cloak" href="#!" data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i
class="mdi-navigation-arrow-drop-down right"></i></a></li> 49 49 class="mdi-navigation-arrow-drop-down right"></i></a></li>
<li><a ui-sref="study">Study</a></li> 50 50 <li><a ui-sref="study">Study</a></li>
51 51
<!-- Settings Dropdown --> 52 52 <!-- Settings Dropdown -->
<ul id="settingsDropdown" class="dropdown-content"> 53 53 <ul id="settingsDropdown" class="dropdown-content">
<li><a ui-sref="settings">Settings</a></li> 54 54 <li><a ui-sref="settings">Settings</a></li>
<li><a ui-sref="logout">Logout</a></li> 55 55 <li><a ui-sref="logout">Logout</a></li>
</ul> 56 56 </ul>
57 57
<li><a class="dropdown-button ng-cloak" href="#!" data-activates="settingsDropdown"><i class="tiny mdi-action-settings"></i></a></li> 58 58 <li><a class="dropdown-button ng-cloak" href="#!" data-activates="settingsDropdown"><i class="tiny mdi-action-settings"></i></a></li>
59 59
60 60
61 61
62 62
</ul> 63 63 </ul>
64 64
<!-- Slide-in side-nav for small screens --> 65 65 <!-- Slide-in side-nav for small screens -->
<ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo"> 66 66 <ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
<span ng-show="currentSection.id"> 67 67 <span ng-show="currentSection.id">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped" 68 68 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"
><i 69 69 ><i
class="mdi-action-view-module left"></i>Feed</a></li> 70 70 class="mdi-action-view-module left"></i>Feed</a></li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped" 71 71 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"
><i 72 72 ><i
class="mdi-action-view-carousel left"></i>Deck</a></li> 73 73 class="mdi-action-view-carousel left"></i>Deck</a></li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped" 74 74 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"
><i 75 75 ><i
class="mdi-action-view-list left"></i>Card List</a> 76 76 class="mdi-action-view-list left"></i>Card List</a>
</li> 77 77 </li>
<hr> 78 78 <hr>
</span> 79 79 </span>
<!-- Collapsible menu for all the User's classes --> 80 80 <!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion"> 81 81 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 82 82 <li class="bold">
<a class="collapsible-header black-text"> 83 83 <a class="collapsible-header black-text">
Classes<i 84 84 Classes<i
class="mdi-navigation-arrow-drop-down right"></i> 85 85 class="mdi-navigation-arrow-drop-down right"></i>
</a> 86 86 </a>
</li> 87 87 </li>
<div class="collapsible-body" style="display: block"> 88 88 <div class="collapsible-body" style="display: block">
<ul> 89 89 <ul>
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 90 90 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 91 91 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 92 92 </li>
<hr> 93 93 <hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li> 94 94 <li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li>
</ul> 95 95 </ul>
</div> 96 96 </div>
</ul> 97 97 </ul>
<li><a ui-sref="study">Study</a></li> 98 98 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="settings">Settings</a></li> 99 99 <li><a ui-sref="settings">Settings</a></li>
<li><a ui-sref="logout">Logout</a></li> 100 100 <li><a ui-sref="logout">Logout</a></li>
</ul> 101 101 </ul>
</div> 102 102 </div>
</nav> 103 103 </nav>
104 104
</header> 105 105 </header>
106 106
107 107
<!-- Menu Bar --> 108 108 <!-- Menu Bar -->
109 109
<div class="wrapper"> 110 110 <div class="wrapper">
111 111
<main ui-view></main> 112 112 <main ui-view></main>
113 113
<div class="push"></div> 114 114 <div class="push"></div>
</div> 115 115 </div>
116 116
117 117
118 118
119 119
<footer class="page-footer"> 120 120 <footer class="page-footer">
<div class="footer-copyright"> 121 121 <div class="footer-copyright">
<div class="container"> 122 122 <div class="container">
&copy; 2015 Team Swag 123 123 &copy; 2015 Team Swag
<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by email!</a> 124 124 <a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by email!</a>
</div> 125 125 </div>
126 126
</div> 127 127 </div>
</footer> 128 128 </footer>
129 129
</body> 130 130 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 131 131 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 132 132 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 133 133 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 134 134 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 135 135 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 136 136 <script type="text/javascript" src="scripts/jquery.collapsible.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script> 137 137 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 138 138 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 139 139 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script> 140 140 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 141 141 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
scripts/SettingsController.js View file @ 032de65
File was created 1 angular.module('flashy.SettingsController', ['ui.router']).
2
3 controller('SettingsController', function($scope) {
4
5
styles/flashy.css View file @ 032de65
๏ปฟ.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
/*.container .row {*/ 40 40 /*.container .row {*/
/*margin-left: 0;*/ 41 41 /*margin-left: 0;*/
/*margin-right: 0;*/ 42 42 /*margin-right: 0;*/
/*}*/ 43 43 /*}*/
44 44
/* Flashcard directive css */ 45 45 /* Flashcard directive css */
.card { 46 46 .card {
word-wrap: break-word; 47 47 word-wrap: break-word;
} 48 48 }
49 49
.card.flashy { 50 50 .card.flashy {
background-color: #fff; 51 51 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 52 52 font-family: 'Titillium Web', sans-serif;
float: left; 53 53 float: left;
text-align: center; 54 54 text-align: center;
margin: 6px; 55 55 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 56 56 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
} 57 57 }
58 58
.card.flashy.shrinky { 59 59 .card.flashy.shrinky {
height: 0; 60 60 height: 0;
opacity: 0; 61 61 opacity: 0;
overflow: hidden; 62 62 overflow: hidden;
} 63 63 }
64 64
.card-overlay { 65 65 .card-overlay {
cursor: pointer; 66 66 cursor: pointer;
left: 0; 67 67 left: 0;
opacity: 0; 68 68 opacity: 0;
position: absolute; 69 69 position: absolute;
top: 0; 70 70 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 71 71 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 72 72 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 73 73 /* animation effect to appear on off-hover */
visibility: hidden; 74 74 visibility: hidden;
height: 100%; 75 75 height: 100%;
width: 100%; 76 76 width: 100%;
} 77 77 }
78 78
.card-overlay i { 79 79 .card-overlay i {
color: #FFF; 80 80 color: #FFF;
left: 50%; 81 81 left: 50%;
position: absolute; 82 82 position: absolute;
top: 50%; 83 83 top: 50%;
transform: translate(-50%, -50%); 84 84 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 85 85 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 86 86 }
87 87
.center-me:hover i { 88 88 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 89 89 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 90 90 }
91 91
.card:hover .card-overlay { 92 92 .card:hover .card-overlay {
opacity: 1.0; 93 93 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 94 94 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 95 95 visibility: visible;
} 96 96 }
97 97
.top-box { 98 98 .top-box {
background-color: rgba(0, 184, 76, 0.4); 99 99 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 100 100 height: 65%;
position: relative; 101 101 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 102 102 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 103 103 width: 100%;
} 104 104 }
105 105
.top-box:hover { 106 106 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 107 107 background-color: rgba(0, 184, 76, 0.5);
} 108 108 }
109 109
.bottom-box { 110 110 .bottom-box {
height: 35%; 111 111 height: 35%;
width: 100%; 112 112 width: 100%;
} 113 113 }
114 114
.left-box { 115 115 .left-box {
background-color: rgba(119, 146, 255, 0.5); 116 116 background-color: rgba(119, 146, 255, 0.5);
float: left; 117 117 float: left;
position: relative; 118 118 position: relative;
height: 100%; 119 119 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 120 120 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 121 121 width: 50%;
} 122 122 }
123 123
.left-box:hover { 124 124 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 125 125 background-color: rgba(119, 146, 255, 0.6);
} 126 126 }
127 127
.right-box { 128 128 .right-box {
background-color: rgba(255, 62, 76, 0.5); 129 129 background-color: rgba(255, 62, 76, 0.5);
float: right; 130 130 float: right;
height: 100%; 131 131 height: 100%;
position: relative; 132 132 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 133 133 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 134 134 width: 50%;
} 135 135 }
136 136
.right-box:hover { 137 137 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 138 138 background-color: rgba(255, 62, 76, 0.6);
} 139 139 }
140 140
.center-me { 141 141 .center-me {
height: 100%; 142 142 height: 100%;
margin: 0 auto; 143 143 margin: 0 auto;
text-align: center; 144 144 text-align: center;
vertical-align: middle; 145 145 vertical-align: middle;
width: 100%; 146 146 width: 100%;
} 147 147 }
148 148
/* Card Colors */ 149 149 /* Card Colors */
.card.flashy.cardcolor-blue div { 150 150 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 151 151 background-color: rgba(119, 158, 203, 0.5) !important;
} 152 152 }
153 153
.cardcolor-red div { 154 154 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 155 155 background-color: rgba(255, 105, 97, 0.5) !important;
} 156 156 }
157 157
.cardcolor-green div { 158 158 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 159 159 background-color: rgba(119, 190, 119, 0.5) !important;
} 160 160 }
161 161
.cardcolor-yellow div { 162 162 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 163 163 background-color: rgba(253, 253, 150, 0.5) !important;
} 164 164 }
165 165
/* Card Colors END */ 166 166 /* Card Colors END */
167 167
.modal.bottom-sheet { 168 168 .modal.bottom-sheet {
max-width: 600px; 169 169 max-width: 600px;
margin-left: auto; 170 170 margin-left: auto;
margin-right: auto; 171 171 margin-right: auto;
} 172 172 }
173 173
#newCard input[type=text] { 174 174 #newCard input[type=text] {
height: 3rem !important; 175 175 height: 3rem !important;
} 176 176 }
177 177
.input-field label { 178 178 .input-field label {
color: #00b3c2; 179 179 color: #00b3c2;
} 180 180 }
181 181
/* label focus color */ 182 182 /* label focus color */
.input-field input[type]:focus + label { 183 183 .input-field input[type]:focus + label {
color: #00b3c2; 184 184 color: #00b3c2;
} 185 185 }
186 186
/* label underline focus color */ 187 187 /* label underline focus color */
.input-field input[type]:focus { 188 188 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 189 189 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 190 190 box-shadow: 0 1px 0 0 #b388ff;
} 191 191 }
192 192
/* valid color */ 193 193 /* valid color */
.input-field input[type].valid { 194 194 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 195 195 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 196 196 box-shadow: 0 1px 0 0 #673ab7;
} 197 197 }
198 198
/* invalid color */ 199 199 /* invalid color */
.input-field input[type].invalid { 200 200 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 201 201 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 202 202 box-shadow: 0 1px 0 0 #673ab7;
} 203 203 }
204 204
/* icon prefix focus color */ 205 205 /* icon prefix focus color */
.input-field .prefix.active { 206 206 .input-field .prefix.active {
color: #b388ff; 207 207 color: #b388ff;
} 208 208 }
209 209
/* label focus color */ 210 210 /* label focus color */
.input-field textarea[type]:focus + label { 211 211 .input-field textarea[type]:focus + label {
color: #b388ff; 212 212 color: #b388ff;
} 213 213 }
214 214
/* label underline focus color */ 215 215 /* label underline focus color */
.input-field textarea[type]:focus { 216 216 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 217 217 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 218 218 box-shadow: 0 1px 0 0 #b388ff;
} 219 219 }
220 220
body { 221 221 body {
background-color: #e8e8e8; 222 222 background-color: #e8e8e8;
overflow-x: hidden; 223 223 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 224 224 font-family: 'Titillium Web', sans-serif;
height: 100%; 225 225 height: 100%;
} 226 226 }
html { 227 227 html {
background: transparent; 228 228 background: transparent;
height: 100%; 229 229 height: 100%;
} 230 230 }
231 231
.btn { 232 232 .btn {
background-color: #00b3c2; 233 233 background-color: #00b3c2;
} 234 234 }
235 235
.btn:hover { 236 236 .btn:hover {
background-color: #0097cb; 237 237 background-color: #0097cb;
} 238 238 }
239 239
.btn-floating { 240 240 .btn-floating {
background-color: #00b3c2; 241 241 background-color: #00b3c2;
} 242 242 }
243 243
.btn-floating:hover { 244 244 .btn-floating:hover {
background-color: #0097cb; 245 245 background-color: #0097cb;
} 246 246 }
247 247
.toggley { 248 248 .toggley {
float: left; 249 249 float: left;
margin: 10px; 250 250 margin: 10px;
} 251 251 }
252 252
#logo-container { 253 253 #logo-container {
margin-bottom: 18px; 254 254 margin-bottom: 18px;
} 255 255 }
256 256
#lean-overlay { 257 257 #lean-overlay {
display: none !important; 258 258 display: none !important;
} 259 259 }
260 260
nav { 261 261 nav {
background-color: #d2143f !important; 262 262 background-color: #d2143f !important;
} 263 263 }
264 264
main { 265 265 main {
min-height: 145px; 266 266 min-height: 145px;
} 267 267 }
268 268
.side-nav .collapsible-body { 269 269 .side-nav .collapsible-body {
width: 100%; 270 270 width: 100%;
} 271 271 }
272 272
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 273 273 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 274 274 background-color: #00b3c2;
} 275 275 }
276 276
nav .button-collapse { 277 277 nav .button-collapse {
margin: 0 20px; 278 278 margin: 0 20px;
} 279 279 }
280 280
.collapsible-body i { 281 281 .collapsible-body i {
font-size: 1rem !important; 282 282 font-size: 1rem !important;
} 283 283 }
284 284
.tabs .tab a { 285 285 .tabs .tab a {
color: #00b3c2; 286 286 color: #00b3c2;
} 287 287 }
288 288
.tabs .tab a:hover { 289 289 .tabs .tab a:hover {
color: #0041dd; 290 290 color: #0041dd;
} 291 291 }
292 292
.tabs .indicator { 293 293 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 294 294 border-bottom: 1px solid #00b3c2;
} 295 295 }
296 296
h2 { 297 297 h2 {
text-align: center; 298 298 text-align: center;
} 299 299 }
300 300
md-content.md-default-theme { 301 301 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 302 302 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 303 303 border: 1px solid #fff;
} 304 304 }
305 305
/*#sidenav-overlay { 306 306 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 307 307 background-color: rgba(0, 0, 0, 0) !important;
}*/ 308 308 }*/
.card-content { 309 309 .card-content {
width: 100%; 310 310 width: 100%;
} 311 311 }
312 312
.valign-wrapper { 313 313 .valign-wrapper {
height: 100%; 314 314 height: 100%;
} 315 315 }
316 316
.toast { 317 317 .toast {
height: 100px; 318 318 height: 100px;
width: 300px; 319 319 width: 300px;
line-height: 20px; 320 320 line-height: 20px;
max-height: 100px; 321 321 max-height: 100px;
word-wrap: normal; 322 322 word-wrap: normal;
} 323 323 }
324 324
[ng-cloak] { 325 325 [ng-cloak] {
display: none !important; 326 326 display: none !important;
} 327 327 }
328 328
.cardColumn { 329 329 .cardColumn {
float: left; 330 330 float: left;
} 331 331 }
332 332
/* Animation CSS, https://docs.angularjs.org/guide/animations */ 333 333 /* Animation CSS, https://docs.angularjs.org/guide/animations */
.repeated-card.ng-enter, 334 334 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 335 335 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 336 336 .repeated-card.ng-leave,
.repeated-card.ng-move, 337 337 .repeated-card.ng-move,
templates/settings.html View file @ 032de65
File was created 1 <div class="card" id="resetPasswordForm">
2
3 <h2>Change Password</h2>
4
5 <div class="row">
6 <form class="col s12">
7
8
9 <div class="row">
10 <div class="input-field col s12">
11 <input id="password" type="password" ng-model="oldPassword" class="validate">
12 <label for="password">Old Password</label>
13 </div>
14 </div>
15
16 <div class="row">
17 <div class="input-field col s12">
18 <input id="password" type="password" ng-model="newPassword" class="validate">
19 <label for="password">New Password</label>
20 </div>
21 </div>
22
23 <div class="row">
24 <div class="input-field col s12">
25 <input id="password" type="password" ng-model="confirmedNewPassword" class="validate">
26 <label for="password">Confirm New Password</label>