1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < meta name ="viewport " content ="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no ">
5
+ < link rel ="stylesheet " href ="/bower_components/angular-material/angular-material.css ">
6
+ < link rel ="stylesheet " href ="/bower_components/angular-material/themes/yellow-theme.css ">
7
+ < style >
8
+ html {
9
+ height : 100% ;
10
+ }
11
+
12
+ body {
13
+ background-color : # ececec ;
14
+ }
15
+
16
+ footer {
17
+ padding : 16px ;
18
+ }
19
+
20
+ .animate-if {
21
+ background : white;
22
+ border : 1px solid black;
23
+ padding : 10px ;
24
+ }
25
+
26
+ .animate-if .ng-enter , .animate-if .ng-leave {
27
+ -webkit-transition : all cubic-bezier (0.250 , 0.460 , 0.450 , 0.940 ) 0.5s ;
28
+ transition : all cubic-bezier (0.250 , 0.460 , 0.450 , 0.940 ) 0.5s ;
29
+ }
30
+
31
+ .animate-if .ng-enter ,
32
+ .animate-if .ng-leave .ng-leave-active {
33
+ opacity : 0 ;
34
+ }
35
+
36
+ .animate-if .ng-leave ,
37
+ .animate-if .ng-enter .ng-enter-active {
38
+ opacity : 1 ;
39
+ }
40
+ </ style >
41
+ </ head >
42
+ < body layout ="vertical " md-theme ="yellow " layout-fill ng-app ="YourApp " ng-controller ="YourController ">
43
+ < header >
44
+ < md-toolbar scroll-shrink >
45
+ < div class ="md-toolbar-tools ">
46
+ < h3 >
47
+ < span > SumBees</ span >
48
+ </ h3 >
49
+ </ div >
50
+ </ md-toolbar >
51
+ </ header >
52
+ < div layout ="vertical " flex >
53
+ < md-content >
54
+ < md-list >
55
+ < div ng-repeat ="chunk in ::chunks ">
56
+ < md-card ng-if ="!chunk.expanded " ng-click ="chunk.expanded = !chunk.expanded " layout ="horizontal ">
57
+ < md-item >
58
+ < h2 > {{ chunk.title }}</ h2 >
59
+ < p > {{ chunk.description }}</ p >
60
+ </ md-item >
61
+ </ md-card >
62
+ < md-card ng-if ="chunk.expanded " ng-click ="chunk.expanded = !chunk.expanded ">
63
+ < div layout ="horizontal ">
64
+ < img src ="http://placekitten.com/g/64/128 "/>
65
+ < div >
66
+ < h2 > Some Post</ h2 >
67
+ < p > Some Description</ p >
68
+ < p > Some more stuff</ p >
69
+ < p > And even way more stuff!!</ p >
70
+ </ div >
71
+ </ div >
72
+ </ md-card >
73
+ </ div >
74
+ </ md-list >
75
+ </ md-content >
76
+ </ div >
77
+ < footer layout ="horizontal ">
78
+ < div flex > </ div >
79
+ < md-button class ="md-fab md-raised md-warn " ng-click ="openDialog($event); " aria-label ="New document ">
80
+ < md-icon icon ="/img/icons/ic_insert_drive_file_24px.svg " style ="width: 24px; height: 24px; "> </ md-icon >
81
+ </ md-button >
82
+ </ footer >
83
+
84
+ < script src ="/bower_components/angular/angular.js "> </ script >
85
+ < script src ="/bower_components/angular-aria/angular-aria.js "> </ script >
86
+ < script src ="/bower_components/angular-animate/angular-animate.js "> </ script >
87
+ < script src ="/bower_components/hammerjs/hammer.js "> </ script >
88
+ < script src ="/bower_components/angular-material/angular-material.js "> </ script >
89
+ < script >
90
+ // Include app dependency on ngMaterial
91
+ var app = angular . module ( 'YourApp' , [ 'ngMaterial' ] ) ;
92
+ app . controller ( "YourController" , [ '$scope' , '$mdDialog' , function ( $scope , $mdDialog ) {
93
+
94
+ $scope . openDialog = function ( $event ) {
95
+ $mdDialog . show ( {
96
+ targetEvent : $event ,
97
+ template :
98
+ '<md-dialog>' +
99
+ ' <md-content>Hello {{ userName }}!</md-content>' +
100
+ ' <div class="md-actions">' +
101
+ ' <md-button ng-click="closeDialog()">' +
102
+ ' Close' +
103
+ ' </md-button>' +
104
+ ' </div>' +
105
+ '</md-dialog>' ,
106
+ controller : 'DialogController' ,
107
+ onComplete : afterShowAnimation ,
108
+ locals : { name : 'Bobby' }
109
+ } ) ;
110
+ // When the 'enter' animation finishes...
111
+ function afterShowAnimation ( scope , element , options ) {
112
+ // post-show code here: DOM element focus, etc.
113
+ }
114
+ } ;
115
+
116
+ $scope . chunks = [
117
+ {
118
+ title : "Something" ,
119
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
120
+ expanded : false ,
121
+ content : {
122
+ type : "QUOTE" ,
123
+ quote : "And he saw that it was good"
124
+ }
125
+ } ,
126
+ {
127
+ title : "Another Something" ,
128
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
129
+ expanded : true ,
130
+ content : {
131
+ type : "QUOTE" ,
132
+ quote : "And he saw that it was good"
133
+ }
134
+ } ,
135
+ {
136
+ title : "And even another Something" ,
137
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
138
+ expanded : false ,
139
+ content : {
140
+ type : "QUOTE" ,
141
+ quote : "And he saw that it was good"
142
+ }
143
+ } ,
144
+ {
145
+ title : "And even another Something" ,
146
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
147
+ expanded : false ,
148
+ content : {
149
+ type : "QUOTE" ,
150
+ quote : "And he saw that it was good"
151
+ }
152
+ } ,
153
+ {
154
+ title : "And even another Something" ,
155
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
156
+ expanded : false ,
157
+ content : {
158
+ type : "QUOTE" ,
159
+ quote : "And he saw that it was good"
160
+ }
161
+ } ,
162
+ {
163
+ title : "And even another Something" ,
164
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
165
+ expanded : false ,
166
+ content : {
167
+ type : "QUOTE" ,
168
+ quote : "And he saw that it was good"
169
+ }
170
+ } ,
171
+ {
172
+ title : "And even another Something" ,
173
+ description : "Lorem Ipsum Dolor Set Shalalala" ,
174
+ expanded : false ,
175
+ content : {
176
+ type : "QUOTE" ,
177
+ quote : "And he saw that it was good"
178
+ }
179
+ }
180
+ ] ;
181
+ } ] ) ;
182
+
183
+ app . controller ( 'DialogController' , function ( $scope , $mdDialog , name ) {
184
+ $scope . userName = name ;
185
+ $scope . closeDialog = function ( ) {
186
+ $mdDialog . hide ( ) ;
187
+ } ;
188
+ } ) ;
189
+ </ script >
190
+
191
+ </ body >
192
+ </ html >
0 commit comments