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

Commit a693861

Browse files
tladendotladendo
committed
Finished nav basics
1 parent 34ec745 commit a693861

File tree

4 files changed

+174
-112
lines changed

4 files changed

+174
-112
lines changed

‎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: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,24 @@
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",
415
ng-if="vm.categories[track].length > 0"
516
)
617

718
div(class="name")
8-
img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data.svg")
9-
img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop.svg")
10-
img(ng-if="track == 'DESIGN'", src="/images/ico-track-design.svg")
19+
img(ng-if="track == 'DATA_SCIENCE'", src="/images/ico-track-data-outline.svg")
20+
img(ng-if="track == 'DEVELOP'", src="/images/ico-track-develop-outline.svg")
21+
img(ng-if="track == 'DESIGN'", src="/images/ico-track-design-outline.svg")
1122
img(ng-if="track == 'COPILOT'", src="/images/ico-track-copilot.svg")
1223
span {{track | track | uppercase}}
1324

‎assets/css/profile/nav.scss

Lines changed: 158 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import 'topcoder-includes';
2+
@import '../partials/combined';
3+
14
.ngdialog.ngdialog-nav-theme {
25
padding-bottom: 160px;
36
padding-top: 160px;
@@ -19,12 +22,14 @@
1922
margin: 0 auto;
2023
max-width: 100%;
2124
padding: 1em;
22-
position: relative;
25+
position: absolute;
26+
top: 0;
2327
width: 100%;
2428
height: 100%;
2529
}
2630

2731
.ngdialog.ngdialog-nav-theme .ngdialog-close {
32+
display: none;
2833
border-radius: 5px;
2934
cursor: pointer;
3035
position: absolute;
@@ -133,3 +138,155 @@
133138
background: #e0e0e0;
134139
color: #777;
135140
}
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 30px;
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-extra-light;
208+
font-size: 20px;
209+
line-height: 24px;
210+
margin-bottom: 10.6px;
211+
}
212+
img {
213+
height: 20px;
214+
width: 20px;
215+
margin-right: 7px;
216+
margin-bottom: -2px;
217+
}
218+
.subtrack {
219+
display: flex;
220+
flex-direction: row;
221+
justify-content: space-between;
222+
align-items: center;
223+
width: 300px;
224+
height: 52px;
225+
border-bottom: 1px solid #f0f0f0;
226+
&.first {
227+
border-top: 1px solid #f0f0f0;
228+
}
229+
&:hover {
230+
background-color: #f0f0f0;
231+
}
232+
.name {
233+
margin-left: 25px;
234+
align-self: center;
235+
flex-basis: 250px;
236+
align-text: left;
237+
overflow: hidden;
238+
text-overflow: ellipsis;
239+
white-space: nowrap;
240+
@include sofia-pro-light;
241+
font-size: 14px;
242+
line-height: 18px;
243+
text-transform: uppercase;
244+
display: flex;
245+
flex-direction: row;
246+
justify-content: flex-start;
247+
margin-top: 12px;
248+
span {
249+
}
250+
}
251+
.ranking {
252+
margin: auto;
253+
margin-right: 15px;
254+
color: #7f7f7f;
255+
.number {
256+
text-align: center;
257+
@include sofia-pro-semi-bold;
258+
font-size: 13.4px;
259+
line-height: 16px;
260+
span.square {
261+
position: absolute;
262+
margin-left: 5px;
263+
width: 6px;
264+
height: 6px;
265+
}
266+
}
267+
.tag {
268+
text-transform: uppercase;
269+
margin: 10px auto 0px auto;
270+
@include sofia-pro-regular;
271+
font-size: 8.4px;
272+
line-height: 10px;
273+
color: #7f7f7f;
274+
}
275+
}
276+
.arrow {
277+
@include sofia-pro-extra-light;
278+
color: #cccccc;
279+
font-size: 18px;
280+
display: flex;
281+
flex-direction: column;
282+
justify-content: center;
283+
}
284+
}
285+
.icon {
286+
width: 80px;
287+
height: 80px;
288+
margin: auto;
289+
}
290+
}
291+
}
292+
}

‎assets/css/profile/subtrack.scss

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -529,112 +529,5 @@
529529
}
530530
}
531531
}
532-
.categoryNav {
533-
background: white;
534-
@include module-l;
535-
margin-left: auto;
536-
margin-right: auto;
537-
align-self: center;
538-
background: white;
539-
display: flex;
540-
flex-direction: column;
541-
justify-content: space-between;
542-
align-items: center;
543-
544-
.track {
545-
margin-top: 22.4px;
546-
display: flex;
547-
flex-direction: column;
548-
align-items: center;
549-
cursor: pointer;
550-
551-
.name {
552-
span {
553-
}
554-
margin: auto;
555-
@include sofia-pro-extra-light;
556-
font-size: 20px;
557-
line-height: 24px;
558-
margin-bottom: 10.6px;
559-
}
560-
img {
561-
height: 20px;
562-
width: 20px;
563-
margin-right: 7px;
564-
margin-bottom: -2px;
565-
}
566-
.subtrack {
567-
display: flex;
568-
flex-direction: row;
569-
justify-content: space-between;
570-
align-items: center;
571-
width: 300px;
572-
height: 52px;
573-
border-bottom: 1px solid #f0f0f0;
574-
&.first {
575-
border-top: 1px solid #f0f0f0;
576-
}
577-
&:hover {
578-
background-color: #f0f0f0;
579-
}
580-
.name {
581-
margin-left: 25px;
582-
align-self: center;
583-
flex-basis: 250px;
584-
align-text: left;
585-
overflow: hidden;
586-
text-overflow: ellipsis;
587-
white-space: nowrap;
588-
@include sofia-pro-light;
589-
font-size: 14px;
590-
line-height: 18px;
591-
text-transform: uppercase;
592-
display: flex;
593-
flex-direction: row;
594-
justify-content: flex-start;
595-
margin-top: 12px;
596-
span {
597-
}
598-
}
599-
.ranking {
600-
margin: auto;
601-
margin-right: 15px;
602-
color: #7f7f7f;
603-
.number {
604-
text-align: center;
605-
@include sofia-pro-semi-bold;
606-
font-size: 13.4px;
607-
line-height: 16px;
608-
span.square {
609-
position: absolute;
610-
margin-left: 5px;
611-
width: 6px;
612-
height: 6px;
613-
}
614-
}
615-
.tag {
616-
text-transform: uppercase;
617-
margin: 10px auto 0px auto;
618-
@include sofia-pro-regular;
619-
font-size: 8.4px;
620-
line-height: 10px;
621-
color: #7f7f7f;
622-
}
623-
}
624-
.arrow {
625-
@include sofia-pro-extra-light;
626-
color: #cccccc;
627-
font-size: 18px;
628-
display: flex;
629-
flex-direction: column;
630-
justify-content: center;
631-
}
632-
}
633-
.icon {
634-
width: 80px;
635-
height: 80px;
636-
margin: auto;
637-
}
638-
}
639-
}
532+
640533
}

0 commit comments

Comments
 (0)