Skip to content

Commit f13dc4f

Browse files
DerekTBrownDerekTBrown
committed
2 parents ff21689 + e9f84a1 commit f13dc4f

File tree

9 files changed

+328
-199
lines changed

9 files changed

+328
-199
lines changed

‎client/imports/ui/pages/account/account.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,43 @@ <h2>{{ user.profile.name }}</h2>
1111
</div>
1212
</md-card-content>
1313
</md-card>
14+
15+
<div class="personal-info">
16+
<md-card>
17+
<md-card-content>
18+
<h2>Personal Info</h2>
19+
20+
<div class="account-item" layout="row">
21+
<p class="account-label" flex>Nickname</p>
22+
<p class="account-info" flex>{{ user.profile.nickname }}</p>
23+
<a>
24+
<md-icon fontIcon="tuxicon-cog"></md-icon>
25+
</a>
26+
</div>
27+
28+
<md-divider></md-divider>
29+
30+
<div class="account-item" layout="row">
31+
<p class="account-label" flex>Email</p>
32+
<p class="account-info" flex>{{ user.profile.email }}</p>
33+
<a>
34+
<md-icon fontIcon="tuxicon-cog"></md-icon>
35+
</a>
36+
</div>
37+
38+
<md-divider></md-divider>
39+
40+
<div class="account-item" layout="row">
41+
<p class="account-label" flex>password</p>
42+
<p class="account-info" flex>********</p>
43+
<a>
44+
<md-icon fontIcon="tuxicon-cog"></md-icon>
45+
</a>
46+
</div>
47+
48+
<md-divider></md-divider>
49+
50+
</md-card-content>
51+
</md-card>
52+
</div>
1453
</div>

‎client/imports/ui/pages/account/account.ts

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import { Component, ViewEncapsulation, provide } from '@angular/core';
99
import { bootstrap } from 'angular2-meteor-auto-bootstrap';
1010

11-
import { APP_BASE_HREF } from '@angular/common';
11+
import { APP_BASE_HREF, FORM_DIRECTIVES } from '@angular/common';
1212
import { HTTP_PROVIDERS } from '@angular/http';
1313
import { RouterLink, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from '@angular/router-deprecated';
1414

@@ -18,6 +18,7 @@
1818
import { MATERIAL_PROVIDERS, MATERIAL_DIRECTIVES } from 'ng2-material';
1919
import { MeteorComponent } from 'angular2-meteor';
2020
import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav';
21+
import { MD_INPUT_DIRECTIVES } from '@angular2-material/input';
2122

2223
// Toolbar
2324
import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar';
@@ -27,23 +28,29 @@
2728

2829
// Define Account Component
2930
@Component({
30-
selector: 'tuxlab-account',
31-
templateUrl: '/client/imports/ui/pages/account/account.html',
32-
directives: [ MATERIAL_DIRECTIVES,
33-
MD_TOOLBAR_DIRECTIVES,
34-
MD_ICON_DIRECTIVES ],
35-
viewProviders: [ MdIconRegistry ],
36-
encapsulation: ViewEncapsulation.None
31+
selector: 'tuxlab-account',
32+
templateUrl: '/client/imports/ui/pages/account/account.html',
33+
directives: [
34+
MATERIAL_DIRECTIVES,
35+
MD_TOOLBAR_DIRECTIVES,
36+
MD_ICON_DIRECTIVES,
37+
MD_INPUT_DIRECTIVES,
38+
FORM_DIRECTIVES
39+
],
40+
viewProviders: [ MdIconRegistry ],
41+
encapsulation: ViewEncapsulation.None
3742
})
3843

3944
@InjectUser("user")
4045
// Accounts Class
4146
export class Account extends MeteorComponent {
4247
user: Meteor.User;
48+
4349
constructor(mdIconRegistry: MdIconRegistry) {
4450
super();
4551
// Create Icon Font
4652
mdIconRegistry.registerFontClassAlias('tux', 'tuxicon');
47-
mdIconRegistry.setDefaultFontSetClass('tuxicon');
53+
mdIconRegistry.setDefaultFontSetClass('tuxicon');
54+
4855
}
4956
}

‎client/style/account/_account.scss

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,35 @@
2222
position: relative;
2323
}
2424
}
25+
.personal-info {
26+
md-card-content {
27+
padding: 30px;
28+
h2 {
29+
margin-bottom: 30px;
30+
}
31+
.account-item {
32+
line-height: 50px;
33+
font-size: 18px;
34+
padding-top: 15px;
35+
padding-bottom: 15px;
36+
a {
37+
cursor: pointer;
38+
}
39+
.account-label {
40+
font-weight: 500;
41+
}
42+
.account-info {
43+
color: #999999;
44+
}
45+
md-icon {
46+
line-height: 10px;
47+
color: #999999;
48+
margin-right: 10px;
49+
}
50+
.tuxicon:before {
51+
font-size: 48px;
52+
}
53+
}
54+
}
55+
}
2556
}

