Skip to content

Commit f2a9b31

Browse files
author
bhowmicp
committed
Converted much of angular-material starter project to demo sidenav, inputs & tabs
1 parent 3f01fb0 commit f2a9b31

File tree

13 files changed

+2357
-120
lines changed

13 files changed

+2357
-120
lines changed

‎app/assets/app.css

Lines changed: 68 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,129 @@
11
html, body {
2-
font-family: 'Roboto', sans-serif;
3-
font-size:14px;
4-
height:100%;
5-
margin: 0px;
6-
padding: 0px;
2+
font-family: 'Roboto', sans-serif;
3+
font-size: 14px;
4+
height: 100%;
5+
margin: 0px;
6+
padding: 0px;
77
}
88

99
/* Toolbar area */
1010

1111
.menu {
12-
background-color: transparent;
13-
border: none;
14-
height: 38px;
15-
margin: 16px;
16-
width: 36px;
12+
background-color: transparent;
13+
border: none;
14+
height: 38px;
15+
margin: 16px;
16+
width: 36px;
1717
}
1818

1919
md-toolbar h1 {
20-
margin: auto;
20+
margin: auto;
2121
}
2222

2323
/* Sidenav area */
2424

2525
md-list .md-button {
26-
color: inherit;
27-
font-weight: 500;
28-
text-align: left;
29-
width: 100%;
26+
color: inherit;
27+
font-weight: 500;
28+
text-align: left;
29+
width: 100%;
3030
}
31-
md-list .md-button.selected {
31+
32+
md-list .md-button.selected {
3233
color: #03a9f4;
33-
}
34+
}
3435

35-
md-sidenav md-list {
36+
md-sidenav md-list {
3637
padding: 0px 0px 8px 0px;
37-
}
38-
38+
}
3939

4040
/* Primary content area */
4141

4242
#content {
43-
overflow: hidden;
43+
overflow: hidden;
4444
}
4545

46-
#content {
47-
padding-left: 40px;
48-
padding-right: 40px;
49-
padding-top: 5px;
46+
#content {
47+
padding-left: 40px;
48+
padding-right: 40px;
49+
padding-top: 5px;
5050
}
5151

5252
#content .md-button.share {
53-
background-color: transparent;
54-
border: none;
55-
width: 48px;
56-
height: 48px;
57-
margin: 8px auto 16px 0;
58-
position: absolute;
59-
top: 10px;
60-
right: 25px;
53+
background-color: transparent;
54+
border: none;
55+
width: 48px;
56+
height: 48px;
57+
margin: 8px auto 16px 0;
58+
position: absolute;
59+
top: 10px;
60+
right: 25px;
6161
}
6262

6363
#content md-icon.avatar {
64-
margin-top: 10px;
64+
margin-top: 10px;
6565
}
6666

6767
#content .md-button.share > md-icon {
68-
fill:black;
69-
width:36px;
70-
height:36px;
68+
fill: black;
69+
width: 36px;
70+
height: 36px;
7171
}
7272

7373
md-button.menuBtn > md-icon {
74-
fill:white;
75-
width:24px;
76-
height:24px;
74+
fill: white;
75+
width: 24px;
76+
height: 24px;
7777
}
7878

7979
#content .md-button.share:active > md-icon {
80-
background-color: #dadada;
81-
border-radius: 75%;
82-
padding:4px;
83-
transition: all 100ms ease-out 30ms;
80+
background-color: #dadada;
81+
border-radius: 75%;
82+
padding: 4px;
83+
transition: all 100ms ease-out 30ms;
8484
}
8585

8686
#content img {
87-
display: block;
88-
height: auto;
89-
max-width: 500px;
87+
display: block;
88+
height: auto;
89+
max-width: 500px;
9090
}
9191

9292
/* Utils */
9393

9494
.content-wrapper {
95-
position: relative;
95+
position: relative;
9696
}
9797

9898
/* Typography support coming in 0.8.0 */
9999

100100
md-toolbar h1 {
101-
font-size: 1.250em;
102-
font-weight: 400;
101+
font-size: 1.250em;
102+
font-weight: 400;
103103
}
104104

