110swag / flashy-frontend

Download as
Browse Code ยป

Commit a7ee2b64a02a810844606fbe142bddfd712b319b

Authored by Andrew Buss
1 parent 94e43706bf
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

new flashcard creation dialog

Showing 5 changed files with 48 additions and 75 deletions Side-by-side Diff

scripts/CardGridController.js View file @ a7ee2b6
... ... @@ -17,8 +17,6 @@
17 17 return $state.go('addclass');
18 18 }
19 19  
20   - angular.element($window).bind('resize', $scope.refreshLayout);
21   -
22 20 $scope.refreshColumnWidth = function() {
23 21 console.log('refreshing column width');
24 22 avail = $window.innerWidth - 17;
... ... @@ -55,6 +53,8 @@
55 53 });
56 54  
57 55 };
  56 +
  57 + angular.element($window).bind('resize', $scope.refreshLayout);
58 58  
59 59 $scope.ws_host = window.location.origin.replace('http', 'ws');
60 60 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
scripts/FeedController.js View file @ a7ee2b6
... ... @@ -91,20 +91,25 @@
91 91 $('#new-card-input')[0].childNodes.forEach(function(node) {
92 92 if (typeof node.data == 'undefined') {
93 93 console.log('undefined node');
94   - return resetModal();
  94 + //return resetModal();
95 95 }
96 96 node = $(node)[0];
97   - console.log(node);
98 97 if (node.tagName == 'B') {
99   - text = $(node).text();
100   - blanks.push([i, i + text.length]);
  98 + var text = $(node).text();
  99 + console.log(text.length, text);
  100 + var leftspaces = 0, rightspaces = 0;
  101 + // awful way to find the first non-space character from the left or the right. thanks.js
  102 + while (text[leftspaces] == ' ' || text[leftspaces] == '\xa0') leftspaces++;
  103 + while (text[text.length - 1 - rightspaces] == ' ' || text[text.length - 1 - rightspaces] == '\xa0') rightspaces++;
  104 + if (leftspaces != text.length) blanks.push([i + leftspaces, i + text.length - rightspaces]);
101 105 i += text.length;
102 106 } else {
103 107 i += node.data.length;
104 108 }
105 109 });
106 110 var myCard = {
107   - 'text': $('#new-card-input').text().trim(),
  111 + // we can't trim this string because it'd mess up the blanks. Something to fix.
  112 + 'text': $('#new-card-input').text(),
108 113 'mask': blanks,
109 114 section: $scope.section.id
110 115 };
... ... @@ -161,22 +166,20 @@
161 166 document.getElementById('new-card-input').value = '';
162 167 }
163 168 });
164   - $(document).ready(function() {
165   - $('.tooltipped').tooltip({delay: 50});
166   - // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
167   - $('.modal-trigger').leanModal(modal_options);
168   - $('#new-card-input').on('keydown', function(e) {
169   - if (e.which == 13) {
170   - e.preventDefault();
171   - $scope.pushCard();
172   - listenForC = true;
173   - return false;
174   - }
175   - });
176   - $('button#blank-selected').click(function() {
177   - console.log(window.getSelection());
178   - document.execCommand('bold');
179   - });
  169 + $('.tooltipped').tooltip({delay: 50});
  170 + // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  171 + $('.modal-trigger').leanModal(modal_options);
  172 + $('#new-card-input').on('keydown', function(e) {
  173 + if (e.which == 13) {
  174 + e.preventDefault();
  175 + $scope.pushCard();
  176 + listenForC = true;
  177 + return false;
  178 + }
  179 + });
  180 + $('button#blank-selected').click(function() {
  181 + console.log(window.getSelection());
  182 + document.execCommand('bold');
180 183 });
181 184 $scope.refreshCards();
182 185  
styles/flashy.css View file @ a7ee2b6
... ... @@ -373,7 +373,6 @@
373 373 opacity: 0;
374 374 }
375 375  
376   -
377 376 /* Animation CSS END */
378 377  
379 378 /* Footer */
380 379  
... ... @@ -452,9 +451,16 @@
452 451 }
453 452  
454 453 .st-accordion--content {
455   - background-color: rgba(0,0,0,0.03);
  454 + background-color: rgba(0, 0, 0, 0.03);
456 455 border-bottom: 1px solid #ddd;
457 456 display: none;
458 457 padding: 10px 20px;
  458 +}
  459 +
  460 +#new-card-input > b {
  461 + /*font-weight: ;*/
  462 + border-bottom: 2px solid black;
  463 + border-radius: 2px;
  464 + opacity: 0.5;
