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

Commit c5a1ded

Browse files
author
Nick Litwin
committed
2 parents 9325917 + 7cad25e commit c5a1ded

File tree

6 files changed

+322
-109
lines changed

6 files changed

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

0 commit comments

Comments
 (0)