110swag / flashy-frontend

Download as
Browse Code »

Commit bdaa2bafef9bfaa6e65f152e6a74b157d26a11e2

Authored by Andrew Buss
2 parents 20771fdcb1 e303b86ecf
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

merge

Showing 4 changed files Inline Diff

flashy.css View file @ bdaa2ba
.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
/*font-weight:700;*/ 40
font-size:24px; 41 39 font-size:24px;
} 42 40 }
43 41
ul.side-nav.fixed li a { 44
/*line-height: 30px;*/ 45
/*font-weight:700;*/ 46
font-size:24px; 47
} 48
49
ul.side-nav.fixed li.class a{ 50 42 ul.side-nav.fixed li.class a{
font-size:24px; 51 43 font-size:24px;
height: 36px; 52 44 height: 36px;
line-height: normal; 53 45 line-height: normal;
} 54 46 }
55 47
ul.side-nav.fixed li a { 56 48 ul.side-nav.fixed li a {
/*line-height: 30px;*/ 57 49 font-size: 24px;
/*font-weight:700;*/ 58 50 height: 36px;
font-size:24px; 59 51 line-height: normal;
} 60 52 }
61 53
/* Flashcard directive css */ 62 54 /* Flashcard directive css */
.card { 63 55 .card {
word-wrap: break-word; 64 56 word-wrap: break-word;
} 65 57 }
66 58
.card.flashy { 67 59 .card.flashy {
float: left; 68 60 float: left;
height: calc(3*5vw); 69 61 height: calc(3*5vw);
margin: 6px; 70 62 margin: 6px;
max-height: calc(3*70px); 71 63 max-height: calc(3*60px);
max-width: calc(5*70px); 72 64 max-width: calc(5*60px);
min-height: calc(3*50px); 73 65 min-height: calc(3*50px);
min-width: calc(5*50px); 74 66 min-width: calc(5*50px);
min-height: calc(3*50px); 75 67 min-height: calc(3*50px);
min-width: calc(5*50px); 76 68 min-width: calc(5*50px);
width: calc(5*5vw); 77 69 width: calc(5*5vw);
} 78 70 }
79 71
.card-overlay { 80 72 .card-overlay {
/* display: none; */ 81 73 height: calc(3*5vw);
height: calc(3*5vw); 82 74 left: 0;
left: 0; 83 75 max-height: calc(3*60px);
max-height: calc(3*70px); 84 76 max-width: calc(5*60px);
max-width: calc(5*70px); 85 77 min-height: calc(3*50px);
min-height: calc(3*50px); 86 78 min-width: calc(5*50px);
min-width: calc(5*50px); 87 79 opacity: 0;
opacity: 0; 88 80 position: absolute;
position: absolute; 89 81 top: 0;
top: 0; 90 82 transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s,
transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s, 91 83 opacity 0.2s cubic-bezier(0,0,0.6,1);
opacity 0.2s cubic-bezier(0,0,0.6,1); 92 84 /* animation effect to appear on off-hover */
/* animation effect to appear on off-hover */ 93 85 visibility: hidden;
visibility: hidden; 94 86 width: calc(5*5vw);
width: calc(5*5vw); 95
} 96 87 }
97 88
.card-overlay i { 98 89 .card-overlay i {
color: #FFF; 99 90 color: #FFF;
left: 50%; 100 91 left: 50%;
position: absolute; 101 92 position: absolute;
top: 50%; 102 93 top: 50%;
transform: translate(-50%, -50%); 103 94 transform: translate(-50%, -50%);
} 104 95 }
105 96
.card:hover .card-overlay { 106 97 .card:hover .card-overlay {
opacity: 1; 107 98 opacity: 1;
transition-delay: 0s; /* animation effect to appear on hover */ 108 99 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 109 100 visibility: visible;
} 110 101 }
111 102
.top-box { 112 103 .top-box {
background-color: rgba(0,10,203,0.6); 113 104 background-color: rgba(0,10,203,0.6);
height: 65%; 114 105 height: 65%;
position: relative; 115 106 position: relative;
transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; 116 107 transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
width: 100%; 117 108 width: 100%;
} 118 109 }
119 110
.top-box:hover { 120 111 .top-box:hover {
background-color: rgba(0,10,203,0.7); 121 112 background-color: rgba(0,10,203,0.7);
} 122 113 }
123 114
.bottom-box { 124 115 .bottom-box {
height: 35%; 125 116 height: 35%;
width: 100%; 126 117 width: 100%;
} 127 118 }
128 119
.left-box { 129 120 .left-box {
background-color: rgba(15,0,155,0.6); 130 121 background-color: rgba(15,0,155,0.6);
float: left; 131 122 float: left;
position: relative; 132 123 position: relative;
height: 100%; 133 124 height: 100%;
transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; 134 125 transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
width: 50%; 135 126 width: 50%;
} 136 127 }
137 128
.left-box:hover { 138 129 .left-box:hover {
background-color: rgba(15,0,155,0.7); 139 130 background-color: rgba(15,0,155,0.7);
} 140 131 }
141 132
.right-box { 142 133 .right-box {
background-color: rgba(0,81,189,0.6); 143 134 background-color: rgba(0,81,189,0.6);
float: right; 144 135 float: right;
height: 100%; 145 136 height: 100%;
position: relative; 146 137 position: relative;
transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; 147 138 transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
width: 50%; 148 139 width: 50%;
} 149 140 }
.right-box:hover { 150 141 .right-box:hover {
background-color: rgba(0,81,189,0.7); 151 142 background-color: rgba(0,81,189,0.7);
} 152 143 }
153 144
.center-me { 154 145 .center-me {
margin: 0 auto; 155 146 margin: 0 auto;
text-align: center; 156 147 text-align: center;
vertical-align: middle; 157 148 vertical-align: middle;
} 158
159
.container { 160
margin-left: 250px; 161
/*position: relative; 162
width: 600px; 163
height: 80px;*/ 164
} 165 149 }
166 150
.modal.bottom-sheet { 167 151 .modal.bottom-sheet {
width: 40%; 168 152 width: 40%;
margin-left: auto; 169 153 margin-left: auto;
margin-right: auto; 170 154 margin-right: auto;
} 171 155 }
172 156
/* label color */ 173 157 /* label color */
.input-field label { 174 158 .input-field label {
color: #673ab7; 175 159 color: #673ab7;
} 176 160 }
177 161
/* label focus color */ 178 162 /* label focus color */
.input-field input[type]:focus + label { 179 163 .input-field input[type]:focus + label {
color: #b388ff; 180 164 color: #b388ff;
} 181 165 }
182 166
/* label underline focus color */ 183 167 /* label underline focus color */
.input-field input[type]:focus { 184 168 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 185 169 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 186 170 box-shadow: 0 1px 0 0 #b388ff;
} 187 171 }
188 172
/* valid color */ 189 173 /* valid color */
.input-field input[type].valid { 190 174 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 191 175 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 192 176 box-shadow: 0 1px 0 0 #673ab7;
} 193 177 }
194 178
/* invalid color */ 195 179 /* invalid color */
.input-field input[type].invalid { 196 180 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 197 181 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 198 182 box-shadow: 0 1px 0 0 #673ab7;
} 199 183 }
200 184
/* icon prefix focus color */ 201 185 /* icon prefix focus color */
.input-field .prefix.active { 202 186 .input-field .prefix.active {
color: #b388ff; 203 187 color: #b388ff;
} 204 188 }
205 189
/* label focus color */ 206 190 /* label focus color */
.input-field textarea[type]:focus + label { 207 191 .input-field textarea[type]:focus + label {
color: #b388ff; 208 192 color: #b388ff;
} 209 193 }
210 194
/* label underline focus color */ 211 195 /* label underline focus color */
.input-field textarea[type]:focus { 212 196 .input-field textarea[type]:focus {
border-bottom: 1px solid #b388ff; 213 197 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 214 198 box-shadow: 0 1px 0 0 #b388ff;
} 215 199 }
216 200
body { 217 201 body {
background-color: #3e1944; 218 202 background-color: #3e1944;
} 219 203 }
220 204
.btn { 221 205 .btn {
background-color: #673ab7; 222 206 background-color: #673ab7;
} 223 207 }
224 208
.btn:hover { 225 209 .btn:hover {
background-color: #7c4dff; 226 210 background-color: #7c4dff;
} 227 211 }
228 212
.btn-floating { 229 213 .btn-floating {
background-color: #673ab7; 230 214 background-color: #673ab7;
} 231 215 }
232 216
.btn-floating:hover { 233 217 .btn-floating:hover {
background-color: #7c4dff; 234 218 background-color: #7c4dff;
} 235 219 }
236 220
scripts/FeedController.js View file @ bdaa2ba
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': 0, 'title': 'title1', 'content': 'abc'}; 8
$scope.cards[1] = {'id': 1, 'title': 'title2', 'content': 'xyz'}; 9
$scope.cards[2] = {'id': 2, 'title': 'title3', 'content': 'qwe'}; 10
11
$http.get('/api/sections/' + sectionId + '/feed/'). 12 8 $http.get('/api/sections/' + sectionId + '/feed/').
success(function (data) { 13 9 success(function (data) {
for (var i = 0; i < data.length; i++) { 14 10 for (var i = 0; i < data.length; i++) {
$scope.cards.push({'title': data[i].title, 'content': data[i].text}); 15 11 $scope.cards.push({'title': data[i].title, 'content': data[i].text});
} 16 12 }
}). 17 13 }).
error(function (err) { 18 14 error(function (err) {
console.log('pulling feed failed'); 19 15 console.log('pulling feed failed');
}); 20 16 });
21 17
$scope.viewDeck = function () { 22 18 $scope.viewDeck = function () {
$state.go('deck', {sectionId: sectionId}); 23 19 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 24 20 console.log('go to deck');
}; 25 21 };
26 22
$scope.pullCard = function (card) { 27 23 $scope.pullCard = function (card) {
var index = $scope.cards.indexOf(card); 28 24 var index = $scope.cards.indexOf(card);
29 25
console.log($scope.cards[index]); 30 26 console.log($scope.cards[index]);
}; 31 27 };
32 28
$scope.pushCard = function () { 33 29 $scope.pushCard = function () {
console.log('make! card content:' + $scope.text); 34 30 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 35 31 var pushed = new Date(Date.now());
console.log(pushed.toString()); 36 32 console.log(pushed.toString());
text = $scope.text; 37 33 text = $scope.text;
// attempt to make card :( 38 34 // attempt to make card :(
$http.post('/api/flashcards/', { 39 35 $http.post('/api/flashcards/', {
'text': $scope.text, 40 36 'text': $scope.text,
'material_date': pushed, 41 37 'material_date': pushed,
'mask': '[]', 42 38 'mask': '[]',
section: sectionId 43 39 section: sectionId
}). 44 40 }).
success(function (data) { 45 41 success(function (data) {
console.log('pushed a card!'); 46 42 console.log('pushed a card!');
$scope.cards.push({content: text}); 47 43 $scope.cards.push({content: text});
}). 48 44 }).
error(function (error) { 49 45 error(function (error) {
console.log('haha, n00b'); 50 46 console.log('haha, n00b');
}); 51 47 });
52 48
$scope.text = ''; 53 49 $scope.text = '';
}; 54 50 };
55 51
$scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' + 56 52 $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???'; 57 53 'know how long I am right now. Is it good enough now?????????? Howz about now???';
$scope.text = ''; 58 54 $scope.text = '';
59 55
$(document).ready(function () { 60 56 $(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 61 57 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 62 58 $('.modal-trigger').leanModal({
scripts/FlashcardDirective.js View file @ bdaa2ba
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', function() { 3 3 directive('flashcard', function() {
return { 4 4 return {
templateUrl: '/app/templates/flashcard.html', 5 5 templateUrl: '/app/templates/flashcard.html',
restrict: 'E', 6 6 restrict: 'E',
scope: { 7 7 scope: {
content: '=flashcardContent' // two way binding 8 8 content: '=flashcardContent' //flashcard-content in outer scope
}, 9 9 },
link: function(scope) { 10 10 link: function(scope) {
console.log("HELLO FROM FLASHCARD DIRECTIVE"); 11 11 console.log("HELLO FROM FLASHCARD DIRECTIVE");
console.log(scope.content); 12 12 console.log(scope.content);
13 13
14 14
// Put flashcard-specific functions here. 15 15 // Put flashcard-specific functions here.
// This will probably include add/hide/modals/etc. 16 16 // This will probably include add/hide/modals/etc.
} 17 17 }
templates/feed.html View file @ bdaa2ba
<body> 1 1 <body>
<div class="col s12"> 2 2 <div class="col s12">
<div class="row"> 3 3 <div class="row">
<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a> 4 4 <a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a>
</div> 5 5 </div>
6 6
<!--cards--> 7 7 <!--cards-->
<div class="row"> 8 8 <div class="row">
<div ng-repeat="card in cards"> 9 9 <div ng-repeat="card in cards">
<div class="col s4"> 10 10 <flashcard flashcard-content="card.content"/>
<div class="card" ng-click="pullCard(card)"> 11
<div class="card-content"> 12
<span> {{card.content}} </span> 13
</div> 14
</div> 15
</div> 16
</div> 17 11 </div>
</div> 18 12 </div>
19 13
20 14
<!--Lil plus button in corner--> 21 15 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> 22 16 <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard"> 23 17 <a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">
<i class="large mdi-content-add"></i> 24 18 <i class="large mdi-content-add"></i>
</a> 25 19 </a>
<!--Maybe this will come in handy later? Floating bubbles on mouseover--> 26 20 <!--Maybe this will come in handy later? Floating bubbles on mouseover-->
<ul> 27 21 <ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li> 28 22 <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> 29 23 <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> 30 24 <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> 31 25 <li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
</ul> 32 26 </ul>
</div> 33 27 </div>
</div> 34 28 </div>
35 29
<div id="newCard" class="modal bottom-sheet"> 36 30 <div id="newCard" class="modal bottom-sheet">
<div class="modal-content"> 37 31 <div class="modal-content">
<form> 38 32 <form>
<div class="row"> 39 33 <div class="row">
<div class="input-field"> 40 34 <div class="input-field">
<i class="mdi-editor-mode-edit prefix"></i> 41 35 <i class="mdi-editor-mode-edit prefix"></i>
<textarea class="materialize-textarea" ng-model="text" type="text"></textarea> 42 36 <textarea class="materialize-textarea" ng-model="text" type="text"></textarea>
<label id="newCardSign" for="newCard">New Flashcard</label> 43 37 <label id="newCardSign" for="newCard">New Flashcard</label>
</div> 44 38 </div>
</div> 45 39 </div>
</form> 46 40 </form>
</div> 47 41 </div>
<div class="modal-footer"> 48 42 <div class="modal-footer">
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit 49 43 <button class="btn modal-close" type="submit" ng-click="pushCard()">Submit
<i class="mdi-content-send right"></i> 50 44 <i class="mdi-content-send right"></i>
</button> 51 45 </button>
</div> 52 46 </div>