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

Commit 3d8ce21

Browse files
author
Victor George
committedOct 22, 2015
Merge pull request #435 from appirio-tech/profile-layout-fixes
Profile layout fixes: Parth approved
2 parents f2115d7 + 6506f31 commit 3d8ce21

File tree

16 files changed

+443
-239
lines changed

16 files changed

+443
-239
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/directives/tc-sticky/tc-sticky.directive.jade

Whitespace-only changes.

‎app/directives/tc-sticky/tc-sticky.directive.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
2+
(function() {
3+
'use strict';
4+
5+
angular.module('tcUIComponents').directive('tcSticky', ['CONSTANTS', '$window', tcSticky]);
6+
7+
function tcSticky(CONSTANTS, $window) {
8+
return {
9+
restrict: 'A',
10+
link: function(scope, element) {
11+
scope.width = element.prop('offsetWidth');
12+
var elWidth = scope.width + 'px',
13+
elChild = angular.element(element[0].querySelector(':first-child'));
14+
// elChild.css('width', elWidth);
15+
angular.element($window).bind("scroll", function() {
16+
var affixElement = document.getElementById('affix'),
17+
xPosition = 0,
18+
yPosition = 0;
19+
function getPosition(element) {
20+
while(element) {
21+
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
22+
element = element.offsetParent;
23+
}
24+
}
25+
getPosition(affixElement);
26+
var height = angular.element(affixElement).prop('offsetHeight');
27+
var top = angular.element(affixElement).prop('offsetTop');
28+
// console.log(yPosition);
29+
// console.log(angular.element(document).scrollTop);
30+
// console.log(elChild[0].clientTop);
31+
if (yPosition >= 0 || $window.innerHeight <= elChild[0].offsetHeight || $window.innerWidth < 768) {
32+
elChild.removeClass('affix affix-bottom');
33+
} else if ( yPosition < 0) {
34+
console.log(top + height);
35+
console.log(yPosition);
36+
console.log(top + height + yPosition);
37+
if (top + height + yPosition < 800) {
38+
elChild.addClass('affix-bottom');
39+
elChild.removeClass('affix');
40+
} else {
41+
elChild.removeClass('affix-bottom');
42+
elChild.addClass('affix');
43+
}
44+
45+
};
46+
});
47+
}
48+
};
49+
}
50+
})();

‎app/index.jade

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ html
6060
link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css")
6161
link(rel="stylesheet", href="assets/css/directives/toggle-password.css")
6262
link(rel="stylesheet", href="assets/css/directives/tc-tabs.css")
63+
link(rel="stylesheet", href="assets/css/directives/tc-sticky.css")
6364
link(rel="stylesheet", href="assets/css/directives/tc-section.css")
6465
link(rel="stylesheet", href="assets/css/directives/tc-paginator.css")
6566
link(rel="stylesheet", href="assets/css/directives/tc-endless-paginator.css")
@@ -145,6 +146,8 @@ html
145146
script(src='../bower_components/restangular/dist/restangular.js')
146147
script(src='../bower_components/angular-touch/angular-touch.js')
147148
script(src='../bower_components/angular-carousel/dist/angular-carousel.js')
149+
script(src='../bower_components/matchmedia/matchMedia.js')
150+
script(src='../bower_components/ngSticky/lib/sticky.js')
148151
//- endbower
149152
//- inject:nonBowerScripts
150153
script(src="/scripts/auth0-angular.js")
@@ -193,6 +196,7 @@ html
193196
script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js")
194197
script(src="directives/tc-paginator/tc-paginator.directive.js")
195198
script(src="directives/tc-section/tc-section.directive.js")
199+
script(src="directives/tc-sticky/tc-sticky.directive.js")
196200
script(src="directives/tc-tabs/tc-tabs.directive.js")
197201
script(src="directives/tc-transclude.directive.js")
198202
script(src="directives/track-toggle/track-toggle.directive.js")

‎app/profile/about/about.jade

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
.about-container
2-
.profile-header-container(ng-cloak)
3-
profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
2+
3+
.profile-header-container(ng-cloak,id="affix", tc-sticky)
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")
46
7+
//- .sticky-container(bs-affix data-offset-top="10" data-offset-bottom="400")
8+
.sticky-container()
9+
profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm")
10+
11+
512
.profile-about-container
613

714
#skills

‎app/topcoder.module.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
'toaster',
3131
'angular-intro',
3232
'ngMessages',
33-
'angular-carousel'
33+
'angular-carousel',
34+
'sticky'
3435
];
3536

3637
angular.module('topcoder', dependencies).run(appRun);

‎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: 10 additions & 7 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;
@@ -86,17 +86,19 @@
8686
flex-direction: column;
8787
align-items: center;
8888
margin-top: 40px;
89+
width: 100%;
90+
8991

9092
.tracks {
9193
display: flex;
9294
flex-direction: row;
9395
justify-content: center;
94-
overflow-x: auto;
95-
overflow-y: hidden;
96+
9697
.track {
9798
cursor: pointer;
9899
display: flex;
99100
width: 100%;
101+
flex-wrap: wrap;
100102
flex-direction: column;
101103
align-items: center;
102104
+ .track {
@@ -107,13 +109,14 @@
107109
width: 44px;
108110
}
109111
.text {
110-
@include sofia-pro-medium;
112+
@include sofia-pro-light;
111113
color: $accent-gray;
112-
font-size: 12px;
113-
line-height: 14px;
114+
font-size: $label-small;
115+
line-height: 12px;
114116
margin-top: 11px;
115117
text-transform: uppercase;
116118
text-align: center;
119+
// white-space: nowrap;
117120
word-wrap: break-word;
118121
}
119122
}
@@ -128,7 +131,7 @@
128131
align-items: center;
129132
justify-content: center;
130133
.link {
131-
@include sofia-pro-medium;
134+
@include sofia-pro-regular;
132135
font-size: 12px;
133136
line-height: 14px;
134137
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/directives/tc-sticky.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// .affix {
2+
// position:fixed !important;
3+
// top: 0; //Change this value to match your needs;
4+
// z-index: 10;
5+
// }

‎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;

0 commit comments

Comments
 (0)