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

Commit 1fddd50

Browse files
author
Victor George
committed
Profile fixes, buttons, and small refactors
1 parent f15ed98 commit 1fddd50

File tree

10 files changed

+112
-34
lines changed

10 files changed

+112
-34
lines changed

‎app/directives/profile-widget/profile-widget.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@
1313
h3.tenure(ng-if="profile.startMonth")
1414
| Member Since {{profile.startMonth}}
1515

16-
a.tc-btn.tc-btn-m.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile
16+
a.tc-btn.tc-btn-s.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile
1717

18-
.tracks-links
18+
.tracks-links(ng-if="profile.tracks && profile.tracks.length > 0")
1919
.tracks
2020
.track(ng-repeat="track in (profile.tracks)", ng-click="profileVm.scrollTo(track)")
2121
div(class="track-icon {{profileVm.imgMap[track]}}-icon")
2222
div
2323
.text {{track | role}}
2424

25-
p.description {{profile.description}}
25+
p.description(ng-if="profile.description") {{profile.description}}
2626

2727
.links
2828
a.badges.link(ng-click="profileVm.showBadges()", ng-show="profileVm.profile.badges.Achievements.length > 0")

‎app/profile/about/about.jade

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
.about-container
22

33
.profile-header-container(ng-cloak)
4-
.sticky-container(sticky media-query="min-width: 780px" use-placeholder="true" offset="10" confine="true" sticky-class="sticked")
4+
//- .sticky-container(sticky media-query="min-width: 780px" use-placeholder="true" offset="10" confine="true" sticky-class="sticked")
5+
profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
6+
7+
//- .sticky-container(bs-affix data-offset-top="10" data-offset-bottom="400")
8+
.sticky-container
59
profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
610

711

