110swag / flashy-frontend

Download as
Browse Code ยป

Commit bdaa2bafef9bfaa6e65f152e6a74b157d26a11e2

Authored by Andrew Buss
2 parents 20771fdcb1 e303b86ecf
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

merge

Showing 4 changed files Side-by-side Diff

flashy.css View file @ bdaa2ba
... ... @@ -36,17 +36,9 @@
36 36 }
37 37  
38 38 ul.side-nav.fixed li {
39   - /*line-height: 30px;*/
40   - /*font-weight:700;*/
41 39 font-size:24px;
42 40 }
43 41  
44   -ul.side-nav.fixed li a {
45   - /*line-height: 30px;*/
46   - /*font-weight:700;*/
47   - font-size:24px;
48   -}
49   -
50 42 ul.side-nav.fixed li.class a{
51 43 font-size:24px;
52 44 height: 36px;
... ... @@ -54,9 +46,9 @@
54 46 }
55 47  
56 48 ul.side-nav.fixed li a {
57   - /*line-height: 30px;*/
58   - /*font-weight:700;*/
59   - font-size:24px;
  49 + font-size: 24px;
  50 + height: 36px;
  51 + line-height: normal;
60 52 }
61 53  
62 54 /* Flashcard directive css */
63 55  
64 56  
65 57  
66 58  
67 59  
68 60  
69 61  
70 62  
71 63  
72 64  
73 65  
... ... @@ -65,103 +57,95 @@
65 57 }
66 58  
67 59 .card.flashy {
68   - float: left;
69   - height: calc(3*5vw);
70   - margin: 6px;
71   - max-height: calc(3*70px);
72   - max-width: calc(5*70px);
73   - min-height: calc(3*50px);
74   - min-width: calc(5*50px);
75   - min-height: calc(3*50px);
76   - min-width: calc(5*50px);
77   - width: calc(5*5vw);
  60 + float: left;
  61 + height: calc(3*5vw);
  62 + margin: 6px;
  63 + max-height: calc(3*60px);
  64 + max-width: calc(5*60px);
  65 + min-height: calc(3*50px);
  66 + min-width: calc(5*50px);
  67 + min-height: calc(3*50px);
  68 + min-width: calc(5*50px);
  69 + width: calc(5*5vw);
78 70 }
79 71  
80 72 .card-overlay {
81   -/* display: none; */
82   - height: calc(3*5vw);
83   - left: 0;
84   - max-height: calc(3*70px);
85   - max-width: calc(5*70px);
86   - min-height: calc(3*50px);
87   - min-width: calc(5*50px);
88   - opacity: 0;
89   - position: absolute;
90   - top: 0;
91   - transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s,
92   - opacity 0.2s cubic-bezier(0,0,0.6,1);
93   - /* animation effect to appear on off-hover */
94   - visibility: hidden;
95   - width: calc(5*5vw);
  73 + height: calc(3*5vw);
  74 + left: 0;
  75 + max-height: calc(3*60px);
  76 + max-width: calc(5*60px);
  77 + min-height: calc(3*50px);
  78 + min-width: calc(5*50px);
  79 + opacity: 0;
  80 + position: absolute;
  81 + top: 0;
  82 + transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s,
  83 + opacity 0.2s cubic-bezier(0,0,0.6,1);
  84 + /* animation effect to appear on off-hover */
  85 + visibility: hidden;
  86 + width: calc(5*5vw);
96 87 }
97 88  
98 89 .card-overlay i {
99   - color: #FFF;
100   - left: 50%;
101   - position: absolute;
102   - top: 50%;
103   - transform: translate(-50%, -50%);
  90 + color: #FFF;
  91 + left: 50%;
  92 + position: absolute;
  93 + top: 50%;
  94 + transform: translate(-50%, -50%);
104 95 }
105 96  
106 97 .card:hover .card-overlay {
107   - opacity: 1;
108   - transition-delay: 0s; /* animation effect to appear on hover */
109   - visibility: visible;
  98 + opacity: 1;
  99 + transition-delay: 0s; /* animation effect to appear on hover */
  100 + visibility: visible;
110 101 }
111 102  
112 103 .top-box {
113   - background-color: rgba(0,10,203,0.6);
114   - height: 65%;
115   - position: relative;
116   - transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
117   - width: 100%;
  104 + background-color: rgba(0,10,203,0.6);
  105 + height: 65%;
  106 + position: relative;
  107 + transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
  108 + width: 100%;
118 109 }
119 110  
120 111 .top-box:hover {
121   - background-color: rgba(0,10,203,0.7);
  112 + background-color: rgba(0,10,203,0.7);
122 113 }
123 114  
124 115 .bottom-box {
125   - height: 35%;
126   - width: 100%;
  116 + height: 35%;
  117 + width: 100%;
127 118 }
128 119  
129 120 .left-box {
130   - background-color: rgba(15,0,155,0.6);
131   - float: left;
132   - position: relative;
133   - height: 100%;
134   - transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
135   - width: 50%;
  121 + background-color: rgba(15,0,155,0.6);
  122 + float: left;
  123 + position: relative;
  124 + height: 100%;
  125 + transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
  126 + width: 50%;
136 127 }
137 128  
138 129 .left-box:hover {
139   - background-color: rgba(15,0,155,0.7);
  130 + background-color: rgba(15,0,155,0.7);
140 131 }
141 132  
142 133 .right-box {
143   - background-color: rgba(0,81,189,0.6);
144   - float: right;
145   - height: 100%;
146   - position: relative;
147   - transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
148   - width: 50%;
  134 + background-color: rgba(0,81,189,0.6);
  135 + float: right;
  136 + height: 100%;
  137 + position: relative;
  138 + transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s;
  139 + width: 50%;
149 140 }
150 141 .right-box:hover {
151   - background-color: rgba(0,81,189,0.7);
  142 + background-color: rgba(0,81,189,0.7);
152 143 }
153 144  
154 145 .center-me {
155   - margin: 0 auto;
156   - text-align: center;
157   - vertical-align: middle;
158   -}
159   -
160   -.container {
161   - margin-left: 250px;
162   - /*position: relative;
163   - width: 600px;
164   - height: 80px;*/
  146 + margin: 0 auto;
  147 + text-align: center;
  148 + vertical-align: middle;
165 149 }
166 150  
167 151 .modal.bottom-sheet {
scripts/FeedController.js View file @ bdaa2ba
... ... @@ -5,10 +5,6 @@
5 5 sectionId = $stateParams.sectionId;
6 6 $scope.cards = [];
7 7  
8   - $scope.cards[0] = {'id': 0, 'title': 'title1', 'content': 'abc'};
9   - $scope.cards[1] = {'id': 1, 'title': 'title2', 'content': 'xyz'};
10   - $scope.cards[2] = {'id': 2, 'title': 'title3', 'content': 'qwe'};
11   -
12 8 $http.get('/api/sections/' + sectionId + '/feed/').
13 9 success(function (data) {
14 10 for (var i = 0; i < data.length; i++) {
scripts/FlashcardDirective.js View file @ bdaa2ba
... ... @@ -5,7 +5,7 @@
5 5 templateUrl: '/app/templates/flashcard.html',
6 6 restrict: 'E',
7 7 scope: {
8   - content: '=flashcardContent' // two way binding
  8 + content: '=flashcardContent' //flashcard-content in outer scope
9 9 },
10 10 link: function(scope) {
11 11 console.log("HELLO FROM FLASHCARD DIRECTIVE");
templates/feed.html View file @ bdaa2ba
... ... @@ -7,13 +7,7 @@
7 7 <!--cards-->
8 8 <div class="row">
9 9 <div ng-repeat="card in cards">
10   - <div class="col s4">
11   - <div class="card" ng-click="pullCard(card)">
12   - <div class="card-content">
13   - <span> {{card.content}} </span>
14   - </div>
15   - </div>
16   - </div>
  10 + <flashcard flashcard-content="card.content"/>
17 11 </div>
18 12 </div>
19 13