‎client/style/base/_toolbar.scss

Lines changed: 95 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,101 @@
11
.tux-toolbar {
2-
md-toolbar {
3-
min-height: inherit;
4-
.wrapper {
5-
display: flex;
6-
flex-direction: row;
7-
flex-wrap: nowrap;
8-
justify-content: flex-start;
9-
align-items: center;
10-
width: 100%;
11-
max-width: $tuxlab-max-width;
12-
margin: 0 auto;
13-
div {
14-
height: 100%;
15-
}
16-
.tux-toolbar-logo {
17-
margin-right: 30px;
18-
img {
19-
margin-top: 4px;
20-
height: 30px;
21-
padding: 10px 12px;
22-
}
23-
}
24-
.tux-toolbar-nav {
25-
white-space:nowrap;
26-
[md-button] {
27-
font-weight: 300;
28-
}
29-
a {
30-
color: black;
31-
}
32-
}
33-
.tux-toolbar-login {
34-
a, a:visited {
35-
color: black;
36-
}
37-
}
38-
.tux-toolbar-profile {
39-
display: flex;
40-
flex-direction: row;
41-
flex-wrap: nowrap;
42-
justify-content: flex-start;
43-
align-items: center;
44-
cursor: pointer;
45-
height: 100%;
46-
padding: 11px;
47-
.tux-toolbar-profile-pic {
48-
height: 36px;
49-
margin-bottom: 7px;
50-
border-radius: 50%;
51-
}
52-
.tux-toolbar-info {
53-
h1, h2 {
54-
font-family: 'Open Sans',sans-serif;
55-
font-size: 12pt;
56-
font-weight: 300;
57-
margin: 0px;
58-
margin-left: 12px;
59-
white-space: nowrap;
60-
}
61-
h2 {
62-
font-size: 8pt;
63-
}
64-
}
65-
.tux-toolbar-menu {
66-
color: #777;
67-
}
68-
}
69-
.tux-toolbar-profile:hover {
70-
background-color: #dfdfdf;
71-
}
2+
md-toolbar.small {
3+
min-height: inherit;
4+
display: none;
5+
.mobile-toolbar-buttons {
6+
margin: 0 auto;
7+
a {
8+
color: black;
9+
display: block;
10+
float: left;
11+
height: 64px;
12+
padding-left: 14px;
13+
padding-right: 24px;
14+
text-align: center;
15+
margin-right: 10px;
16+
cursor: pointer;
17+
.tuxicon:before {
18+
font-size: 48px;
7219
}
20+
}
21+
a:hover {
22+
background-color: #dfdfdf;
23+
}
7324
}
25+
26+
}
27+
md-toolbar.large {
28+
min-height: inherit;
29+
.wrapper {
30+
display: flex;
31+
flex-direction: row;
32+
flex-wrap: nowrap;
33+
justify-content: flex-start;
34+
align-items: center;
35+
width: 100%;
36+
max-width: $tuxlab-max-width;
37+
margin: 0 auto;
38+
div {
39+
height: 100%;
40+
}
41+
.tux-toolbar-logo {
42+
margin-right: 30px;
43+
img {
44+
margin-top: 4px;
45+
height: 30px;
46+
padding: 10px 12px;
47+
}
48+
}
49+
.tux-toolbar-nav {
50+
white-space:nowrap;
51+
[md-button] {
52+
font-weight: 300;
53+
}
54+
a {
55+
color: black;
56+
}
57+
}
58+
.tux-toolbar-login {
59+
a, a:visited {
60+
color: black;
61+
}
62+
}
63+
.tux-toolbar-profile {
64+
display: flex;
65+
flex-direction: row;
66+
flex-wrap: nowrap;
67+
justify-content: flex-start;
68+
align-items: center;
69+
cursor: pointer;
70+
height: 100%;
71+
padding: 11px;
72+
.tux-toolbar-profile-pic {
73+
height: 36px;
74+
margin-bottom: 7px;
75+
border-radius: 50%;
76+
}
77+
.tux-toolbar-info {
78+
h1, h2 {
79+
font-family: 'Open Sans',sans-serif;
80+
font-size: 12pt;
81+
font-weight: 300;
82+
margin: 0px;
83+
margin-left: 12px;
84+
white-space: nowrap;
85+
}
86+
h2 {
87+
font-size: 8pt;
88+
}
89+
}
90+
.tux-toolbar-menu {
91+
color: #777;
92+
}
93+
}
94+
.tux-toolbar-profile:hover {
95+
background-color: #dfdfdf;
96+
}
97+
}
98+
}
7499
}
75100
// Sub-toolbar
76101
#course-toolbar {

0 commit comments

Comments
 (0)