‎assets/css/directives/external-link-data.scss

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,23 +122,24 @@ external-accounts {
122122

123123
}
124124
}
125+
125126
@media (min-width: 768px) {
126127
.external-link-list {
127128
display: flex;
128129
flex-direction: row;
129130
flex-wrap: wrap;
130131
justify-content: flex-start;
131-
padding: 0px 75px;
132+
padding: 0px 60px;
132133

133134
.external-link-tile {
134135
border: 1px solid #f0f0f0;
135136
background-color: $gray-lightest;
136-
margin-left: 30px;
137+
margin-left: 15px;
137138
margin-top: 30px;
138139
margin-bottom: 0px;
139-
&:nth-child(3n+1) {
140-
margin-left: 0px;
141-
}
140+
// &:nth-child(3n+1) {
141+
// margin-left: 0px;
142+
// }
142143
width: 218px;
143144
height: 240px;
144145
display: flex;
@@ -209,6 +210,7 @@ external-accounts {
209210

210211
}
211212
}
213+
212214
.logo {
213215
padding: 10px;
214216
font-size: 50px;

‎assets/css/directives/profile-widget.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
margin-top: 5px;
2323
font-size: 12px;
2424
line-height: 14px;
25-
@include sofia-pro-medium;
25+
@include sofia-pro-light;
2626
color: $accent-gray;
2727
text-align: center;
2828
text-transform: uppercase;
@@ -107,14 +107,15 @@
107107
width: 44px;
108108
}
109109
.text {
110-
@include sofia-pro-medium;
110+
@include sofia-pro-light;
111111
color: $accent-gray;
112-
font-size: 12px;
113-
line-height: 14px;
112+
font-size: $label-small;
113+
line-height: 12px;
114114
margin-top: 11px;
115115
text-transform: uppercase;
116116
text-align: center;
117-
word-wrap: break-word;
117+
white-space: nowrap;
118+
// word-wrap: break-word;
118119
}
119120
}
120121
}
@@ -128,7 +129,7 @@
128129
align-items: center;
129130
justify-content: center;
130131
.link {
131-
@include sofia-pro-medium;
132+
@include sofia-pro-regular;
132133
font-size: 12px;
133134
line-height: 14px;
134135
text-decoration: none;

‎assets/css/directives/skill-tile.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ skill-tile {
2323
}
2424

2525
a:hover {
26-
text-decoration: none;
26+
text-decoration: none;
2727
}
2828

2929
a.hidden {
@@ -100,6 +100,7 @@ skill-tile {
100100
}
101101
}
102102
}
103+
103104
.settings-container {
104105
skill-tile {
105106
a:not(.hidden):hover {

‎assets/css/partials/_tc-buttons.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,12 @@ a.tc-btn, button.tc-btn {
143143
&.tc-btn-s {
144144
height: 30px;
145145
padding: 0 10px;
146-
line-height: 30px;
147-
font-size: 14px;
146+
line-height: 28px;
147+
font-size: 12px;
148+
font-weight: 500;
148149

149150
&:active {
150-
line-height: 31px;
151+
line-height: 29px;
151152
}
152153
}
153154

‎assets/css/partials/_tc-colors.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1+
// TOPCODER Brand palette
2+
// We should use those variables instead of color values;
3+
$primary: #0096FF;
4+
$primary-dark: #097DCE;
5+
$primary-dark2: darken($primary, 20%);
6+
$primary-light: #85CCFF;
7+
$primary-light2: lighten($primary, 70%);
8+
$primary-lighter: #F2FAFF;
9+
$primary-lighter2: lighten($primary, 90%);
10+
11+
12+
$error: #F31D3D;
13+
$error-dark: #C70E2A;
14+
$error-light: #FCBBC5;
15+
$error-lighter: #FEE8EC;
16+
17+
$success: #5BC921;
18+
$success-dark: #42A30F;
19+
$success-light: #CEEFBC;
20+
$success-lighter: #EFFAE9;
21+
22+
$accent-gray: #A3A3AE;
23+
$accent-gray-dark: #394146;
24+
25+
$black: #000;
26+
$white: #fff;
27+
$gray-darkest: #3D3D3D;
28+
$gray-darker: #7F7F7F;
29+
$gray-dark: #B7B7B7;
30+
$gray: #D1D3D4;
31+
$gray-light: #F0F0F0;
32+
$gray-lighter: #F6F6F6;
33+
$gray-lightest: #FCFCFC;
34+
35+
$level-5: #EF3A3A;
36+
$level-4: #FCD617;
37+
$level-3: #616BD5;
38+
$level-2: #69C329;
39+
$level-1: #9D9FA0;
40+
41+
$design: #21B2F1;
42+
$data_science: #FC9A00;
43+
$develop: #05C14F;
44+
$copilot: #7D939E;
45+
46+
47+
148
// Old colors that we should clean. Don't reference or use in new modules!
249

350
$light-black: #333;

‎assets/css/partials/_tc-mixins.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,33 +69,33 @@
6969

7070
@mixin label-description {
7171
font: {
72-
family: "Merriweather Sans", $font-family-sans-serif;
72+
family: "Merriweather Sans",Arial, Helvetica, sans-serif;
7373
weight: 400;
7474
size: 13px;
7575
}
7676
}
7777

7878
@mixin merriweather-sans-regular {
7979
font: {
80-
family: "Merriweather Sans", $font-family-sans-serif;
80+
family: "Merriweather Sans", Arial, Helvetica, sans-serif;
8181
weight: 400;
8282
}
8383
}
8484

8585
// body end;
8686

8787
@mixin sofia-pro-extra-light {
88-
font-family: 'Sofia Pro', Arial;
88+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
8989
font-weight: 200;
9090
}
9191

9292
@mixin sofia-pro-light {
93-
font-family: 'Sofia Pro', Arial;
93+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
9494
font-weight: 300;
9595
}
9696

9797
@mixin sofia-pro-regular {
98-
font-family: 'Sofia Pro', Arial;
98+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
9999
font-weight: 400;
100100
}
101101

@@ -105,17 +105,17 @@
105105
}
106106

107107
@mixin sofia-pro-medium {
108-
font-family: 'Sofia Pro', Arial;
108+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
109109
font-weight: 500;
110110
}
111111

112112
@mixin sofia-pro-semi-bold {
113-
font-family: 'Sofia Pro', Arial;
113+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
114114
font-weight: 600;
115115
}
116116

117117
@mixin sofia-pro-bold {
118-
font-family: 'Sofia Pro', Arial;
118+
font-family: 'Sofia Pro', Arial, Helvetica, sans-serif;
119119
font-weight: bold;
120120
}
121121

‎assets/css/partials/_tc-variables.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,10 @@ $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !def
66
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
77
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
88
$font-family-base: $font-family-sans-serif !default;
9+
10+
11+
// The label is showing in many places; particulary on data/stats
12+
$label-medium: 14px;
13+
$label-small: 11.5px;
14+
$label-xs: 10px;
15+
$label-large: 16px;

‎assets/css/profile/about.scss

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,20 @@
3535
max-width: 348px;
3636
margin: 0 auto;
3737
padding-left: 10px;
38+
display: block;
39+
position: relative;
3840

3941
}
4042

4143
// Sticky container
4244
.sticky-container {
4345
background-color: white;
4446
margin: 0 auto;
45-
47+
display: block;
4648
width: 100%;
4749
padding: 30px 34px;
4850
top: 0;
49-
max-height: 680px;
50-
margin: 0;
51+
margin: 0 auto;
5152
}
5253

5354
.sticky.sticked {
@@ -94,17 +95,18 @@
9495
width: 100%;
9596
margin-left: auto;
9697
margin-bottom: 15px;
97-
margin-right: auto;
98+
margin-right: 15px;
9899

99100
.skill {
100101
margin-top: 20px;
102+
margin-right: 15px;
101103

102104
+ .skill {
103105
margin-left: 15px;
104106
}
105107

106108
&:nth-child(3n + 1) {
107-
margin-left: 0px;
109+
// margin-left: 0px;
108110
}
109111
}
110112
}
@@ -397,17 +399,30 @@
397399
display: flex;
398400
flex-direction: column;
399401
padding-bottom: 40px;
402+
400403
.list {
401404
display: flex;
402405
flex-direction: row;
403406
width: 100%;
404407
padding-left: 30px;
405408
padding-right: 30px;
406409
margin: -20px auto 50px auto;
410+
407411
.skill {
408412
margin-top: 50px;
409-
margin-right: 30px;
413+
margin-right: 15px;
414+
margin-left: 15px;
415+
}
416+
417+
+ .skill {
418+
margin-left: 15px;
410419
}
420+
421+
&:nth-child(3n + 1) {
422+
margin-left: 15px !important;
423+
border: 1px solid lime;
424+
}
425+
411426
.leftButton, .rightButton {
412427
height: 100px;
413428
display: flex;
@@ -417,8 +432,8 @@
417432
cursor: pointer;
418433
}
419434
}
420-
421435
}
436+
422437
.empty-state {
423438
.action-text {
424439
font-size: 28px;

0 commit comments

Comments
 (0)