110swag / flashy-frontend

Download as
Browse Code ยป

Commit eaa6cd5422039ce6634dc497bb52956acb2b733e

Authored by Rachel Lee
2 parents aa99249e0b 80b664e098
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Merge branch 'master' of https://git.ucsd.edu/110swag/flashy-frontend

Showing 4 changed files Inline Diff

scripts/CardGridController.js View file @ eaa6cd5
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {
$scope.cards = []; 3 3 $scope.cards = []; // all cards
$scope.deck = []; 4 4 $scope.deck = [];
$scope.cardCols = []; // organized data 5 5 $scope.cardCols = []; // organized data
6 $scope.cardColsShow = []; // displayed data
$scope.numCols = 0; 6 7 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 7 8 $scope.cardTable = {}; // look up table of cards: {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 8 9 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 9 10 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$scope.showGrid = false; 10 11 $scope.showGrid = false;
$scope.moveQueue = []; 11 12 //$scope.moveQueue = []; // queue of flashcard objects
$rootScope.currentSection = $scope.section; 12 13 $rootScope.currentSection = $scope.section;
13 14
if (!UserService.isInSection($scope.sectionId)) { 14 15 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 15 16 console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass'); 16 17 $state.go('addclass');
} 17 18 }
18 19
$scope.refreshColumnWidth = function() { 19 20 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 20 21 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 21 22 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 22 23 $('.cardColumn').css({
width: width + 'px', 23 24 width: width + 'px',
'font-size': 100 * width / 250 + '%' 24 25 'font-size': 100 * width / 250 + '%'
}); 25 26 });
$('.cardColumn .card.flashy').css({ 26 27 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 27 28 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 28 29 height: (width * 3 / 5) + 'px'
}); 29 30 });
}; 30 31 };
$scope.refreshLayout = function() { 31 32 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 32 33 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
33 34
// check if we actually need to refresh the whole layout 34 35 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 35 36 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 36 37 $scope.numCols = numCols;
console.log('refreshing layout for ' + numCols + ' columns'); 37 38 console.log('refreshing layout for ' + numCols + ' columns');
$scope.cardCols = []; 38 39 $scope.cardCols = [];
var cols = []; 39 40 var cols = [];
for (var i = 0; i < numCols; i++) cols.push([]); 40 41 for (var i = 0; i < numCols; i++) cols.push([]);
var n = 0; 41 42 var n = 0;
$scope.cards.forEach(function(card, j) { 42 43 $scope.cards.forEach(function(card, j) {
card.colNum = n++ % numCols; 43 44 card.colNum = n++ % numCols;
cols[card.colNum].push(card); 44 45 cols[card.colNum].push(card);
}); 45 46 });
for (i in cols) $scope.updateColRanks(cols[i]); 46 47 for (i in cols) $scope.updateColRanks(cols[i]);
console.log(cols); 47 48 console.log(cols);
return $timeout(function() { 48 49 return $timeout(function() {
$scope.cardCols = cols; 49 50 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 50 51 $timeout($scope.refreshColumnWidth);
}); 51 52 });
52 53
}; 53 54 };
54 55
angular.element($window).bind('resize', $scope.refreshLayout); 55 56 angular.element($window).bind('resize', $scope.refreshLayout);
56 57
$scope.ws_host = window.location.origin.replace('http', 'ws'); 57 58 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 58 59 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 59 60 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 60 61 console.log('deck ws open');
}); 61 62 });
62 63
$scope.deck_ws.onMessage(function(message) { 63 64 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 64 65 data = JSON.parse(message.data);
console.log('message', data); 65 66 console.log('message', data);
card = new Flashcard(data.flashcard); 66 67 card = new Flashcard(data.flashcard);
if (data.event_type == 'card_pulled') { 67 68 if (data.event_type == 'card_pulled') {
$scope.deck[card.id] = card; 68 69 $scope.deck[card.id] = card;
if ($scope.deckPullCallback) $scope.deckPullCallback(card); 69 70 if ($scope.deckPullCallback) $scope.deckPullCallback(card);
} 70 71 }
if (data.event_type == 'card_unpulled') { 71 72 if (data.event_type == 'card_unpulled') {
$scope.deck[card.id] = undefined; 72 73 $scope.deck[card.id] = undefined;
if ($scope.deckUnpullCallback) $scope.deckUnpullCallback(card); 73 74 if ($scope.deckUnpullCallback) $scope.deckUnpullCallback(card);
} 74 75 }
if (data.event_type == 'card_hidden') { 75 76 if (data.event_type == 'card_hidden') {
$scope.hideCardFromGrid(card); 76 77 $scope.hideCardFromGrid(card);
} 77 78 }
}); 78 79 });
79 80
$scope.cardInDeck = function(id) { 80 81 $scope.cardInDeck = function(id) {
return $scope.deck[id]; 81 82 return $scope.deck[id];
}; 82 83 };
$scope.addCardToGrid = function(card) { 83 84 $scope.addCardToGrid = function(card) {
var colNum = 0; 84 85 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 85 86 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 86 87 var lowestColNum = 0;
while (colNum < $scope.numCols) { 87 88 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 88 89 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 89 90 lowestCol = $scope.cardCols[colNum];
break; 90 91 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 91 92 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 92 93 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 93 94 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 94 95 lowestColLen = $scope.cardCols[colNum].length;
} 95 96 }
colNum++; 96 97 colNum++;
} 97 98 }
console.log(card); 98 99 console.log(card);
$scope.cards.push(data); 99 100 $scope.cards.push(data);
lowestCol.unshift(card); 100 101 lowestCol.unshift(card);
card.colNum = lowestColNum; 101 102 card.colNum = lowestColNum;
$scope.updateColRanks(lowestCol); 102 103 $scope.updateColRanks(lowestCol);
$timeout($scope.refreshColumnWidth); 103 104 $timeout($scope.refreshColumnWidth);
104 105
}; 105 106 };
106 107
$scope.updateColRanks = function(col) { 107 108 $scope.updateColRanks = function(col) {
for (i in col) 108 109 for (i in col)
col[i].colRank = parseInt(i); 109 110 col[i].colRank = parseInt(i);
}; 110 111 };
111 112
$scope.hideCardFromGrid = function(card) { 112 113 $scope.hideCardFromGrid = function(card) {
console.log('hiding', card); 113 114 console.log('hiding', card);
$scope.cardCols[card.colNum].splice(card.colRank, 1); 114 115 $scope.cardCols[card.colNum].splice(card.colRank, 1);
$scope.updateColRanks($scope.cardCols[card.colNum]); 115 116 $scope.updateColRanks($scope.cardCols[card.colNum]);
console.log($scope.cardCols); 116 117 console.log($scope.cardCols);
}; 117 118 };
118 119
$scope.$on('$destroy', function() { 119 120 $scope.$on('$destroy', function() {
$scope.deck_ws.close(); 120 121 $scope.deck_ws.close();
$rootScope.currentSection = {}; 121 122 $rootScope.currentSection = {};
scripts/FeedController.js View file @ eaa6cd5
angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).controller('FeedController', 1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).controller('FeedController',
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {
angular.module('flashy.CardGridController').CardGridController.apply(this, arguments); 3 3 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);
4 4
$scope.sortAdd = function(card, array) { 5 5 (function drawCols() {
console.log('sort add'); 6 6 $interval(function() {
array.forEach(function(ele, i, ary) { 7 7 if ($scope.cardColsShow != $scope.cardCols) {
if (ele.score <= card.score) { 8 8 $scope.cardColsShow = $scope.cardCols;
ary.splice(i, 0, card); 9 9 console.log('interval');
return; 10 10 }
} 11 11 }, 1000);
}); 12 12 }());
}; 13
14 13
$scope.updateCardScore = function(card) { 15 14 $scope.updateCardScore = function(card) {
console.log($scope.cardCols, card); 16 15 console.log($scope.cardCols, card);
// if no colNum is attached, then this doesn't exist on the feed yet 17 16 // if no colNum is attached, then this doesn't exist on the feed yet
if (!card.colNum) return; 18 17 if (!card.colNum) return;
$scope.cardCols[card.colNum].sort(function(a, b) { 19 18 $scope.cardCols[card.colNum].sort(function(a, b) {
return b.score - a.score; 20 19 return b.score - a.score;
}); 21 20 });
$scope.updateColRanks($scope.cardCols[card.colNum]); 22 21 $scope.updateColRanks($scope.cardCols[card.colNum]);
}; 23 22 };
24 23
$scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast'); 25 24 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
$scope.feed_ws.onMessage(function(e) { 26 25 $scope.feed_ws.onMessage(function(e) {
data = JSON.parse(e.data); 27 26 data = JSON.parse(e.data);
console.log('message', data); 28 27 console.log('message', data);
if (data.event_type == 'new_card') { 29 28 if (data.event_type == 'new_card') {
$scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck)); 30 29 $scope.addCardToGrid(new Flashcard(data.flashcard, $scope.deck));
} else if (data.event_type == 'score_change') { 31 30 } else if (data.event_type == 'score_change') {
card = new Flashcard(data.flashcard); 32 31 card = new Flashcard(data.flashcard);
card.score = data.flashcard.score; 33 32 card.score = data.flashcard.score;
$scope.updateCardScore(card); 34 33 $scope.updateCardScore(card);
} 35 34 }
}); 36 35 });
37 36
$scope.pushCard = function() { 38 37 $scope.pushCard = function() {
var myCard = { 39 38 var myCard = {
// we can't trim this string because it'd mess up the blanks. Something to fix. 40 39 // we can't trim this string because it'd mess up the blanks. Something to fix.
'text': $('#new-card-input').text(), 41 40 'text': $('#new-card-input').text(),
'mask': $scope.newCardBlanks, 42 41 'mask': $scope.newCardBlanks,
section: $scope.section.id 43 42 section: $scope.section.id
}; 44 43 };
if (myCard.text == '') { 45 44 if (myCard.text == '') {
console.log('blank flashcard not pushed:' + myCard.text); 46 45 console.log('blank flashcard not pushed:' + myCard.text);
return closeNewCard(); 47 46 return closeNewCard();
} 48 47 }
$http.post('/api/flashcards/', myCard). 49 48 $http.post('/api/flashcards/', myCard).
success(function(data) { 50 49 success(function(data) {
console.log('flashcard pushed: ' + myCard.text); 51 50 console.log('flashcard pushed: ' + myCard.text);
if (!UserService.hasVerifiedEmail()) { 52 51 if (!UserService.hasVerifiedEmail()) {
Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000); 53 52 Materialize.toast("<p>Thanks for contributing! However, others won't see your card until you verify your email address<p>", 4000);
} 54 53 }
}); 55 54 });
return $scope.closeNewCardModal(); 56 55 return $scope.closeNewCardModal();
}; 57 56 };
58 57
/* Key bindings for the whole feed window. Hotkey it up! */ 59 58 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 60 59 var listenForC = true;
61 60
// Need to pass these options into openmodal and leanmodal, 62 61 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 63 62 // otherwise the ready handler doesn't get called
64 63
modal_options = { 65 64 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 66 65 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 67 66 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 68 67 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 69 68 out_duration: 200, // Transition out duration
ready: function() { 70 69 ready: function() {
$('#new-card-input').focus(); 71 70 $('#new-card-input').focus();
document.execCommand('selectAll', false, null); 72 71 document.execCommand('selectAll', false, null);
} 73 72 }
}; 74 73 };
75 74
$(document).keydown(function(e) { 76 75 $(document).keydown(function(e) {
var keyed = e.which; 77 76 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" for compose 78 77 if (keyed == 67 && listenForC) { // "c" for compose
$scope.openNewCardModal(); 79 78 $scope.openNewCardModal();
e.preventDefault(); 80 79 e.preventDefault();
return false; 81 80 return false;
} else if (keyed == 27) { // clear on ESC 82 81 } else if (keyed == 27) { // clear on ESC
$scope.closeNewCardModal(); 83 82 $scope.closeNewCardModal();
} 84 83 }
}); 85 84 });
86 85
$scope.openNewCardModal = function() { 87 86 $scope.openNewCardModal = function() {
$('#newCard').openModal(modal_options); 88 87 $('#newCard').openModal(modal_options);
listenForC = false; 89 88 listenForC = false;
$('#new-card-input').html('Write a flashcard!'); 90 89 $('#new-card-input').html('Write a flashcard!');
}; 91 90 };
92 91
$scope.closeNewCardModal = function() { 93 92 $scope.closeNewCardModal = function() {
listenForC = true; 94 93 listenForC = true;
$('#new-card-input').html('').blur(); 95 94 $('#new-card-input').html('').blur();
$('#newCard').closeModal(modal_options); 96 95 $('#newCard').closeModal(modal_options);
}; 97 96 };
98 97
$('.tooltipped').tooltip({delay: 50}); 99 98 $('.tooltipped').tooltip({delay: 50});
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 100 99 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 101 100 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 102 101 $('#new-card-input').on('keydown', function(e) {
if (e.which == 13) { 103 102 if (e.which == 13) {
e.preventDefault(); 104 103 e.preventDefault();
if ($scope.submit_enabled) { 105 104 if ($scope.submit_enabled) {
$scope.pushCard(); 106 105 $scope.pushCard();
listenForC = true; 107 106 listenForC = true;
} 108 107 }
return false; 109 108 return false;
} else { 110 109 } else {
111 110
} 112 111 }
}); 113 112 });
$('button#blank-selected').click(function() { 114 113 $('button#blank-selected').click(function() {
console.log(window.getSelection()); 115 114 console.log(window.getSelection());
document.execCommand('bold'); 116 115 document.execCommand('bold');
}); 117 116 });
$scope.newCardBlanks = []; 118 117 $scope.newCardBlanks = [];
$scope.refreshNewCardInput = function() { 119 118 $scope.refreshNewCardInput = function() {
$scope.newCardText = $('#new-card-input').text(); 120 119 $scope.newCardText = $('#new-card-input').text();
$scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160; 121 120 $scope.submit_enabled = $scope.newCardText.length >= 5 && $scope.newCardText.length <= 160;
var i = 0; 122 121 var i = 0;
$scope.newCardBlanks = []; 123 122 $scope.newCardBlanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 124 123 $('#new-card-input')[0].childNodes.forEach(function(node) {
node = $(node)[0]; 125 124 node = $(node)[0];
if (node.tagName == 'B') { 126 125 if (node.tagName == 'B') {
var text = $(node).text(); 127 126 var text = $(node).text();
var leftspaces = 0, rightspaces = 0; 128 127 var leftspaces = 0, rightspaces = 0;
// awful way to find the first non-space character from the left or the right. thanks.js 129 128 // awful way to find the first non-space character from the left or the right. thanks.js
while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++; 130 129 while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++; 131 130 while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
console.log(leftspaces, text.length); 132 131 console.log(leftspaces, text.length);
if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]); 133 132 if (leftspaces != text.length) $scope.newCardBlanks.push([i + leftspaces, i + text.length - rightspaces]);
i += text.length; 134 133 i += text.length;
} else if (!node.data) { 135 134 } else if (!node.data) {
i += $(node).text().length; 136 135 i += $(node).text().length;
} else { 137 136 } else {
i += node.data.length; 138 137 i += node.data.length;
} 139 138 }
}); 140 139 });
$scope.newCardBlanks.sort(function(a, b) { 141 140 $scope.newCardBlanks.sort(function(a, b) {
return a[0] - b[0]; 142 141 return a[0] - b[0];
}); 143 142 });
i = 0; 144 143 i = 0;
newtext = ''; 145 144 newtext = '';
$scope.newCardBlanks.forEach(function(blank) { 146 145 $scope.newCardBlanks.forEach(function(blank) {
newtext += $scope.newCardText.slice(i, blank[0]); 147 146 newtext += $scope.newCardText.slice(i, blank[0]);
newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>'; 148 147 newtext += '<b>' + $scope.newCardText.slice(blank[0], blank[1]) + '</b>';
i = blank[1]; 149 148 i = blank[1];
}); 150 149 });
newtext += $scope.newCardText.slice(i); 151 150 newtext += $scope.newCardText.slice(i);
//$scope.newCardFormattedText = newtext; 152 151 //$scope.newCardFormattedText = newtext;
}; 153 152 };
$scope.shuffleCards = function() { 154 153 $scope.shuffleCards = function() {
$timeout(function() { 155 154 $timeout(function() {
(function(o) { 156 155 (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); 157 156 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; 158 157 return o;
})($scope.cardCols[0]); 159 158 })($scope.cardCols[0]);
}); 160 159 });
}; 161 160 };
$scope.$on('$destroy', function() { 162 161 $scope.$on('$destroy', function() {
$scope.feed_ws.close(); 163 162 $scope.feed_ws.close();
}); 164 163 });
return $http.get('/api/sections/' + $scope.sectionId + '/feed/'). 165 164 return $http.get('/api/sections/' + $scope.sectionId + '/feed/').
success(function(data) { 166 165 success(function(data) {
console.log(data); 167 166 console.log(data);
$scope.cards = data.map(function(card) { 168 167 $scope.cards = data.map(function(card) {
return new Flashcard(card, $scope.deck); 169 168 return new Flashcard(card, $scope.deck);
}); 170 169 });
$scope.refreshLayout().then(function() { 171 170 $scope.refreshLayout().then(function() {
$timeout($scope.refreshColumnWidth).then(function() { 172 171 $timeout($scope.refreshColumnWidth).then(function() {
$scope.showGrid = true; 173 172 $scope.showGrid = true;
}); 174 173 });
console.log('layout done'); 175 174 console.log('layout done');
service-worker.js View file @ eaa6cd5
'use strict'; 1 1 'use strict';
2 2
function showNotification(title, body, icon, data) { 3 3 function showNotification(title, body, icon, data) {
var notificationOptions = { 4 4 var notificationOptions = {
body: body, 5 5 body: body,
icon: icon ? icon : '/flashy.ico', 6 6 icon: icon ? icon : '/flashy.ico',
tag: 'simple-push-demo-notification', 7 7 tag: 'simple-push-demo-notification',
data: data 8 8 data: data
}; 9 9 };
if (self.registration.showNotification) { 10 10 if (self.registration.showNotification) {
self.registration.showNotification(title, notificationOptions); 11 11 self.registration.showNotification(title, notificationOptions);
return; 12 12 return;
} else { 13 13 } else {
new Notification(title, notificationOptions); 14 14 new Notification(title, notificationOptions);
} 15 15 }
} 16 16 }
17 17
self.addEventListener('push', function(event) { 18 18 self.addEventListener('push', function(event) {
console.log('Received a push message', event); 19 19 console.log('Received a push message', event);
20 20
// Since this is no payload data with the first version 21 21 // Since this is no payload data with the first version
// of Push notifications, here we'll grab some data from 22 22 // of Push notifications, here we'll grab some data from
// an API and use it to populate a notification 23 23 // an API and use it to populate a notification
var title = 'You have cards waiting to be reviewed!'; 24 24 var title = 'You have cards waiting to be reviewed!';
var message = 'check yo cards m8'; 25 25 var message = 'check yo cards m8';
var icon = '/flashy.ico'; 26 26 var icon = '/flashy.ico';
var notificationTag = 'simple-push-demo-notification'; 27 27 var notificationTag = 'simple-push-demo-notification';
28 28
// Add this to the data of the notification 29 29 // Add this to the data of the notification
var urlToOpen = '/api/subscribe/'; 30 30 var urlToOpen = '/api/subscribe/';
31 31
var notificationFilter = { 32 32 var notificationFilter = {
tag: 'simple-push-demo-notification' 33 33 tag: 'simple-push-demo-notification'
}; 34 34 };
var notificationData = { 35 35 var notificationData = {
url: urlToOpen 36 36 url: urlToOpen
}; 37 37 };
return showNotification(title, message, icon, notificationData); 38 38 return showNotification(title, message, icon, notificationData);
}); 39 39 });
40 40
styles/flashy.css View file @ eaa6cd5
๏ปฟ.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.in-deck { 50 50 .card.flashy.in-deck {
border: 3px solid rgba(0, 184, 76, 0.4); 51 51 border: 3px solid rgba(0, 184, 76, 0.4);
} 52 52 }
53 53
.card.flashy { 54 54 .card.flashy {
border: 0px solid rgba(0, 184, 76, 0.4); 55 55 border: 0px solid rgba(0, 184, 76, 0.4);
background-color: #fff; 56 56 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 57 57 font-family: 'Titillium Web', sans-serif;
float: left; 58 58 float: left;
text-align: center; 59 59 text-align: center;
margin: 6px; 60 60 margin: 6px;
} 61 61 }
62 62
.card-overlay { 63 63 .card-overlay {
cursor: pointer; 64 64 cursor: pointer;
left: 0; 65 65 left: 0;
opacity: 0; 66 66 opacity: 0;
position: absolute; 67 67 position: absolute;
/*pointer-events: none;*/ 68 68 /*pointer-events: none;*/
top: 0; 69 69 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s, 70 70 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.0s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 71 71 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 72 72 /* animation effect to appear on off-hover */
visibility: hidden; 73 73 visibility: hidden;
height: 100%; 74 74 height: 100%;
width: 100%; 75 75 width: 100%;
} 76 76 }
77 77
.card-overlay i { 78 78 .card-overlay i {
color: #FFF; 79 79 color: #FFF;
left: 50%; 80 80 left: 50%;
position: absolute; 81 81 position: absolute;
top: 50%; 82 82 top: 50%;
transform: translate(-50%, -50%); 83 83 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 84 84 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 85 85 }
86 86
.center-me:hover i { 87 87 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 88 88 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 89 89 }
90 90
.card:hover .card-overlay { 91 91 .card:hover .card-overlay {
opacity: 1.0; 92 92 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 93 93 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 94 94 visibility: visible;
} 95 95 }
96 96
.top-box { 97 97 .top-box {
background-color: rgba(0, 184, 76, 0.4); 98 98 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 99 99 height: 65%;
position: relative; 100 100 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 101 101 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 102 102 width: 100%;
} 103 103 }
104 104
.top-box:hover { 105 105 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 106 106 background-color: rgba(0, 184, 76, 0.5);
} 107 107 }
108 108
.bottom-box { 109 109 .bottom-box {
height: 35%; 110 110 height: 35%;
width: 100%; 111 111 width: 100%;
} 112 112 }
113 113
.left-box { 114 114 .left-box {
background-color: rgba(119, 146, 255, 0.5); 115 115 background-color: rgba(119, 146, 255, 0.5);
float: left; 116 116 float: left;
position: relative; 117 117 position: relative;
height: 100%; 118 118 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 119 119 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 120 120 width: 50%;
} 121 121 }
122 122
.left-box:hover { 123 123 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 124 124 background-color: rgba(119, 146, 255, 0.6);
} 125 125 }
126 126
.right-box { 127 127 .right-box {
background-color: rgba(255, 62, 76, 0.5); 128 128 background-color: rgba(255, 62, 76, 0.5);
float: right; 129 129 float: right;
height: 100%; 130 130 height: 100%;
position: relative; 131 131 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 132 132 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 133 133 width: 50%;
} 134 134 }
135 135
.right-box:hover { 136 136 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 137 137 background-color: rgba(255, 62, 76, 0.6);
} 138 138 }
139 139
.center-me { 140 140 .center-me {
height: 100%; 141 141 height: 100%;
margin: 0 auto; 142 142 margin: 0 auto;
text-align: center; 143 143 text-align: center;
vertical-align: middle; 144 144 vertical-align: middle;
width: 100%; 145 145 width: 100%;
} 146 146 }
147 147
/* Card Colors */ 148 148 /* Card Colors */
.card.flashy.cardcolor-blue div { 149 149 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 150 150 background-color: rgba(119, 158, 203, 0.5) !important;
} 151 151 }
152 152
.cardcolor-red div { 153 153 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 154 154 background-color: rgba(255, 105, 97, 0.5) !important;
} 155 155 }
156 156
.cardcolor-green div { 157 157 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 158 158 background-color: rgba(119, 190, 119, 0.5) !important;
} 159 159 }
160 160
.cardcolor-yellow div { 161 161 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 162 162 background-color: rgba(253, 253, 150, 0.5) !important;
} 163 163 }
164 164
/* Card Colors END */ 165 165 /* Card Colors END */
166 166
.modal.bottom-sheet { 167 167 .modal.bottom-sheet {
max-width: 600px; 168 168 max-width: 600px;
margin-left: auto; 169 169 margin-left: auto;
margin-right: auto; 170 170 margin-right: auto;
} 171 171 }
172 172
.feed-modal-input { 173 173 .feed-modal-input {
background-color: #D3D3D3; 174 174 background-color: #D3D3D3;
border-style: solid; 175 175 border-style: solid;
border-width: 1px; 176 176 border-width: 1px;
box-shadow: 2px 2px 5px #888888; 177 177 box-shadow: 2px 2px 5px #888888;
height: 24px; 178 178 height: 24px;
} 179 179 }
180 180
.input-field label { 181 181 .input-field label {
color: #00b3c2; 182 182 color: #00b3c2;
} 183 183 }
184 184
/* label focus color */ 185 185 /* label focus color */
.input-field input[type]:focus + label { 186 186 .input-field input[type]:focus + label {
color: #00b3c2; 187 187 color: #00b3c2;
} 188 188 }
189 189
/* label underline focus color */ 190 190 /* label underline focus color */
.input-field input[type]:focus { 191 191 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 192 192 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 193 193 box-shadow: 0 1px 0 0 #b388ff;
} 194 194 }
195 195
/* valid color */ 196 196 /* valid color */
.input-field input[type].valid { 197 197 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 198 198 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 199 199 box-shadow: 0 1px 0 0 #673ab7;
} 200 200 }
201 201
/* invalid color */ 202 202 /* invalid color */
.input-field input[type].invalid { 203 203 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 204 204 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 205 205 box-shadow: 0 1px 0 0 #673ab7;
} 206 206 }
207 207
/* icon prefix focus color */ 208 208 /* icon prefix focus color */
.input-field .prefix.active { 209 209 .input-field .prefix.active {
color: #b388ff; 210 210 color: #b388ff;
} 211 211 }
212 212
/* label focus color */ 213 213 /* label focus color */
.input-field textarea[type]:focus + label { 214 214 .input-field textarea[type]:focus + label {
color: #b388ff; 215 215 color: #b388ff;
} 216 216 }
217 217
/* label underline focus color */ 218 218 /* label underline focus color */
.input-field textarea[type]:focus { 219 219 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 220 220 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 221 221 box-shadow: 0 1px 0 0 #b388ff;
} 222 222 }
223 223
body { 224 224 body {
background-color: #e8e8e8; 225 225 background-color: #e8e8e8;
overflow-x: hidden; 226 226 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 227 227 font-family: 'Titillium Web', sans-serif;
height: 100%; 228 228 height: 100%;
} 229 229 }
230 230
html { 231 231 html {
background: transparent; 232 232 background: transparent;
height: 100%; 233 233 height: 100%;
} 234 234 }
235 235
.btn { 236 236 .btn {
background-color: #00b3c2; 237 237 background-color: #00b3c2;
} 238 238 }
239 239
.btn:hover { 240 240 .btn:hover {
background-color: #0097cb; 241 241 background-color: #0097cb;
} 242 242 }
243 243
.btn-floating { 244 244 .btn-floating {
background-color: #00b3c2; 245 245 background-color: #00b3c2;
} 246 246 }
247 247
.btn-floating:hover { 248 248 .btn-floating:hover {
background-color: #0097cb; 249 249 background-color: #0097cb;
} 250 250 }
251 251
.toggley { 252 252 .toggley {
float: left; 253 253 float: left;
margin: 10px; 254 254 margin: 10px;
} 255 255 }
256 256
#logo-container { 257 257 #logo-container {
margin-bottom: 18px; 258 258 margin-bottom: 18px;
} 259 259 }
260 260
#lean-overlay { 261 261 #lean-overlay {
display: none !important; 262 262 display: none !important;
} 263 263 }
264 264
nav { 265 265 nav {
background-color: #d2143f !important; 266 266 background-color: #d2143f !important;
} 267 267 }
268 268
main { 269 269 main {
min-height: 145px; 270 270 min-height: 145px;
} 271 271 }
272 272
.side-nav .collapsible-body { 273 273 .side-nav .collapsible-body {
width: 100%; 274 274 width: 100%;
} 275 275 }
276 276
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 277 277 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 278 278 background-color: #00b3c2;
} 279 279 }
280 280
nav .button-collapse { 281 281 nav .button-collapse {
margin: 0 20px; 282 282 margin: 0 20px;
} 283 283 }
284 284
.collapsible-body i { 285 285 .collapsible-body i {
font-size: 1rem !important; 286 286 font-size: 1rem !important;
} 287 287 }
288 288
.tabs .tab a { 289 289 .tabs .tab a {
color: #00b3c2; 290 290 color: #00b3c2;
} 291 291 }
292 292
.tabs .tab a:hover { 293 293 .tabs .tab a:hover {
color: #0041dd; 294 294 color: #0041dd;
} 295 295 }
296 296
.tabs .indicator { 297 297 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 298 298 border-bottom: 1px solid #00b3c2;
} 299 299 }
300 300
h2 { 301 301 h2 {
text-align: center; 302 302 text-align: center;
} 303 303 }
304 304
md-content.md-default-theme { 305 305 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 306 306 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 307 307 border: 1px solid #fff;
} 308 308 }
309 309
/*#sidenav-overlay { 310 310 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 311 311 background-color: rgba(0, 0, 0, 0) !important;
}*/ 312 312 }*/
.card-content { 313 313 .card-content {
width: 100%; 314 314 width: 100%;
} 315 315 }
316 316
.valign-wrapper { 317 317 .valign-wrapper {
height: 100%; 318 318 height: 100%;
} 319 319 }
320 320
/*.toast { 321 321 /*.toast {
height: 100px; 322 322 height: 100px;
width: 300px; 323 323 width: 300px;
line-height: 20px; 324 324 line-height: 20px;
max-height: 100px; 325 325 max-height: 100px;
word-wrap: normal; 326 326 word-wrap: normal;
}*/ 327 327 }*/
328 328
[ng-cloak] { 329 329 [ng-cloak] {
display: none !important; 330 330 display: none !important;
} 331 331 }
332 332
.cardColumn { 333 333 .cardColumn {
float: left; 334 334 float: left;
} 335 335 }
336 336
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */ 337 337 /* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter, 338 338 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 339 339 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 340 340 .repeated-card.ng-leave,
.repeated-card.ng-leave > flashcard > .card, 341 341 .repeated-card.ng-leave > flashcard > .card,
.repeated-card.ng-move, 342 342 .repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card { 343 343 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 344 344 -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 345 345 -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 346 346 -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0); 347 347 transition: 1s all cubic-bezier(0.6, 0.3, 0.7, 1.0);
position: relative; 348 348 position: relative;
} 349 349 }
350 350
.repeated-card.ng-enter > flashcard > .card { 351 351 .repeated-card.ng-enter > flashcard > .card {
z-index: 1; 352 352 z-index: 1;
top: -236px; 353 353 top: -236px;
margin-bottom: -230px; 354 354 margin-bottom: -230px;
} 355 355 }
356 356
.repeated-card.ng-enter.ng-enter-active > flashcard > .card { 357 357 .repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px; 358 358 top: 0px;
margin-bottom: 6px; 359 359 margin-bottom: 6px;
} 360 360 }
361 361
.repeated-card.ng-leave > flashcard > .card { 362 362 .repeated-card.ng-leave > flashcard > .card {
z-index: -100; 363 363 z-index: -100;
top: 0px; 364 364 top: 0px;
margin-bottom: 6px; 365 365 margin-bottom: 6px;
} 366 366 }
367 367
.repeated-card.ng-leave.ng-leave-active > flashcard > .card { 368 368 .repeated-card.ng-leave.ng-leave-active > flashcard > .card {
z-index: -100; 369 369 z-index: -100;
opacity: 0; 370 370 opacity: 0;
top: -236px; 371 371 top: -236px;
margin-bottom: -230px; 372 372 margin-bottom: -230px;
} 373 373 }
374 374
375 .repeated-card.ng-move > flashcard > .card {
376 background-color:blue;
377 top: -250px;
378 }
379
380 .repeated-card.ng-move-active > flashcard > .card {
381 top: 0
382 }
383
384 .repeated-card.ng-move > flashcard > .card + div {
385 background-color:red;
386 top: -250px;
387 }
388
/* Animation CSS END */ 375 389 /* Animation CSS END */
376 390