110swag / flashy-frontend

Download as
Browse Code »

Commit a70c05102ff17ea61cd7213d680a1e3935559f9d

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

changed sidebar to top bar

Showing 5 changed files with 63 additions and 38 deletions Inline Diff

home.html View file @ a70c051
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<link rel="stylesheet" 5 5 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 6 6 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
7 7
<link rel="stylesheet" href="styles/flashier.css"/> 8 8 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 9 9 <link rel="stylesheet" href="styles/flashy.css"/>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' 10 10 <link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
rel='stylesheet' type='text/css'> 11 11 rel='stylesheet' type='text/css'>
<title>Flashy</title> 12 12 <title>Flashy</title>
</head> 13 13 </head>
<header> 14 14 <header>
<a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i 15
class="medium mdi-navigation-menu"></i></a> 16
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed ng-cloak"> 17
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 18
19 15
<h1>Flashy</h1> 20 16 <!--<a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i
</a></li> 21 17 class="medium mdi-navigation-menu"></i></a>
<li class="no-padding"> 22 18 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed ng-cloak">
<ul class="collapsible" data-collapsible="accordion"> 23 19 <li class="logo"><a href="//flashy.cards/" id="logo-container">
<li class="bold"> 24 20
<a class="collapsible-header black-text">Classes</a> 25 21 <h1>Flashy</h1>
</li> 26 22 </a></li>
<div class="collapsible-body" style="display: block"> 27 23 <li class="no-padding">
<ul> 28 24 <ul class="collapsible" data-collapsible="accordion">
<li ui-sref-active="active" ng-repeat="section in sections"> 29 25 <li class="bold">
<a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 30 26 <a class="collapsible-header black-text">Classes</a>
</li> 31 27 </li>
</ul> 32 28 <div class="collapsible-body" style="display: block">
</div> 33 29 <ul>
</ul> 34 30 <li ui-sref-active="active" ng-repeat="section in sections">
</li> 35 31 <a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
<!--<li class="bold"> 36 32 </li>
<a>Classes:</a></li> 37 33 </ul>
<div ng-repeat="section in sections"> 38 34 </div>
<li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 39 35 </ul>
</li> 40 36 </li>
</div>--> 41 37 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 42 38 <li class="bold"><a ui-sref="study">Study</a></li>
<li class="bold"><a ui-sref="study">Study</a></li> 43 39 <li class="bold"><a ui-sref="logout">Logout</a></li>
<li class="bold"><a ui-sref="logout">Logout</a></li> 44 40 </ul>-->
</ul> 45
46 41
42
</header> 47 43 </header>
<body ng-controller="RootController"> 48 44 <body ng-controller="RootController">
49 45
<main> 50 46 <!-- Menu Bar -->
47 <nav ng-show="isLoggedIn">
48 <div class="nav-wrapper">
49 <a href="#" class="brand-logo center">Flashy</a>
50 <ul id="nav-mobile" class="right hide-on-med-and-down">
51
52 <ul id="dropdown1" class="dropdown-content">
53
54 <li ui-sref-active="active" ng-repeat="section in sections">
55 <a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
56 </li>
57 <li class="divider"></li>
58 <li><a ui-sref="addclass">Add Class</a></li>
59 </ul>
60
61
62 <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Classes<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
63 <li><a ui-sref="study">Study</a></li>
64 <li><a ui-sref="logout">Logout</a></li>
65 </ul>
66 </div>
67 </nav>
68
<div class="" ui-view></div> 51 69 <div class="" ui-view></div>
</main> 52 70
71
72 <!--<main>
73 <div class="" ui-view></div>
74 </main>-->
53 75
</body> 54 76 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 55 77 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 56 78 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 57 79 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 58 80 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 59 81 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 60 82 <script type="text/javascript" src="scripts/jquery.collapsible.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script> 61 83 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 62 84 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 63 85 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 64 86 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
65 87
66 88
<script src="config.js"></script> 67 89 <script src="config.js"></script>
68 90
<!-- Controllers --> 69 91 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 70 92 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 71 93 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 72 94 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 73 95 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 74 96 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 75 97 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 76 98 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 77 99 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 78 100 <script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/CardListController.js"></script> 79 101 <script src="scripts/CardListController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 80 102 <script src="scripts/VerifyEmailController.js"></script>
<!--<script src="scripts/SidebarController.js"></script>--> 81 103 <!--<script src="scripts/SidebarController.js"></script>-->
82 104
<!-- Services --> 83 105 <!-- Services -->
<script src="scripts/UserService.js"></script> 84 106 <script src="scripts/UserService.js"></script>
85 107
<!-- Directives --> 86 108 <!-- Directives -->
<script src="scripts/FlashcardDirective.js"></script> 87 109 <script src="scripts/FlashcardDirective.js"></script>
88 110
<!-- Other --> 89 111 <!-- Other -->
<!--<script src="scripts/StudyController.js"></script>--> 90 112 <!--<script src="scripts/StudyController.js"></script>-->
91 113
92 114
</html> 93 115 </html>
94 116
scripts/ClassAddController.js View file @ a70c051
angular.module('flashy.ClassAddController', ['ui.router', 'ngMaterial']). 1 1 angular.module('flashy.ClassAddController', ['ui.router', 'ngMaterial']).
2 2
controller('ClassAddController', ['$scope', '$state', '$http', function($scope, $state, $http) { 3 3 controller('ClassAddController', ['$scope', '$state', '$http', function($scope, $state, $http) {
4 4
5
$scope.trySearch = function(searchText) { 5 6 $scope.trySearch = function(searchText) {
return $http.get('/api/sections/search/', { 6 7 return $http.get('/api/sections/search/', {
params: { 7 8 params: {
q: searchText 8 9 q: searchText
} 9 10 }
}).then(function(response) { 10 11 }).then(function(response) {
return response.data; 11 12 return response.data;
}); 12 13 });
}; 13 14 };
14 15
$scope.searchText = ''; 15 16 $scope.searchText = '';
$scope.submit = function() { 16 17 $scope.submit = function() {
$http.post('/api/sections/' + $scope.selectedItem.id + '/enroll/'). 17 18 $http.post('/api/sections/' + $scope.selectedItem.id + '/enroll/').
success(function(data) { 18 19 success(function(data) {
$scope.sections.push($scope.selectedItem); 19 20 $scope.sections.push($scope.selectedItem);
$state.go('feed', {sectionId: $scope.selectedItem.id}); 20 21 $state.go('feed', {sectionId: $scope.selectedItem.id});
}). 21 22 }).
error(function(data, status, header, config) { 22 23 error(function(data, status, header, config) {
// shhhh 23 24 // shhhh
$state.go('feed', {sectionId: $scope.selectedItem.id}); 24 25 $state.go('feed', {sectionId: $scope.selectedItem.id});
}); 25 26 });
}; 26 27 };
27 28
/*$scope.trySearch = function() { 28 29 /*$scope.trySearch = function() {
$http.get('/api/sections/search', [$scope.searchText]). 29 30 $http.get('/api/sections/search', [$scope.searchText]).
success(function(data) { 30 31 success(function(data) {
return data; 31 32 return data;
}). 32 33 }).
error(function(err) { 33 34 error(function(err) {
scripts/FeedController.js View file @ a70c051
angular.module('flashy.FeedController', ['ui.router']). 1 1 angular.module('flashy.FeedController', ['ui.router']).
2 2
controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function($scope, $stateParams, $state, $http) { 3 3 controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function ($scope, $stateParams, $state, $http) {
4
5
6
console.log('Hello from feed'); 4 7 console.log('Hello from feed');
sectionId = $stateParams.sectionId; 5 8 sectionId = $stateParams.sectionId;
$scope.cards = []; 6 9 $scope.cards = [];
7 10
var loc = window.location, new_uri; 8 11 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 9 12 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 10 13 new_uri = 'wss:';
} else { 11 14 } else {
new_uri = 'ws:'; 12 15 new_uri = 'ws:';
} 13 16 }
new_uri += '//' + loc.host; 14 17 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 15 18 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
16 19
ws.onopen = function() { 17 20 ws.onopen = function() {
console.log('websocket connected'); 18 21 console.log('websocket connected');
}; 19 22 };
ws.onmessage = function(e) { 20 23 ws.onmessage = function(e) {
console.log('got websocket message ' + e.data); 21 24 console.log('got websocket message ' + e.data);
$scope.refreshCards(); 22 25 $scope.refreshCards();
}; 23 26 };
ws.onerror = function(e) { 24 27 ws.onerror = function(e) {
console.error(e); 25 28 console.error(e);
}; 26 29 };
ws.onclose = function(e) { 27 30 ws.onclose = function(e) {
console.log('connection closed'); 28 31 console.log('connection closed');
}; 29 32 };
30 33
$http.get('/api/sections/' + sectionId + '/feed/'). 31 34 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 32 35 success(function(data) {
console.log(data); 33 36 console.log(data);
$scope.cards = data; 34 37 $scope.cards = data;
}). 35 38 }).
error(function(err) { 36 39 error(function(err) {
console.log('pulling feed failed'); 37 40 console.log('pulling feed failed');
}); 38 41 });
39 42
$scope.viewDeck = function() { 40 43 $scope.viewDeck = function() {
$state.go('deck', {sectionId: sectionId}); 41 44 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 42 45 console.log('go to deck');
}; 43 46 };
44 47
$scope.pushCard = function() { 45 48 $scope.pushCard = function() {
console.log('make! card content:' + $scope.text); 46 49 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 47 50 var pushed = new Date(Date.now());
console.log(pushed.toString()); 48 51 console.log(pushed.toString());
text = $scope.text; 49 52 text = $scope.text;
// attempt to make card :( 50 53 // attempt to make card :(
var myCard = { 51 54 var myCard = {
'text': $scope.text, 52 55 'text': $scope.text,
'material_date': pushed, 53 56 'material_date': pushed,
'mask': '[]', 54 57 'mask': '[]',
section: sectionId 55 58 section: sectionId
}; 56 59 };
$http.post('/api/flashcards/', myCard). 57 60 $http.post('/api/flashcards/', myCard).
success(function(data) { 58 61 success(function(data) {
console.log('pushed a card!'); 59 62 console.log('pushed a card!');
listenForC = true; 60 63 listenForC = true;
}). 61 64 }).
error(function(error) { 62 65 error(function(error) {
console.log('something went wrong pushing a card!'); 63 66 console.log('something went wrong pushing a card!');
}); 64 67 });
65 68
$scope.text = ''; 66 69 $scope.text = '';
}; 67 70 };
68 71
$scope.refreshCards = function() { 69 72 $scope.refreshCards = function() {
$http.get('/api/sections/' + sectionId + '/feed/'). 70 73 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 71 74 success(function(data) {
console.log(data); 72 75 console.log(data);
$scope.cards = data; 73 76 $scope.cards = data;
console.log('success in refresh cards...'); 74 77 console.log('success in refresh cards...');
}). 75 78 }).
error(function(err) { 76 79 error(function(err) {
console.log('refresh fail'); 77 80 console.log('refresh fail');
}); 78 81 });
}; 79 82 };
80 83
/* Key bindings for the whole feed window. Hotkey it up! */ 81 84 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 82 85 var listenForC = true;
83 86
// Need to pass these options into openmodal and leanmodal, 84 87 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 85 88 // otherwise the ready handler doesn't get called
86 89
modal_options = { 87 90 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 88 91 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 89 92 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 90 93 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 91 94 out_duration: 200, // Transition out duration
ready: function() { 92 95 ready: function() {
listenForC = false; 93 96 listenForC = false;
console.log('modal OPENING'); 94 97 console.log('modal OPENING');
$('#new-card-input').focus(); 95 98 $('#new-card-input').focus();
}, 96 99 },
complete: function() { 97 100 complete: function() {
listenForC = true; 98 101 listenForC = true;
console.log('modal done, closing'); 99 102 console.log('modal done, closing');
$('#new-card-input').blur(); 100 103 $('#new-card-input').blur();
} 101 104 }
}; 102 105 };
103 106
$(document).keydown(function(e) { 104 107 $(document).keydown(function(e) {
var keyed = e.which; 105 108 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" or "C" for compose 106 109 if (keyed == 67 && listenForC) { // "c" or "C" for compose
$('#newCard').openModal(modal_options); 107 110 $('#newCard').openModal(modal_options);
e.preventDefault(); 108 111 e.preventDefault();
listenForC = false; 109 112 listenForC = false;
return false; 110 113 return false;
} else if (keyed == 13 || keyed == 27) { // enter or esc, respectively 111 114 } else if (keyed == 13 || keyed == 27) { // enter or esc, respectively
listenForC = true; 112 115 listenForC = true;
document.getElementById('new-card-input').value = ''; 113 116 document.getElementById('new-card-input').value = '';
} 114 117 }
}); 115 118 });
116 119
$scope.flashcard = ''; 117 120 $scope.flashcard = '';
$scope.text = ''; 118 121 $scope.text = '';
var selected_start = 0; 119 122 var selected_start = 0;
var selected_end = 0; 120 123 var selected_end = 0;
$(document).ready(function() { 121 124 $(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 122 125 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 123 126 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('mouseup', function() { 124 127 $('#new-card-input').on('mouseup', function() {
selected_start = this.selectionStart; 125 128 selected_start = this.selectionStart;
selected_end = this.selectionEnd; 126 129 selected_end = this.selectionEnd;
}); 127 130 });
$('button#blank-selected').click(function() { 128 131 $('button#blank-selected').click(function() {
document.execCommand('bold', false, null); 129 132 document.execCommand('bold', false, null);
console.log('blanking ' + selected_start + ' to ' + selected_end); 130 133 console.log('blanking ' + selected_start + ' to ' + selected_end);
styles/flashy.css View file @ a70c051
.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
ul.side-nav.fixed li { 45 45 /*ul.side-nav.fixed li {
font-size: 24px; 46 46 font-size: 24px;
} 47 47 }
48 48
ul.side-nav.fixed li a.class { 49 49 ul.side-nav.fixed li a.class {
height: 28px; 50 50 height: 28px;
font-size: 20px; 51 51 font-size: 20px;
line-height: normal; 52 52 line-height: normal;
font-weight: 600; 53 53 font-weight: 600;
} 54 54 }
55 55
ul.side-nav.fixed li a { 56 56 ul.side-nav.fixed li a {
font-size: 24px; 57 57 font-size: 24px;
} 58 58 }*/
59 59
/* Flashcard directive css */ 60 60 /* Flashcard directive css */
.card { 61 61 .card {
word-wrap: break-word; 62 62 word-wrap: break-word;
} 63 63 }
64 64
.card.flashy { 65 65 .card.flashy {
float: left; 66 66 float: left;
text-align: center; 67 67 text-align: center;
margin: 6px; 68 68 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 69 69 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
font-family: 'Titillium Web', sans-serif; 70 70 font-family: 'Titillium Web', sans-serif;
} 71 71 }
72 72
.card.flashy.shrinky { 73 73 .card.flashy.shrinky {
height: 0; 74 74 height: 0;
opacity: 0; 75 75 opacity: 0;
overflow: hidden; 76 76 overflow: hidden;
} 77 77 }
78 78
.card-overlay { 79 79 .card-overlay {
cursor: pointer; 80 80 cursor: pointer;
left: 0; 81 81 left: 0;
opacity: 0; 82 82 opacity: 0;
position: absolute; 83 83 position: absolute;
top: 0; 84 84 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 85 85 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 86 86 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 87 87 /* animation effect to appear on off-hover */
visibility: hidden; 88 88 visibility: hidden;
height: 100%; 89 89 height: 100%;
width: 100%; 90 90 width: 100%;
} 91 91 }
92 92
.card-overlay i { 93 93 .card-overlay i {
color: #FFF; 94 94 color: #FFF;
left: 50%; 95 95 left: 50%;
position: absolute; 96 96 position: absolute;
top: 50%; 97 97 top: 50%;
transform: translate(-50%, -50%); 98 98 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 99 99 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 100 100 }
101 101
.center-me:hover i { 102 102 .center-me:hover i {
text-shadow: 0 0 15px rgba(255,255,255,0.7); 103 103 text-shadow: 0 0 15px rgba(255,255,255,0.7);
} 104 104 }
105 105
.card:hover .card-overlay { 106 106 .card:hover .card-overlay {
opacity: 0.9; 107 107 opacity: 0.9;
transition-delay: 0s; /* animation effect to appear on hover */ 108 108 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 109 109 visibility: visible;
} 110 110 }
111 111
.top-box { 112 112 .top-box {
background-color: rgba(0, 81, 229, 0.6); 113 113 background-color: rgba(0, 81, 229, 0.6);
height: 65%; 114 114 height: 65%;
position: relative; 115 115 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 116 116 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 117 117 width: 100%;
} 118 118 }
119 119
.top-box:hover { 120 120 .top-box:hover {
background-color: rgba(0, 81, 229, 0.75); 121 121 background-color: rgba(0, 81, 229, 0.75);
} 122 122 }
123 123
.bottom-box { 124 124 .bottom-box {
height: 35%; 125 125 height: 35%;
width: 100%; 126 126 width: 100%;
} 127 127 }
128 128
.left-box { 129 129 .left-box {
background-color: rgba(15, 0, 155, 0.6); 130 130 background-color: rgba(15, 0, 155, 0.6);
float: left; 131 131 float: left;
position: relative; 132 132 position: relative;
height: 100%; 133 133 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 134 134 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 135 135 width: 50%;
} 136 136 }
137 137
.left-box:hover { 138 138 .left-box:hover {
background-color: rgba(15, 0, 155, 0.75); 139 139 background-color: rgba(15, 0, 155, 0.75);
} 140 140 }
141 141
.right-box { 142 142 .right-box {
background-color: rgba(207, 0, 86, 0.6); 143 143 background-color: rgba(207, 0, 86, 0.6);
float: right; 144 144 float: right;
height: 100%; 145 145 height: 100%;
position: relative; 146 146 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 147 147 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 148 148 width: 50%;
} 149 149 }
150 150
.right-box:hover { 151 151 .right-box:hover {
background-color: rgba(207, 0, 86, 0.75); 152 152 background-color: rgba(207, 0, 86, 0.75);
} 153 153 }
154 154
.center-me { 155 155 .center-me {
height: 100%; 156 156 height: 100%;
margin: 0 auto; 157 157 margin: 0 auto;
text-align: center; 158 158 text-align: center;
vertical-align: middle; 159 159 vertical-align: middle;
width: 100%; 160 160 width: 100%;
} 161 161 }
162 162
.modal.bottom-sheet { 163 163 .modal.bottom-sheet {
width: 40%; 164 164 width: 40%;
margin-left: auto; 165 165 margin-left: auto;
margin-right: auto; 166 166 margin-right: auto;
} 167 167 }
168 168
#newCard input[type=text] { 169 169 #newCard input[type=text] {
height: 3rem !important; 170 170 height: 3rem !important;
} 171 171 }
172 172
.input-field label { 173 173 .input-field label {
color: #673ab7; 174 174 color: #673ab7;
} 175 175 }
176 176
/* label focus color */ 177 177 /* label focus color */
.input-field input[type]:focus + label { 178 178 .input-field input[type]:focus + label {
color: #b388ff; 179 179 color: #b388ff;
} 180 180 }
181 181
/* label underline focus color */ 182 182 /* label underline focus color */
.input-field input[type]:focus { 183 183 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 184 184 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 185 185 box-shadow: 0 1px 0 0 #b388ff;
} 186 186 }
187 187
/* valid color */ 188 188 /* valid color */
.input-field input[type].valid { 189 189 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 190 190 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 191 191 box-shadow: 0 1px 0 0 #673ab7;
} 192 192 }
193 193
/* invalid color */ 194 194 /* invalid color */
.input-field input[type].invalid { 195 195 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 196 196 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 197 197 box-shadow: 0 1px 0 0 #673ab7;
} 198 198 }
199 199
/* icon prefix focus color */ 200 200 /* icon prefix focus color */
.input-field .prefix.active { 201 201 .input-field .prefix.active {
color: #b388ff; 202 202 color: #b388ff;
} 203 203 }
204 204
/* label focus color */ 205 205 /* label focus color */
.input-field textarea[type]:focus + label { 206 206 .input-field textarea[type]:focus + label {
color: #b388ff; 207 207 color: #b388ff;
} 208 208 }
209 209
/* label underline focus color */ 210 210 /* label underline focus color */
.input-field textarea[type]:focus { 211 211 .input-field textarea[type]:focus {
border-bottom: 1px solid #b388ff; 212 212 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 213 213 box-shadow: 0 1px 0 0 #b388ff;
} 214 214 }
templates/addclass.html View file @ a70c051
<div> 1 1 <div>
2
<div layout="column"> 3 2 <div layout="column">
<md-content layout-padding="" layout="column" style="overflow:hidden"> 4 3 <md-content layout-padding="" layout="column" style="overflow:hidden">
5 4
<form ng-submit="$event.preventDefault()"> 6 5 <form ng-submit="$event.preventDefault()">
<div layout="row"> 7 6 <div layout="row">
<md-autocomplete flex="" 8 7 <md-autocomplete flex=""
md-autofocus="true" 9 8 md-autofocus="true"
md-selected-item="selectedItem" 10 9 md-selected-item="selectedItem"
md-search-text="searchText" 11 10 md-search-text="searchText"
md-items="item in trySearch(searchText)" 12 11 md-items="item in trySearch(searchText)"
md-item-text="item.short_name" 13 12 md-item-text="item.short_name"
md-selected-item-change="selectObject(event)" 14 13 md-selected-item-change="selectObject(event)"
md-autoselect="true" 15 14 md-autoselect="true"
> 16 15 >
<md-item-template> 17 16 <md-item-template>
<div layout="row"> 18 17 <div layout="row">
<div>{{item.short_name}}: {{item.course_title}} 19 18 <div>{{item.short_name}}: {{item.course_title}}
({{item.instructor}}) 20 19 ({{item.instructor}})
</div> 21 20 </div>
<div style="margin-left:auto;text-align:right;padding-left:30px"> 22 21 <div style="margin-left:auto;text-align:right;padding-left:30px">
{{item.lecture_times}} 23 22 {{item.lecture_times}}
</div> 24 23 </div>
</div> 25 24 </div>
</md-item-template> 26 25 </md-item-template>
<md-not-found> 27 26 <md-not-found>
No classes match "{{searchText}}". 28 27 No classes match "{{searchText}}".
</md-not-found> 29 28 </md-not-found>
</md-autocomplete> 30 29 </md-autocomplete>
<button class="btn waves-effect waves-light" type="submit" name="add" ng-click="submit()">Add 31 30 <button class="btn waves-effect waves-light" type="submit" name="add" ng-click="submit()">Add
<i class="mdi-content-add right"></i> 32 31 <i class="mdi-content-add right"></i>
</button> 33 32 </button>
</div> 34 33 </div>
35 34
</form> 36 35 </form>