diff --git a/app/directives/profile-widget/profile-widget.jade b/app/directives/profile-widget/profile-widget.jade index 7c58be4f2..6f3dbe68b 100644 --- a/app/directives/profile-widget/profile-widget.jade +++ b/app/directives/profile-widget/profile-widget.jade @@ -13,16 +13,16 @@ h3.tenure(ng-if="profile.startMonth") | Member Since {{profile.startMonth}} - a.tc-btn.tc-btn-m.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile + a.tc-btn.tc-btn-s.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile - .tracks-links + .tracks-links(ng-if="profile.tracks && profile.tracks.length > 0") .tracks .track(ng-repeat="track in (profile.tracks)", ng-click="profileVm.scrollTo(track)") div(class="track-icon {{profileVm.imgMap[track]}}-icon") div .text {{track | role}} - p.description {{profile.description}} + p.description(ng-if="profile.description") {{profile.description}} .links a.badges.link(ng-click="profileVm.showBadges()", ng-show="profileVm.profile.badges.Achievements.length > 0") diff --git a/app/directives/tc-sticky/tc-sticky.directive.jade b/app/directives/tc-sticky/tc-sticky.directive.jade new file mode 100644 index 000000000..e69de29bb diff --git a/app/directives/tc-sticky/tc-sticky.directive.js b/app/directives/tc-sticky/tc-sticky.directive.js new file mode 100644 index 000000000..1811e1e68 --- /dev/null +++ b/app/directives/tc-sticky/tc-sticky.directive.js @@ -0,0 +1,50 @@ + +(function() { + 'use strict'; + + angular.module('tcUIComponents').directive('tcSticky', ['CONSTANTS', '$window', tcSticky]); + + function tcSticky(CONSTANTS, $window) { + return { + restrict: 'A', + link: function(scope, element) { + scope.width = element.prop('offsetWidth'); + var elWidth = scope.width + 'px', + elChild = angular.element(element[0].querySelector(':first-child')); + // elChild.css('width', elWidth); + angular.element($window).bind("scroll", function() { + var affixElement = document.getElementById('affix'), + xPosition = 0, + yPosition = 0; + function getPosition(element) { + while(element) { + yPosition += (element.offsetTop - element.scrollTop + element.clientTop); + element = element.offsetParent; + } + } + getPosition(affixElement); + var height = angular.element(affixElement).prop('offsetHeight'); + var top = angular.element(affixElement).prop('offsetTop'); + // console.log(yPosition); + // console.log(angular.element(document).scrollTop); + // console.log(elChild[0].clientTop); + if (yPosition >= 0 || $window.innerHeight <= elChild[0].offsetHeight || $window.innerWidth < 768) { + elChild.removeClass('affix affix-bottom'); + } else if ( yPosition < 0) { + console.log(top + height); + console.log(yPosition); + console.log(top + height + yPosition); + if (top + height + yPosition < 800) { + elChild.addClass('affix-bottom'); + elChild.removeClass('affix'); + } else { + elChild.removeClass('affix-bottom'); + elChild.addClass('affix'); + } + + }; + }); + } + }; + } +})(); \ No newline at end of file diff --git a/app/index.jade b/app/index.jade index dd56b7b54..07f2815bf 100644 --- a/app/index.jade +++ b/app/index.jade @@ -60,6 +60,7 @@ html link(rel="stylesheet", href="assets/css/directives/toggle-password-with-tips.css") link(rel="stylesheet", href="assets/css/directives/toggle-password.css") link(rel="stylesheet", href="assets/css/directives/tc-tabs.css") + link(rel="stylesheet", href="assets/css/directives/tc-sticky.css") link(rel="stylesheet", href="assets/css/directives/tc-section.css") link(rel="stylesheet", href="assets/css/directives/tc-paginator.css") link(rel="stylesheet", href="assets/css/directives/tc-endless-paginator.css") @@ -145,6 +146,8 @@ html script(src='../bower_components/restangular/dist/restangular.js') script(src='../bower_components/angular-touch/angular-touch.js') script(src='../bower_components/angular-carousel/dist/angular-carousel.js') + script(src='../bower_components/matchmedia/matchMedia.js') + script(src='../bower_components/ngSticky/lib/sticky.js') //- endbower //- inject:nonBowerScripts script(src="/scripts/auth0-angular.js") @@ -193,6 +196,7 @@ html script(src="directives/tc-endless-paginator/tc-endless-paginator.directive.js") script(src="directives/tc-paginator/tc-paginator.directive.js") script(src="directives/tc-section/tc-section.directive.js") + script(src="directives/tc-sticky/tc-sticky.directive.js") script(src="directives/tc-tabs/tc-tabs.directive.js") script(src="directives/tc-transclude.directive.js") script(src="directives/track-toggle/track-toggle.directive.js") diff --git a/app/profile/about/about.jade b/app/profile/about/about.jade index 776a94f6c..8d7392365 100644 --- a/app/profile/about/about.jade +++ b/app/profile/about/about.jade @@ -1,7 +1,14 @@ .about-container - .profile-header-container(ng-cloak) - profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm") + + .profile-header-container(ng-cloak,id="affix", tc-sticky) + //- .sticky-container(sticky media-query="min-width: 780px" use-placeholder="true" offset="10" confine="true" sticky-class="sticked") + profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm") + //- .sticky-container(bs-affix data-offset-top="10" data-offset-bottom="400") + .sticky-container() + profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm") + + .profile-about-container #skills diff --git a/app/topcoder.module.js b/app/topcoder.module.js index f6fab2b12..2d8de97ec 100644 --- a/app/topcoder.module.js +++ b/app/topcoder.module.js @@ -30,7 +30,8 @@ 'toaster', 'angular-intro', 'ngMessages', - 'angular-carousel' + 'angular-carousel', + 'sticky' ]; angular.module('topcoder', dependencies).run(appRun); diff --git a/assets/css/directives/external-link-data.scss b/assets/css/directives/external-link-data.scss index 0d2ab2a15..c3e86a375 100644 --- a/assets/css/directives/external-link-data.scss +++ b/assets/css/directives/external-link-data.scss @@ -122,23 +122,24 @@ external-accounts { } } + @media (min-width: 768px) { .external-link-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; - padding: 0px 75px; + padding: 0px 60px; .external-link-tile { border: 1px solid #f0f0f0; background-color: $gray-lightest; - margin-left: 30px; + margin-left: 15px; margin-top: 30px; margin-bottom: 0px; - &:nth-child(3n+1) { - margin-left: 0px; - } + // &:nth-child(3n+1) { + // margin-left: 0px; + // } width: 218px; height: 240px; display: flex; @@ -209,6 +210,7 @@ external-accounts { } } + .logo { padding: 10px; font-size: 50px; diff --git a/assets/css/directives/profile-widget.scss b/assets/css/directives/profile-widget.scss index 1bd2dc3be..9eb48dc96 100644 --- a/assets/css/directives/profile-widget.scss +++ b/assets/css/directives/profile-widget.scss @@ -22,7 +22,7 @@ margin-top: 5px; font-size: 12px; line-height: 14px; - @include sofia-pro-medium; + @include sofia-pro-light; color: $accent-gray; text-align: center; text-transform: uppercase; @@ -86,17 +86,19 @@ flex-direction: column; align-items: center; margin-top: 40px; + width: 100%; + .tracks { display: flex; flex-direction: row; justify-content: center; - overflow-x: auto; - overflow-y: hidden; + .track { cursor: pointer; display: flex; width: 100%; + flex-wrap: wrap; flex-direction: column; align-items: center; + .track { @@ -107,13 +109,14 @@ width: 44px; } .text { - @include sofia-pro-medium; + @include sofia-pro-light; color: $accent-gray; - font-size: 12px; - line-height: 14px; + font-size: $label-small; + line-height: 12px; margin-top: 11px; text-transform: uppercase; text-align: center; + // white-space: nowrap; word-wrap: break-word; } } @@ -128,7 +131,7 @@ align-items: center; justify-content: center; .link { - @include sofia-pro-medium; + @include sofia-pro-regular; font-size: 12px; line-height: 14px; text-decoration: none; diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss index 310e5b14f..e881c4c09 100644 --- a/assets/css/directives/skill-tile.scss +++ b/assets/css/directives/skill-tile.scss @@ -23,7 +23,7 @@ skill-tile { } a:hover { - text-decoration: none; + text-decoration: none; } a.hidden { @@ -100,6 +100,7 @@ skill-tile { } } } + .settings-container { skill-tile { a:not(.hidden):hover { diff --git a/assets/css/directives/tc-sticky.scss b/assets/css/directives/tc-sticky.scss new file mode 100644 index 000000000..719b90090 --- /dev/null +++ b/assets/css/directives/tc-sticky.scss @@ -0,0 +1,5 @@ +// .affix { +// position:fixed !important; +// top: 0; //Change this value to match your needs; +// z-index: 10; +// } \ No newline at end of file diff --git a/assets/css/partials/_tc-buttons.scss b/assets/css/partials/_tc-buttons.scss index dcececc31..4433726c9 100644 --- a/assets/css/partials/_tc-buttons.scss +++ b/assets/css/partials/_tc-buttons.scss @@ -143,11 +143,12 @@ a.tc-btn, button.tc-btn { &.tc-btn-s { height: 30px; padding: 0 10px; - line-height: 30px; - font-size: 14px; + line-height: 28px; + font-size: 12px; + font-weight: 500; &:active { - line-height: 31px; + line-height: 29px; } } diff --git a/assets/css/partials/_tc-colors.scss b/assets/css/partials/_tc-colors.scss index 217a0d1c1..b569796c4 100644 --- a/assets/css/partials/_tc-colors.scss +++ b/assets/css/partials/_tc-colors.scss @@ -1,3 +1,50 @@ +// TOPCODER Brand palette +// We should use those variables instead of color values; +$primary: #0096FF; +$primary-dark: #097DCE; +$primary-dark2: darken($primary, 20%); +$primary-light: #85CCFF; +$primary-light2: lighten($primary, 70%); +$primary-lighter: #F2FAFF; +$primary-lighter2: lighten($primary, 90%); + + +$error: #F31D3D; +$error-dark: #C70E2A; +$error-light: #FCBBC5; +$error-lighter: #FEE8EC; + +$success: #5BC921; +$success-dark: #42A30F; +$success-light: #CEEFBC; +$success-lighter: #EFFAE9; + +$accent-gray: #A3A3AE; +$accent-gray-dark: #394146; + +$black: #000; +$white: #fff; +$gray-darkest: #3D3D3D; +$gray-darker: #7F7F7F; +$gray-dark: #B7B7B7; +$gray: #D1D3D4; +$gray-light: #F0F0F0; +$gray-lighter: #F6F6F6; +$gray-lightest: #FCFCFC; + +$level-5: #EF3A3A; +$level-4: #FCD617; +$level-3: #616BD5; +$level-2: #69C329; +$level-1: #9D9FA0; + +$design: #21B2F1; +$data_science: #FC9A00; +$develop: #05C14F; +$copilot: #7D939E; + + + // Old colors that we should clean. Don't reference or use in new modules! $light-black: #333; diff --git a/assets/css/partials/_tc-mixins.scss b/assets/css/partials/_tc-mixins.scss index 3fea02da0..e08d6540d 100644 --- a/assets/css/partials/_tc-mixins.scss +++ b/assets/css/partials/_tc-mixins.scss @@ -69,7 +69,7 @@ @mixin label-description { font: { - family: "Merriweather Sans", $font-family-sans-serif; + family: "Merriweather Sans",Arial, Helvetica, sans-serif; weight: 400; size: 13px; } @@ -77,7 +77,7 @@ @mixin merriweather-sans-regular { font: { - family: "Merriweather Sans", $font-family-sans-serif; + family: "Merriweather Sans", Arial, Helvetica, sans-serif; weight: 400; } } @@ -85,17 +85,17 @@ // body end; @mixin sofia-pro-extra-light { - font-family: 'Sofia Pro', Arial; + font-family: 'Sofia Pro', Arial, Helvetica, sans-serif; font-weight: 200; } @mixin sofia-pro-light { - font-family: 'Sofia Pro', Arial; + font-family: 'Sofia Pro', Arial, Helvetica, sans-serif; font-weight: 300; } @mixin sofia-pro-regular { - font-family: 'Sofia Pro', Arial; + font-family: 'Sofia Pro', Arial, Helvetica, sans-serif; font-weight: 400; } @@ -105,17 +105,17 @@ } @mixin sofia-pro-medium { - font-family: 'Sofia Pro', Arial; + font-family: 'Sofia Pro', Arial, Helvetica, sans-serif; font-weight: 500; } @mixin sofia-pro-semi-bold { - font-family: 'Sofia Pro', Arial; + font-family: 'Sofia Pro', Arial, Helvetica, sans-serif; font-weight: 600; } @mixin sofia-pro-bold { - font-family: 'Sofia Pro', Arial; + font-family: 'Sofia Pro', Arial, Helvetica, sans-serif; font-weight: bold; } diff --git a/assets/css/partials/_tc-variables.scss b/assets/css/partials/_tc-variables.scss index 00e3af5ae..874e37f08 100644 --- a/assets/css/partials/_tc-variables.scss +++ b/assets/css/partials/_tc-variables.scss @@ -6,3 +6,10 @@ $font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !def $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; + + +// The label is showing in many places; particulary on data/stats +$label-medium: 14px; +$label-small: 11.5px; +$label-xs: 10px; +$label-large: 16px; diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss index b19b5f0d9..37a164487 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -1,30 +1,89 @@ @import 'topcoder-includes'; @import '../partials/combined'; +// Main container +// This is the flex container; we convert it to 2 column layout on >767px width .about-container { display: flex; - flex-flow: row wrap; + flex-direction: column; + @include module-l; background-color: transparent; padding-top: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; + @media (min-width: 768px) { + padding-top: 30px; + flex-direction: row; + } } +// Both containers are flex column, then flex fows on >767px +// User data container .profile-header-container { - padding: 30px 34px; - background: white; + background: transparent; width: 100%; - max-height: 640px; + max-width: 100%; margin-bottom: 5px; + display: flex; + position: relative; + margin-left: 10px; + + @media (min-width: 768px) { + max-width: 368px; + margin: 0 auto; + padding-right: 10px; + display: block; + position: relative; + } + + // Sticky container + .sticky-container { + background-color: white; + margin: 0 auto; + padding: 0; + display: flex; + width: auto; + max-width: auto; + + @media (min-width: 768px){ + display: block; + box-sizing: border-box; + width: 368px; + margin: 0; + } + padding: 30px 34px; + margin: 0 10px; + transition: .2s all; + } + + .sticky-container.affix { + position:fixed; + top: 10px; + bottom: auto; + z-index: 10; + } + + .sticky-container.affix-bottom { + position: absolute; + bottom: 0; + z-index: 10; + top: auto; + + } } +// Where we show the info .profile-about-container { display: flex; flex-direction: column; width: 100%; - max-width: 883px; + // max-width: 883px; + padding: 0 10px; + margin: auto; + @media (min-width: 768px) { + } .empty-state { a.link-button { @@ -40,6 +99,12 @@ flex-direction: column; align-items: center; justify-content: center; + align-self: center; + background: white; + text-align: center; + margin-left: auto; + margin-right: auto; + .list { display: flex; flex-direction: row; @@ -48,22 +113,18 @@ width: 100%; margin-left: auto; margin-bottom: 15px; - margin-right: auto; + margin-right: 15px; .skill { margin-top: 20px; - &:hover { - cursor: default; - } - a:hover { - cursor: default; - } + margin-right: 15px; + .skill { margin-left: 15px; } + &:nth-child(3n + 1) { - margin-left: 0px; + // margin-left: 0px; } } } @@ -78,12 +139,7 @@ -webkit-transition: all 0.5s; } - align-self: center; - background: white; - text-align: center; - - margin-left: auto; - margin-right: auto; + h1 { font-size: 25px; margin: auto; @@ -93,6 +149,7 @@ width: 100%; padding: 30px; padding-top: 5px; + .action-text { text-transform: uppercase; margin-top: 32px; @@ -100,21 +157,26 @@ font-size: 18px; line-height: 24px; } + .description { @include source-sans-light; font-size: 15px; line-height: 22px; } + button.link-button { margin-top: 30px; } + .list { - .skill { - width: 130px; - } padding: 10px; margin: 20px auto; + + .skill { + width: 130px; + } } + } } @@ -143,25 +205,27 @@ display: flex; flex-direction: column; align-items: center; - pointer: default; + cursor: pointer; &.noclick { cursor: default; } .name { - margin: auto; - @include sofia-pro-extra-light; + margin: auto; font-size: 20px; line-height: 24px; margin-bottom: 10.6px; + @include sofia-pro-extra-light; } + img { height: 20px; width: 20px; margin-right: 7px; margin-bottom: -2px; } + .subtrack { text-decoration: none; color: black; @@ -172,12 +236,15 @@ width: 300px; height: 52px; border-bottom: 1px solid #f0f0f0; + &.first { border-top: 1px solid #f0f0f0; } + &:hover { background-color: #f0f0f0; } + .name { margin-left: 15px; align-self: center; @@ -186,7 +253,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - @include sofia-pro-light; font-size: 14px; line-height: 18px; text-transform: uppercase; @@ -194,9 +260,13 @@ flex-direction: row; justify-content: flex-start; margin-top: 12px; + @include sofia-pro-light; + span { } + } + .ranking { margin: auto; margin-right: 15px; @@ -205,10 +275,12 @@ flex-direction: column; align-items: flex-end; @include sofia-pro-medium; + .number { text-align: center; font-size: 13.4px; line-height: 16px; + span.square { position: absolute; margin-left: 5px; @@ -216,6 +288,7 @@ height: 6px; } } + .tag { text-transform: uppercase; margin: 5px auto 0px auto; @@ -225,6 +298,7 @@ color: #7f7f7f; } } + .arrow { @include sofia-pro-extra-light; color: $accent-gray; @@ -234,6 +308,7 @@ justify-content: center; } } + .icon { width: 80px; height: 80px; @@ -241,21 +316,25 @@ } } + .empty-state { display: flex; flex-direction: column; align-items: center; + .action-text { margin-top: 32px; @include sofia-pro-extra-light; font-size: 18px; line-height: 24px; } + .tracks { display: flex; flex-direction: row; justify-content: space-between; width: 50%; + .track { .text { margin-top: 15px; @@ -263,6 +342,7 @@ } } } + .description { margin-top: 50px; @include source-sans-regular; @@ -270,9 +350,11 @@ line-height: 22px; width: 60%; } + button.link-button { margin-top: 20px; } + padding-bottom: 40px; } } @@ -323,218 +405,211 @@ } } -@media (min-width: 900px) { - .about-container { - padding-top: 30px; - } -} @media (min-width: 768px) { -.about-container { - padding-top: 30px; -} -.profile-header-container { - max-width: 348px; - margin-right: 10px; - margin-bottom: 0px; -} + .profile-about-container { -.profile-about-container { - - .activity { - font-size: 24px; - line-height: 30px; - } + .activity { + font-size: 24px; + line-height: 30px; + } - .skills { - display: flex; - flex-direction: column; - padding-bottom: 40px; - .list { + .skills { display: flex; - flex-direction: row; - width: 100%; - padding-left: 30px; - padding-right: 30px; - margin: -20px auto 50px auto; - .skill { - margin-top: 50px; - margin-right: 30px; - &:nth-child(3n + 1) { + flex-direction: column; + padding-bottom: 40px; + + .list { + display: flex; + flex-direction: row; + width: 100%; + padding-left: 30px; + padding-right: 30px; + margin: -20px auto 50px auto; + + .skill { + margin-top: 50px; + margin-right: 15px; margin-left: 15px; } - } - .leftButton, .rightButton { - height: 100px; - display: flex; - flex-direction: column; - justify-content: center; - &:hover { - cursor: pointer; + + + .skill { + margin-left: 15px; + } + + &:nth-child(3n + 1) { + margin-left: 15px !important; + border: 1px solid lime; + } + + .leftButton, .rightButton { + height: 100px; + display: flex; + flex-direction: column; + justify-content: center; + &:hover { + cursor: pointer; + } } } - } - .empty-state { - .action-text { - font-size: 28px; - line-height: 34px; - } - .description { - @include source-sans-light; - font-size: 22px; - line-height: 32px; - width: 60%; - margin-left: auto; - margin-right: auto; - } - button.link-button { - margin-top: 30px; - } - .list { - .skill { - width: 130px; + .empty-state { + .action-text { + font-size: 28px; + line-height: 34px; + } + .description { + @include source-sans-light; + font-size: 22px; + line-height: 32px; + width: 60%; + margin-left: auto; + margin-right: auto; + } + button.link-button { + margin-top: 30px; + } + .list { + .skill { + width: 130px; + } + padding: 10px; + margin: 20px auto; } - padding: 10px; - margin: 20px auto; } - } - - } - .categories { - margin-top: 1px; - padding-bottom: 40px; - padding-top: 0px; - .activity { - font-size: 28px; - line-height: 34px; - @include sofia-pro-bold; - text-transform: uppercase; } - .track { - width: 100%; - padding-top: 30px; - .name { - img { - height: 30px; - width: 30px; - margin-right: 7px; - margin-bottom: -4px; - } - background-size: 30px; - background-position: 16px 4px; - font-weight: 200; - font-size: 24px; - line-height: 30px; - margin-bottom: 30px; - margin-top: 0px; - @include sofia-pro-medium; + .categories { + margin-top: 1px; + padding-bottom: 40px; + padding-top: 0px; + .activity { + font-size: 28px; + line-height: 34px; + @include sofia-pro-bold; + text-transform: uppercase; } - .subtrack { - align-items: center; - width: 75%; - height: 60px; + .track { + width: 100%; + cursor: pointer; + padding-top: 30px; .name { - - font-size: 18px; - flex-basis: 350px; - line-height: 24px; - margin-top: 17px; - margin-bottom: 20px; + img { + height: 30px; + width: 30px; + margin-right: 7px; + margin-bottom: -4px; + } + background-size: 30px; + background-position: 16px 4px; + font-weight: 200; + font-size: 24px; + line-height: 30px; + margin-bottom: 30px; + margin-top: 0px; + @include sofia-pro-medium; } - .ranking { - display: flex; - flex-direction: column; - align-items: flex-end; - .number { + + .subtrack { + align-items: center; + width: 75%; + height: 60px; + .name { + font-size: 18px; - line-height: 23px; + flex-basis: 350px; + line-height: 24px; + margin-top: 17px; + margin-bottom: 20px; } - .tag { - margin-top: 2px; - font-size: 12px; - line-height: 14px; - color: #7f7f7f; + .ranking { + display: flex; + flex-direction: column; + align-items: flex-end; + .number { + font-size: 18px; + line-height: 23px; + } + .tag { + margin-top: 2px; + font-size: 12px; + line-height: 14px; + color: #7f7f7f; + } + } + .arrow { + color: #cccccc; + height: 15px; + margin-right: 10px; } } - .arrow { - color: #cccccc; - height: 15px; - margin-right: 10px; + .icon { + width: 80px; + height: 80px; + margin: auto; } - } - .icon { - width: 80px; - height: 80px; - margin: auto; - } - } - .empty-state { - .action-text { - font-size: 28px; - line-height: 34px; } - .description { - @include source-sans-light; - font-size: 22px; - line-height: 32px; - width: 60%; - margin-left: auto; - margin-right: auto; - } - button.link-button { - margin-top: 30px; - } - .list { - .skill { - width: 130px; + .empty-state { + .action-text { + font-size: 28px; + line-height: 34px; + } + .description { + @include source-sans-light; + font-size: 22px; + line-height: 32px; + width: 60%; + margin-left: auto; + margin-right: auto; + } + button.link-button { + margin-top: 30px; + } + .list { + .skill { + width: 130px; + } + padding: 10px; + margin: 20px auto; } - padding: 10px; - margin: 20px auto; } - } - } - - .external-links { - margin-top: 1px; - padding-top: 30px; - padding-bottom: 40px; - .activity { - margin-bottom: 0px; - text-transform: uppercase; - } - .empty-state { - .action-text { - font-size: 28px; - line-height: 34px; - } - .description { - @include source-sans-light; - font-size: 22px; - line-height: 32px; - width: 60%; - margin-left: auto; - margin-right: auto; } - button.link-button { - margin-top: 30px; - } - .list { - .skill { - width: 130px; + + .external-links { + margin-top: 1px; + padding-top: 30px; + padding-bottom: 40px; + .activity { + margin-bottom: 0px; + text-transform: uppercase; + } + .empty-state { + .action-text { + font-size: 28px; + line-height: 34px; + } + .description { + @include source-sans-light; + font-size: 22px; + line-height: 32px; + width: 60%; + margin-left: auto; + margin-right: auto; + } + button.link-button { + margin-top: 30px; + } + .list { + .skill { + width: 130px; + } + padding: 10px; + margin: 20px auto; + } } - padding: 10px; - margin: 20px auto; } } - } - - -} - - } diff --git a/bower.json b/bower.json index d63fcb82c..8d30fdc72 100644 --- a/bower.json +++ b/bower.json @@ -47,7 +47,8 @@ "ng-notifications-bar": "~0.0.15", "ngDialog": "0.5.1", "restangular": "~1.5.1", - "angular-carousel": "~1.0.1" + "angular-carousel": "~1.0.1", + "ngSticky": "~1.8.4" }, "devDependencies": { "bardjs": "~0.1.4",