110swag / flashy-frontend

Download as
Browse Code »

Commit f3d9271b825e812002411bd542c3f352f0c245c2

Authored by Andrew Buss
1 parent 4b201f2e23
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

more attempts at card sizing

Showing 4 changed files with 7 additions and 7 deletions Inline Diff

scripts/FlashcardDirective.js View file @ f3d9271
angular.module('flashy.FlashcardDirective', []). 1 1 angular.module('flashy.FlashcardDirective', []).
2 2
directive('flashcard', ['$http', function($http) { 3 3 directive('flashcard', ['$http', function($http) {
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: {
flashcard: '=flashcardObj' // flashcard-obj in html 8 8 flashcard: '=flashcardObj' // flashcard-obj in html
}, 9 9 },
link: function(scope, element) { 10 10 link: function(scope, element) {
console.log('HELLO FROM FLASHCARD DIRECTIVE'); 11 11 console.log('HELLO FROM FLASHCARD DIRECTIVE');
console.log(scope.flashcard); 12 12 console.log(scope.flashcard);
console.log(element); 13 13 console.log(element);
14 14 scope.card_width = '300px';
// 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.
scope.pullCard = function(flashcard) { 17 17 scope.pullCard = function(flashcard) {
$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard); 18 18 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
console.log('pulled flashcard #' + flashcard.id); 19 19 console.log('pulled flashcard #' + flashcard.id);
}; 20 20 };
} 21 21 }
}; 22 22 };
scripts/RootController.js View file @ f3d9271
angular.module('flashy.RootController', ['ui.router']). 1 1 angular.module('flashy.RootController', ['ui.router']).
2 2
controller('RootController', ['$rootScope', '$scope', '$state', 'UserService', function($rootScope, $scope, $state, UserService) { 3 3 controller('RootController', ['$rootScope', '$scope', '$state', 'UserService', function($rootScope, $scope, $state, UserService) {
//UserService.getUserData(); 4 4 //UserService.getUserData();
//$('#top').collapsible('accordion'); 5 5 //$('#top').collapsible('accordion');
$('.button-collapse').sideNav(); 6 6 $('.button-collapse').sideNav();
if (UserService.isLoggedIn()) $state.go('login'); 7 7 if (UserService.isLoggedIn()) $state.go('login');
else $state.go('addclass'); 8 8 else $state.go('addclass');
$rootScope.isLoggedIn = false; 9 9 $rootScope.isLoggedIn = false;
console.log(UserService._user); 10 10 console.log(UserService._user);
UserService.getUserData().then(function(data) { 11 11 UserService.getUserData().then(function(data) {
console.log(data); 12 12 console.log(data);
$rootScope.user = data; 13 13 $rootScope.user = data;
}); 14 14 });
15 15
$('.button-collapse').sideNav({ 16 16 $('.button-collapse').sideNav({
menuWidth: 300, // Default is 240 17 17 menuWidth: 300, // Default is 240
edge: 'right', // Choose the horizontal origin 18 18 edge: 'right', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 19 19 closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
} 20 20 }
); 21 21 );
22
}]); 22 23 }]);
23 24
styles/flashy.css View file @ f3d9271
.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 {
font-size: 24px; 39 39 font-size: 24px;
} 40 40 }
41 41
ul.side-nav.fixed li.class a { 42 42 ul.side-nav.fixed li.class a {
height: 36px; 43 43 height: 36px;
line-height: normal; 44 44 line-height: normal;
} 45 45 }
46 46
ul.side-nav.fixed li a { 47 47 ul.side-nav.fixed li a {
font-size: 24px; 48 48 font-size: 24px;
} 49 49 }
50 50
/* Flashcard directive css */ 51 51 /* Flashcard directive css */
.card { 52 52 .card {
word-wrap: break-word; 53 53 word-wrap: break-word;
} 54 54 }
55 55
.card.flashy { 56 56 .card.flashy {
float: left; 57 57 float: left;
height: calc((992px / 4 - 6px * 2) * 3 / 5); 58 58 height: calc((992px / 4 - 6px * 2) * 3 / 5);
margin: 6px; 59 59 margin: 6px;
max-height: 2in; 60 60 max-height: 2in;
max-width: calc(5 * 60px); 61 61 max-width: calc(5 * 60px);
min-height: calc((992px / 4 - 6px * 2) * 3 / 5); 62 62 min-height: calc((992px / 4 - 6px * 2) * 3 / 5);
/*min-width: calc(992px / 4 - 6px * 2);*/ 63 63 /*min-width: calc(992px / 4 - 6px * 2);*/
width: calc(992px / 4 - 6px * 2); 64
} 65 64 }
66 65
.card-overlay { 67 66 .card-overlay {
left: 0; 68 67 left: 0;
opacity: 0; 69 68 opacity: 0;
position: absolute; 70 69 position: absolute;
top: 0; 71 70 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 72 71 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 73 72 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 74 73 /* animation effect to appear on off-hover */
visibility: hidden; 75 74 visibility: hidden;
height: 100%; 76 75 height: 100%;
width: 100%; 77 76 width: 100%;
} 78 77 }
79 78
.card-overlay i { 80 79 .card-overlay i {
color: #FFF; 81 80 color: #FFF;
left: 50%; 82 81 left: 50%;
position: absolute; 83 82 position: absolute;
top: 50%; 84 83 top: 50%;
transform: translate(-50%, -50%); 85 84 transform: translate(-50%, -50%);
} 86 85 }
87 86
.card:hover .card-overlay { 88 87 .card:hover .card-overlay {
opacity: 1; 89 88 opacity: 1;
transition-delay: 0s; /* animation effect to appear on hover */ 90 89 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 91 90 visibility: visible;
} 92 91 }
93 92
.top-box { 94 93 .top-box {
background-color: rgba(0, 10, 203, 0.6); 95 94 background-color: rgba(0, 10, 203, 0.6);
height: 65%; 96 95 height: 65%;
position: relative; 97 96 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 98 97 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 99 98 width: 100%;
} 100 99 }
101 100
.top-box:hover { 102 101 .top-box:hover {
background-color: rgba(0, 10, 203, 0.7); 103 102 background-color: rgba(0, 10, 203, 0.7);
} 104 103 }
105 104
.bottom-box { 106 105 .bottom-box {
height: 35%; 107 106 height: 35%;
width: 100%; 108 107 width: 100%;
} 109 108 }
110 109
.left-box { 111 110 .left-box {
background-color: rgba(15, 0, 155, 0.6); 112 111 background-color: rgba(15, 0, 155, 0.6);
float: left; 113 112 float: left;
position: relative; 114 113 position: relative;
height: 100%; 115 114 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 116 115 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 117 116 width: 50%;
} 118 117 }
119 118
.left-box:hover { 120 119 .left-box:hover {
background-color: rgba(15, 0, 155, 0.7); 121 120 background-color: rgba(15, 0, 155, 0.7);
} 122 121 }
123 122
.right-box { 124 123 .right-box {
background-color: rgba(0, 81, 189, 0.6); 125 124 background-color: rgba(0, 81, 189, 0.6);
float: right; 126 125 float: right;
height: 100%; 127 126 height: 100%;
position: relative; 128 127 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 129 128 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 130 129 width: 50%;
} 131 130 }
132 131
.right-box:hover { 133 132 .right-box:hover {
background-color: rgba(0, 81, 189, 0.7); 134 133 background-color: rgba(0, 81, 189, 0.7);
} 135 134 }
136 135
.center-me { 137 136 .center-me {
margin: 0 auto; 138 137 margin: 0 auto;
text-align: center; 139 138 text-align: center;
vertical-align: middle; 140 139 vertical-align: middle;
} 141 140 }
142 141
.modal.bottom-sheet { 143 142 .modal.bottom-sheet {
width: 40%; 144 143 width: 40%;
margin-left: auto; 145 144 margin-left: auto;
margin-right: auto; 146 145 margin-right: auto;
} 147 146 }
148 147
/* label color */ 149 148 /* label color */
.input-field label { 150 149 .input-field label {
color: #673ab7; 151 150 color: #673ab7;
} 152 151 }
153 152
/* label focus color */ 154 153 /* label focus color */
.input-field input[type]:focus + label { 155 154 .input-field input[type]:focus + label {
color: #b388ff; 156 155 color: #b388ff;
} 157 156 }
158 157
/* label underline focus color */ 159 158 /* label underline focus color */
.input-field input[type]:focus { 160 159 .input-field input[type]:focus {
border-bottom: 1px solid #b388ff; 161 160 border-bottom: 1px solid #b388ff;
box-shadow: 0 1px 0 0 #b388ff; 162 161 box-shadow: 0 1px 0 0 #b388ff;
} 163 162 }
164 163
/* valid color */ 165 164 /* valid color */
.input-field input[type].valid { 166 165 .input-field input[type].valid {
border-bottom: 1px solid #673ab7; 167 166 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 168 167 box-shadow: 0 1px 0 0 #673ab7;
} 169 168 }
170 169
/* invalid color */ 171 170 /* invalid color */
.input-field input[type].invalid { 172 171 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 173 172 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 174 173 box-shadow: 0 1px 0 0 #673ab7;
} 175 174 }
176 175
/* icon prefix focus color */ 177 176 /* icon prefix focus color */
.input-field .prefix.active { 178 177 .input-field .prefix.active {
color: #b388ff; 179 178 color: #b388ff;
} 180 179 }
181 180
templates/flashcard.html View file @ f3d9271
<div class="card flashy"> 1 1 <div class="card flashy" ng-style="{'width':card_width}">
<div class="card-content"> 2 2 <div class="card-content">
<p>{{flashcard.text}}</p> 3 3 <p>{{flashcard.text}}</p>
</div> 4 4 </div>
<div class="card-overlay"> 5 5 <div class="card-overlay">
<a href="#"> 6 6 <a href="#">
<div class="top-box" ng-click="pullCard(flashcard)"> 7 7 <div class="top-box" ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 8 8 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 9 9 </div>
</a> 10 10 </a>
<div class="bottom-box"> 11 11 <div class="bottom-box">
<a href="#"> 12 12 <a href="#">
<div class="left-box"> 13 13 <div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div> 14 14 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div> 15 15 </div>
</a> 16 16 </a>
<a href="#"> 17 17 <a href="#">
<div class="right-box"> 18 18 <div class="right-box">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 19 19 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 20 20 </div>
</a> 21 21 </a>
</div> 22 22 </div>
</div> 23 23 </div>
</div> 24 24 </div>
25 25