110swag / flashy-frontend

Download as
Browse Code »

Commit 714fedf890e3b47c0814ab813bc9dfb119452e23

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

display blanks in flashcarddirective!

Showing 4 changed files with 22 additions and 4 deletions Inline Diff

scripts/FlashcardDirective.js View file @ 714fedf
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', '$state', '$window', 3 3 directive('flashcard', ['$http', '$state', '$window',
function($http, $state, $window) { 4 4 function($http, $state, $window) {
return { 5 5 return {
templateUrl: '/app/templates/flashcard.html', 6 6 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 7 7 restrict: 'E',
scope: { 8 8 scope: {
flashcard: '=flashcardObj', // flashcard-obj in parent html 9 9 flashcard: '=flashcardObj', // flashcard-obj in parent html
refresh: '&' // eval refresh in parent html 10 10 refresh: '&' // eval refresh in parent html
}, 11 11 },
link: function(scope, element) { 12 12 link: function(scope, element) {
/* Handles width of the card */ 13 13 /* Handles width of the card */
function refresh_width() { 14 14 function refresh_width() {
avail = $window.innerWidth - 17; 15 15 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250) - 12); 16 16 width = Math.floor(avail / Math.floor(avail / 250) - 12);
element.children().css({ 17 17 element.children().css({
width: width + 'px', 18 18 width: width + 'px',
height: (width * 3 / 5) + 'px', 19 19 height: (width * 3 / 5) + 'px',
'font-size': 100 * width / 250 + '%' 20 20 'font-size': 100 * width / 250 + '%'
}); 21 21 });
}; 22 22 };
angular.element($window).bind('resize', refresh_width); 23 23 angular.element($window).bind('resize', refresh_width);
refresh_width(); 24 24 refresh_width();
25 25 scope.textPieces = [];
26 console.log(scope.flashcard);
27 scope.flashcard.mask.sort(function(a, b) {
28 return a[0] - b[0];
29 });
30 var i = 0;
31 scope.flashcard.mask.forEach(function(blank) {
32 scope.textPieces.push({text: scope.flashcard.text.slice(i, blank[0])});
33 scope.textPieces.push({text: scope.flashcard.text.slice(blank[0], blank[1]), blank: true});
34 i = blank[1];
35 });
36 scope.textPieces.push({text: scope.flashcard.text.slice(i)});
/* Pulls card from feed into deck */ 26 37 /* Pulls card from feed into deck */
scope.pullCard = function(flashcard) { 27 38 scope.pullCard = function(flashcard) {
if ($state.current.name == 'feed') { 28 39 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard). 29 40 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
success(function(data) { 30 41 success(function(data) {
console.log('pulled flashcard #' + flashcard.id); 31 42 console.log('pulled flashcard #' + flashcard.id);
scope.startShrink = true; 32 43 scope.startShrink = true;
scope.refresh(); 33 44 scope.refresh();
}). 34 45 }).
error(function(data) { 35 46 error(function(data) {
console.log('failed to pull flashcard #' + flashcard.id); 36 47 console.log('failed to pull flashcard #' + flashcard.id);
}); 37 48 });
} 38 49 }
}; 39 50 };
40 51
/* Unpulls card from deck */ 41 52 /* Unpulls card from deck */
scope.unpullCard = function(flashcard) { 42 53 scope.unpullCard = function(flashcard) {
if ($state.current.name == 'deck') { 43 54 if ($state.current.name == 'deck') {
console.log('unpulling card...'); 44 55 console.log('unpulling card...');
45 56
$http.post('/api/flashcards/' + flashcard.id + '/unpull/', 46 57 $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
flashcard). 47 58 flashcard).
success(function(data) { 48 59 success(function(data) {
console.log('card unpull success'); 49 60 console.log('card unpull success');
scope.startShrink = true; 50 61 scope.startShrink = true;
scope.refresh(); 51 62 scope.refresh();
}). 52 63 }).
error(function(data) { 53 64 error(function(data) {
console.log('card unpull FAILURE'); 54 65 console.log('card unpull FAILURE');
}); 55 66 });
} 56 67 }
}; 57 68 };
58 69
/* Hides card from feed */ 59 70 /* Hides card from feed */
scope.hideCard = function(flashcard) { 60 71 scope.hideCard = function(flashcard) {
if ($state.current.name == 'feed') { 61 72 if ($state.current.name == 'feed') {
$http.post('/api/flashcards/' + flashcard.id + '/hide/', 62 73 $http.post('/api/flashcards/' + flashcard.id + '/hide/',
flashcard). 63 74 flashcard).
success(function(data) { 64 75 success(function(data) {
console.log('card hide success'); 65 76 console.log('card hide success');
scope.startShrink = true; 66 77 scope.startShrink = true;
scope.refresh(); 67 78 scope.refresh();
}). 68 79 }).
error(function(data) { 69 80 error(function(data) {
console.log('card hide FAILURE'); 70 81 console.log('card hide FAILURE');
}); 71 82 });
} 72 83 }
scripts/UserService.js View file @ 714fedf
angular.module('flashy.UserService', ['ui.router']). 1 1 angular.module('flashy.UserService', ['ui.router']).
service('UserService', function($rootScope, $http, $q) { 2 2 service('UserService', function($rootScope, $http, $q) {
var deferred = $q.defer(); 3 3 var deferred = $q.defer();
var _user = false; 4 4 var _user = false;
$http.get('/api/me/').success(function(data) { 5 5 $http.get('/api/me/').success(function(data) {
console.log('user is logged in!'); 6 6 console.log('user is logged in!');
_user = data; 7 7 _user = data;
deferred.resolve(data); 8 8 deferred.resolve(data);
}).error(function(data) { 9 9 }).error(function(data) {
console.log(data); 10 10 console.log(data);
console.log('not logged in yet: ' + data.detail); 11 11 console.log('not logged in yet: ' + data.detail);
_user = {email:false}; 12 12 _user = {email: false};
deferred.resolve(_user); 13 13 deferred.resolve(_user);
}); 14 14 });
15 15
this.isResolved = function() { 16 16 this.isResolved = function() {
return !!_user; 17 17 return !!_user;
}; 18 18 };
this.getUserData = function() { 19 19 this.getUserData = function() {
if (this.isResolved()) return _user; 20 20 if (this.isResolved()) return _user;
else return deferred.promise; 21 21 else return deferred.promise;
}; 22 22 };
this.login = function(data) { 23 23 this.login = function(data) {
_user = data; 24 24 _user = data;
deferred.resolve(data); 25 25 deferred.resolve(data);
}; 26 26 };
this.logout = function() { 27 27 this.logout = function() {
_user = false; 28 28 _user = false;
deferred.resolve({}); 29 29 deferred.resolve({});
}; 30 30 };
this.isLoggedIn = function() { 31 31 this.isLoggedIn = function() {
rv = this.isResolved() && _user.email; 32 32 rv = this.isResolved() && _user.email;
return rv; 33 33 return rv;
}; 34 34 };
}); 35 35 });
styles/flashy.css View file @ 714fedf
.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.5); 99 99 background-color: rgba(0, 184, 76, 0.5);
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.6); 107 107 background-color: rgba(0, 184, 76, 0.6);
} 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
.modal.bottom-sheet { 149 149 .modal.bottom-sheet {
max-width: 600px; 150 150 max-width: 600px;
margin-left: auto; 151 151 margin-left: auto;
margin-right: auto; 152 152 margin-right: auto;
} 153 153 }
154 154
#newCard input[type=text] { 155 155 #newCard input[type=text] {
height: 3rem !important; 156 156 height: 3rem !important;
} 157 157 }
158 158
.input-field label { 159 159 .input-field label {
color: #00b3c2; 160 160 color: #00b3c2;
} 161 161 }
162 162
/* label focus color */ 163 163 /* label focus color */
.input-field input[type]:focus + label { 164 164 .input-field input[type]:focus + label {
color: #00b3c2; 165 165 color: #00b3c2;
} 166 166 }
167 167
/* label underline focus color */ 168 168 /* label underline focus color */
.input-field input[type]:focus { 169 169 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 170 170 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 171 171 box-shadow: 0 1px 0 0 #b388ff;
} 172 172 }
173 173
/* valid color */ 174 174 /* valid color */
.input-field input[type].valid { 175 175 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 176 176 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 177 177 box-shadow: 0 1px 0 0 #673ab7;
} 178 178 }
179 179
/* invalid color */ 180 180 /* invalid color */
.input-field input[type].invalid { 181 181 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 182 182 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 183 183 box-shadow: 0 1px 0 0 #673ab7;
} 184 184 }
185 185
/* icon prefix focus color */ 186 186 /* icon prefix focus color */
.input-field .prefix.active { 187 187 .input-field .prefix.active {
color: #b388ff; 188 188 color: #b388ff;
} 189 189 }
190 190
/* label focus color */ 191 191 /* label focus color */
.input-field textarea[type]:focus + label { 192 192 .input-field textarea[type]:focus + label {
color: #b388ff; 193 193 color: #b388ff;
} 194 194 }
195 195
/* label underline focus color */ 196 196 /* label underline focus color */
.input-field textarea[type]:focus { 197 197 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 198 198 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 199 199 box-shadow: 0 1px 0 0 #b388ff;
} 200 200 }
201 201
body { 202 202 body {
background-color: #e8e8e8; 203 203 background-color: #e8e8e8;
overflow-x: hidden; 204 204 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 205 205 font-family: 'Titillium Web', sans-serif;
display: flex; 206 206 display: flex;
min-height: 100vh; 207 207 min-height: 100vh;
flex-direction: column; 208 208 flex-direction: column;
} 209 209 }
210 210
html { 211 211 html {
background: transparent; 212 212 background: transparent;
} 213 213 }
214 214
.btn { 215 215 .btn {
background-color: #00b3c2; 216 216 background-color: #00b3c2;
} 217 217 }
218 218
.btn:hover { 219 219 .btn:hover {
background-color: #0097cb; 220 220 background-color: #0097cb;
} 221 221 }
222 222
.btn-floating { 223 223 .btn-floating {
background-color: #00b3c2; 224 224 background-color: #00b3c2;
} 225 225 }
226 226
.btn-floating:hover { 227 227 .btn-floating:hover {
background-color: #0097cb; 228 228 background-color: #0097cb;
} 229 229 }
230 230
#logo-container { 231 231 #logo-container {
margin-bottom: 18px; 232 232 margin-bottom: 18px;
} 233 233 }
234 234
#lean-overlay { 235 235 #lean-overlay {
display: none !important; 236 236 display: none !important;
} 237 237 }
238 238
nav { 239 239 nav {
background-color: #d2143f !important; 240 240 background-color: #d2143f !important;
} 241 241 }
main{ 242 242 main{
min-height:145px; 243 243 min-height:145px;
flex: 1 0 auto; 244 244 flex: 1 0 auto;
} 245 245 }
.side-nav .collapsible-body { 246 246 .side-nav .collapsible-body {
width: 100%; 247 247 width: 100%;
templates/flashcard.html View file @ 714fedf
<div class="card flashy smallify" ng-init="startShrink = false" 1 1 <div class="card flashy smallify" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink}"> 2 2 ng-class="{'shrinky': startShrink}">
<div class="valign-wrapper"> 3 3 <div class="valign-wrapper">
<div class="card-content valign"> 4 4 <div class="card-content valign center-align">
<p>{{flashcard.text}}</p> 5 5 <span ng-repeat="piece in textPieces"
6 ng-style="piece.blank ? {'opacity':'0.4', 'border-bottom': '1px solid black'} : {}">{{piece.text}}</span>
</div> 6 7 </div>
</div> 7 8 </div>
<div class="card-overlay"> 8 9 <div class="card-overlay">
<div class="top-box no-user-select" 9 10 <div class="top-box no-user-select"
ng-click="pullCard(flashcard)"> 10 11 ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 11 12 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 12 13 </div>
13 14
<div class="bottom-box no-user-select"> 14 15 <div class="bottom-box no-user-select">
<div class="left-box"> 15 16 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 16 17 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 17 18 </div>
<div class="right-box" ng-click="unpullCard(flashcard); 18 19 <div class="right-box" ng-click="unpullCard(flashcard);
hideCard(flashcard)"> 19 20 hideCard(flashcard)">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 20 21 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 21 22 </div>
22 23
</div> 23 24 </div>
</div> 24 25 </div>
</div> 25 26 </div>