From 778502213c820fe2a32f25ca5162e04d8006f5e8 Mon Sep 17 00:00:00 2001 From: Andrew Buss Date: Tue, 19 May 2015 16:18:16 -0700 Subject: [PATCH] awful javascript to fit cards --- home.html | 3 +- scripts/DeckController.js | 125 +++++++++++++++++++++--------------------- scripts/FlashcardDirective.js | 47 +++++++++------- styles/flashy.css | 8 +-- templates/flashcard.html | 2 +- 5 files changed, 94 insertions(+), 91 deletions(-) diff --git a/home.html b/home.html index 7da6887..d0c4ab9 100644 --- a/home.html +++ b/home.html @@ -18,7 +18,8 @@
  • Classes:
    • -
  • {{section.short_name}}
    • +
  • {{section.short_name}} +
  • Add Class
  • Study
    • diff --git a/scripts/DeckController.js b/scripts/DeckController.js index c5e2e35..37fe633 100644 --- a/scripts/DeckController.js +++ b/scripts/DeckController.js @@ -2,99 +2,96 @@ var app = angular.module('flashy.DeckController', ['ui.router']); app.controller('DeckController', ['$scope', '$http', '$stateParams', function($scope, $http, $stateParams) { - // cards array - sectionId = $stateParams.sectionId; - $scope.cards = []; + // cards array + sectionId = $stateParams.sectionId; + $scope.cards = []; - $http.get('/api/sections/' + sectionId + '/deck/'). - success(function(data) { - console.log(data); - $scope.cards = data; - }). - error(function(err) { - console.log('pulling feed failed'); - }); + $http.get('/api/sections/' + sectionId + '/deck/'). + success(function(data) { + console.log(data); + $scope.cards = data; + }). + error(function(err) { + console.log('pulling feed failed'); + }); - // reorganize cards in array based on time - $scope.filter = function(card) { + // reorganize cards in array based on time + $scope.filter = function(card) { - // get index of card - var index = $scope.cards.indexOf(card); + // get index of card + var index = $scope.cards.indexOf(card); - //$scope.cards[index]; + //$scope.cards[index]; - }; + }; - // remove card from deck - $scope.removeCard = function(card) { + // remove card from deck + $scope.removeCard = function(card) { - // get index of card - var index = $scope.cards.indexOf(card); + // get index of card + var index = $scope.cards.indexOf(card); - $scope.cards.splice(index, 1); + $scope.cards.splice(index, 1); - alert('Removed card!'); - }; + alert('Removed card!'); + }; - $scope.editCard = function(card) { + $scope.editCard = function(card) { - var index = $scope.cards.indexOf(card); + var index = $scope.cards.indexOf(card); - $('.modal-trigger').leanModal({ - dismissible: true, // Modal can be dismissed by clicking outside of the modal - opacity: .5, // Opacity of modal background - in_duration: 300, // Transition in duration - out_duration: 200, // Transition out duration - ready: function() { + $('.modal-trigger').leanModal({ + dismissible: true, // Modal can be dismissed by clicking outside of the modal + opacity: .5, // Opacity of modal background + in_duration: 300, // Transition in duration + out_duration: 200, // Transition out duration + ready: function() { - $scope.editableContent = $scope.cards[index].content; - }, // Callback for Modal open - complete: function() { + $scope.editableContent = $scope.cards[index].content; + }, // Callback for Modal open + complete: function() { - $scope.cards[index].content = $scope.editableContent; + $scope.cards[index].content = $scope.editableContent; - } // Callback for Modal close - } - ); + } // Callback for Modal close + } + ); + //alert($scope.cards[index].content); + // post flashcard edits + /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }). + success(function (data) { + console.log('No way, really?'); + }). + error(function (error) { + console.log('haha, n00b'); + }); - //alert($scope.cards[index].content); + */ + }; - // post flashcard edits - /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }). - success(function (data) { - console.log('No way, really?'); - }). - error(function (error) { - console.log('haha, n00b'); - }); - */ - }; + // get all cards from your deck and push into array + /*$http.get('/api/sections/{pk}/deck'). + success(function(data) { - // get all cards from your deck and push into array - /*$http.get('/api/sections/{pk}/deck'). - success(function(data) { + for (var i = 0; i < data.length; i++) { + cards.push({ 'title': data[i].title, 'content': data[i].content }); + } + }). + error(function(data) { + console.log('no cards?!!'); + });*/ - for (var i = 0; i < data.length; i++) { - cards.push({ 'title': data[i].title, 'content': data[i].content }); - } - }). - error(function(data) { - console.log('no cards?!!'); - - });*/ - - -}]); + }]); diff --git a/scripts/FlashcardDirective.js b/scripts/FlashcardDirective.js index 2e5edc2..5f463a7 100644 --- a/scripts/FlashcardDirective.js +++ b/scripts/FlashcardDirective.js @@ -1,23 +1,28 @@ angular.module('flashy.FlashcardDirective', []). -directive('flashcard', ['$http', function($http) { - return { - templateUrl: '/app/templates/flashcard.html', - restrict: 'E', - scope: { - flashcard: '=flashcardObj' // flashcard-obj in html - }, - link: function(scope, element) { - console.log('HELLO FROM FLASHCARD DIRECTIVE'); - console.log(scope.flashcard); - console.log(element); - scope.card_width = '300px'; - // Put flashcard-specific functions here. - // This will probably include add/hide/modals/etc. - scope.pullCard = function(flashcard) { - $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard); - console.log('pulled flashcard #' + flashcard.id); - }; - } - }; -}]); + directive('flashcard', ['$http', '$window', function($http, $window) { + return { + templateUrl: '/app/templates/flashcard.html', + restrict: 'E', + scope: { + flashcard: '=flashcardObj' // flashcard-obj in html + }, + + link: function(scope, element) { + function refresh_width() { + avail = $window.innerWidth; + if (avail > 992) avail -= 240; + width = Math.floor(avail / Math.floor(avail / 250) - 12); + element.children().css({width: width + 'px', height: (width * 3 / 5) + 'px'}); + }; + angular.element($window).bind('resize', refresh_width); + refresh_width(); + // Put flashcard-specific functions here. + // This will probably include add/hide/modals/etc. + scope.pullCard = function(flashcard) { + $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard); + console.log('pulled flashcard #' + flashcard.id); + }; + } + }; + }]); diff --git a/styles/flashy.css b/styles/flashy.css index 94146b2..240292f 100644 --- a/styles/flashy.css +++ b/styles/flashy.css @@ -55,11 +55,11 @@ ul.side-nav.fixed li a { .card.flashy { float: left; - height: calc((992px / 4 - 6px * 2) * 3 / 5); + /*height: calc((992px / 4 - 6px * 2) * 3 / 5);*/ margin: 6px; - max-height: 2in; - max-width: calc(5 * 60px); - min-height: calc((992px / 4 - 6px * 2) * 3 / 5); + /*max-height: 2in;*/ + /*max-width: calc(5 * 60px);*/ + /*min-height: calc((992px / 4 - 6px * 2) * 3 / 5);*/ /*min-width: calc(992px / 4 - 6px * 2);*/ } diff --git a/templates/flashcard.html b/templates/flashcard.html index 14d1d96..997a6d5 100644 --- a/templates/flashcard.html +++ b/templates/flashcard.html @@ -1,4 +1,4 @@ -
    +

    {{flashcard.text}}

    -- 1.9.1