From 9bd7c249c58237d86220d78fc3eb1bc273d6ef31 Mon Sep 17 00:00:00 2001 From: Victor George Date: Wed, 21 Oct 2015 18:18:21 -0700 Subject: [PATCH 1/5] partially working sticky, have to fix bottoming out; --- app/index.jade | 2 + app/profile/about/about.jade | 4 +- app/topcoder.module.js | 3 +- assets/css/profile/about.scss | 431 +++++++++++++++++++--------------- bower.json | 3 +- 5 files changed, 245 insertions(+), 198 deletions(-) diff --git a/app/index.jade b/app/index.jade index 4b3ed2d15..ebe7294b8 100644 --- a/app/index.jade +++ b/app/index.jade @@ -143,6 +143,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") diff --git a/app/profile/about/about.jade b/app/profile/about/about.jade index 776a94f6c..dbbf47ce8 100644 --- a/app/profile/about/about.jade +++ b/app/profile/about/about.jade @@ -1,7 +1,9 @@ .about-container - .profile-header-container(ng-cloak) + + .profile-header-container(sticky media-query="min-width: 768px" use-placeholder="false" offset="10px" bottom-class="bottom-footer", ng-cloak) 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 f5fee601d..f4f1a6126 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/profile/about.scss b/assets/css/profile/about.scss index 3c342ecc1..f9e8a27da 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -1,8 +1,11 @@ @import 'topcoder-includes'; @import '../partials/combined'; +// Main container .about-container { display: flex; + display: block; + position: relative; flex-flow: row wrap; @include module-l; background-color: transparent; @@ -10,21 +13,49 @@ margin-left: auto; margin-right: auto; margin-top: 0px; + @media (min-width: 768px) { + padding-top: 30px; + } } +// User data container .profile-header-container { padding: 30px 34px; background: white; width: 100%; - max-height: 640px; + // max-height: 640px; margin-bottom: 5px; + display: block; + @media (min-width: 768px) { + max-width: 348px; + margin-right: 0; + margin-bottom: 0; + float: left; + } + &.sticky + div { + float: left; + } +} + + +.bottom-footer { + display: block; + position: relative; + clear: both; } +// Where we show the info .profile-about-container { display: flex; + display: block; flex-direction: column; width: 100%; - max-width: 883px; + // max-width: 883px; + padding: 0 10px; + @media (min-width: 768px) { + padding-left: 360px; + display: block; + } .empty-state { a.link-button { @@ -40,6 +71,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; @@ -56,6 +93,7 @@ + .skill { margin-left: 15px; } + &:nth-child(3n + 1) { margin-left: 0px; } @@ -72,12 +110,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; @@ -87,6 +120,7 @@ width: 100%; padding: 30px; padding-top: 5px; + .action-text { text-transform: uppercase; margin-top: 32px; @@ -94,21 +128,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; + } } + } } @@ -144,18 +183,20 @@ } .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; @@ -166,12 +207,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; @@ -180,7 +224,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - @include sofia-pro-light; font-size: 14px; line-height: 18px; text-transform: uppercase; @@ -188,9 +231,13 @@ flex-direction: row; justify-content: flex-start; margin-top: 12px; + @include sofia-pro-light; + span { } + } + .ranking { margin: auto; margin-right: 15px; @@ -199,10 +246,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; @@ -210,6 +259,7 @@ height: 6px; } } + .tag { text-transform: uppercase; margin: 5px auto 0px auto; @@ -219,6 +269,7 @@ color: #7f7f7f; } } + .arrow { @include sofia-pro-extra-light; color: $accent-gray; @@ -228,6 +279,7 @@ justify-content: center; } } + .icon { width: 80px; height: 80px; @@ -235,21 +287,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; @@ -257,6 +313,7 @@ } } } + .description { margin-top: 50px; @include source-sans-regular; @@ -264,9 +321,11 @@ line-height: 22px; width: 60%; } + button.link-button { margin-top: 20px; } + padding-bottom: 40px; } } @@ -317,216 +376,198 @@ } } -@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; - } - .leftButton, .rightButton { - height: 100px; + flex-direction: column; + padding-bottom: 40px; + .list { display: flex; - flex-direction: column; - justify-content: center; - &:hover { - cursor: pointer; + flex-direction: row; + width: 100%; + padding-left: 30px; + padding-right: 30px; + margin: -20px auto 50px auto; + .skill { + margin-top: 50px; + margin-right: 30px; + } + .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%; - cursor: pointer; - 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", From 5c7f84a9a3e34dcc748db6c825f4caf3da05d2c2 Mon Sep 17 00:00:00 2001 From: Victor George Date: Wed, 21 Oct 2015 22:02:49 -0700 Subject: [PATCH 2/5] Scalable layout on Profile, have to replace the plugin to affix the user component, as Angular ngSticky is really bugy. --- app/profile/about/about.jade | 5 ++-- assets/css/profile/about.scss | 51 ++++++++++++++++++++--------------- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/app/profile/about/about.jade b/app/profile/about/about.jade index dbbf47ce8..6efe225b2 100644 --- a/app/profile/about/about.jade +++ b/app/profile/about/about.jade @@ -1,7 +1,8 @@ .about-container - .profile-header-container(sticky media-query="min-width: 768px" use-placeholder="false" offset="10px" bottom-class="bottom-footer", ng-cloak) - profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm") + .profile-header-container(ng-cloak) + .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") .profile-about-container diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss index f9e8a27da..1b0acec54 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -2,11 +2,11 @@ @import '../partials/combined'; // Main container +// This is the flex container; we convert it to 2 column layout on >767px width .about-container { display: flex; - display: block; - position: relative; - flex-flow: row wrap; + flex-direction: column; + @include module-l; background-color: transparent; padding-top: 0px; @@ -15,46 +15,55 @@ 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; margin-bottom: 5px; - display: block; + display: flex; + + position: relative; + margin-left: 10px; + + @media (min-width: 768px) { max-width: 348px; - margin-right: 0; - margin-bottom: 0; - float: left; - } - &.sticky + div { - float: left; + margin: 0 auto; + padding-left: 10px; + } -} + // Sticky container + .sticky-container { + background-color: white; + margin: 0 auto; -.bottom-footer { - display: block; - position: relative; - clear: both; + width: 100%; + padding: 30px 34px; + top: 0; + max-height: 680px; + margin: 0; + } + + .sticky.sticked { + + } } // Where we show the info .profile-about-container { display: flex; - display: block; flex-direction: column; width: 100%; // max-width: 883px; padding: 0 10px; + margin: auto; @media (min-width: 768px) { - padding-left: 360px; - display: block; } .empty-state { From 1fddd501a65da8aab769e11c029cb01083549e23 Mon Sep 17 00:00:00 2001 From: Victor George Date: Thu, 22 Oct 2015 12:15:56 -0700 Subject: [PATCH 3/5] Profile fixes, buttons, and small refactors --- .../profile-widget/profile-widget.jade | 6 +-- app/profile/about/about.jade | 6 ++- assets/css/directives/external-link-data.scss | 12 +++-- assets/css/directives/profile-widget.scss | 13 ++--- assets/css/directives/skill-tile.scss | 3 +- assets/css/partials/_tc-buttons.scss | 7 +-- assets/css/partials/_tc-colors.scss | 47 +++++++++++++++++++ assets/css/partials/_tc-mixins.scss | 16 +++---- assets/css/partials/_tc-variables.scss | 7 +++ assets/css/profile/about.scss | 29 +++++++++--- 10 files changed, 112 insertions(+), 34 deletions(-) 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/profile/about/about.jade b/app/profile/about/about.jade index 6efe225b2..2480a4f67 100644 --- a/app/profile/about/about.jade +++ b/app/profile/about/about.jade @@ -1,7 +1,11 @@ .about-container .profile-header-container(ng-cloak) - .sticky-container(sticky media-query="min-width: 780px" use-placeholder="true" offset="10" confine="true" sticky-class="sticked") + //- .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") 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..95da8ef47 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; @@ -107,14 +107,15 @@ 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; - word-wrap: break-word; + white-space: nowrap; + // word-wrap: break-word; } } } @@ -128,7 +129,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/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 1b0acec54..ff0ceaa81 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -35,6 +35,8 @@ max-width: 348px; margin: 0 auto; padding-left: 10px; + display: block; + position: relative; } @@ -42,12 +44,11 @@ .sticky-container { background-color: white; margin: 0 auto; - + display: block; width: 100%; padding: 30px 34px; top: 0; - max-height: 680px; - margin: 0; + margin: 0 auto; } .sticky.sticked { @@ -94,17 +95,18 @@ width: 100%; margin-left: auto; margin-bottom: 15px; - margin-right: auto; + margin-right: 15px; .skill { margin-top: 20px; + margin-right: 15px; + .skill { margin-left: 15px; } &:nth-child(3n + 1) { - margin-left: 0px; + // margin-left: 0px; } } } @@ -397,6 +399,7 @@ display: flex; flex-direction: column; padding-bottom: 40px; + .list { display: flex; flex-direction: row; @@ -404,10 +407,22 @@ padding-left: 30px; padding-right: 30px; margin: -20px auto 50px auto; + .skill { margin-top: 50px; - margin-right: 30px; + margin-right: 15px; + margin-left: 15px; + } + + + .skill { + margin-left: 15px; } + + &:nth-child(3n + 1) { + margin-left: 15px !important; + border: 1px solid lime; + } + .leftButton, .rightButton { height: 100px; display: flex; @@ -417,8 +432,8 @@ cursor: pointer; } } - } + .empty-state { .action-text { font-size: 28px; From 0cb1d4623c8c8a429da536d1d0910d8327ed1f39 Mon Sep 17 00:00:00 2001 From: Victor George Date: Thu, 22 Oct 2015 14:27:10 -0700 Subject: [PATCH 4/5] sticky fixed thanks to @vikas! --- .../tc-sticky/tc-sticky.directive.jade | 0 .../tc-sticky/tc-sticky.directive.js | 50 +++++++++++++++++++ app/index.jade | 2 + app/profile/about/about.jade | 4 +- assets/css/directives/profile-widget.scss | 10 ++-- assets/css/directives/tc-sticky.scss | 5 ++ assets/css/profile/about.scss | 29 ++++++++--- 7 files changed, 87 insertions(+), 13 deletions(-) create mode 100644 app/directives/tc-sticky/tc-sticky.directive.jade create mode 100644 app/directives/tc-sticky/tc-sticky.directive.js create mode 100644 assets/css/directives/tc-sticky.scss 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..2bfcb394e --- /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 081289dad..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") @@ -195,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 2480a4f67..8d7392365 100644 --- a/app/profile/about/about.jade +++ b/app/profile/about/about.jade @@ -1,11 +1,11 @@ .about-container - .profile-header-container(ng-cloak) + .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 + .sticky-container() profile-widget(profile="profileVm.profile", edit-profile-link="profileVm.showEditProfileLink", num-wins="profileVm.numWins", profile-vm="profileVm") diff --git a/assets/css/directives/profile-widget.scss b/assets/css/directives/profile-widget.scss index 95da8ef47..9eb48dc96 100644 --- a/assets/css/directives/profile-widget.scss +++ b/assets/css/directives/profile-widget.scss @@ -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 { @@ -114,8 +116,8 @@ margin-top: 11px; text-transform: uppercase; text-align: center; - white-space: nowrap; - // word-wrap: break-word; + // white-space: nowrap; + word-wrap: break-word; } } } 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/profile/about.scss b/assets/css/profile/about.scss index ff0ceaa81..8d8c1f47a 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -26,15 +26,14 @@ width: 100%; margin-bottom: 5px; display: flex; - position: relative; margin-left: 10px; @media (min-width: 768px) { - max-width: 348px; + max-width: 368px; margin: 0 auto; - padding-left: 10px; + padding-right: 10px; display: block; position: relative; @@ -46,13 +45,29 @@ margin: 0 auto; display: block; width: 100%; + @media (min-width: 768px){ + box-sizing: border-box; + width: 338px; + margin: 0; + } padding: 30px 34px; - top: 0; - margin: 0 auto; + margin: 0 10px; + transition: .2s all; } - .sticky.sticked { - + .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; + } } From 6506f31bc7cfb2e5162b19b73c6fd0d4d40c3888 Mon Sep 17 00:00:00 2001 From: Victor George Date: Thu, 22 Oct 2015 14:52:43 -0700 Subject: [PATCH 5/5] final fixes --- app/directives/tc-sticky/tc-sticky.directive.js | 2 +- assets/css/profile/about.scss | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/app/directives/tc-sticky/tc-sticky.directive.js b/app/directives/tc-sticky/tc-sticky.directive.js index 2bfcb394e..1811e1e68 100644 --- a/app/directives/tc-sticky/tc-sticky.directive.js +++ b/app/directives/tc-sticky/tc-sticky.directive.js @@ -11,7 +11,7 @@ scope.width = element.prop('offsetWidth'); var elWidth = scope.width + 'px', elChild = angular.element(element[0].querySelector(':first-child')); - elChild.css('width', elWidth); + // elChild.css('width', elWidth); angular.element($window).bind("scroll", function() { var affixElement = document.getElementById('affix'), xPosition = 0, diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss index 8d8c1f47a..37a164487 100644 --- a/assets/css/profile/about.scss +++ b/assets/css/profile/about.scss @@ -24,30 +24,33 @@ .profile-header-container { background: transparent; width: 100%; + 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; - display: block; - width: 100%; + padding: 0; + display: flex; + width: auto; + max-width: auto; + @media (min-width: 768px){ + display: block; box-sizing: border-box; - width: 338px; + width: 368px; margin: 0; } padding: 30px 34px;