105105
.avatar {
106-
position: relative;
107-
width: 128px;
108-
height: 128px;
109-
border: 1px solid #ddd;
110-
border-radius: 50%;
111-
display: inline-block;
112-
overflow: hidden;
113-
margin: 0px;
114-
vertical-align: middle;
115-
zoom:0.70;
116-
transform: translateZ(0);
117-
-webkit-transform: scale(0.70);
118-
-moz-transform:scale(0.70);
106+
position: relative;
107+
width: 128px;
108+
height: 128px;
109+
border: 1px solid #ddd;
110+
border-radius: 50%;
111+
display: inline-block;
112+
overflow: hidden;
113+
margin: 0px;
114+
vertical-align: middle;
115+
zoom: 0.70;
116+
transform: translateZ(0);
117+
-webkit-transform: scale(0.70);
118+
-moz-transform: scale(0.70);
119119
}
120120

121-
122-
md-bottom-sheet md-icon {
123-
margin-right:20px;
121+
md-bottom-sheet md-icon {
122+
margin-right: 20px;
124123
}
125124

126125
span.name {
127-
font-weight: bold;
128-
font-size:1.1em;
129-
padding-left:5px;
126+
font-weight: bold;
127+
font-size: 1.1em;
128+
padding-left: 5px;
130129
}

‎app/assets/svg/Log-in.svg

Lines changed: 1976 additions & 0 deletions
Loading

‎app/assets/svg/dollar.svg

Lines changed: 1 addition & 0 deletions
Loading

‎app/index.html

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,84 @@
11
<!DOCTYPE html>
2-
<html lang="en" >
3-
<head>
2+
<html lang="en">
3+
<head>
44
<title>Angular Material - Starter App</title>
55

66
<meta charset="utf-8">
77
<meta http-equiv="X-UA-Compatible" content="IE=edge">
88
<meta name="description" content="">
9-
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
9+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
1010

1111
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
1212
<link rel="stylesheet" href="./bower_components/angular-material/angular-material.css"/>
1313
<link rel="stylesheet" href="assets/app.css"/>
14-
</head>
14+
</head>
1515

16-
<body ng-app="starterApp" layout="column" ng-controller="UserController as ul">
16+
<body ng-app="starterApp" layout="column" ng-controller="UserController as ul">
1717

18-
<md-toolbar layout="row">
19-
<md-button class="menu" hide-gt-sm ng-click="ul.toggleList()" aria-label="Show User List">
20-
<md-icon md-svg-icon="menu" ></md-icon>
21-
</md-button>
22-
<h1>Angular Material - Starter App</h1>
23-
</md-toolbar>
18+
<md-toolbar layout="row">
19+
<md-button class="menu" ng-click="ul.toggleList()" aria-label="Show User List">
20+
<md-icon md-svg-icon="menu"></md-icon>
21+
</md-button>
22+
<h1>Angular Material - Starter App</h1>
23+
</md-toolbar>
2424

25-
<div flex layout="row">
25+
<div flex layout="row">
2626

2727
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-z2" md-component-id="left">
28-
<md-list>
28+
<md-list>
2929
<md-item ng-repeat="it in ul.users">
3030
<md-button ng-click="ul.selectUser(it)" ng-class="{'selected' : it === ul.selected }">
31-
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
32-
{{it.name}}
31+
<md-icon md-svg-icon="{{it.avatar}}" class="avatar"></md-icon>
32+
{{it.name}}
3333
</md-button>
3434
</md-item>
35-
</md-list>
36-
</md-sidenav>
35+
</md-list>
36+
</md-sidenav>
3737

38-
<md-content flex id="content">
39-
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
40-
<h2>{{ul.selected.name}}</h2>
41-
<p>{{ul.selected.content}}</p>
38+
<md-content flex id="content">
39+
<md-icon md-svg-icon="{{ul.selected.avatar}}" class="avatar"></md-icon>
40+
<h2>{{ul.selected.name}}</h2>
4241

43-
<md-button class="share" md-no-ink ng-click="ul.share($event)" aria-label="Share">
42+
<p>{{ul.selected.content}}</p>
43+
44+
<md-button class="share" md-no-ink ng-click="ul.share($event)" aria-label="Share">
4445
<md-icon md-svg-icon="share"></md-icon>
45-
</md-button>
46-
</md-content>
46+
</md-button>
47+
</md-content>
4748

48-
</div>
49+
</div>
4950

50-
<script src="./bower_components/angular/angular.js"></script>
51-
<script src="./bower_components/angular-animate/angular-animate.js"></script>
52-
<script src="./bower_components/angular-aria/angular-aria.js"></script>
53-
<script type="text/javascript" src="./bower_components/angular-material/angular-material.js"></script>
51+
<script src="./bower_components/angular/angular.js"></script>
52+
<script src="./bower_components/angular-animate/angular-animate.js"></script>
53+
<script src="./bower_components/angular-aria/angular-aria.js"></script>
54+
<script type="text/javascript" src="./bower_components/angular-material/angular-material.js"></script>
5455

55-
<script src="./src/users/Users.js"></script>
56-
<script src="./src/users/UserController.js"></script>
57-
<script src="./src/users/UserService.js"></script>
56+
<script src="./src/users/Users.js"></script>
57+
<script src="./src/users/UserController.js"></script>
58+
<script src="./src/users/UserService.js"></script>
5859

59-
<script type="text/javascript">
60+
<script type="text/javascript">
6061

61-
angular
62-
.module('starterApp', ['ngMaterial', 'users'])
63-
.config(function($mdThemingProvider, $mdIconProvider){
62+
angular
63+
.module('starterApp', ['ngMaterial', 'users'])
64+
.config(function ($mdThemingProvider, $mdIconProvider) {
6465

65-
$mdIconProvider
66-
.defaultIconSet("./assets/svg/avatars.svg", 128)
67-
.icon("menu" , "./assets/svg/menu.svg" , 24)
68-
.icon("share" , "./assets/svg/share.svg" , 24)
69-
.icon("google_plus", "./assets/svg/google_plus.svg" , 512)
70-
.icon("hangouts" , "./assets/svg/hangouts.svg" , 512)
71-
.icon("twitter" , "./assets/svg/twitter.svg" , 512)
72-
.icon("phone" , "./assets/svg/phone.svg" , 512);
66+
$mdIconProvider
67+
.defaultIconSet("./assets/svg/avatars.svg", 128)
68+
.icon("menu", "./assets/svg/menu.svg", 24)
69+
.icon("share", "./assets/svg/share.svg", 24)
70+
.icon("google_plus", "./assets/svg/google_plus.svg", 512)
71+
.icon("hangouts", "./assets/svg/hangouts.svg", 512)
72+
.icon("twitter", "./assets/svg/twitter.svg", 512)
73+
.icon("phone", "./assets/svg/phone.svg", 512);
7374

74-
$mdThemingProvider.theme('default')
75-
.primaryPalette('brown')
76-
.accentPalette('red');
75+
$mdThemingProvider.theme('default')
76+
.primaryPalette('green')
77+
.accentPalette('teal');
7778

78-
});
79+
});
7980

80-
</script>
81+
</script>
8182

82-
</body>
83+
</body>
8384
</html>

‎app/index2.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html ng-app="TabsApp">
3+
<head>
4+
<title>Angular Material - Starter App</title>
5+
6+
<meta charset="utf-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="description" content="">
9+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
10+
11+
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
12+
<link rel="stylesheet" href="./bower_components/angular-material/angular-material.css"/>
13+
<link rel="stylesheet" href="assets/app.css"/>
14+
15+
<script src="./bower_components/angular/angular.min.js"></script>
16+
<script src="./bower_components/angular-route/angular-route.min.js"></script>
17+
<script src="./bower_components/angular-animate/angular-animate.min.js"></script>
18+
<script src="./bower_components/angular-aria/angular-aria.min.js"></script>
19+
<script src="./bower_components/angular-material/angular-material.min.js"></script>
20+
<script src="src/tabs/Tabs.js"></script>
21+
<script src="src/tabs/TabsService.js"></script>
22+
<script src="src/tabs/login/login.js"></script>
23+
<script src="src/tabs/financial/financial.js"></script>
24+
<script src="src/tabs/TabsController.js"></script>
25+
</head>
26+
<body ng-controller="TabsController as tc" layout="column">
27+
<md-toolbar layout="row">
28+
<md-button class="menu" ng-click="tc.toggleList()" aria-label="Show User List">
29+
<md-icon md-svg-icon="menu"></md-icon>
30+
</md-button>
31+
<h1>MobMaiden</h1>
32+
</md-toolbar>
33+
<div flex layout="row">
34+
<md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-z2" md-component-id="left">
35+
<md-list>
36+
<md-item ng-repeat="tab in tab_list">
37+
<md-button ng-click="tab.url()">
38+
<p>{{tab.name_provider()}}</p>
39+
</md-button>
40+
</md-item>
41+
</md-list>
42+
43+
44+
</md-sidenav>
45+
<md-content flex id="content">
46+
<div ng-view></div>
47+
</md-content>
48+
</div>
49+
</body>
50+
</html>

0 commit comments

Comments
 (0)