110swag / flashy-frontend

Download as
Browse Code »

Commit 20771fdcb137195a03199305a89ba7d3d8cf8d8f

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

push sorta works

Showing 2 changed files with 26 additions and 25 deletions Inline Diff

flashy.css View file @ 20771fd
.angucomplete-dropdown { 1 1 .angucomplete-dropdown {
border-color: #ececec; 2 2 border-color: #ececec;
border-width: 1px; 3 3 border-width: 1px;
border-style: solid; 4 4 border-style: solid;
border-radius: 2px; 5 5 border-radius: 2px;
/*width: 250px;*/ 6 6 /*width: 250px;*/
padding: 6px; 7 7 padding: 6px;
cursor: pointer; 8 8 cursor: pointer;
z-index: 9999; 9 9 z-index: 9999;
position: absolute; 10 10 position: absolute;
/*top: 32px; 11 11 /*top: 32px;
left: 0px; 12 12 left: 0px;
*/ 13 13 */
margin-top: -6px; 14 14 margin-top: -6px;
background-color: #ffffff; 15 15 background-color: #ffffff;
} 16 16 }
17 17
.angucomplete-description { 18 18 .angucomplete-description {
font-size: 14px; 19 19 font-size: 14px;
} 20 20 }
21 21
.angucomplete-row { 22 22 .angucomplete-row {
padding: 5px; 23 23 padding: 5px;
color: #000000; 24 24 color: #000000;
margin-bottom: 4px; 25 25 margin-bottom: 4px;
clear: both; 26 26 clear: both;
} 27 27 }
28 28
.angucomplete-selected-row { 29 29 .angucomplete-selected-row {
background-color: #aaaaff; 30 30 background-color: #aaaaff;
} 31 31 }
32 32
.container .row { 33 33 .container .row {
margin-left: 0; 34 34 margin-left: 0;
margin-right: 0; 35 35 margin-right: 0;
} 36 36 }
37 37
ul.side-nav.fixed li { 38 38 ul.side-nav.fixed li {
/*line-height: 30px;*/ 39 39 /*line-height: 30px;*/
/*font-weight:700;*/ 40 40 /*font-weight:700;*/
font-size:24px; 41 41 font-size:24px;
} 42 42 }
43 43
ul.side-nav.fixed li a { 44 44 ul.side-nav.fixed li a {
/*line-height: 30px;*/ 45 45 /*line-height: 30px;*/
/*font-weight:700;*/ 46 46 /*font-weight:700;*/
font-size:24px; 47 47 font-size:24px;
} 48 48 }
49 49
ul.side-nav.fixed li.class a{ 50 50 ul.side-nav.fixed li.class a{
font-size:24px; 51 51 font-size:24px;
height: 36px; 52 52 height: 36px;
53 line-height: normal;
} 53 54 }
54 55
ul.side-nav.fixed li ul li { 55
/*line-height: 30px;*/ 56
/*font-weight:700;*/ 57
margin-left:20px; 58
} 59
60
ul.side-nav.fixed li a { 61 56 ul.side-nav.fixed li a {
/*line-height: 30px;*/ 62 57 /*line-height: 30px;*/
/*font-weight:700;*/ 63 58 /*font-weight:700;*/
font-size:24px; 64 59 font-size:24px;
} 65 60 }
66 61
/* Flashcard directive css */ 67 62 /* Flashcard directive css */
.card { 68 63 .card {
word-wrap: break-word; 69 64 word-wrap: break-word;
} 70 65 }
71 66
.card.flashy { 72 67 .card.flashy {
float: left; 73 68 float: left;
height: calc(3*5vw); 74 69 height: calc(3*5vw);
margin: 6px; 75 70 margin: 6px;
max-height: calc(3*70px); 76 71 max-height: calc(3*70px);
max-width: calc(5*70px); 77 72 max-width: calc(5*70px);
min-height: calc(3*50px); 78 73 min-height: calc(3*50px);
min-width: calc(5*50px); 79 74 min-width: calc(5*50px);
min-height: calc(3*50px); 80 75 min-height: calc(3*50px);
min-width: calc(5*50px); 81 76 min-width: calc(5*50px);
width: calc(5*5vw); 82 77 width: calc(5*5vw);
} 83 78 }
84 79
.card-overlay { 85 80 .card-overlay {
/* display: none; */ 86 81 /* display: none; */
height: calc(3*5vw); 87 82 height: calc(3*5vw);
left: 0; 88 83 left: 0;
max-height: calc(3*70px); 89 84 max-height: calc(3*70px);
max-width: calc(5*70px); 90 85 max-width: calc(5*70px);
min-height: calc(3*50px); 91 86 min-height: calc(3*50px);
min-width: calc(5*50px); 92 87 min-width: calc(5*50px);
opacity: 0; 93 88 opacity: 0;
position: absolute; 94 89 position: absolute;
top: 0; 95 90 top: 0;
transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s, 96 91 transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s,
opacity 0.2s cubic-bezier(0,0,0.6,1); 97 92 opacity 0.2s cubic-bezier(0,0,0.6,1);
/* animation effect to appear on off-hover */ 98 93 /* animation effect to appear on off-hover */
visibility: hidden; 99 94 visibility: hidden;
width: calc(5*5vw); 100 95 width: calc(5*5vw);
} 101 96 }
102 97
.card-overlay i { 103 98 .card-overlay i {
color: #FFF; 104 99 color: #FFF;
left: 50%; 105 100 left: 50%;
position: absolute; 106 101 position: absolute;
top: 50%; 107 102 top: 50%;
transform: translate(-50%, -50%); 108 103 transform: translate(-50%, -50%);
} 109 104 }
110 105
.card:hover .card-overlay { 111 106 .card:hover .card-overlay {
opacity: 1; 112 107 opacity: 1;
transition-delay: 0s; /* animation effect to appear on hover */ 113 108 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 114 109 visibility: visible;
} 115 110 }
116 111
.top-box { 117 112 .top-box {
background-color: rgba(0,10,203,0.6); 118 113 background-color: rgba(0,10,203,0.6);
height: 65%; 119 114 height: 65%;
position: relative; 120 115 position: relative;
transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; 121 116 transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
width: 100%; 122 117 width: 100%;
} 123 118 }
124 119
.top-box:hover { 125 120 .top-box:hover {
background-color: rgba(0,10,203,0.7); 126 121 background-color: rgba(0,10,203,0.7);
} 127 122 }
128 123
.bottom-box { 129 124 .bottom-box {
height: 35%; 130 125 height: 35%;
width: 100%; 131 126 width: 100%;
} 132 127 }
133 128
.left-box { 134 129 .left-box {
background-color: rgba(15,0,155,0.6); 135 130 background-color: rgba(15,0,155,0.6);
float: left; 136 131 float: left;
position: relative; 137 132 position: relative;
height: 100%; 138 133 height: 100%;
transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; 139 134 transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
width: 50%; 140 135 width: 50%;
} 141 136 }
142 137
.left-box:hover { 143 138 .left-box:hover {
background-color: rgba(15,0,155,0.7); 144 139 background-color: rgba(15,0,155,0.7);
} 145 140 }
146 141
.right-box { 147 142 .right-box {
background-color: rgba(0,81,189,0.6); 148 143 background-color: rgba(0,81,189,0.6);
float: right; 149 144 float: right;
height: 100%; 150 145 height: 100%;
position: relative; 151 146 position: relative;
transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; 152 147 transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
width: 50%; 153 148 width: 50%;
} 154 149 }
.right-box:hover { 155 150 .right-box:hover {
background-color: rgba(0,81,189,0.7); 156 151 background-color: rgba(0,81,189,0.7);
} 157 152 }
158 153
.center-me { 159 154 .center-me {
margin: 0 auto; 160 155 margin: 0 auto;
text-align: center; 161 156 text-align: center;
vertical-align: center; 162 157 vertical-align: middle;
} 163 158 }
164 159
.container { 165 160 .container {
margin-left: 250px; 166 161 margin-left: 250px;
/*position: relative; 167 162 /*position: relative;
width: 600px; 168 163 width: 600px;
height: 80px;*/ 169 164 height: 80px;*/
} 170 165 }
171 166
.modal.bottom-sheet { 172 167 .modal.bottom-sheet {
width: 40%; 173 168 width: 40%;
margin-left: auto; 174 169 margin-left: auto;
margin-right: auto; 175 170 margin-right: auto;
} 176 171 }
177 172
/* label color */ 178 173 /* label color */
.input-field label { 179 174 .input-field label {
color: #673ab7; 180 175 color: #673ab7;
} 181 176 }
182 177
/* label focus color */ 183 178 /* label focus color */
.input-field input[type]:focus + label { 184 179 .input-field input[type]:focus + label {
color: #b388ff; 185 180 color: #b388ff;
} 186 181 }
187 182
/* label underline focus color */ 188 183 /* label underline focus color */
.input-field input[type]:focus { 189 184 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 190 185 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 191 186 box-shadow: 0 1px 0 0 #b388ff;
} 192 187 }
193 188
/* valid color */ 194 189 /* valid color */
.input-field input[type].valid { 195 190 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 196 191 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 197 192 box-shadow: 0 1px 0 0 #673ab7;
} 198 193 }
199 194
/* invalid color */ 200 195 /* invalid color */
.input-field input[type].invalid { 201 196 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 202 197 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 203 198 box-shadow: 0 1px 0 0 #673ab7;
} 204 199 }
205 200
scripts/FeedController.js View file @ 20771fd
angular.module('flashy.FeedController', ['ui.router']). 1 1 angular.module('flashy.FeedController', ['ui.router']).
2 2
controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function($scope, $stateParams, $state, $http) { 3 3 controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function ($scope, $stateParams, $state, $http) {
console.log('Hello from feed'); 4 4 console.log('Hello from feed');
sectionId = $stateParams.sectionId; 5 5 sectionId = $stateParams.sectionId;
$scope.cards = []; 6 6 $scope.cards = [];
7 7
$scope.cards[0] = {'id': 1, 'title': 'title1', 'content': 'abc'}; 8 8 $scope.cards[0] = {'id': 0, 'title': 'title1', 'content': 'abc'};
$scope.cards[1] = {'id': 2, 'title': 'title2', 'content': 'xyz'}; 9 9 $scope.cards[1] = {'id': 1, 'title': 'title2', 'content': 'xyz'};
$scope.cards[2] = {'id': 2, 'title': 'title3', 'content': 'qwe'}; 10 10 $scope.cards[2] = {'id': 2, 'title': 'title3', 'content': 'qwe'};
11 11
$http.get('/api/sections/' + sectionId + '/flashcards/'). 12 12 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 13 13 success(function (data) {
for (var i = 0; i < data.length; i++) { 14 14 for (var i = 0; i < data.length; i++) {
cards.push({'title': data[i].title, 'content': data[i].content}); 15 15 $scope.cards.push({'title': data[i].title, 'content': data[i].text});
} 16 16 }
}). 17 17 }).
error(function(err) { 18 18 error(function (err) {
console.log('no'); 19 19 console.log('pulling feed failed');
}); 20 20 });
21 21
$scope.viewDeck = function() { 22 22 $scope.viewDeck = function () {
$state.go('deck', {sectionId: sectionId}); 23 23 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 24 24 console.log('go to deck');
}; 25 25 };
26 26
$scope.pullCard = function(card) { 27 27 $scope.pullCard = function (card) {
var index = $scope.cards.indexOf(card); 28 28 var index = $scope.cards.indexOf(card);
29 29
console.log($scope.cards[index]); 30 30 console.log($scope.cards[index]);
}; 31 31 };
32 32
$scope.pushCard = function() { 33 33 $scope.pushCard = function () {
console.log('make! card content:' + $scope.text); 34 34 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 35 35 var pushed = new Date(Date.now());
console.log(pushed.toString()); 36 36 console.log(pushed.toString());
37 37 text = $scope.text;
// attempt to make card :( 38 38 // attempt to make card :(
$http.post('/api/flashcards/', {'text': $scope.text, 'pushed': pushed, 'mask': []}). 39 39 $http.post('/api/flashcards/', {
success(function(data) { 40 40 'text': $scope.text,
console.log('No way, really?'); 41 41 'material_date': pushed,
42 'mask': '[]',
43 section: sectionId
44 }).
45 success(function (data) {
46 console.log('pushed a card!');
47 $scope.cards.push({content: text});
}). 42 48 }).
error(function(error) { 43 49 error(function (error) {
console.log('haha, n00b'); 44 50 console.log('haha, n00b');
}); 45 51 });
46 52
$scope.text = ''; 47 53 $scope.text = '';
}; 48 54 };
49 55
$scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' + 50 56 $scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' +
'know how long I am right now. Is it good enough now?????????? Howz about now???'; 51 57 'know how long I am right now. Is it good enough now?????????? Howz about now???';
$scope.text = ''; 52 58 $scope.text = '';
53 59
$(document).ready(function() { 54 60 $(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 55 61 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 56 62 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 57 63 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 58 64 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 59 65 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 60 66 out_duration: 200, // Transition out duration
/*ready: function() { alert('Ready'); }, // Callback for Modal open 61 67 /*ready: function() { alert('Ready'); }, // Callback for Modal open
complete: function() { alert('Closed'); } // Callback for Modal close*/ 62 68 complete: function() { alert('Closed'); } // Callback for Modal close*/
} 63 69 }
); 64 70 );
}); 65 71 });
66 72
}]); 67 73 }]);
68 74