459 465 }
templates/deck.html View file @ a7ee2b6
1   -๏ปฟ<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
2   -<div class="row">
3   - <h2 ng-cloak ng-show="cards.length == 0">Add a card from the feed to see it here!</h2>
  1 +๏ปฟ<div class="row">
  2 + <h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it here!</h2>
4 3  
5 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
6 5 <div class="indeterminate"></div>
7 6 </div>
8   - <!--div class='row' ng-repeat="row in cardRows">
9   - <div ng-repeat ="card in row">
10   - <flashcard flashcard-obj="card" refresh="hide(card)"/>
11   - </div>
12   - </div>-->
13 7  
14 8 <div class="cardColumn" ng-repeat="col in cardCols">
15   - <flashcard flashcard-obj="card" ng-repeat="card in col"/>
16   - </div>
17   -</div>
18   -<div class="row">
19   - <div>
20   - <!--
21   - <div class="col s6">
22   - <div class="card">
23   - <div class="card-content">
24   - <p>{{card.content}}</p>
25   - </div>
26   -
27   - <div class="card-action">
28   - <i class="small mdi-action-delete" ng-click="removeCard(card)"></i>
29   - <a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>
30   - <!-- Modal Structure -->
31   - <div id="editModal" class="modal modal-fixed-footer">
32   - <div class="modal-content">
33   - <div class="row">
34   - <form class="col s12">
35   - <div class="row">
36   - <div class="input-field col s6">
37   - <i class="mdi-editor-mode-edit prefix"></i>
38   - <textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>
39   - <label for="icon_prefix2"></label>
40   - </div>
41   - </div>
42   - </form>
43   - </div>
44   - </div>
45   - <div class="modal-footer">
46   - <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
47   - </div>
  9 + <div class="repeated-card" ng-repeat="card in col">
  10 + <flashcard flashcard-obj="card"/>
48 11 </div>
49 12 </div>
50 13 </div>
templates/feed.html View file @ a7ee2b6
... ... @@ -4,15 +4,12 @@
4 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
5 5 <div class="indeterminate"></div>
6 6 </div>
  7 +
7 8 <div class="cardColumn" ng-repeat="col in cardCols">
8 9 <div class="repeated-card" ng-repeat="card in col">
9   - <flashcard flashcard-obj="card" refresh="hide(card)"/>
  10 + <flashcard flashcard-obj="card"/>
10 11 </div>
11 12 </div>
12   -
13   - <!--<div class="cardColumn" ng-repeat="col in cardCols">
14   - <flashcard flashcard-obj="card" ng-repeat="card in col"/>
15   - </div>-->
16 13 </div>
17 14  
18 15  
19 16  
20 17  
21 18  
... ... @@ -25,16 +22,20 @@
25 22 </a>
26 23 </div>
27 24  
28   -<div id="newCard" class="modal bottom-sheet">
  25 +<div id="newCard" class="modal bottom-sheet" style="max-height:none;">
29 26 <form id="new-card-form">
30 27 <div class="modal-content">
31   - <div class="input-field">
32   - <!--<label id="newCardSign" for="newCard">New Flashcard Text</label>-->
33   - <div class="feed-modal-input" id="new-card-input" contenteditable style="outline:0px solid transparent;">
  28 + <div class="card cyan-text text-darken-2"
  29 + style="margin-left: auto; margin-right:auto;width:300px; height:180px; font-size:120%;">
  30 + <div class="valign-wrapper">
  31 + <div id="new-card-input" style="outline:0px solid transparent;" class="card-content valign center-align"
  32 + contenteditable>
34 33  
  34 + </div>
35 35 </div>
36 36 </div>
37 37 </div>
  38 +
38 39 <div class="modal-footer">
39 40 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left"
40 41 data-delay="50"