110swag / flashy-frontend

Download as
Browse Code ยป

Commit e0445372d052c37c154602e95806117408b4545d

Authored by Rachel Lee
1 parent 61e46d4d43
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Fixing up some css and scrollbar thing a lil

Showing 3 changed files with 21 additions and 93 deletions Side-by-side Diff

scripts/DeckController.js View file @ e044537
1   -var app = angular.module('flashy.DeckController', ['ui.router']);
  1 +angular.module('flashy.DeckController', ['ui.router']).
2 2  
3   -app.controller('DeckController', ['$scope', '$state', '$http', '$stateParams',
  3 +controller('DeckController', ['$scope', '$state', '$http', '$stateParams',
4 4 function ($scope, $state, $http, $stateParams) {
5 5 // cards array
6 6 sectionId = $stateParams.sectionId;
... ... @@ -19,7 +19,7 @@
19 19  
20 20 /* Lets page refresh the cards shown on the page. */
21 21 $scope.refreshCards = function () {
22   - var myDelay = 260; // ms
  22 + var myDelay = 200; // ms
23 23  
24 24 setTimeout(function () {
25 25 $http.get('/api/sections/' + sectionId + '/deck/').
... ... @@ -33,86 +33,6 @@
33 33 });
34 34 }, myDelay);
35 35 };
36   -
37   -
38   - /* all kmach's stuff below, do not touch */
39   - // reorganize cards in array based on time
40   - $scope.filter = function (card) {
41   -
42   - // get index of card
43   - var index = $scope.cards.indexOf(card);
44   -
45   - //$scope.cards[index];
46   -
47   -
48   - };
49   -
50   - // remove card from deck
51   - $scope.removeCard = function (card) {
52   -
53   - // get index of card
54   - var index = $scope.cards.indexOf(card);
55   -
56   - $scope.cards.splice(index, 1);
57   -
58   - alert('Removed card!');
59   - };
60   -
61   -
62   - $scope.editCard = function (card) {
63   -
64   - var index = $scope.cards.indexOf(card);
65   -
66   - $('.modal-trigger').leanModal({
67   - dismissible: true, // Modal can be dismissed by clicking outside of the modal
68   - opacity: .5, // Opacity of modal background
69   - in_duration: 300, // Transition in duration
70   - out_duration: 200, // Transition out duration
71   - ready: function () {
72   -
73   -
74   - $scope.editableContent = $scope.cards[index].content;
75   - }, // Callback for Modal open
76   - complete: function () {
77   -
78   - $scope.cards[index].content = $scope.editableContent;
79   -
80   - } // Callback for Modal close
81   - }
82   - );
83   -
84   -
85   - //alert($scope.cards[index].content);
86   -
87   - // post flashcard edits
88   - /*$http.post('/api/flashcards/', { 'text': $scope.editedContent }).
89   - success(function (data) {
90   - console.log('No way, really?');
91   - }).
92   - error(function (error) {
93   - console.log('haha, n00b');
94   - });
95   -
96   - */
97   - };
98   -
99   -
100   - // get all cards from your deck and push into array
101   - /*$http.get('/api/sections/{pk}/deck').
102   - success(function(data) {
103   -
104   -
105   -
106   - for (var i = 0; i < data.length; i++) {
107   - cards.push({ 'title': data[i].title, 'content': data[i].content });
108   - }
109   - }).
110   - error(function(data) {
111   -
112   - console.log('no cards?!!');
113   -
114   - });*/
115   -
116   -
117   - }]);
  36 + }
  37 +]);
scripts/FlashcardDirective.js View file @ e044537
... ... @@ -10,8 +10,9 @@
10 10 refresh: '&' // eval refresh in parent html
11 11 },
12 12 link: function(scope, element) {
  13 + /* Handles width of the card */
13 14 function refresh_width() {
14   - avail = $window.innerWidth;
  15 + avail = $window.innerWidth - 17;
15 16 if (avail > 992) avail -= 240;
16 17 width = Math.floor(avail / Math.floor(avail / 250) - 12);
17 18 element.children().css({width: width + 'px', height: (width * 3 / 5) + 'px'});
styles/flashy.css View file @ e044537
... ... @@ -66,7 +66,7 @@
66 66 float: left;
67 67 text-align: center;
68 68 margin: 6px;
69   - transition: all 0.255s cubic-bezier(0, 0, 0.6, 1);
  69 + transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
70 70 font-family: 'Titillium Web', sans-serif;
71 71 }
72 72  
73 73  
... ... @@ -96,8 +96,13 @@
96 96 position: absolute;
97 97 top: 50%;
98 98 transform: translate(-50%, -50%);
  99 + transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
99 100 }
100 101  
  102 +.center-me:hover i {
  103 + text-shadow: 0 0 15px rgba(255,255,255,0.7);
  104 +}
  105 +
101 106 .card:hover .card-overlay {
102 107 opacity: 1;
103 108 transition-delay: 0s; /* animation effect to appear on hover */
... ... @@ -105,7 +110,7 @@
105 110 }
106 111  
107 112 .top-box {
108   - background-color: rgba(0, 10, 203, 0.6);
  113 + background-color: rgba(0, 81, 229, 0.6);
109 114 height: 65%;
110 115 position: relative;
111 116 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
... ... @@ -113,7 +118,7 @@
113 118 }
114 119  
115 120 .top-box:hover {
116   - background-color: rgba(0, 10, 203, 0.7);
  121 + background-color: rgba(0, 81, 229, 0.75);
117 122 }
118 123  
119 124 .bottom-box {
120 125  
... ... @@ -131,11 +136,11 @@
131 136 }
132 137  
133 138 .left-box:hover {
134   - background-color: rgba(15, 0, 155, 0.7);
  139 + background-color: rgba(15, 0, 155, 0.75);
135 140 }
136 141  
137 142 .right-box {
138   - background-color: rgba(0, 81, 189, 0.6);
  143 + background-color: rgba(207, 0, 86, 0.6);
139 144 float: right;
140 145 height: 100%;
141 146 position: relative;
142 147  
143 148  
... ... @@ -144,13 +149,15 @@
144 149 }
145 150  
146 151 .right-box:hover {
147   - background-color: rgba(0, 81, 189, 0.7);
  152 + background-color: rgba(207, 0, 86, 0.75);
148 153 }
149 154  
150 155 .center-me {
  156 + height: 100%;
151 157 margin: 0 auto;
152 158 text-align: center;
153 159 vertical-align: middle;
  160 + width: 100%;
154 161 }
155 162  
156 163 .modal.bottom-sheet {
... ... @@ -205,7 +212,7 @@
205 212  
206 213 body {
207 214 background-color: #3e1944;
208   - overflow: hidden;
  215 + overflow-x: hidden;
209 216 }
210 217  
211 218 html {