Commit 45661654443c5863c03aa95e829b5084218b1737
1 parent
6a170e7a1c
Exists in
master
and in
1 other branch
Hotkeyed compose new card to 'c' press and deleted modal/sidenav overlays
Showing 2 changed files with 15 additions and 0 deletions Inline Diff
scripts/FeedController.js
View file @
4566165
| 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 | |
| }). | 39 | 39 | }). | |
| error(function(error) { | 40 | 40 | error(function(error) { | |
| console.log('haha, n00b'); | 41 | 41 | console.log('haha, n00b'); | |
| }); | 42 | 42 | }); | |
| 43 | 43 | |||
| $scope.text = ''; | 44 | 44 | $scope.text = ''; | |
| }; | 45 | 45 | }; | |
| 46 | 46 | |||
| $scope.refreshCards = function() { | 47 | 47 | $scope.refreshCards = function() { | |
| $http.get('/api/sections/' + sectionId + '/feed/'). | 48 | 48 | $http.get('/api/sections/' + sectionId + '/feed/'). | |
| success(function(data) { | 49 | 49 | success(function(data) { | |
| console.log(data); | 50 | 50 | console.log(data); | |
| $scope.cards = data; | 51 | 51 | $scope.cards = data; | |
| console.log('success in refresh cards...'); | 52 | 52 | console.log('success in refresh cards...'); | |
| }). | 53 | 53 | }). | |
| error(function(err) { | 54 | 54 | error(function(err) { | |
| console.log('refresh fail'); | 55 | 55 | console.log('refresh fail'); | |
| }); | 56 | 56 | }); | |
| } | 57 | 57 | } | |
| 58 | ||||
| 59 | $(document).keydown(function(e) { | |||
| 60 | var keyed = e.which; | |||
| 61 | if (keyed == 67) { // "c" or "C" for compose | |||
| 62 | $('#newCard').openModal(); | |||
| 63 | } | |||
| 64 | }); | |||
| 58 | 65 | |||
| 59 | 66 | |||
| $scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' + | 60 | 67 | $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???'; | 61 | 68 | 'know how long I am right now. Is it good enough now?????????? Howz about now???'; | |
| $scope.text = ''; | 62 | 69 | $scope.text = ''; | |
| 63 | 70 | |||
| $(document).ready(function() { | 64 | 71 | $(document).ready(function() { | |
| // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered | 65 | 72 | // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered | |
| $('.modal-trigger').leanModal({ | 66 | 73 | $('.modal-trigger').leanModal({ | |
| dismissible: true, // Modal can be dismissed by clicking outside of the modal | 67 | 74 | dismissible: true, // Modal can be dismissed by clicking outside of the modal | |
| opacity: 0, // Opacity of modal background | 68 | 75 | opacity: 0, // Opacity of modal background | |
| in_duration: 300, // Transition in duration | 69 | 76 | in_duration: 300, // Transition in duration | |
| out_duration: 200, // Transition out duration | 70 | 77 | out_duration: 200, // Transition out duration |
styles/flashy.css
View file @
4566165
| .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.class a { | 49 | 49 | ul.side-nav.fixed li.class a { | |
| 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.255s cubic-bezier(0, 0, 0.6, 1); | 69 | 69 | transition: all 0.255s 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%); | |
| } | 99 | 99 | } | |
| 100 | 100 | |||
| .card:hover .card-overlay { | 101 | 101 | .card:hover .card-overlay { | |
| opacity: 1; | 102 | 102 | opacity: 1; | |
| transition-delay: 0s; /* animation effect to appear on hover */ | 103 | 103 | transition-delay: 0s; /* animation effect to appear on hover */ | |
| visibility: visible; | 104 | 104 | visibility: visible; | |
| } | 105 | 105 | } | |
| 106 | 106 | |||
| .top-box { | 107 | 107 | .top-box { | |
| background-color: rgba(0, 10, 203, 0.6); | 108 | 108 | background-color: rgba(0, 10, 203, 0.6); | |
| height: 65%; | 109 | 109 | height: 65%; | |
| position: relative; | 110 | 110 | position: relative; | |
| transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; | 111 | 111 | transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; | |
| width: 100%; | 112 | 112 | width: 100%; | |
| } | 113 | 113 | } | |
| 114 | 114 | |||
| .top-box:hover { | 115 | 115 | .top-box:hover { | |
| background-color: rgba(0, 10, 203, 0.7); | 116 | 116 | background-color: rgba(0, 10, 203, 0.7); | |
| } | 117 | 117 | } | |
| 118 | 118 | |||
| .bottom-box { | 119 | 119 | .bottom-box { | |
| height: 35%; | 120 | 120 | height: 35%; | |
| width: 100%; | 121 | 121 | width: 100%; | |
| } | 122 | 122 | } | |
| 123 | 123 | |||
| .left-box { | 124 | 124 | .left-box { | |
| background-color: rgba(15, 0, 155, 0.6); | 125 | 125 | background-color: rgba(15, 0, 155, 0.6); | |
| float: left; | 126 | 126 | float: left; | |
| position: relative; | 127 | 127 | position: relative; | |
| height: 100%; | 128 | 128 | height: 100%; | |
| transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; | 129 | 129 | transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; | |
| width: 50%; | 130 | 130 | width: 50%; | |
| } | 131 | 131 | } | |
| 132 | 132 | |||
| .left-box:hover { | 133 | 133 | .left-box:hover { | |
| background-color: rgba(15, 0, 155, 0.7); | 134 | 134 | background-color: rgba(15, 0, 155, 0.7); | |
| } | 135 | 135 | } | |
| 136 | 136 | |||
| .right-box { | 137 | 137 | .right-box { | |
| background-color: rgba(0, 81, 189, 0.6); | 138 | 138 | background-color: rgba(0, 81, 189, 0.6); | |
| float: right; | 139 | 139 | float: right; | |
| height: 100%; | 140 | 140 | height: 100%; | |
| position: relative; | 141 | 141 | position: relative; | |
| transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; | 142 | 142 | transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; | |
| width: 50%; | 143 | 143 | width: 50%; | |
| } | 144 | 144 | } | |
| 145 | 145 | |||
| .right-box:hover { | 146 | 146 | .right-box:hover { | |
| background-color: rgba(0, 81, 189, 0.7); | 147 | 147 | background-color: rgba(0, 81, 189, 0.7); | |
| } | 148 | 148 | } | |
| 149 | 149 | |||
| .center-me { | 150 | 150 | .center-me { | |
| margin: 0 auto; | 151 | 151 | margin: 0 auto; | |
| text-align: center; | 152 | 152 | text-align: center; | |
| vertical-align: middle; | 153 | 153 | vertical-align: middle; | |
| } | 154 | 154 | } | |
| 155 | 155 | |||
| .modal.bottom-sheet { | 156 | 156 | .modal.bottom-sheet { | |
| width: 40%; | 157 | 157 | width: 40%; | |
| margin-left: auto; | 158 | 158 | margin-left: auto; | |
| margin-right: auto; | 159 | 159 | margin-right: auto; | |
| } | 160 | 160 | } | |
| 161 | 161 | |||
| /* label color */ | 162 | 162 | /* label color */ | |
| .input-field label { | 163 | 163 | .input-field label { | |
| color: #673ab7; | 164 | 164 | color: #673ab7; | |
| } | 165 | 165 | } | |
| 166 | 166 | |||
| /* label focus color */ | 167 | 167 | /* label focus color */ | |
| .input-field input[type]:focus + label { | 168 | 168 | .input-field input[type]:focus + label { | |
| color: #b388ff; | 169 | 169 | color: #b388ff; | |
| } | 170 | 170 | } | |
| 171 | 171 | |||
| /* label underline focus color */ | 172 | 172 | /* label underline focus color */ | |
| .input-field input[type]:focus { | 173 | 173 | .input-field input[type]:focus { | |
| border-bottom: 1px solid #b388ff; | 174 | 174 | border-bottom: 1px solid #b388ff; | |
| box-shadow: 0 1px 0 0 #b388ff; | 175 | 175 | box-shadow: 0 1px 0 0 #b388ff; | |
| } | 176 | 176 | } | |
| 177 | 177 | |||
| /* valid color */ | 178 | 178 | /* valid color */ | |
| .input-field input[type].valid { | 179 | 179 | .input-field input[type].valid { | |
| border-bottom: 1px solid #673ab7; | 180 | 180 | border-bottom: 1px solid #673ab7; | |
| box-shadow: 0 1px 0 0 #673ab7; | 181 | 181 | box-shadow: 0 1px 0 0 #673ab7; | |
| } | 182 | 182 | } | |
| 183 | 183 | |||
| /* invalid color */ | 184 | 184 | /* invalid color */ | |
| .input-field input[type].invalid { | 185 | 185 | .input-field input[type].invalid { | |
| border-bottom: 1px solid #673ab7; | 186 | 186 | border-bottom: 1px solid #673ab7; | |
| box-shadow: 0 1px 0 0 #673ab7; | 187 | 187 | box-shadow: 0 1px 0 0 #673ab7; | |
| } | 188 | 188 | } | |
| 189 | 189 | |||
| /* icon prefix focus color */ | 190 | 190 | /* icon prefix focus color */ | |
| .input-field .prefix.active { | 191 | 191 | .input-field .prefix.active { | |
| color: #b388ff; | 192 | 192 | color: #b388ff; | |
| } | 193 | 193 | } | |
| 194 | 194 | |||
| /* label focus color */ | 195 | 195 | /* label focus color */ | |
| .input-field textarea[type]:focus + label { | 196 | 196 | .input-field textarea[type]:focus + label { | |
| color: #b388ff; | 197 | 197 | color: #b388ff; | |
| } | 198 | 198 | } | |
| 199 | 199 | |||
| /* label underline focus color */ | 200 | 200 | /* label underline focus color */ | |
| .input-field textarea[type]:focus { | 201 | 201 | .input-field textarea[type]:focus { | |
| border-bottom: 1px solid #b388ff; | 202 | 202 | border-bottom: 1px solid #b388ff; | |
| box-shadow: 0 1px 0 0 #b388ff; | 203 | 203 | box-shadow: 0 1px 0 0 #b388ff; |