110swag / flashy-frontend

Download as
Browse Code ยป

Commit d469992f486ea8fffa3311879beca66d4c7a3c89

Authored by Rachel Lee
2 parents cb1ad91980 778502213c
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Fixing deck and feed unpull and pull a little, and refresh.

Showing 8 changed files Side-by-side Diff

home.html View file @ d469992
... ... @@ -18,7 +18,8 @@
18 18 <li class="bold">
19 19 <a>Classes:</a></li>
20 20 <div ng-repeat="section in sections">
21   - <li class="bold class"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a></li>
  21 + <li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
  22 + </li>
22 23 </div>
23 24 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
24 25 <li class="bold"><a ui-sref="study">Study</a></li>
scripts/DeckController.js View file @ d469992
... ... @@ -2,9 +2,9 @@
2 2  
3 3 app.controller('DeckController', ['$scope', '$http', '$stateParams',
4 4 function($scope, $http, $stateParams) {
5   - // cards array
6   - sectionId = $stateParams.sectionId;
7   - $scope.cards = [];
  5 + // cards array
  6 + sectionId = $stateParams.sectionId;
  7 + $scope.cards = [];
8 8  
9 9 // Populate our page with cards.
10 10 $http.get('/api/sections/' + sectionId + '/deck/').
... ... @@ -18,8 +18,8 @@
18 18  
19 19 /* Lets page refresh the cards shown on the page. */
20 20 $scope.refreshCards = function() {
21   - console.log('refreshing cards...');
22   - var myDelay = 350; // ms
  21 + var myDelay = 260; // ms
  22 +
23 23 setTimeout(function() {
24 24 $http.get('/api/sections/' + sectionId + '/deck/').
25 25 success(function(data) {
26 26  
27 27  
28 28  
29 29  
30 30  
31 31  
32 32  
33 33  
34 34  
35 35  
36 36  
37 37  
38 38  
39 39  
40 40  
41 41  
42 42  
... ... @@ -38,66 +38,80 @@
38 38 // reorganize cards in array based on time
39 39 $scope.filter = function(card) {
40 40  
41   - // get index of card
42   - var index = $scope.cards.indexOf(card);
  41 + // get index of card
  42 + var index = $scope.cards.indexOf(card);
43 43  
44   - //$scope.cards[index];
  44 + //$scope.cards[index];
45 45  
46 46  
47   - };
  47 + };
48 48  
  49 + // remove card from deck
  50 + $scope.removeCard = function(card) {
49 51  
50   - $scope.editCard = function(card) {
51   - var index = $scope.cards.indexOf(card);
  52 + // get index of card
  53 + var index = $scope.cards.indexOf(card);
52 54  
53   - $('.modal-trigger').leanModal({
54   - dismissible: true, // Modal can be dismissed by clicking outside of the modal
55   - opacity: .5, // Opacity of modal background
56   - in_duration: 300, // Transition in duration
57   - out_duration: 200, // Transition out duration
58   - ready: function() {
  55 + $scope.cards.splice(index, 1);
59 56  
60   - $scope.editableContent = $scope.cards[index].content;
61   - }, // Callback for Modal open
62   - complete: function() {
  57 + alert('Removed card!');
  58 + };
63 59  
64   - $scope.cards[index].content = $scope.editableContent;
65 60  
66   - } // Callback for Modal close
67   - }
68   - );
69   - //alert($scope.cards[index].content);
  61 + $scope.editCard = function(card) {
70 62  
71   - // post flashcard edits
72   - /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
73   - success(function (data) {
74   - console.log('No way, really?');
75   - }).
76   - error(function (error) {
77   - console.log('haha, n00b');
78   - });
  63 + var index = $scope.cards.indexOf(card);
79 64  
80   - */
81   - };
  65 + $('.modal-trigger').leanModal({
  66 + dismissible: true, // Modal can be dismissed by clicking outside of the modal
  67 + opacity: .5, // Opacity of modal background
  68 + in_duration: 300, // Transition in duration
  69 + out_duration: 200, // Transition out duration
  70 + ready: function() {
82 71  
83 72  
  73 + $scope.editableContent = $scope.cards[index].content;
  74 + }, // Callback for Modal open
  75 + complete: function() {
84 76  
85   - // get all cards from your deck and push into array
86   - /*$http.get('/api/sections/{pk}/deck').
87   - success(function(data) {
  77 + $scope.cards[index].content = $scope.editableContent;
88 78  
  79 + } // Callback for Modal close
  80 + }
  81 + );
89 82  
90 83  
91   - for (var i = 0; i < data.length; i++) {
92   - cards.push({ 'title': data[i].title, 'content': data[i].content });
93   - }
94   - }).
95   - error(function(data) {
  84 + //alert($scope.cards[index].content);
96 85  
97   - console.log('no cards?!!');
  86 + // post flashcard edits
  87 + /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
  88 + success(function (data) {
  89 + console.log('No way, really?');
  90 + }).
  91 + error(function (error) {
  92 + console.log('haha, n00b');
  93 + });
98 94  
99   - });*/
  95 + */
  96 + };
100 97  
101 98  
102   -}]);
  99 + // get all cards from your deck and push into array
  100 + /*$http.get('/api/sections/{pk}/deck').
  101 + success(function(data) {
  102 +
  103 +
  104 +
  105 + for (var i = 0; i < data.length; i++) {
  106 + cards.push({ 'title': data[i].title, 'content': data[i].content });
  107 + }
  108 + }).
  109 + error(function(data) {
  110 +
  111 + console.log('no cards?!!');
  112 +
  113 + });*/
  114 +
  115 +
  116 + }]);
scripts/FeedController.js View file @ d469992
... ... @@ -34,7 +34,8 @@
34 34 $http.post('/api/flashcards/', myCard).
35 35 success(function(data) {
36 36 console.log('pushed a card!');
37   - $scope.cards.push(myCard);
  37 + $scope.cards.push(myCard); // Add right away
  38 + $scope.refreshCards(); // Refresh list
38 39 }).
39 40 error(function(error) {
40 41 console.log('haha, n00b');
... ... @@ -42,6 +43,19 @@
42 43  
43 44 $scope.text = '';
44 45 };
  46 +
  47 + $scope.refreshCards = function() {
  48 + $http.get('/api/sections/' + sectionId + '/feed/').
  49 + success(function(data) {
  50 + console.log(data);
  51 + $scope.cards = data;
  52 + console.log('success in refresh cards...');
  53 + }).
  54 + error(function(err) {
  55 + console.log('refresh fail');
  56 + });
  57 + }
  58 +
45 59  
46 60 $scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' +
47 61 'know how long I am right now. Is it good enough now?????????? Howz about now???';
scripts/FlashcardDirective.js View file @ d469992
1 1 angular.module('flashy.FlashcardDirective', []).
2 2  
3   -directive('flashcard', ['$http', '$state', function($http, $state) {
  3 +directive('flashcard', ['$http', '$state', '$window',
  4 + function($http, $state, $window) {
4 5 return {
5 6 templateUrl: '/app/templates/flashcard.html',
6 7 restrict: 'E',
7 8  
8 9  
... ... @@ -9,13 +10,23 @@
9 10 refresh: '&' // eval refresh in parent html
10 11 },
11 12 link: function(scope, element) {
  13 + function refresh_width() {
  14 + avail = $window.innerWidth;
  15 + if (avail > 992) avail -= 240;
  16 + width = Math.floor(avail / Math.floor(avail / 250) - 12);
  17 + element.children().css({width: width + 'px', height: (width * 3 / 5) + 'px'});
  18 + };
  19 + angular.element($window).bind('resize', refresh_width);
  20 + refresh_width();
  21 +
12 22 /* Pulls card from feed into deck */
13 23 scope.pullCard = function(flashcard) {
14   - console.log('call pull card...')
15 24 if ($state.current.name == 'feed') {
16 25 $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
17 26 success(function(data) {
18 27 console.log('pulled flashcard #' + flashcard.id);
  28 + scope.startShrink = true;
  29 + scope.refresh();
19 30 }).
20 31 error(function(data) {
21 32 console.log('failed to pull flashcard #' + flashcard.id);
... ... @@ -25,7 +36,6 @@
25 36  
26 37 /* Unpulls card from deck */
27 38 scope.unpullCard = function(flashcard) {
28   - console.log('call unpull card...')
29 39 if ($state.current.name == 'deck') {
30 40 console.log('unpulling card...')
31 41  
... ... @@ -33,6 +43,8 @@
33 43 flashcard).
34 44 success(function(data) {
35 45 console.log('card unpull success')
  46 + scope.startShrink = true;
  47 + scope.refresh();
36 48 }).
37 49 error(function(data) {
38 50 console.log('card unpull FAILURE')
39 51  
40 52  
... ... @@ -42,14 +54,13 @@
42 54  
43 55 /* Hides card from feed */
44 56 scope.hideCard = function(flashcard) {
45   - console.log('call hide card...')
46 57 if ($state.current.name == 'feed') {
47   - console.log('hiding card...')
48   -
49 58 $http.post('/api/flashcards/' + flashcard.id + '/hide/',
50 59 flashcard).
51 60 success(function(data) {
52 61 console.log('card hide success')
  62 + scope.startShrink = true;
  63 + scope.refresh();
53 64 }).
54 65 error(function(data) {
55 66 console.log('card hide FAILURE')
scripts/RootController.js View file @ d469992
... ... @@ -14,10 +14,11 @@
14 14 });
15 15  
16 16 $('.button-collapse').sideNav({
17   - menuWidth: 300, // Default is 240
18   - edge: 'right', // Choose the horizontal origin
19   - closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
20   - }
  17 + menuWidth: 300, // Default is 240
  18 + edge: 'right', // Choose the horizontal origin
  19 + closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
  20 + }
21 21 );
  22 +
22 23 }]);
styles/flashy.css View file @ d469992
1   -๏ปฟ.angucomplete-dropdown {
  1 +๏ปฟ.no-user-select {
  2 + -moz-user-select: none;
  3 + -webkit-user-select: none;
  4 + -ms-user-select: none;
  5 + user-select: none;
  6 +}
  7 +
  8 +.angucomplete-dropdown {
2 9 border-color: #ececec;
3 10 border-width: 1px;
4 11 border-style: solid;
5 12  
6 13  
7 14  
8 15  
9 16  
10 17  
... ... @@ -55,35 +62,25 @@
55 62  
56 63 .card.flashy {
57 64 float: left;
58   - height: calc((992px / 4 - 6px * 2) * 3 / 5);
  65 + /*height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
59 66 margin: 6px;
60   - max-height: 2in;
61   - max-width: calc(5 * 60px);
62   - min-height: calc((992px / 4 - 6px * 2) * 3 / 5);
  67 + /*max-height: 2in;*/
  68 + /*max-width: calc(5 * 60px);*/
  69 + /*min-height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
63 70 /*min-width: calc(992px / 4 - 6px * 2);*/
64   - transition: all 0.3s cubic-bezier(0, 0, 0.6, 1);
  71 + transition: all 0.255s cubic-bezier(0, 0, 0.6, 1);
65 72 width: calc(992px / 4 - 6px * 2);
66 73 }
67 74  
68 75 .card.flashy.shrinky {
69   - margin: 0;
70   - opacity: 0;
71   - overflow: hidden;
72   - padding: 0;
73   - width: 0;
74   -}
75   -
76   -/*
77   -.smallify {
  76 + border: 5px solid #ff0000;
78 77 height: 0;
79 78 opacity: 0;
80 79 overflow: hidden;
81   - padding: 0;
82   - width: 0;
83 80 }
84   -*/
85 81  
86 82 .card-overlay {
  83 + cursor: pointer;
87 84 left: 0;
88 85 opacity: 0;
89 86 position: absolute;
templates/feed.html View file @ d469992
... ... @@ -5,7 +5,7 @@
5 5 <!--cards-->
6 6 <div class="row">
7 7 <div ng-repeat="card in cards">
8   - <flashcard flashcard-obj="card"/>
  8 + <flashcard flashcard-obj="card" refresh="refreshCards()" />
9 9 </div>
10 10 </div>
11 11  
templates/flashcard.html View file @ d469992
... ... @@ -4,16 +4,17 @@
4 4 <p>{{flashcard.text}}</p>
5 5 </div>
6 6 <div class="card-overlay">
7   - <div class="top-box" ng-click="pullCard(flashcard)">
  7 + <div class="top-box no-user-select"
  8 + ng-click="pullCard(flashcard)">
8 9 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
9 10 </div>
10 11  
11   - <div class="bottom-box">
  12 + <div class="bottom-box no-user-select">
12 13 <div class="left-box">
13 14 <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
14 15 </div>
15   - <div class="right-box" ng-click="startShrink = true; unpullCard(flashcard);
16   - hideCard(flashcard); refresh()">
  16 + <div class="right-box" ng-click="unpullCard(flashcard);
  17 + hideCard(flashcard)">
17 18 <div class="center-me"><i class="mdi-action-delete small"></i></div>
18 19 </div>
19 20