110swag / flashy-frontend

Download as
Browse Code »

Commit b20f733ef7a8fb7d2424c188c3c35d1d85cce8d2

Authored by Melody
2 parents b20385f0c6 1b2fe2fdfe
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Sidebar stuffs

Showing 8 changed files Inline Diff

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