110swag / flashy-frontend

Download as
Browse Code »

Commit a7ee2b64a02a810844606fbe142bddfd712b319b

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

new flashcard creation dialog

Showing 5 changed files with 48 additions and 75 deletions Inline Diff

scripts/CardGridController.js View file @ a7ee2b6
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
console.log(arguments); 3 3 console.log(arguments);
console.log($stateParams); 4 4 console.log($stateParams);
console.log(UserService); 5 5 console.log(UserService);
$scope.cards = false; 6 6 $scope.cards = false;
$scope.cardCols = []; // organized data 7 7 $scope.cardCols = []; // organized data
$scope.numCols = 0; 8 8 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 9 9 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 10 10 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 11 11 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$rootScope.currentSection = $scope.section; 12 12 $rootScope.currentSection = $scope.section;
console.log('hello from cardgridcontroller'); 13 13 console.log('hello from cardgridcontroller');
14 14
if (!UserService.isInSection($scope.sectionId)) { 15 15 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 16 16 console.log('user is not enrolled in ' + $scope.sectionId);
return $state.go('addclass'); 17 17 return $state.go('addclass');
} 18 18 }
19 19
angular.element($window).bind('resize', $scope.refreshLayout); 20
21
$scope.refreshColumnWidth = function() { 22 20 $scope.refreshColumnWidth = function() {
console.log('refreshing column width'); 23 21 console.log('refreshing column width');
avail = $window.innerWidth - 17; 24 22 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 25 23 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 26 24 $('.cardColumn').css({
width: width + 'px', 27 25 width: width + 'px',
'font-size': 100 * width / 250 + '%' 28 26 'font-size': 100 * width / 250 + '%'
}); 29 27 });
$('.cardColumn .card.flashy').css({ 30 28 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 31 29 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 32 30 height: (width * 3 / 5) + 'px'
}); 33 31 });
}; 34 32 };
35 33
$scope.refreshLayout = function() { 36 34 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 37 35 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
38 36
// check if we actually need to refresh the whole layout 39 37 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 40 38 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 41 39 $scope.numCols = numCols;
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 42 40 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 43 41 $scope.cardCols = [];
var cols = []; 44 42 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 45 43 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 46 44 $scope.cards.forEach(function(card, i) {
cols[i % $scope.numCols].push(card); 47 45 cols[i % $scope.numCols].push(card);
$scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card}; 48 46 $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
}); 49 47 });
// wait until the next digest cycle to update cardCols 50 48 // wait until the next digest cycle to update cardCols
51 49
$timeout(function() { 52 50 $timeout(function() {
$scope.cardCols = cols; 53 51 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 54 52 $timeout($scope.refreshColumnWidth);
}); 55 53 });
56 54
}; 57 55 };
56
57 angular.element($window).bind('resize', $scope.refreshLayout);
58 58
$scope.ws_host = window.location.origin.replace('http', 'ws'); 59 59 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 60 60 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 61 61 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 62 62 console.log('deck ws open');
}); 63 63 });
64 64
$scope.add = function(card) { 65 65 $scope.add = function(card) {
var colNum = 0; 66 66 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 67 67 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 68 68 var lowestColNum = 0;
while (colNum < $scope.numCols) { 69 69 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 70 70 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 71 71 lowestCol = $scope.cardCols[colNum];
break; 72 72 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 73 73 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 74 74 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 75 75 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 76 76 lowestColLen = $scope.cardCols[colNum].length;
} 77 77 }
colNum++; 78 78 colNum++;
} 79 79 }
console.log(card); 80 80 console.log(card);
$scope.cards.push(data); 81 81 $scope.cards.push(data);
lowestCol.unshift(card); 82 82 lowestCol.unshift(card);
scripts/FeedController.js View file @ a7ee2b6
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket']). 1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket']).
2 2
controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) { 3 3 controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
angular.module('flashy.CardGridController').controller.apply(this, arguments); 4 4 angular.module('flashy.CardGridController').controller.apply(this, arguments);
console.log('Hello from feed'); 5 5 console.log('Hello from feed');
6 6
$scope.refreshCards = function() { 7 7 $scope.refreshCards = function() {
$http.get('/api/sections/' + $scope.sectionId + '/feed/'). 8 8 $http.get('/api/sections/' + $scope.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;
$scope.refreshLayout(); 12 12 $scope.refreshLayout();
console.log('success in refresh cards...'); 13 13 console.log('success in refresh cards...');
}). 14 14 }).
error(function(err) { 15 15 error(function(err) {
console.log('refresh fail'); 16 16 console.log('refresh fail');
console.log(err); 17 17 console.log(err);
}); 18 18 });
}; 19 19 };
20 20
$scope.sortAdd = function(card, array) { 21 21 $scope.sortAdd = function(card, array) {
console.log('sort add'); 22 22 console.log('sort add');
array.forEach(function(ele, i, ary) { 23 23 array.forEach(function(ele, i, ary) {
if (ele.score <= card.score) { 24 24 if (ele.score <= card.score) {
ary.splice(i, 0, card); 25 25 ary.splice(i, 0, card);
return; 26 26 return;
} 27 27 }
}); 28 28 });
}; 29 29 };
30 30
$scope.hide = function(card) { 31 31 $scope.hide = function(card) {
console.log('hiding card'); 32 32 console.log('hiding card');
var found = -1; 33 33 var found = -1;
col = $scope.cardTable[card.id].colNum; 34 34 col = $scope.cardTable[card.id].colNum;
found = $scope.cardCols[col].indexOf(card); 35 35 found = $scope.cardCols[col].indexOf(card);
if (found != -1) { 36 36 if (found != -1) {
$scope.cardCols[col].splice(found, 1); 37 37 $scope.cardCols[col].splice(found, 1);
console.log('card hidden'); 38 38 console.log('card hidden');
return col; 39 39 return col;
} 40 40 }
console.log('Error finding card to hide:'); 41 41 console.log('Error finding card to hide:');
console.log(card); 42 42 console.log(card);
return -1; 43 43 return -1;
}; 44 44 };
45 45
$scope.update = function(id, new_score) { 46 46 $scope.update = function(id, new_score) {
card = $scope.cardTable[id].obj; 47 47 card = $scope.cardTable[id].obj;
if (Math.abs(new_score - card.score) < .0001) { 48 48 if (Math.abs(new_score - card.score) < .0001) {
console.log('score same, no update required'); 49 49 console.log('score same, no update required');
return; 50 50 return;
} 51 51 }
console.log('updating'); 52 52 console.log('updating');
console.log(card); 53 53 console.log(card);
var column = $scope.cardCols[$scope.cardTable[id].colNum]; 54 54 var column = $scope.cardCols[$scope.cardTable[id].colNum];
var found = column.indexOf(card); 55 55 var found = column.indexOf(card);
var i = 0; 56 56 var i = 0;
for (; i < column.length; i++) 57 57 for (; i < column.length; i++)
if (column[i].score <= new_score) break; 58 58 if (column[i].score <= new_score) break;
card.score = new_score; 59 59 card.score = new_score;
if ($scope.$$phase) { // most of the time it is "$digest" 60 60 if ($scope.$$phase) { // most of the time it is "$digest"
column.splice(i, 0, column.splice(found, 1)[0]); 61 61 column.splice(i, 0, column.splice(found, 1)[0]);
} else { 62 62 } else {
$scope.$apply(column.splice(i, 0, column.splice(found, 1)[0])); 63 63 $scope.$apply(column.splice(i, 0, column.splice(found, 1)[0]));
} 64 64 }
}; 65 65 };
66 66
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 67 67 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onOpen(function() { 68 68 $scope.feed_ws.onOpen(function() {
console.log('deck ws open'); 69 69 console.log('deck ws open');
}); 70 70 });
71 71
$scope.feed_ws.onMessage(function(e) { 72 72 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 73 73 data = JSON.parse(e.data);
console.log('got websocket message ' + e.data); 74 74 console.log('got websocket message ' + e.data);
console.log(data); 75 75 console.log(data);
if (data.event_type == 'new_card') { 76 76 if (data.event_type == 'new_card') {
$scope.add(data.flashcard); 77 77 $scope.add(data.flashcard);
} else if (data.event_type == 'score_change') { 78 78 } else if (data.event_type == 'score_change') {
$scope.update(data.flashcard_id, data.new_score); 79 79 $scope.update(data.flashcard_id, data.new_score);
} 80 80 }
}); 81 81 });
82 82
var resetModal = function() { 83 83 var resetModal = function() {
$('#new-card-input').html(''); 84 84 $('#new-card-input').html('');
$('#newCard').closeModal(modal_options); 85 85 $('#newCard').closeModal(modal_options);
}; 86 86 };
87 87
$scope.pushCard = function() { 88 88 $scope.pushCard = function() {
var i = 0; 89 89 var i = 0;
var blanks = []; 90 90 var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 91 91 $('#new-card-input')[0].childNodes.forEach(function(node) {
if (typeof node.data == 'undefined') { 92 92 if (typeof node.data == 'undefined') {
console.log('undefined node'); 93 93 console.log('undefined node');
return resetModal(); 94 94 //return resetModal();
} 95 95 }
node = $(node)[0]; 96 96 node = $(node)[0];
console.log(node); 97
if (node.tagName == 'B') { 98 97 if (node.tagName == 'B') {
text = $(node).text(); 99 98 var text = $(node).text();
blanks.push([i, i + text.length]); 100 99 console.log(text.length, text);
100 var leftspaces = 0, rightspaces = 0;
101 // awful way to find the first non-space character from the left or the right. thanks.js
102 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
103 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
104 if (leftspaces != text.length) blanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 101 105 i += text.length;
} else { 102 106 } else {
i += node.data.length; 103 107 i += node.data.length;
} 104 108 }
}); 105 109 });
var myCard = { 106 110 var myCard = {
'text': $('#new-card-input').text().trim(), 107 111 // we can't trim this string because it'd mess up the blanks. Something to fix.
112 'text': $('#new-card-input').text(),
'mask': blanks, 108 113 'mask': blanks,
section: $scope.section.id 109 114 section: $scope.section.id
}; 110 115 };
if (myCard.text == '') { 111 116 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 112 117 console.log('blank flashcard not pushed:' + myCard.text);
return resetModal(); 113 118 return resetModal();
} 114 119 }
$http.post('/api/flashcards/', myCard). 115 120 $http.post('/api/flashcards/', myCard).
success(function(data) { 116 121 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 117 122 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 118 123 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 119 124 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 120 125 }
121 126
}). 122 127 }).
error(function(error) { 123 128 error(function(error) {
console.log('something went wrong pushing a card!'); 124 129 console.log('something went wrong pushing a card!');
}); 125 130 });
return resetModal(); 126 131 return resetModal();
}; 127 132 };
128 133
/* Key bindings for the whole feed window. Hotkey it up! */ 129 134 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 130 135 var listenForC = true;
131 136
// Need to pass these options into openmodal and leanmodal, 132 137 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 133 138 // otherwise the ready handler doesn't get called
134 139
modal_options = { 135 140 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 136 141 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 137 142 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 138 143 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 139 144 out_duration: 200, // Transition out duration
ready: function() { 140 145 ready: function() {
listenForC = false; 141 146 listenForC = false;
console.log('modal OPENING'); 142 147 console.log('modal OPENING');
$('#new-card-input').focus(); 143 148 $('#new-card-input').focus();
}, 144 149 },
complete: function() { 145 150 complete: function() {
listenForC = true; 146 151 listenForC = true;
console.log('modal done, closing'); 147 152 console.log('modal done, closing');
$('#new-card-input').blur(); 148 153 $('#new-card-input').blur();
} 149 154 }
}; 150 155 };
151 156
$(document).keydown(function(e) { 152 157 $(document).keydown(function(e) {
var keyed = e.which; 153 158 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 154 159 if (keyed == 67 && listenForC) { // "c" for compose
$('#newCard').openModal(modal_options); 155 160 $('#newCard').openModal(modal_options);
e.preventDefault(); 156 161 e.preventDefault();
listenForC = false; 157 162 listenForC = false;
return false; 158 163 return false;
} else if (keyed == 27) { // clear on ESC 159 164 } else if (keyed == 27) { // clear on ESC
listenForC = true; 160 165 listenForC = true;
document.getElementById('new-card-input').value = ''; 161 166 document.getElementById('new-card-input').value = '';
} 162 167 }
}); 163 168 });
$(document).ready(function() { 164 169 $('.tooltipped').tooltip({delay: 50});
$('.tooltipped').tooltip({delay: 50}); 165 170 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 166 171 $('.modal-trigger').leanModal(modal_options);
$('.modal-trigger').leanModal(modal_options); 167 172 $('#new-card-input').on('keydown', function(e) {
$('#new-card-input').on('keydown', function(e) { 168 173 if (e.which == 13) {
if (e.which == 13) { 169 174 e.preventDefault();
e.preventDefault(); 170 175 $scope.pushCard();
$scope.pushCard(); 171 176 listenForC = true;
listenForC = true; 172 177 return false;
return false; 173 178 }
} 174 179 });
}); 175 180 $('button#blank-selected').click(function() {
$('button#blank-selected').click(function() { 176 181 console.log(window.getSelection());
console.log(window.getSelection()); 177 182 document.execCommand('bold');
document.execCommand('bold'); 178
}); 179
}); 180 183 });
$scope.refreshCards(); 181 184 $scope.refreshCards();
182 185
$scope.shuffleCards = function() { 183 186 $scope.shuffleCards = function() {
$timeout(function() { 184 187 $timeout(function() {
(function(o) { 185 188 (function(o) {
for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 186 189 for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o; 187 190 return o;
})($scope.cardCols[0]); 188 191 })($scope.cardCols[0]);
}); 189 192 });
}; 190 193 };
$scope.$on('$destroy', function() { 191 194 $scope.$on('$destroy', function() {
$scope.feed_ws.close(); 192 195 $scope.feed_ws.close();
}); 193 196 });
}); 194 197 });
195 198
styles/flashy.css View file @ a7ee2b6
.no-user-select { 1 1 .no-user-select {
-moz-user-select: none; 2 2 -moz-user-select: none;
-webkit-user-select: none; 3 3 -webkit-user-select: none;
-ms-user-select: none; 4 4 -ms-user-select: none;
user-select: none; 5 5 user-select: none;
} 6 6 }
7 7
.angucomplete-dropdown { 8 8 .angucomplete-dropdown {
border-color: #ececec; 9 9 border-color: #ececec;
border-width: 1px; 10 10 border-width: 1px;
border-style: solid; 11 11 border-style: solid;
border-radius: 2px; 12 12 border-radius: 2px;
/*width: 250px;*/ 13 13 /*width: 250px;*/
padding: 6px; 14 14 padding: 6px;
cursor: pointer; 15 15 cursor: pointer;
z-index: 9999; 16 16 z-index: 9999;
position: absolute; 17 17 position: absolute;
/*top: 32px; 18 18 /*top: 32px;
left: 0px; 19 19 left: 0px;
*/ 20 20 */
margin-top: -6px; 21 21 margin-top: -6px;
background-color: #ffffff; 22 22 background-color: #ffffff;
} 23 23 }
24 24
.angucomplete-description { 25 25 .angucomplete-description {
font-size: 14px; 26 26 font-size: 14px;
} 27 27 }
28 28
.angucomplete-row { 29 29 .angucomplete-row {
padding: 5px; 30 30 padding: 5px;
color: #000000; 31 31 color: #000000;
margin-bottom: 4px; 32 32 margin-bottom: 4px;
clear: both; 33 33 clear: both;
} 34 34 }
35 35
.angucomplete-selected-row { 36 36 .angucomplete-selected-row {
background-color: #aaaaff; 37 37 background-color: #aaaaff;
} 38 38 }
39 39
/*.container .row {*/ 40 40 /*.container .row {*/
/*margin-left: 0;*/ 41 41 /*margin-left: 0;*/
/*margin-right: 0;*/ 42 42 /*margin-right: 0;*/
/*}*/ 43 43 /*}*/
44 44
/* Flashcard directive css */ 45 45 /* Flashcard directive css */
.card { 46 46 .card {
word-wrap: break-word; 47 47 word-wrap: break-word;
} 48 48 }
49 49
.card.flashy { 50 50 .card.flashy {
background-color: #fff; 51 51 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 52 52 font-family: 'Titillium Web', sans-serif;
float: left; 53 53 float: left;
text-align: center; 54 54 text-align: center;
margin: 6px; 55 55 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 56 56 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
} 57 57 }
58 58
.card.flashy.shrinky { 59 59 .card.flashy.shrinky {
height: 0; 60 60 height: 0;
opacity: 0; 61 61 opacity: 0;
overflow: hidden; 62 62 overflow: hidden;
} 63 63 }
64 64
.card-overlay { 65 65 .card-overlay {
cursor: pointer; 66 66 cursor: pointer;
left: 0; 67 67 left: 0;
opacity: 0; 68 68 opacity: 0;
position: absolute; 69 69 position: absolute;
top: 0; 70 70 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 71 71 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 72 72 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 73 73 /* animation effect to appear on off-hover */
visibility: hidden; 74 74 visibility: hidden;
height: 100%; 75 75 height: 100%;
width: 100%; 76 76 width: 100%;
} 77 77 }
78 78
.card-overlay i { 79 79 .card-overlay i {
color: #FFF; 80 80 color: #FFF;
left: 50%; 81 81 left: 50%;
position: absolute; 82 82 position: absolute;
top: 50%; 83 83 top: 50%;
transform: translate(-50%, -50%); 84 84 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 85 85 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 86 86 }
87 87
.center-me:hover i { 88 88 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 89 89 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 90 90 }
91 91
.card:hover .card-overlay { 92 92 .card:hover .card-overlay {
opacity: 1.0; 93 93 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 94 94 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 95 95 visibility: visible;
} 96 96 }
97 97
.top-box { 98 98 .top-box {
background-color: rgba(0, 184, 76, 0.4); 99 99 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 100 100 height: 65%;
position: relative; 101 101 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 102 102 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 103 103 width: 100%;
} 104 104 }
105 105
.top-box:hover { 106 106 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 107 107 background-color: rgba(0, 184, 76, 0.5);
} 108 108 }
109 109
.bottom-box { 110 110 .bottom-box {
height: 35%; 111 111 height: 35%;
width: 100%; 112 112 width: 100%;
} 113 113 }
114 114
.left-box { 115 115 .left-box {
background-color: rgba(119, 146, 255, 0.5); 116 116 background-color: rgba(119, 146, 255, 0.5);
float: left; 117 117 float: left;
position: relative; 118 118 position: relative;
height: 100%; 119 119 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 120 120 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 121 121 width: 50%;
} 122 122 }
123 123
.left-box:hover { 124 124 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 125 125 background-color: rgba(119, 146, 255, 0.6);
} 126 126 }
127 127
.right-box { 128 128 .right-box {
background-color: rgba(255, 62, 76, 0.5); 129 129 background-color: rgba(255, 62, 76, 0.5);
float: right; 130 130 float: right;
height: 100%; 131 131 height: 100%;
position: relative; 132 132 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 133 133 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 134 134 width: 50%;
} 135 135 }
136 136
.right-box:hover { 137 137 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 138 138 background-color: rgba(255, 62, 76, 0.6);
} 139 139 }
140 140
.center-me { 141 141 .center-me {
height: 100%; 142 142 height: 100%;
margin: 0 auto; 143 143 margin: 0 auto;
text-align: center; 144 144 text-align: center;
vertical-align: middle; 145 145 vertical-align: middle;
width: 100%; 146 146 width: 100%;
} 147 147 }
148 148
/* Card Colors */ 149 149 /* Card Colors */
.card.flashy.cardcolor-blue div { 150 150 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 151 151 background-color: rgba(119, 158, 203, 0.5) !important;
} 152 152 }
153 153
.cardcolor-red div { 154 154 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 155 155 background-color: rgba(255, 105, 97, 0.5) !important;
} 156 156 }
157 157
.cardcolor-green div { 158 158 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 159 159 background-color: rgba(119, 190, 119, 0.5) !important;
} 160 160 }
161 161
.cardcolor-yellow div { 162 162 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 163 163 background-color: rgba(253, 253, 150, 0.5) !important;
} 164 164 }
165 165
/* Card Colors END */ 166 166 /* Card Colors END */
167 167
.modal.bottom-sheet { 168 168 .modal.bottom-sheet {
max-width: 600px; 169 169 max-width: 600px;
margin-left: auto; 170 170 margin-left: auto;
margin-right: auto; 171 171 margin-right: auto;
} 172 172 }
173 173
.feed-modal-input { 174 174 .feed-modal-input {
background-color: #D3D3D3; 175 175 background-color: #D3D3D3;
/ / border-style : solid; 176 176 / / border-style : solid;
/ / border-width : 1 px; 177 177 / / border-width : 1 px;
box-shadow: 2px 2px 5px #888888; 178 178 box-shadow: 2px 2px 5px #888888;
height: 24px; 179 179 height: 24px;
} 180 180 }
181 181
#newCard input[type=text] { 182 182 #newCard input[type=text] {
height: 3rem !important; 183 183 height: 3rem !important;
} 184 184 }
185 185
.input-field label { 186 186 .input-field label {
color: #00b3c2; 187 187 color: #00b3c2;
} 188 188 }
189 189
/* label focus color */ 190 190 /* label focus color */
.input-field input[type]:focus + label { 191 191 .input-field input[type]:focus + label {
color: #00b3c2; 192 192 color: #00b3c2;
} 193 193 }
194 194
/* label underline focus color */ 195 195 /* label underline focus color */
.input-field input[type]:focus { 196 196 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 197 197 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 198 198 box-shadow: 0 1px 0 0 #b388ff;
} 199 199 }
200 200
/* valid color */ 201 201 /* valid color */
.input-field input[type].valid { 202 202 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 203 203 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 204 204 box-shadow: 0 1px 0 0 #673ab7;
} 205 205 }
206 206
/* invalid color */ 207 207 /* invalid color */
.input-field input[type].invalid { 208 208 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 209 209 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 210 210 box-shadow: 0 1px 0 0 #673ab7;
} 211 211 }
212 212
/* icon prefix focus color */ 213 213 /* icon prefix focus color */
.input-field .prefix.active { 214 214 .input-field .prefix.active {
color: #b388ff; 215 215 color: #b388ff;
} 216 216 }
217 217
/* label focus color */ 218 218 /* label focus color */
.input-field textarea[type]:focus + label { 219 219 .input-field textarea[type]:focus + label {
color: #b388ff; 220 220 color: #b388ff;
} 221 221 }
222 222
/* label underline focus color */ 223 223 /* label underline focus color */
.input-field textarea[type]:focus { 224 224 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 225 225 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 226 226 box-shadow: 0 1px 0 0 #b388ff;
} 227 227 }
228 228
body { 229 229 body {
background-color: #e8e8e8; 230 230 background-color: #e8e8e8;
overflow-x: hidden; 231 231 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 232 232 font-family: 'Titillium Web', sans-serif;
height: 100%; 233 233 height: 100%;
} 234 234 }
235 235
html { 236 236 html {
background: transparent; 237 237 background: transparent;
height: 100%; 238 238 height: 100%;
} 239 239 }
240 240
.btn { 241 241 .btn {
background-color: #00b3c2; 242 242 background-color: #00b3c2;
} 243 243 }
244 244
.btn:hover { 245 245 .btn:hover {
background-color: #0097cb; 246 246 background-color: #0097cb;
} 247 247 }
248 248
.btn-floating { 249 249 .btn-floating {
background-color: #00b3c2; 250 250 background-color: #00b3c2;
} 251 251 }
252 252
.btn-floating:hover { 253 253 .btn-floating:hover {
background-color: #0097cb; 254 254 background-color: #0097cb;
} 255 255 }
256 256
.toggley { 257 257 .toggley {
float: left; 258 258 float: left;
margin: 10px; 259 259 margin: 10px;
} 260 260 }
261 261
#logo-container { 262 262 #logo-container {
margin-bottom: 18px; 263 263 margin-bottom: 18px;
} 264 264 }
265 265
#lean-overlay { 266 266 #lean-overlay {
display: none !important; 267 267 display: none !important;
} 268 268 }
269 269
nav { 270 270 nav {
background-color: #d2143f !important; 271 271 background-color: #d2143f !important;
} 272 272 }
273 273
main { 274 274 main {
min-height: 145px; 275 275 min-height: 145px;
} 276 276 }
277 277
.side-nav .collapsible-body { 278 278 .side-nav .collapsible-body {
width: 100%; 279 279 width: 100%;
} 280 280 }
281 281
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 282 282 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 283 283 background-color: #00b3c2;
} 284 284 }
285 285
nav .button-collapse { 286 286 nav .button-collapse {
margin: 0 20px; 287 287 margin: 0 20px;
} 288 288 }
289 289
.collapsible-body i { 290 290 .collapsible-body i {
font-size: 1rem !important; 291 291 font-size: 1rem !important;
} 292 292 }
293 293
.tabs .tab a { 294 294 .tabs .tab a {
color: #00b3c2; 295 295 color: #00b3c2;
} 296 296 }
297 297
.tabs .tab a:hover { 298 298 .tabs .tab a:hover {
color: #0041dd; 299 299 color: #0041dd;
} 300 300 }
301 301
.tabs .indicator { 302 302 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 303 303 border-bottom: 1px solid #00b3c2;
} 304 304 }
305 305
h2 { 306 306 h2 {
text-align: center; 307 307 text-align: center;
} 308 308 }
309 309
md-content.md-default-theme { 310 310 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 311 311 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 312 312 border: 1px solid #fff;
} 313 313 }
314 314
/*#sidenav-overlay { 315 315 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 316 316 background-color: rgba(0, 0, 0, 0) !important;
}*/ 317 317 }*/
.card-content { 318 318 .card-content {
width: 100%; 319 319 width: 100%;
} 320 320 }
321 321
.valign-wrapper { 322 322 .valign-wrapper {
height: 100%; 323 323 height: 100%;
} 324 324 }
325 325
/*.toast { 326 326 /*.toast {
height: 100px; 327 327 height: 100px;
width: 300px; 328 328 width: 300px;
line-height: 20px; 329 329 line-height: 20px;
max-height: 100px; 330 330 max-height: 100px;
word-wrap: normal; 331 331 word-wrap: normal;
}*/ 332 332 }*/
333 333
[ng-cloak] { 334 334 [ng-cloak] {
display: none !important; 335 335 display: none !important;
} 336 336 }
337 337
.cardColumn { 338 338 .cardColumn {
float: left; 339 339 float: left;
} 340 340 }
341 341
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */ 342 342 /* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter, 343 343 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 344 344 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 345 345 .repeated-card.ng-leave,
.repeated-card.ng-move, 346 346 .repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card { 347 347 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 348 348 -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 349 349 -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 350 350 -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 1s all cubic-bezier(0, 0, 0.6, 1); 351 351 transition: 1s all cubic-bezier(0, 0, 0.6, 1);
position: relative; 352 352 position: relative;
} 353 353 }
354 354
.repeated-card.ng-enter > flashcard > .card { 355 355 .repeated-card.ng-enter > flashcard > .card {
z-index: 1; 356 356 z-index: 1;
top: -236px; 357 357 top: -236px;
margin-bottom: -230px; 358 358 margin-bottom: -230px;
} 359 359 }
360 360
.repeated-card.ng-enter.ng-enter-active > flashcard > .card { 361 361 .repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px; 362 362 top: 0px;
margin-bottom: 6px; 363 363 margin-bottom: 6px;
} 364 364 }
365 365
.repeated-card.ng-leave { 366 366 .repeated-card.ng-leave {
top: 0; 367 367 top: 0;
opacity: 1; 368 368 opacity: 1;
} 369 369 }
370 370
.repeated-card.ng-leave.ng-leave-active { 371 371 .repeated-card.ng-leave.ng-leave-active {
top: -60px; 372 372 top: -60px;
opacity: 0; 373 373 opacity: 0;
} 374 374 }
375 375
376
/* Animation CSS END */ 377 376 /* Animation CSS END */
378 377
/* Footer */ 379 378 /* Footer */
* { 380 379 * {
margin: 0; 381 380 margin: 0;
} 382 381 }
383 382
.wrapper { 384 383 .wrapper {
templates/deck.html View file @ a7ee2b6
<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>--> 1 1 <div class="row">
<div class="row"> 2 2 <h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it here!</h2>
<h2 ng-cloak ng-show="cards.length == 0">Add a card from the feed to see it here!</h2> 3
4 3
<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false"> 5 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
<div class="indeterminate"></div> 6 5 <div class="indeterminate"></div>
</div> 7 6 </div>
<!--div class='row' ng-repeat="row in cardRows"> 8
<div ng-repeat ="card in row"> 9
<flashcard flashcard-obj="card" refresh="hide(card)"/> 10
</div> 11
</div>--> 12
13 7
<div class="cardColumn" ng-repeat="col in cardCols"> 14 8 <div class="cardColumn" ng-repeat="col in cardCols">
<flashcard flashcard-obj="card" ng-repeat="card in col"/> 15 9 <div class="repeated-card" ng-repeat="card in col">
</div> 16 10 <flashcard flashcard-obj="card"/>
</div> 17
<div class="row"> 18
<div> 19
<!-- 20
<div class="col s6"> 21
<div class="card"> 22
<div class="card-content"> 23
<p>{{card.content}}</p> 24
</div> 25
26
<div class="card-action"> 27
<i class="small mdi-action-delete" ng-click="removeCard(card)"></i> 28
<a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a> 29
<!-- Modal Structure --> 30
<div id="editModal" class="modal modal-fixed-footer"> 31
<div class="modal-content"> 32
<div class="row"> 33
<form class="col s12"> 34
<div class="row"> 35
<div class="input-field col s6"> 36
<i class="mdi-editor-mode-edit prefix"></i> 37
<textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea> 38
<label for="icon_prefix2"></label> 39
</div> 40
</div> 41
</form> 42
</div> 43
</div> 44
<div class="modal-footer"> 45
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a> 46
</div> 47
</div> 48 11 </div>
</div> 49 12 </div>
</div> 50 13 </div>
templates/feed.html View file @ a7ee2b6
<div class="row"> 1 1 <div class="row">
<h2 ng-cloak ng-show="cards.length == 0">No cards. Be the first one to add a card!</h2> 2 2 <h2 ng-cloak ng-show="cards.length == 0">No cards. Be the first one to add a card!</h2>
3 3
<div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false"> 4 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
<div class="indeterminate"></div> 5 5 <div class="indeterminate"></div>
</div> 6 6 </div>
7
<div class="cardColumn" ng-repeat="col in cardCols"> 7 8 <div class="cardColumn" ng-repeat="col in cardCols">
<div class="repeated-card" ng-repeat="card in col"> 8 9 <div class="repeated-card" ng-repeat="card in col">
<flashcard flashcard-obj="card" refresh="hide(card)"/> 9 10 <flashcard flashcard-obj="card"/>
</div> 10 11 </div>
</div> 11 12 </div>
12
<!--<div class="cardColumn" ng-repeat="col in cardCols"> 13
<flashcard flashcard-obj="card" ng-repeat="card in col"/> 14
</div>--> 15
</div> 16 13 </div>
17 14
18 15
<!--Lil plus button in corner--> 19 16 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 96px; right: 24px;"> 20 17 <div class="fixed-action-btn" style="bottom: 96px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" href="#newCard" data-position="left" 21 18 <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" href="#newCard" data-position="left"
data-delay="50" 22 19 data-delay="50"
data-tooltip="(C)ompose"> 23 20 data-tooltip="(C)ompose">
<i class="large mdi-content-add"></i> 24 21 <i class="large mdi-content-add"></i>
</a> 25 22 </a>
</div> 26 23 </div>
27 24
<div id="newCard" class="modal bottom-sheet"> 28 25 <div id="newCard" class="modal bottom-sheet" style="max-height:none;">
<form id="new-card-form"> 29 26 <form id="new-card-form">
<div class="modal-content"> 30 27 <div class="modal-content">
<div class="input-field"> 31 28 <div class="card cyan-text text-darken-2"
<!--<label id="newCardSign" for="newCard">New Flashcard Text</label>--> 32 29 style="margin-left: auto; margin-right:auto;width:300px; height:180px; font-size:120%;">
<div class="feed-modal-input" id="new-card-input" contenteditable style="outline:0px solid transparent;"> 33 30 <div class="valign-wrapper">
31 <div id="new-card-input" style="outline:0px solid transparent;" class="card-content valign center-align"
32 contenteditable>
34 33
34 </div>
</div> 35 35 </div>
</div> 36 36 </div>
</div> 37 37 </div>
38
<div class="modal-footer"> 38 39 <div class="modal-footer">
<button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left" 39 40 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left"
data-delay="50" 40 41 data-delay="50"
data-tooltip="Enter">Submit 41 42 data-tooltip="Enter">Submit
<i class="mdi-hardware-keyboard-return right"></i> 42 43 <i class="mdi-hardware-keyboard-return right"></i>
</button> 43 44 </button>
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 44 45 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B">Blank Selected Text 45 46 data-tooltip="Ctrl-B">Blank Selected Text
</button> 46 47 </button>
</div> 47 48 </div>
</form> 48 49 </form>