110swag / flashy-frontend

Download as
Browse Code »

Commit 778502213c820fe2a32f25ca5162e04d8006f5e8

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

awful javascript to fit cards

Showing 5 changed files with 94 additions and 91 deletions Inline Diff

home.html View file @ 7785022
<!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"/>
</head> 10 10 </head>
<header> 11 11 <header>
<!--<a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a>--> 12 12 <!--<a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a>-->
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed"> 13 13 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed">
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 14 14 <li class="logo"><a href="//flashy.cards/" id="logo-container">
15 15
<h1>Flashy</h1> 16 16 <h1>Flashy</h1>
</a></li> 17 17 </a></li>
<li class="bold"> 18 18 <li class="bold">
<a>Classes:</a></li> 19 19 <a>Classes:</a></li>
<div ng-repeat="section in sections"> 20 20 <div ng-repeat="section in sections">
<li class="bold class"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a></li> 21 21 <li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
22 </li>
</div> 22 23 </div>
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 23 24 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
<li class="bold"><a ui-sref="study">Study</a></li> 24 25 <li class="bold"><a ui-sref="study">Study</a></li>
<li class="bold"><a ui-sref="logout">Logout</a></li> 25 26 <li class="bold"><a ui-sref="logout">Logout</a></li>
</ul> 26 27 </ul>
</header> 27 28 </header>
<body ng-controller="RootController"> 28 29 <body ng-controller="RootController">
29 30
<main> 30 31 <main>
<div class="" ui-view></div> 31 32 <div class="" ui-view></div>
</main> 32 33 </main>
33 34
</body> 34 35 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 35 36 <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> 36 37 <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> 37 38 <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> 38 39 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.min.js"></script> 39 40 <script type="text/javascript" src="scripts/materialize.min.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 40 41 <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> 41 42 <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> 42 43 <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> 43 44 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
44 45
<script src="config.js"></script> 45 46 <script src="config.js"></script>
46 47
<!-- Controllers --> 47 48 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 48 49 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 49 50 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 50 51 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 51 52 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 52 53 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 53 54 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 54 55 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 55 56 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 56 57 <script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 57 58 <script src="scripts/VerifyEmailController.js"></script>
<!--<script src="scripts/SidebarController.js"></script>--> 58 59 <!--<script src="scripts/SidebarController.js"></script>-->
59 60
<!-- Services --> 60 61 <!-- Services -->
scripts/DeckController.js View file @ 7785022
var app = angular.module('flashy.DeckController', ['ui.router']); 1 1 var app = angular.module('flashy.DeckController', ['ui.router']);
2 2
app.controller('DeckController', ['$scope', '$http', '$stateParams', 3 3 app.controller('DeckController', ['$scope', '$http', '$stateParams',
function($scope, $http, $stateParams) { 4 4 function($scope, $http, $stateParams) {
// cards array 5 5 // cards array
sectionId = $stateParams.sectionId; 6 6 sectionId = $stateParams.sectionId;
$scope.cards = []; 7 7 $scope.cards = [];
8 8
$http.get('/api/sections/' + sectionId + '/deck/'). 9 9 $http.get('/api/sections/' + sectionId + '/deck/').
success(function(data) { 10 10 success(function(data) {
console.log(data); 11 11 console.log(data);
$scope.cards = data; 12 12 $scope.cards = data;
}). 13 13 }).
error(function(err) { 14 14 error(function(err) {
console.log('pulling feed failed'); 15 15 console.log('pulling feed failed');
}); 16 16 });
17 17
18 18
// reorganize cards in array based on time 19 19 // reorganize cards in array based on time
$scope.filter = function(card) { 20 20 $scope.filter = function(card) {
21 21
// get index of card 22 22 // get index of card
var index = $scope.cards.indexOf(card); 23 23 var index = $scope.cards.indexOf(card);
24 24
//$scope.cards[index]; 25 25 //$scope.cards[index];
26 26
27 27
}; 28 28 };
29 29
// remove card from deck 30 30 // remove card from deck
$scope.removeCard = function(card) { 31 31 $scope.removeCard = function(card) {
32 32
// get index of card 33 33 // get index of card
var index = $scope.cards.indexOf(card); 34 34 var index = $scope.cards.indexOf(card);
35 35
$scope.cards.splice(index, 1); 36 36 $scope.cards.splice(index, 1);
37 37
alert('Removed card!'); 38 38 alert('Removed card!');
}; 39 39 };
40 40
41 41
$scope.editCard = function(card) { 42 42 $scope.editCard = function(card) {
43 43
var index = $scope.cards.indexOf(card); 44 44 var index = $scope.cards.indexOf(card);
45 45
$('.modal-trigger').leanModal({ 46 46 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 47 47 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background 48 48 opacity: .5, // Opacity of modal background
in_duration: 300, // Transition in duration 49 49 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 50 50 out_duration: 200, // Transition out duration
ready: function() { 51 51 ready: function() {
52 52
53 53
$scope.editableContent = $scope.cards[index].content; 54 54 $scope.editableContent = $scope.cards[index].content;
}, // Callback for Modal open 55 55 }, // Callback for Modal open
complete: function() { 56 56 complete: function() {
57 57
$scope.cards[index].content = $scope.editableContent; 58 58 $scope.cards[index].content = $scope.editableContent;
59 59
} // Callback for Modal close 60 60 } // Callback for Modal close
} 61 61 }
); 62 62 );
63 63
64 64
65 //alert($scope.cards[index].content);
65 66
67 // post flashcard edits
68 /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
69 success(function (data) {
70 console.log('No way, really?');
71 }).
72 error(function (error) {
73 console.log('haha, n00b');
74 });
66 75
//alert($scope.cards[index].content); 67 76 */
77 };
68 78
// post flashcard edits 69
/*$http.post('/api/flashcards/', { 'text': $scope.editedContent }). 70
success(function (data) { 71
console.log('No way, really?'); 72
}). 73
error(function (error) { 74
console.log('haha, n00b'); 75
}); 76
77 79
*/ 78 80 // get all cards from your deck and push into array
}; 79 81 /*$http.get('/api/sections/{pk}/deck').
82 success(function(data) {
80 83
81 84
82 85
// get all cards from your deck and push into array 83 86 for (var i = 0; i < data.length; i++) {
/*$http.get('/api/sections/{pk}/deck'). 84 87 cards.push({ 'title': data[i].title, 'content': data[i].content });
success(function(data) { 85 88 }
89 }).
90 error(function(data) {
86 91
92 console.log('no cards?!!');
87 93
94 });*/
88 95
for (var i = 0; i < data.length; i++) { 89
cards.push({ 'title': data[i].title, 'content': data[i].content }); 90
} 91
}). 92
error(function(data) { 93
94 96
console.log('no cards?!!'); 95 97 }]);
96
});*/ 97
98
99
}]); 100
101 98
scripts/FlashcardDirective.js View file @ 7785022
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', function($http) { 3 3 directive('flashcard', ['$http', '$window', function($http, $window) {
return { 4 4 return {
templateUrl: '/app/templates/flashcard.html', 5 5 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 6 6 restrict: 'E',
scope: { 7 7 scope: {
flashcard: '=flashcardObj' // flashcard-obj in html 8 8 flashcard: '=flashcardObj' // flashcard-obj in html
}, 9 9 },
link: function(scope, element) { 10 10
console.log('HELLO FROM FLASHCARD DIRECTIVE'); 11 11 link: function(scope, element) {
console.log(scope.flashcard); 12 12 function refresh_width() {
console.log(element); 13 13 avail = $window.innerWidth;
scope.card_width = '300px'; 14 14 if (avail > 992) avail -= 240;
// Put flashcard-specific functions here. 15 15 width = Math.floor(avail / Math.floor(avail / 250) - 12);
// This will probably include add/hide/modals/etc. 16 16 element.children().css({width: width + 'px', height: (width * 3 / 5) + 'px'});
scope.pullCard = function(flashcard) { 17 17 };
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard); 18 18 angular.element($window).bind('resize', refresh_width);
console.log('pulled flashcard #' + flashcard.id); 19 19 refresh_width();
}; 20 20 // Put flashcard-specific functions here.
} 21 21 // This will probably include add/hide/modals/etc.
}; 22 22 scope.pullCard = function(flashcard) {
}]); 23 23 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
24 console.log('pulled flashcard #' + flashcard.id);
25 };
26 }
27 };
28 }]);
24 29
styles/flashy.css View file @ 7785022
.angucomplete-dropdown { 1 1 .angucomplete-dropdown {
border-color: #ececec; 2 2 border-color: #ececec;
border-width: 1px; 3 3 border-width: 1px;
border-style: solid; 4 4 border-style: solid;
border-radius: 2px; 5 5 border-radius: 2px;
/*width: 250px;*/ 6 6 /*width: 250px;*/
padding: 6px; 7 7 padding: 6px;
cursor: pointer; 8 8 cursor: pointer;
z-index: 9999; 9 9 z-index: 9999;
position: absolute; 10 10 position: absolute;
/*top: 32px; 11 11 /*top: 32px;
left: 0px; 12 12 left: 0px;
*/ 13 13 */
margin-top: -6px; 14 14 margin-top: -6px;
background-color: #ffffff; 15 15 background-color: #ffffff;
} 16 16 }
17 17
.angucomplete-description { 18 18 .angucomplete-description {
font-size: 14px; 19 19 font-size: 14px;
} 20 20 }
21 21
.angucomplete-row { 22 22 .angucomplete-row {
padding: 5px; 23 23 padding: 5px;
color: #000000; 24 24 color: #000000;
margin-bottom: 4px; 25 25 margin-bottom: 4px;
clear: both; 26 26 clear: both;
} 27 27 }
28 28
.angucomplete-selected-row { 29 29 .angucomplete-selected-row {
background-color: #aaaaff; 30 30 background-color: #aaaaff;
} 31 31 }
32 32
.container .row { 33 33 .container .row {
margin-left: 0; 34 34 margin-left: 0;
margin-right: 0; 35 35 margin-right: 0;
} 36 36 }
37 37
ul.side-nav.fixed li { 38 38 ul.side-nav.fixed li {
font-size: 24px; 39 39 font-size: 24px;
} 40 40 }
41 41
ul.side-nav.fixed li.class a { 42 42 ul.side-nav.fixed li.class a {
height: 36px; 43 43 height: 36px;
line-height: normal; 44 44 line-height: normal;
} 45 45 }
46 46
ul.side-nav.fixed li a { 47 47 ul.side-nav.fixed li a {
font-size: 24px; 48 48 font-size: 24px;
} 49 49 }
50 50
/* Flashcard directive css */ 51 51 /* Flashcard directive css */
.card { 52 52 .card {
word-wrap: break-word; 53 53 word-wrap: break-word;
} 54 54 }
55 55
.card.flashy { 56 56 .card.flashy {
float: left; 57 57 float: left;
height: calc((992px / 4 - 6px * 2) * 3 / 5); 58 58 /*height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
margin: 6px; 59 59 margin: 6px;
max-height: 2in; 60 60 /*max-height: 2in;*/
max-width: calc(5 * 60px); 61 61 /*max-width: calc(5 * 60px);*/
min-height: calc((992px / 4 - 6px * 2) * 3 / 5); 62 62 /*min-height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
/*min-width: calc(992px / 4 - 6px * 2);*/ 63 63 /*min-width: calc(992px / 4 - 6px * 2);*/
} 64 64 }
65 65
.card-overlay { 66 66 .card-overlay {
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%);
} 85 85 }
86 86
.card:hover .card-overlay { 87 87 .card:hover .card-overlay {
opacity: 1; 88 88 opacity: 1;
transition-delay: 0s; /* animation effect to appear on hover */ 89 89 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 90 90 visibility: visible;
} 91 91 }
92 92
.top-box { 93 93 .top-box {
background-color: rgba(0, 10, 203, 0.6); 94 94 background-color: rgba(0, 10, 203, 0.6);
height: 65%; 95 95 height: 65%;
position: relative; 96 96 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 97 97 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 98 98 width: 100%;
} 99 99 }
100 100
.top-box:hover { 101 101 .top-box:hover {
background-color: rgba(0, 10, 203, 0.7); 102 102 background-color: rgba(0, 10, 203, 0.7);
} 103 103 }
104 104
.bottom-box { 105 105 .bottom-box {
height: 35%; 106 106 height: 35%;
width: 100%; 107 107 width: 100%;
} 108 108 }
109 109
.left-box { 110 110 .left-box {
background-color: rgba(15, 0, 155, 0.6); 111 111 background-color: rgba(15, 0, 155, 0.6);
float: left; 112 112 float: left;
position: relative; 113 113 position: relative;
height: 100%; 114 114 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 115 115 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 116 116 width: 50%;
} 117 117 }
118 118
.left-box:hover { 119 119 .left-box:hover {
background-color: rgba(15, 0, 155, 0.7); 120 120 background-color: rgba(15, 0, 155, 0.7);
} 121 121 }
122 122
.right-box { 123 123 .right-box {
background-color: rgba(0, 81, 189, 0.6); 124 124 background-color: rgba(0, 81, 189, 0.6);
float: right; 125 125 float: right;
height: 100%; 126 126 height: 100%;
position: relative; 127 127 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 128 128 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 129 129 width: 50%;
} 130 130 }
131 131
.right-box:hover { 132 132 .right-box:hover {
background-color: rgba(0, 81, 189, 0.7); 133 133 background-color: rgba(0, 81, 189, 0.7);
} 134 134 }
135 135
.center-me { 136 136 .center-me {
margin: 0 auto; 137 137 margin: 0 auto;
text-align: center; 138 138 text-align: center;
vertical-align: middle; 139 139 vertical-align: middle;
} 140 140 }
141 141
.modal.bottom-sheet { 142 142 .modal.bottom-sheet {
width: 40%; 143 143 width: 40%;
margin-left: auto; 144 144 margin-left: auto;
margin-right: auto; 145 145 margin-right: auto;
} 146 146 }
147 147
/* label color */ 148 148 /* label color */
.input-field label { 149 149 .input-field label {
color: #673ab7; 150 150 color: #673ab7;
} 151 151 }
152 152
/* label focus color */ 153 153 /* label focus color */
.input-field input[type]:focus + label { 154 154 .input-field input[type]:focus + label {
color: #b388ff; 155 155 color: #b388ff;
} 156 156 }
157 157
/* label underline focus color */ 158 158 /* label underline focus color */
.input-field input[type]:focus { 159 159 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 160 160 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 161 161 box-shadow: 0 1px 0 0 #b388ff;
} 162 162 }
163 163
/* valid color */ 164 164 /* valid color */
.input-field input[type].valid { 165 165 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 166 166 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 167 167 box-shadow: 0 1px 0 0 #673ab7;
} 168 168 }
169 169
/* invalid color */ 170 170 /* invalid color */
.input-field input[type].invalid { 171 171 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 172 172 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 173 173 box-shadow: 0 1px 0 0 #673ab7;
} 174 174 }
175 175
/* icon prefix focus color */ 176 176 /* icon prefix focus color */
.input-field .prefix.active { 177 177 .input-field .prefix.active {
color: #b388ff; 178 178 color: #b388ff;
} 179 179 }
180 180
/* label focus color */ 181 181 /* label focus color */
.input-field textarea[type]:focus + label { 182 182 .input-field textarea[type]:focus + label {
color: #b388ff; 183 183 color: #b388ff;
} 184 184 }
templates/flashcard.html View file @ 7785022
<div class="card flashy" ng-style="{'width':card_width}"> 1 1 <div class="card flashy">
<div class="card-content"> 2 2 <div class="card-content">
<p>{{flashcard.text}}</p> 3 3 <p>{{flashcard.text}}</p>
</div> 4 4 </div>
<div class="card-overlay"> 5 5 <div class="card-overlay">
<a href="#"> 6 6 <a href="#">
<div class="top-box" ng-click="pullCard(flashcard)"> 7 7 <div class="top-box" ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 8 8 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 9 9 </div>
</a> 10 10 </a>
<div class="bottom-box"> 11 11 <div class="bottom-box">
<a href="#"> 12 12 <a href="#">
<div class="left-box"> 13 13 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 14 14 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 15 15 </div>
</a> 16 16 </a>
<a href="#"> 17 17 <a href="#">
<div class="right-box"> 18 18 <div class="right-box">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 19 19 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 20 20 </div>
</a> 21 21 </a>
</div> 22 22 </div>
</div> 23 23 </div>
</div> 24 24 </div>
25 25