Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit bec3f3a

Browse files
tladendotladendo
committed
Merge pull request #525 from appirio-tech/feature/tom-nav-modal-2
Feature/tom nav modal 2
2 parents 56a2696 + 531f7a8 commit bec3f3a

File tree

6 files changed

+323
-109
lines changed

6 files changed

+323
-109
lines changed

‎app/index.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ html
3737
link(rel="stylesheet", href="assets/css/settings/edit-profile.css")
3838
link(rel="stylesheet", href="assets/css/settings/account-info.css")
3939
link(rel="stylesheet", href="assets/css/profile/subtrack.css")
40+
link(rel="stylesheet", href="assets/css/profile/nav.css")
4041
link(rel="stylesheet", href="assets/css/profile/icons.css")
4142
link(rel="stylesheet", href="assets/css/profile/header.css")
4243
link(rel="stylesheet", href="assets/css/profile/badges.css")

‎app/profile/profile.controller.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
// set profile to the object that was resolved
1414
vm.profile = profile;
1515
vm.userHandle = userHandle;
16+
vm.handleColor = ProfileService.getUserHandleColor(profile);
1617
vm.showBadges = showBadges;
1718
vm.closeDialog = closeDialog;
1819
vm.scrollTo = scrollTo;

‎app/profile/subtrack/nav.jade

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
.nav-top
2+
.user
3+
.avatar
4+
img(ng-src="{{vm.profile.photoURL}}")
5+
6+
.handle(style="color: {{vm.handleColor}}") {{vm.profile.handle}}
7+
8+
.exit(ng-click="vm.closeDialog()")
9+
img(src="/images/x-mark-gray.svg")
10+
11+
hr
112
.categoryNav
213
.track(
314
ng-repeat="track in vm.profile.tracks",

‎app/profile/subtrack/subtrack.controller.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@
227227
template: 'profile/subtrack/nav.html',
228228
controller: 'ProfileCtrl',
229229
controllerAs: 'vm',
230-
className: 'ngdialog-theme-default',
230+
className: 'ngdialog-nav-theme',
231231
resolve: {
232232
userHandle: function() {
233233
return vm.userHandle;

‎assets/css/profile/nav.scss

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
@import 'topcoder-includes';
2+
@import '../partials/combined';
3+
4+
.ngdialog.ngdialog-nav-theme {
5+
padding-bottom: 160px;
6+
padding-top: 160px;
7+
}
8+
9+
.ngdialog.ngdialog-nav-theme.ngdialog-closing .ngdialog-content {
10+
-webkit-animation: ngdialog-flyout .5s;
11+
animation: ngdialog-flyout .5s;
12+
}
13+
14+
.ngdialog.ngdialog-nav-theme .ngdialog-content {
15+
-webkit-animation: ngdialog-flyin .5s;
16+
animation: ngdialog-flyin .5s;
17+
background: #fff;
18+
color: #444;
19+
font-family: 'Helvetica',sans-serif;
20+
font-size: 1.1em;
21+
line-height: 1.5em;
22+
margin: 0 auto;
23+
max-width: 100%;
24+
padding: 1em;
25+
position: absolute;
26+
top: 0;
27+
width: 100%;
28+
height: 100%;
29+
}
30+
31+
.ngdialog.ngdialog-nav-theme .ngdialog-close {
32+
display: none;
33+
border-radius: 5px;
34+
cursor: pointer;
35+
position: absolute;
36+
right: 0;
37+
top: 0;
38+
}
39+
40+
.ngdialog.ngdialog-nav-theme .ngdialog-close:before {
41+
background: transparent;
42+
border-radius: 3px;
43+
color: #bbb;
44+
content: '\00D7';
45+
font-size: 26px;
46+
font-weight: 400;
47+
height: 30px;
48+
line-height: 26px;
49+
position: absolute;
50+
right: 3px;
51+
text-align: center;
52+
top: 3px;
53+
width: 30px;
54+
}
55+
56+
.ngdialog.ngdialog-nav-theme .ngdialog-close:hover:before,
57+
.ngdialog.ngdialog-nav-theme .ngdialog-close:active:before {
58+
color: #777;
59+
}
60+
61+
.ngdialog.ngdialog-nav-theme .ngdialog-message {
62+
margin-bottom: .5em;
63+
}
64+
65+
.ngdialog.ngdialog-nav-theme .ngdialog-input {
66+
margin-bottom: 1em;
67+
}
68+
69+
.ngdialog.ngdialog-nav-theme .ngdialog-input textarea,
70+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="text"],
71+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="password"],
72+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="email"],
73+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="url"] {
74+
background: #fff;
75+
border: 0;
76+
border-radius: 3px;
77+
font-family: inherit;
78+
font-size: inherit;
79+
font-weight: inherit;
80+
margin: 0 0 .25em;
81+
min-height: 2.5em;
82+
padding: .25em .67em;
83+
width: 100%;
84+
}
85+
86+
.ngdialog.ngdialog-nav-theme .ngdialog-input textarea:focus,
87+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="text"]:focus,
88+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="password"]:focus,
89+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="email"]:focus,
90+
.ngdialog.ngdialog-nav-theme .ngdialog-input input[type="url"]:focus {
91+
box-shadow: inset 0 0 0 2px #8dbdf1;
92+
outline: none;
93+
}
94+
95+
.ngdialog.ngdialog-nav-theme .ngdialog-buttons {
96+
*zoom: 1;
97+
}
98+
99+
.ngdialog.ngdialog-nav-theme .ngdialog-buttons:after {
100+
content: '';
101+
display: table;
102+
clear: both;
103+
}
104+
105+
.ngdialog.ngdialog-nav-theme .ngdialog-button {
106+
border: 0;
107+
border-radius: 3px;
108+
cursor: pointer;
109+
float: right;
110+
font-family: inherit;
111+
font-size: .8em;
112+
letter-spacing: .1em;
113+
line-height: 1em;
114+
margin: 0 0 0 .5em;
115+
padding: .75em 2em;
116+
text-transform: uppercase;
117+
}
118+
119+
.ngdialog.ngdialog-nav-theme .ngdialog-button:focus {
120+
-webkit-animation: ngdialog-pulse 1.1s infinite;
121+
animation: ngdialog-pulse 1.1s infinite;
122+
outline: none;
123+
}
124+
125+
@media (max-width: 568px) {
126+
.ngdialog.ngdialog-nav-theme .ngdialog-button:focus {
127+
-webkit-animation: none;
128+
animation: none;
129+
}
130+
}
131+
132+
.ngdialog.ngdialog-nav-theme .ngdialog-button.ngdialog-button-primary {
133+
background: #3288e6;
134+
color: #fff;
135+
}
136+
137+
.ngdialog.ngdialog-nav-theme .ngdialog-button.ngdialog-button-secondary {
138+
background: #e0e0e0;
139+
color: #777;
140+
}
141+
142+
.ngdialog.ngdialog-nav-theme .ngdialog-overlay {
143+
background: #fff;
144+
}
145+
.ngdialog.ngdialog-nav-theme .ngdialog-content {
146+
padding-left: 8%;
147+
padding-right: 8%;
148+
.nav-top {
149+
margin-top: 60px;
150+
font-family: 'Sofia Pro';
151+
display: flex;
152+
flex-direction: row;
153+
justify-content: space-between;
154+
.user {
155+
display: flex;
156+
font-weight: bold;
157+
.avatar {
158+
img {
159+
width: 30px;
160+
height: 30px;
161+
border-radius: 50%;
162+
}
163+
}
164+
.handle {
165+
margin-left: 15px;
166+
font-size: 28px;
167+
}
168+
}
169+
.exit {
170+
img {
171+
height: 20px;
172+
width: 20px;
173+
cursor: pointer;
174+
}
175+
}
176+
}
177+
hr {
178+
margin-top: 30px;
179+
border: 0;
180+
border-top: 1px solid #f0f0f0;
181+
}
182+
.categoryNav {
183+
background: white;
184+
margin-top: 20px;
185+
@include module-l;
186+
margin-left: auto;
187+
margin-right: auto;
188+
align-self: center;
189+
background: white;
190+
display: flex;
191+
flex-direction: row;
192+
flex-wrap: wrap;
193+
justify-content: space-between;
194+
align-items: flex-start;
195+
196+
.track {
197+
margin: 30px 3px;
198+
display: flex;
199+
flex-direction: column;
200+
align-items: center;
201+
cursor: pointer;
202+
203+
.name {
204+
span {
205+
}
206+
margin: auto;
207+
@include sofia-pro-medium;
208+
font-size: 20px;
209+
@media screen and (min-width: 768px) {
210+
font-size: 24px;
211+
line-height: 29px;
212+
margin-bottom: 15px;
213+
}
214+
line-height: 24px;
215+
margin-bottom: 10.6px;
216+
}
217+
img {
218+
height: 20px;
219+
width: 20px;
220+
margin-right: 7px;
221+
margin-bottom: -2px;
222+
@media screen and (min-width: 768px) {
223+
height: 30px;
224+
width: 30px;
225+
margin-bottom: -5px;
226+
}
227+
}
228+
.subtrack {
229+
display: flex;
230+
flex-direction: row;
231+
justify-content: space-between;
232+
align-items: center;
233+
width: 300px;
234+
height: 52px;
235+
border-bottom: 1px solid #f0f0f0;
236+
&.first {
237+
border-top: 1px solid #f0f0f0;
238+
}
239+
&:hover {
240+
background-color: #f0f0f0;
241+
}
242+
.name {
243+
align-self: center;
244+
flex-basis: 250px;
245+
align-text: left;
246+
overflow: hidden;
247+
text-overflow: ellipsis;
248+
white-space: nowrap;
249+
@include sofia-pro-medium;
250+
font-size: 14px;
251+
@media screen and (min-width: 768px) {
252+
font-size: 16px;
253+
}
254+
line-height: 18px;
255+
text-transform: uppercase;
256+
display: flex;
257+
flex-direction: row;
258+
justify-content: flex-start;
259+
margin-top: 12px;
260+
span {
261+
}
262+
}
263+
.ranking {
264+
margin: auto;
265+
margin-right: 15px;
266+
color: #7f7f7f;
267+
.number {
268+
text-align: center;
269+
@include sofia-pro-semi-bold;
270+
font-size: 13.4px;
271+
@media screen and (min-width: 768px) {
272+
font-size: 18px;
273+
}
274+
line-height: 16px;
275+
span.square {
276+
position: absolute;
277+
margin-left: 5px;
278+
width: 6px;
279+
height: 6px;
280+
}
281+
}
282+
.tag {
283+
text-transform: uppercase;
284+
margin: 10px auto 0px auto;
285+
@include sofia-pro-medium;
286+
font-size: 8.4px;
287+
@media screen and (min-width: 768px) {
288+
font-size: 10px;
289+
}
290+
line-height: 10px;
291+
color: $accent-gray;
292+
}
293+
}
294+
.arrow {
295+
display: flex;
296+
flex-direction: column;
297+
justify-content: center;
298+
height: 18px;
299+
}
300+
}
301+
.icon {
302+
width: 80px;
303+
height: 80px;
304+
margin: auto;
305+
}
306+
}
307+
}
308+
}

0 commit comments

Comments
 (0)