110swag / flashy-frontend

Download as
Browse Code »

Commit 2ad496102fa63654009b86b0bb992904aad38f71

Authored by Rachel Lee
1 parent 0987fcfc86
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Tweaking hotkey add and feed and css

Showing 3 changed files with 20 additions and 4 deletions Inline Diff

scripts/FeedController.js View file @ 2ad4961
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
$http.get('/api/sections/' + sectionId + '/feed/'). 8 8 $http.get('/api/sections/' + 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;
}). 12 12 }).
error(function (err) { 13 13 error(function (err) {
console.log('pulling feed failed'); 14 14 console.log('pulling feed failed');
}); 15 15 });
16 16
$scope.viewDeck = function () { 17 17 $scope.viewDeck = function () {
$state.go('deck', {sectionId: sectionId}); 18 18 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 19 19 console.log('go to deck');
}; 20 20 };
21 21
$scope.pushCard = function () { 22 22 $scope.pushCard = function () {
console.log('make! card content:' + $scope.text); 23 23 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 24 24 var pushed = new Date(Date.now());
console.log(pushed.toString()); 25 25 console.log(pushed.toString());
text = $scope.text; 26 26 text = $scope.text;
// attempt to make card :( 27 27 // attempt to make card :(
var myCard = { 28 28 var myCard = {
'text': $scope.text, 29 29 'text': $scope.text,
'material_date': pushed, 30 30 'material_date': pushed,
'mask': '[]', 31 31 'mask': '[]',
section: sectionId 32 32 section: sectionId
}; 33 33 };
$http.post('/api/flashcards/', myCard). 34 34 $http.post('/api/flashcards/', myCard).
success(function (data) { 35 35 success(function (data) {
console.log('pushed a card!'); 36 36 console.log('pushed a card!');
$scope.cards.push(myCard); // Add right away 37 37 $scope.cards.push(myCard); // Add right away
$scope.refreshCards(); // Refresh list 38 38 $scope.refreshCards(); // Refresh list
listenForC = true; 39 39 listenForC = true;
}). 40 40 }).
error(function (error) { 41 41 error(function (error) {
console.log('haha, n00b'); 42 42 console.log('haha, n00b');
}); 43 43 });
44 44
$scope.text = ''; 45 45 $scope.text = '';
}; 46 46 };
47 47
$scope.refreshCards = function () { 48 48 $scope.refreshCards = function () {
$http.get('/api/sections/' + sectionId + '/feed/'). 49 49 $http.get('/api/sections/' + sectionId + '/feed/').
success(function (data) { 50 50 success(function (data) {
console.log(data); 51 51 console.log(data);
$scope.cards = data; 52 52 $scope.cards = data;
console.log('success in refresh cards...'); 53 53 console.log('success in refresh cards...');
}). 54 54 }).
error(function (err) { 55 55 error(function (err) {
console.log('refresh fail'); 56 56 console.log('refresh fail');
}); 57 57 });
} 58 58 }
59
60 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 59 61 var listenForC = true;
$(document).keydown(function (e) { 60 62 $(document).keydown(function (e) {
var keyed = e.which; 61 63 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" or "C" for compose 62 64 if (keyed == 67 && listenForC) { // "c" or "C" for compose
$('#newCard').openModal(); 63 65 $('#newCard').openModal();
listenForC = false; 64 66 listenForC = false;
return false; 65 67 return false;
68 } else if (keyed == 13 || keyed == 27) { // enter or esc, respectively
69 listenForC = true;
70 document.getElementById('new-card-input').value = '';
} 66 71 }
}); 67 72 });
68 73
69 74
$scope.flashcard = ''; 70 75 $scope.flashcard = '';
$scope.text = ''; 71 76 $scope.text = '';
72 77
$(document).ready(function () { 73 78 $(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 74 79 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 75 80 $('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal 76 81 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 77 82 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 78 83 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 79 84 out_duration: 200, // Transition out duration
85 ready: function() {
86 listenForC = false;
87 console.log("modal OPENING");
styles/flashy.css View file @ 2ad4961
.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
ul.side-nav.fixed li { 45 45 ul.side-nav.fixed li {
font-size: 24px; 46 46 font-size: 24px;
} 47 47 }
48 48
ul.side-nav.fixed li a.class { 49 49 ul.side-nav.fixed li a.class {
height: 28px; 50 50 height: 28px;
font-size: 20px; 51 51 font-size: 20px;
line-height: normal; 52 52 line-height: normal;
font-weight: 600; 53 53 font-weight: 600;
} 54 54 }
55 55
ul.side-nav.fixed li a { 56 56 ul.side-nav.fixed li a {
font-size: 24px; 57 57 font-size: 24px;
} 58 58 }
59 59
/* Flashcard directive css */ 60 60 /* Flashcard directive css */
.card { 61 61 .card {
word-wrap: break-word; 62 62 word-wrap: break-word;
} 63 63 }
64 64
.card.flashy { 65 65 .card.flashy {
float: left; 66 66 float: left;
text-align: center; 67 67 text-align: center;
margin: 6px; 68 68 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 69 69 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
font-family: 'Titillium Web', sans-serif; 70 70 font-family: 'Titillium Web', sans-serif;
} 71 71 }
72 72
.card.flashy.shrinky { 73 73 .card.flashy.shrinky {
height: 0; 74 74 height: 0;
opacity: 0; 75 75 opacity: 0;
overflow: hidden; 76 76 overflow: hidden;
} 77 77 }
78 78
.card-overlay { 79 79 .card-overlay {
cursor: pointer; 80 80 cursor: pointer;
left: 0; 81 81 left: 0;
opacity: 0; 82 82 opacity: 0;
position: absolute; 83 83 position: absolute;
top: 0; 84 84 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 85 85 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 86 86 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 87 87 /* animation effect to appear on off-hover */
visibility: hidden; 88 88 visibility: hidden;
height: 100%; 89 89 height: 100%;
width: 100%; 90 90 width: 100%;
} 91 91 }
92 92
.card-overlay i { 93 93 .card-overlay i {
color: #FFF; 94 94 color: #FFF;
left: 50%; 95 95 left: 50%;
position: absolute; 96 96 position: absolute;
top: 50%; 97 97 top: 50%;
transform: translate(-50%, -50%); 98 98 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 99 99 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 100 100 }
101 101
.center-me:hover i { 102 102 .center-me:hover i {
text-shadow: 0 0 15px rgba(255,255,255,0.7); 103 103 text-shadow: 0 0 15px rgba(255,255,255,0.7);
} 104 104 }
105 105
.card:hover .card-overlay { 106 106 .card:hover .card-overlay {
opacity: 1; 107 107 opacity: 0.9;
transition-delay: 0s; /* animation effect to appear on hover */ 108 108 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 109 109 visibility: visible;
} 110 110 }
111 111
.top-box { 112 112 .top-box {
background-color: rgba(0, 81, 229, 0.6); 113 113 background-color: rgba(0, 81, 229, 0.6);
height: 65%; 114 114 height: 65%;
position: relative; 115 115 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 116 116 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 117 117 width: 100%;
} 118 118 }
119 119
.top-box:hover { 120 120 .top-box:hover {
background-color: rgba(0, 81, 229, 0.75); 121 121 background-color: rgba(0, 81, 229, 0.75);
} 122 122 }
123 123
.bottom-box { 124 124 .bottom-box {
height: 35%; 125 125 height: 35%;
width: 100%; 126 126 width: 100%;
} 127 127 }
128 128
.left-box { 129 129 .left-box {
background-color: rgba(15, 0, 155, 0.6); 130 130 background-color: rgba(15, 0, 155, 0.6);
float: left; 131 131 float: left;
position: relative; 132 132 position: relative;
height: 100%; 133 133 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 134 134 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 135 135 width: 50%;
} 136 136 }
137 137
.left-box:hover { 138 138 .left-box:hover {
background-color: rgba(15, 0, 155, 0.75); 139 139 background-color: rgba(15, 0, 155, 0.75);
} 140 140 }
141 141
.right-box { 142 142 .right-box {
background-color: rgba(207, 0, 86, 0.6); 143 143 background-color: rgba(207, 0, 86, 0.6);
float: right; 144 144 float: right;
height: 100%; 145 145 height: 100%;
position: relative; 146 146 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 147 147 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 148 148 width: 50%;
} 149 149 }
150 150
.right-box:hover { 151 151 .right-box:hover {
background-color: rgba(207, 0, 86, 0.75); 152 152 background-color: rgba(207, 0, 86, 0.75);
} 153 153 }
154 154
.center-me { 155 155 .center-me {
height: 100%; 156 156 height: 100%;
margin: 0 auto; 157 157 margin: 0 auto;
text-align: center; 158 158 text-align: center;
vertical-align: middle; 159 159 vertical-align: middle;
width: 100%; 160 160 width: 100%;
} 161 161 }
162 162
.modal.bottom-sheet { 163 163 .modal.bottom-sheet {
width: 40%; 164 164 width: 40%;
margin-left: auto; 165 165 margin-left: auto;
margin-right: auto; 166 166 margin-right: auto;
} 167 167 }
168 168
/* label color */ 169 169 #newCard input[type=text] {
170 height: 3rem !important;
171 }
172
.input-field label { 170 173 .input-field label {
color: #673ab7; 171 174 color: #673ab7;
} 172 175 }
173 176
/* label focus color */ 174 177 /* label focus color */
.input-field input[type]:focus + label { 175 178 .input-field input[type]:focus + label {
color: #b388ff; 176 179 color: #b388ff;
} 177 180 }
178 181
/* label underline focus color */ 179 182 /* label underline focus color */
.input-field input[type]:focus { 180 183 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 181 184 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 182 185 box-shadow: 0 1px 0 0 #b388ff;
} 183 186 }
184 187
/* valid color */ 185 188 /* valid color */
.input-field input[type].valid { 186 189 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 187 190 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 188 191 box-shadow: 0 1px 0 0 #673ab7;
} 189 192 }
190 193
/* invalid color */ 191 194 /* invalid color */
.input-field input[type].invalid { 192 195 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 193 196 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 194 197 box-shadow: 0 1px 0 0 #673ab7;
} 195 198 }
196 199
/* icon prefix focus color */ 197 200 /* icon prefix focus color */
.input-field .prefix.active { 198 201 .input-field .prefix.active {
color: #b388ff; 199 202 color: #b388ff;
} 200 203 }
201 204
/* label focus color */ 202 205 /* label focus color */
.input-field textarea[type]:focus + label { 203 206 .input-field textarea[type]:focus + label {
color: #b388ff; 204 207 color: #b388ff;
} 205 208 }
206 209
/* label underline focus color */ 207 210 /* label underline focus color */
.input-field textarea[type]:focus { 208 211 .input-field textarea[type]:focus {
border-bottom: 1px solid #b388ff; 209 212 border-bottom: 1px solid #b388ff;
templates/feed.html View file @ 2ad4961
<div class="row"> 1 1 <div class="row">
<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a> 2 2 <a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a>
</div> 3 3 </div>
4 4
<!--cards--> 5 5 <!--cards-->
<div class="row"> 6 6 <div class="row">
<div ng-repeat="card in cards"> 7 7 <div ng-repeat="card in cards">
<flashcard flashcard-obj="card" refresh="refreshCards()" /> 8 8 <flashcard flashcard-obj="card" refresh="refreshCards()" />
</div> 9 9 </div>
</div> 10 10 </div>
11 11
12 12
<!--Lil plus button in corner--> 13 13 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> 14 14 <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard"> 15 15 <a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">
<i class="large mdi-content-add"></i> 16 16 <i class="large mdi-content-add"></i>
</a> 17 17 </a>
<!--Maybe this will come in handy later? Floating bubbles on mouseover--> 18 18 <!--Maybe this will come in handy later? Floating bubbles on mouseover-->
<ul> 19 19 <ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li> 20 20 <li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li> 21 21 <li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
<li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li> 22 22 <li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
<li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li> 23 23 <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
</ul> 24 24 </ul>
</div> 25 25 </div>
26 26
<form> 27 27 <form>
<div id="newCard" class="modal bottom-sheet"> 28 28 <div id="newCard" class="modal bottom-sheet">
<div class="modal-content"> 29 29 <div class="modal-content">
<div class="row"> 30 30 <div class="row">
<div class="input-field"> 31 31 <div class="input-field">
<i class="mdi-editor-mode-edit prefix"></i> 32 32 <i class="mdi-editor-mode-edit prefix"></i>
<input class="materialize-textarea" ng-model="text" type="text" maxlength="255" autofocus/> 33 33 <input id="new-card-input" class="materialize-textarea" ng-model="text" type="text" maxlength="255" autofocus/>
<label id="newCardSign" for="newCard">New Flashcard</label> 34 34 <label id="newCardSign" for="newCard">New Flashcard Description</label>
</div> 35 35 </div>
</div> 36 36 </div>
</div> 37 37 </div>
<div class="modal-footer"> 38 38 <div class="modal-footer">
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit 39 39 <button class="btn modal-close" type="submit" ng-click="pushCard()">Submit
<i class="mdi-content-send right"></i> 40 40 <i class="mdi-content-send right"></i>
</button> 41 41 </button>
</div> 42 42 </div>