110swag / flashy-frontend

Download as
Browse Code ยป

Commit 778502213c820fe2a32f25ca5162e04d8006f5e8

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

awful javascript to fit cards

Showing 5 changed files with 94 additions and 91 deletions Side-by-side Diff

home.html View file @ 7785022
... ... @@ -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 @ 7785022
... ... @@ -2,100 +2,97 @@
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   - $http.get('/api/sections/' + sectionId + '/deck/').
10   - success(function(data) {
11   - console.log(data);
12   - $scope.cards = data;
13   - }).
14   - error(function(err) {
15   - console.log('pulling feed failed');
16   - });
  9 + $http.get('/api/sections/' + sectionId + '/deck/').
  10 + success(function(data) {
  11 + console.log(data);
  12 + $scope.cards = data;
  13 + }).
  14 + error(function(err) {
  15 + console.log('pulling feed failed');
  16 + });
17 17  
18 18  
19   - // reorganize cards in array based on time
20   - $scope.filter = function(card) {
  19 + // reorganize cards in array based on time
  20 + $scope.filter = function(card) {
21 21  
22   - // get index of card
23   - var index = $scope.cards.indexOf(card);
  22 + // get index of card
  23 + var index = $scope.cards.indexOf(card);
24 24  
25   - //$scope.cards[index];
  25 + //$scope.cards[index];
26 26  
27 27  
28   - };
  28 + };
29 29  
30   - // remove card from deck
31   - $scope.removeCard = function(card) {
  30 + // remove card from deck
  31 + $scope.removeCard = function(card) {
32 32  
33   - // get index of card
34   - var index = $scope.cards.indexOf(card);
  33 + // get index of card
  34 + var index = $scope.cards.indexOf(card);
35 35  
36   - $scope.cards.splice(index, 1);
  36 + $scope.cards.splice(index, 1);
37 37  
38   - alert('Removed card!');
39   - };
  38 + alert('Removed card!');
  39 + };
40 40  
41 41  
42   - $scope.editCard = function(card) {
  42 + $scope.editCard = function(card) {
43 43  
44   - var index = $scope.cards.indexOf(card);
  44 + var index = $scope.cards.indexOf(card);
45 45  
46   - $('.modal-trigger').leanModal({
47   - dismissible: true, // Modal can be dismissed by clicking outside of the modal
48   - opacity: .5, // Opacity of modal background
49   - in_duration: 300, // Transition in duration
50   - out_duration: 200, // Transition out duration
51   - ready: function() {
  46 + $('.modal-trigger').leanModal({
  47 + dismissible: true, // Modal can be dismissed by clicking outside of the modal
  48 + opacity: .5, // Opacity of modal background
  49 + in_duration: 300, // Transition in duration
  50 + out_duration: 200, // Transition out duration
  51 + ready: function() {
52 52  
53 53  
54   - $scope.editableContent = $scope.cards[index].content;
55   - }, // Callback for Modal open
56   - complete: function() {
  54 + $scope.editableContent = $scope.cards[index].content;
  55 + }, // Callback for Modal open
  56 + complete: function() {
57 57  
58   - $scope.cards[index].content = $scope.editableContent;
  58 + $scope.cards[index].content = $scope.editableContent;
59 59  
60   - } // Callback for Modal close
61   - }
62   - );
  60 + } // Callback for Modal close
  61 + }
  62 + );
63 63  
64 64  
  65 + //alert($scope.cards[index].content);
65 66  
  67 + // post flashcard edits
  68 + /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
  69 + success(function (data) {
  70 + console.log('No way, really?');
  71 + }).
  72 + error(function (error) {
  73 + console.log('haha, n00b');
  74 + });
66 75  
67   - //alert($scope.cards[index].content);
  76 + */
  77 + };
68 78  
69   - // post flashcard edits
70   - /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
71   - success(function (data) {
72   - console.log('No way, really?');
73   - }).
74   - error(function (error) {
75   - console.log('haha, n00b');
76   - });
77 79  
78   - */
79   - };
  80 + // get all cards from your deck and push into array
  81 + /*$http.get('/api/sections/{pk}/deck').
  82 + success(function(data) {
80 83  
81 84  
82 85  
83   - // get all cards from your deck and push into array
84   - /*$http.get('/api/sections/{pk}/deck').
85   - success(function(data) {
  86 + for (var i = 0; i < data.length; i++) {
  87 + cards.push({ 'title': data[i].title, 'content': data[i].content });
  88 + }
  89 + }).
  90 + error(function(data) {
86 91  
  92 + console.log('no cards?!!');
87 93  
  94 + });*/
