110swag / flashy-frontend

Download as
Browse Code ยป

Commit b20f733ef7a8fb7d2424c188c3c35d1d85cce8d2

Authored by Melody
2 parents b20385f0c6 1b2fe2fdfe
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Sidebar stuffs

Showing 8 changed files Side-by-side Diff

home.html View file @ b20f733
... ... @@ -7,7 +7,8 @@
7 7  
8 8 <link rel="stylesheet" href="styles/flashier.css"/>
9 9 <link rel="stylesheet" href="styles/flashy.css"/>
10   - <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' rel='stylesheet' type='text/css'>
  10 + <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
  11 + rel='stylesheet' type='text/css'>
11 12 </head>
12 13 <header>
13 14 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed">
scripts/DeckController.js View file @ b20f733
1 1 var app = angular.module('flashy.DeckController', ['ui.router']);
2 2  
3 3 app.controller('DeckController', ['$scope', '$state', '$http', '$stateParams',
4   - function($scope, $state, $http, $stateParams) {
  4 + function ($scope, $state, $http, $stateParams) {
5 5 // cards array
6 6 sectionId = $stateParams.sectionId;
  7 + $scope.sectionId = sectionId;
7 8 $scope.cards = [];
8 9  
  10 + // Populate our page with cards.
9 11 $http.get('/api/sections/' + sectionId + '/deck/').
10   - success(function(data) {
  12 + success(function (data) {
11 13 console.log(data);
12 14 $scope.cards = data;
13 15 }).
14   - error(function(err) {
  16 + error(function (err) {
15 17 console.log('pulling feed failed');
16 18 });
17   - $scope.viewFeed = function() {
18   - $state.go('feed', {sectionId: sectionId});
19   - console.log('go to feed');
  19 +
  20 + /* Lets page refresh the cards shown on the page. */
  21 + $scope.refreshCards = function () {
  22 + var myDelay = 260; // ms
  23 +
  24 + setTimeout(function () {
  25 + $http.get('/api/sections/' + sectionId + '/deck/').
  26 + success(function (data) {
  27 + console.log(data);
  28 + $scope.cards = data;
  29 + console.log('success in refresh cards...');
  30 + }).
  31 + error(function (err) {
  32 + console.log('refresh fail');
  33 + });
  34 + }, myDelay);
20 35 };
21 36  
  37 +
  38 + /* all kmach's stuff below, do not touch */
22 39 // reorganize cards in array based on time
23   - $scope.filter = function(card) {
  40 + $scope.filter = function (card) {
24 41  
25 42 // get index of card
26 43 var index = $scope.cards.indexOf(card);
... ... @@ -31,7 +48,7 @@
31 48 };
32 49  
33 50 // remove card from deck
34   - $scope.removeCard = function(card) {
  51 + $scope.removeCard = function (card) {
35 52  
36 53 // get index of card
37 54 var index = $scope.cards.indexOf(card);
... ... @@ -42,7 +59,7 @@
42 59 };
43 60  
44 61  
45   - $scope.editCard = function(card) {
  62 + $scope.editCard = function (card) {
46 63  
47 64 var index = $scope.cards.indexOf(card);
48 65  
49 66  
... ... @@ -51,12 +68,12 @@
51 68 opacity: .5, // Opacity of modal background
52 69 in_duration: 300, // Transition in duration
53 70 out_duration: 200, // Transition out duration
54   - ready: function() {
  71 + ready: function () {
55 72  
56 73  
57 74 $scope.editableContent = $scope.cards[index].content;
58 75 }, // Callback for Modal open
59   - complete: function() {
  76 + complete: function () {
60 77  
61 78 $scope.cards[index].content = $scope.editableContent;
62 79  
scripts/FeedController.js View file @ b20f733
... ... @@ -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 @ b20f733
1 1 angular.module('flashy.FlashcardDirective', []).
2 2  
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   - },
  3 +directive('flashcard', ['$http', '$state', '$window',
  4 + function($http, $state, $window) {
  5 + return {
  6 + templateUrl: '/app/templates/flashcard.html',
  7 + restrict: 'E',
  8 + scope: {
  9 + flashcard: '=flashcardObj', // flashcard-obj in parent html
  10 + refresh: '&' // eval refresh in parent html
  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();
10 21  
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({
17   - width: width + 'px',
18   - height: (width * 3 / 5) + 'px',
19   - 'font-size': 100 * (width / 250) + '%'
20   - });
21   - };
22   - angular.element($window).bind('resize', refresh_width);
23   - refresh_width();
24   - // Put flashcard-specific functions here.
25   - // This will probably include add/hide/modals/etc.
26   - scope.pullCard = function(flashcard) {
27   - $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
28   - console.log('pulled flashcard #' + flashcard.id);
29   - };
30   - }
31   - };
32   - }]);
  22 + /* Pulls card from feed into deck */
  23 + scope.pullCard = function(flashcard) {
  24 + if ($state.current.name == 'feed') {
  25 + $http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard).
  26 + success(function(data) {
  27 + console.log('pulled flashcard #' + flashcard.id);
  28 + scope.startShrink = true;
  29 + scope.refresh();
  30 + }).
  31 + error(function(data) {
  32 + console.log('failed to pull flashcard #' + flashcard.id);
  33 + });
  34 + }
  35 + };
  36 +
  37 + /* Unpulls card from deck */
  38 + scope.unpullCard = function(flashcard) {
  39 + if ($state.current.name == 'deck') {
  40 + console.log('unpulling card...')
  41 +
  42 + $http.post('/api/flashcards/' + flashcard.id + '/unpull/',
  43 + flashcard).
  44 + success(function(data) {
  45 + console.log('card unpull success')
  46 + scope.startShrink = true;
  47 + scope.refresh();
  48 + }).
  49 + error(function(data) {
  50 + console.log('card unpull FAILURE')
  51 + });
  52 + }
  53 + };
  54 +
  55 + /* Hides card from feed */
  56 + scope.hideCard = function(flashcard) {
  57 + if ($state.current.name == 'feed') {
  58 + $http.post('/api/flashcards/' + flashcard.id + '/hide/',
  59 + flashcard).
  60 + success(function(data) {
  61 + console.log('card hide success')
  62 + scope.startShrink = true;
  63 + scope.refresh();
  64 + }).
  65 + error(function(data) {
  66 + console.log('card hide FAILURE')
  67 + });
  68 + }
  69 + };
  70 + }
  71 + };
  72 +}]);
styles/flashy.css View file @ b20f733
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  
... ... @@ -40,8 +47,10 @@
40 47 }
41 48  
42 49 ul.side-nav.fixed li.class a {
43   - height: 36px;
  50 + height: 28px;
  51 + font-size:20px;
44 52 line-height: normal;
  53 + font-weight:600;
45 54 }
46 55  
47 56 ul.side-nav.fixed li a {
48 57  
49 58  
... ... @@ -57,10 +66,19 @@
57 66 float: left;
58 67 text-align: center;
59 68 margin: 6px;
  69 + transition: all 0.255s cubic-bezier(0, 0, 0.6, 1);
60 70 font-family: 'Titillium Web', sans-serif;
61 71 }
62 72  
  73 +.card.flashy.shrinky {
  74 + border: 5px solid #ff0000;
  75 + height: 0;
  76 + opacity: 0;
  77 + overflow: hidden;
  78 +}
  79 +
63 80 .card-overlay {
  81 + cursor: pointer;
64 82 left: 0;
65 83 opacity: 0;
66 84 position: absolute;
... ... @@ -209,5 +227,9 @@
209 227  
210 228 .btn-floating:hover {
211 229 background-color: #7c4dff;
  230 +}
  231 +
  232 +#logo-container{
  233 + margin-bottom: 18px;
212 234 }
templates/deck.html View file @ b20f733
1 1 ๏ปฟ<div class="row">
2   - <a class="btn" ng-click="viewFeed()" style="margin-top: 15px">View Feed</a>
  2 + <a class="btn" ui-sref="feed({sectionId:{{sectionId}}})" style="margin-top: 15px">View Feed</a>
3 3 </div>
4 4  
5 5 <!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
6 6 <div class="row">
7 7 <div ng-repeat="card in cards">
8   - <flashcard flashcard-obj="card"/>
9   -
  8 + <flashcard flashcard-obj="card" refresh="refreshCards()"/>
  9 +
10 10 <!--
11 11 <div class="col s6">
12 12 <div class="card">
13 13  
14 14  
15 15  
... ... @@ -18,28 +18,24 @@
18 18 <i class="small mdi-action-delete" ng-click="removeCard(card)"></i>
19 19 <a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>
20 20 <!-- Modal Structure -->
21   - <div id="editModal" class="modal modal-fixed-footer">
22   - <div class="modal-content">
23   - <div class="row">
24   - <form class="col s12">
25   - <div class="row">
26   - <div class="input-field col s6">
27   - <i class="mdi-editor-mode-edit prefix"></i>
28   - <textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>
29   - <label for="icon_prefix2"></label>
30   - </div>
31   - </div>
32   - </form>
  21 + <div id="editModal" class="modal modal-fixed-footer">
  22 + <div class="modal-content">
  23 + <div class="row">
  24 + <form class="col s12">
  25 + <div class="row">
  26 + <div class="input-field col s6">
  27 + <i class="mdi-editor-mode-edit prefix"></i>
  28 + <textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>
  29 + <label for="icon_prefix2"></label>
33 30 </div>
34 31 </div>
35   - <div class="modal-footer">
36   - <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
37   - </div>
38   - </div>
  32 + </form>
39 33 </div>
40 34 </div>
  35 + <div class="modal-footer">
  36 + <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
  37 + </div>
41 38 </div>
42   - -->
43 39 </div>
44 40 </div>
templates/feed.html View file @ b20f733
... ... @@ -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 @ b20f733
1   -<div class="card flashy">
  1 +<div class="card flashy smallify" ng-init="startShrink = false"
  2 + ng-class="{'shrinky': startShrink}">
2 3 <div class="card-content">
3 4 <p>{{flashcard.text}}</p>
4 5 </div>
5 6 <div class="card-overlay">
6   - <a href="#">
7   - <div class="top-box" ng-click="pullCard(flashcard)">
8   - <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
  7 + <div class="top-box no-user-select"
  8 + ng-click="pullCard(flashcard)">
  9 + <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
  10 + </div>
  11 +
  12 + <div class="bottom-box no-user-select">
  13 + <div class="left-box">
  14 + <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
9 15 </div>
10   - </a>
  16 + <div class="right-box" ng-click="unpullCard(flashcard);
  17 + hideCard(flashcard)">
  18 + <div class="center-me"><i class="mdi-action-delete small"></i></div>
  19 + </div>
11 20  
12   - <div class="bottom-box">
13   - <a href="#">
14   - <div class="left-box">
15   - <div class="center-me"><i class="mdi-action-info-outline small"></i></div>
16   - </div>
17   - </a>
18   - <a href="#">
19   - <div class="right-box">
20   - <div class="center-me"><i class="mdi-action-delete small"></i></div>
21   - </div>
22   - </a>
23 21 </div>
24 22 </div>
25 23 </div>