88 95  
89   - for (var i = 0; i < data.length; i++) {
90   - cards.push({ 'title': data[i].title, 'content': data[i].content });
91   - }
92   - }).
93   - error(function(data) {
94 96  
95   - console.log('no cards?!!');
96   -
97   - });*/
98   -
99   -
100   -}]);
  97 + }]);
scripts/FlashcardDirective.js View file @ 7785022
1 1 angular.module('flashy.FlashcardDirective', []).
2 2  
3   -directive('flashcard', ['$http', function($http) {
4   - return {
5   - templateUrl: '/app/templates/flashcard.html',
6   - restrict: 'E',
7   - scope: {
8   - flashcard: '=flashcardObj' // flashcard-obj in html
9   - },
10   - link: function(scope, element) {
11   - console.log('HELLO FROM FLASHCARD DIRECTIVE');
12   - console.log(scope.flashcard);
13   - console.log(element);
14   - scope.card_width = '300px';
15   - // Put flashcard-specific functions here.
16   - // This will probably include add/hide/modals/etc.
17   - scope.pullCard = function(flashcard) {
18   - $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
19   - console.log('pulled flashcard #' + flashcard.id);
20   - };
21   - }
22   - };
23   -}]);
  3 + directive('flashcard', ['$http', '$window', function($http, $window) {
  4 + return {
  5 + templateUrl: '/app/templates/flashcard.html',
  6 + restrict: 'E',
  7 + scope: {
  8 + flashcard: '=flashcardObj' // flashcard-obj in html
  9 + },
  10 +
  11 + link: function(scope, element) {
  12 + function refresh_width() {
  13 + avail = $window.innerWidth;
  14 + if (avail > 992) avail -= 240;
  15 + width = Math.floor(avail / Math.floor(avail / 250) - 12);
  16 + element.children().css({width: width + 'px', height: (width * 3 / 5) + 'px'});
  17 + };
  18 + angular.element($window).bind('resize', refresh_width);
  19 + refresh_width();
  20 + // Put flashcard-specific functions here.
  21 + // This will probably include add/hide/modals/etc.
  22 + scope.pullCard = function(flashcard) {
  23 + $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
  24 + console.log('pulled flashcard #' + flashcard.id);
  25 + };
  26 + }
  27 + };
  28 + }]);
styles/flashy.css View file @ 7785022
... ... @@ -55,11 +55,11 @@
55 55  
56 56 .card.flashy {
57 57 float: left;
58   - height: calc((992px / 4 - 6px * 2) * 3 / 5);
  58 + /*height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
59 59 margin: 6px;
60   - max-height: 2in;
61   - max-width: calc(5 * 60px);
62   - min-height: calc((992px / 4 - 6px * 2) * 3 / 5);
  60 + /*max-height: 2in;*/
  61 + /*max-width: calc(5 * 60px);*/
  62 + /*min-height: calc((992px / 4 - 6px * 2) * 3 / 5);*/
63 63 /*min-width: calc(992px / 4 - 6px * 2);*/
64 64 }
65 65  
templates/flashcard.html View file @ 7785022
1   - <div class="card flashy" ng-style="{'width':card_width}">
  1 + <div class="card flashy">
2 2 <div class="card-content">
3 3 <p>{{flashcard.text}}</p>
4 4 </div>