From 8ac5795ef51090178b54ae797a16b4ac750cd4f5 Mon Sep 17 00:00:00 2001 From: Nick Litwin Date: Wed, 30 Sep 2015 12:10:05 -0700 Subject: [PATCH] Update settings CSS --- .../skill-tile/skill-tile.directive.jade | 10 +- app/profile/subtrack/data/data.jade | 2 +- app/settings/edit-profile/edit-profile.jade | 4 +- assets/css/directives/skill-tile.scss | 123 ++++++++++++----- assets/css/settings/settings.scss | 127 +++++++++--------- assets/images/grid-off.svg | 12 ++ assets/images/grid-on.svg | 12 ++ assets/images/list-off.svg | 12 ++ assets/images/list-on.svg | 12 ++ assets/images/x-mark-gray.svg | 15 +++ assets/images/x-mark-red.svg | 15 +++ 11 files changed, 241 insertions(+), 103 deletions(-) create mode 100644 assets/images/grid-off.svg create mode 100644 assets/images/grid-on.svg create mode 100644 assets/images/list-off.svg create mode 100644 assets/images/list-on.svg create mode 100644 assets/images/x-mark-gray.svg create mode 100644 assets/images/x-mark-red.svg diff --git a/app/directives/skill-tile/skill-tile.directive.jade b/app/directives/skill-tile/skill-tile.directive.jade index 54c427c12..653edc9da 100644 --- a/app/directives/skill-tile/skill-tile.directive.jade +++ b/app/directives/skill-tile/skill-tile.directive.jade @@ -1,9 +1,13 @@ a(ng-click="enableHide && toggle()", ng-class="{'hidden': skill.hidden, 'new': skill.isNew}") - .skill-icon(ng-switch="skill.category") + .remove-indicator + + .hidden-indicator + img(ng-switch-when="DEVELOP", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-develop.svg") + img(ng-switch-when="DESIGN", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-design.svg") + img(ng-switch-when="DATA_SCIENCE", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-data.svg") - .name {{skill.tagName}} - span.hidden(ng-if="skill.hidden") (Hidden) + .name {{skill.tagName}} diff --git a/app/profile/subtrack/data/data.jade b/app/profile/subtrack/data/data.jade index d676865d5..1f9b29d94 100644 --- a/app/profile/subtrack/data/data.jade +++ b/app/profile/subtrack/data/data.jade @@ -2,7 +2,7 @@ .top ul.horizontal-stats li.stat - .value.rating {{vm.typeStats.rank.rating}} + .value.rating(style="color: {{vm.typeStats.rank.rating | ratingColor}}") {{vm.typeStats.rank.rating}} span.square(style="background-color: {{vm.typeStats.rank.rating | ratingColor}}") .name RATING diff --git a/app/settings/edit-profile/edit-profile.jade b/app/settings/edit-profile/edit-profile.jade index 24168067d..e19d6acc9 100644 --- a/app/settings/edit-profile/edit-profile.jade +++ b/app/settings/edit-profile/edit-profile.jade @@ -48,7 +48,7 @@ .section-fields track-toggle(tracks="vm.tracks") - + button(type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': vm.editProfile.$pristine || vm.editProfile.$invalid}") Save .settings-section.skills @@ -87,7 +87,7 @@ .field-label Link your accounts .external-links external-accounts(linked-accounts="vm.linkedExternalAccounts.length", read-only="false") - + .field-label(ng-show="vm.hasLinks") your accounts .existing-links external-links-data(ng-show="vm.hasLinks" linked-accounts-data="vm.linkedExternalAccountsData") diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss index fa115a268..8e49a7a76 100644 --- a/assets/css/directives/skill-tile.scss +++ b/assets/css/directives/skill-tile.scss @@ -1,62 +1,111 @@ @import '../partials/combined'; + skill-tile { display: flex; flex-direction: column; align-items: center; - justify-content: flex-start; - text-align: center; height: 130px; width: 100px; + + @media (min-width: 768px) { + width: 100px; + height: 180px; + width: 100px; + } + + a:not(.hidden):hover { + div.skill-icon { + background-color: #FEE8EC; + border: 1px solid #FCBBC5; + box-shadow: none; + + .remove-indicator { + display: block; + } + } + img { + opacity: .3; + } + } + + .new { + .skill-icon { + background-color: #F2FAFF; + border: 1px solid #85CCFF; + box-shadow: 0 0 3px #0096FF; + } + } + + a.hidden { + img { + opacity: .3; + } + + .hidden-indicator { + display: block; + } + + .name { + text-decoration: line-through; + color: $system-gray; + } + } + .skill-icon { + position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; - background-color: #fbfbfb; + background-color: #FBFBFB; padding: 10px; - border: 1px solid #f0f0f0; + border: 1px solid $gray-light; height: 80px; width: 80px; - img, i { - font-size: 45px; - height: 45px; - width: 45px; + @media (min-width: 768px) { + height: 100px; + width: 100px; } - &.new { - background-color: #85CCFF; - border: 1px solid #F2FAFF; + + .remove-indicator { + position: absolute; + display: none; + top: 34px; + left: 30px; + @include background-image-size(40px, 50px); + background: url(/images/x-mark-red.svg); + z-index: 100; } - } - .name { - font-family: 'Sofia Pro'; - font-weight: 300; - text-align: center; - margin-top: 10px; - font-size: 12px; - &.hidden { - @include sofia-pro-light; - text-decoration: line-through; + + .hidden-indicator { + position: absolute; + display: none; + top: 32px; + left: 31px; + @include background-image-size(36px, 36px); + background: url(/images/x-mark-gray.svg); + z-index: 100; } - } - @media (min-width: 768px) { - width: 100px; - height: 180px; - margin: 0 30px; - width: 100px; - .skill-icon { - height: 100px; - width: 100px; - i { - font-size: 60px; - height: 60px; + + img { + width: 48px; + height: 48px; + @media only screen and (min-width: 768px) { width: 60px; + height: 60px; } } - .name { - text-align: center; - margin-top: 10px; + + } + + .name { + @include sofia-pro-light; + margin-top: 10px; + font-size: 12px; + color: #3A3C3E; + text-align: center; + @media (min-width: 768px) { font-size: 14px; - line-height: 18px; } } } diff --git a/assets/css/settings/settings.scss b/assets/css/settings/settings.scss index c1e036bad..690f42441 100644 --- a/assets/css/settings/settings.scss +++ b/assets/css/settings/settings.scss @@ -1,42 +1,43 @@ @import '../partials/combined'; .settings-header { @include module-full-width; - background-color: $white; - box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3); - header { - display: flex; - flex-direction: column; - align-items: center; - max-width: 1242px; - margin: 0 auto; - padding-top: 20px; - @media only screen and (min-width: 600px) { - flex-direction: row; - justify-content: space-between; - padding: 25px 25px 23px; - } - @media only screen and (min-width: 900px) { - padding: 40px 50px 33px; - } - h1 { - margin-bottom: 10px; - @include sofia-pro-bold; - font-size: 22px; - line-height: 26px; - color: black; - text-transform: uppercase; - @media only screen and (min-width: 760px) { - margin-bottom: 0; - font-size: 32px; - line-height: 38px; - } + background-color: $white; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3); + + header { + display: flex; + flex-direction: column; + align-items: center; + max-width: 1242px; + margin: 0 auto; + padding-top: 20px; + @media only screen and (min-width: 600px) { + flex-direction: row; + justify-content: space-between; + padding: 25px 25px 23px; + } + @media only screen and (min-width: 900px) { + padding: 40px 50px 33px; + } + h1 { + margin-bottom: 10px; + @include sofia-pro-bold; + font-size: 22px; + line-height: 26px; + color: black; + text-transform: uppercase; + @media only screen and (min-width: 768px) { + margin-bottom: 0; + font-size: 32px; + line-height: 38px; } } + } } .settings-container { @include module-l; - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { margin-top: 80px; padding-left: 30px; padding-right: 30px; @@ -48,16 +49,15 @@ display: flex; flex-direction: row; justify-content: center; - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { display: flex; flex-direction: row; justify-content: center; } li { - margin-top: 10px; display: inline-block; - margin-right: 30px; - @media only screen and (min-width: 760px) { + margin-right: 35px; + @media only screen and (min-width: 768px) { } } a { @@ -67,13 +67,13 @@ text-transform: uppercase; text-decoration: none; cursor: pointer; - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { font-size: 16px; } } } .active-tab { - padding-bottom: 6px; + padding: 0 5px 6px; border-bottom: 4px #0096FF solid; color: black; } @@ -119,15 +119,16 @@ justify-content: flex-start; align-self: flex-start; @media only screen and (min-width: 768px) { - width: 320px; - padding-right: 30px; - margin-right: 35px; + width: 270px; + margin-right: 33px; } + h2 { text-transform: uppercase; @include sofia-pro-light; font-size: 16px; } + .description { font-size: 13px; line-height: 20px; @@ -164,20 +165,19 @@ @include form-field-focused; } .image { - margin-top: 20px; .edit-image { img.profile-circle { margin-top: 10px; } } - input { - } } .country { margin-top: 30px; + input { background-color: white; } + span.error-message { color: #EF3A3A; font-family: 'Sofia Pro'; @@ -189,6 +189,7 @@ .bio { margin-top: 30px; + textarea { background: white; width: 100%; @@ -198,10 +199,12 @@ } } .tracks { + padding-bottom: 0px; + .section-fields { margin-top: 40px; } - padding-bottom: 0px; + button { @include button-2-l; margin-bottom: 20px; @@ -210,23 +213,26 @@ } } .skills { - .section-info { - } .section-fields { margin-top: 20px; width: 100%; display: flex; flex-direction: column; + .field-label, angucomplete-alt { align-self: flex-start; } + .field-label { font-family: 'Sofia Pro'; font-size: 12px; text-transform: uppercase; } + angucomplete-alt { + width: 100%; margin-top: 6px; + input { font-family: 'Source Sans Pro'; font-style: italic; @@ -237,17 +243,18 @@ .list { display: flex; flex-direction: row; - justify-content: center; flex-wrap: wrap; margin-top: 20px; + .skill { - margin: 0 20px 10px 20px; + margin: 0 20px 10px; + @media only screen and (min-width: 768px) { + margin: 0; + margin-right: 30px; + margin-bottom: 5px; + } } - } - - - } } .links { @@ -255,7 +262,6 @@ font-family: 'Sofia Pro'; font-size: 12px; text-transform: uppercase; - margin-top: 15px; } .external-links { margin-top: 10px; @@ -273,19 +279,19 @@ .account-info-container, .update-password-container, .preferences-container { - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { } .tab-title { margin-bottom: 35px; font-size: 32px; @include source-sans-light; color: $ui-light-gray; - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { margin-top: 50px; } } .fields { - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { margin-left: 3px; } } @@ -355,11 +361,12 @@ } .settings-section { - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { padding-top: 40px; padding-bottom: 40px; .section-fields { - margin-top: 0px; + // Remove !important during refactor + margin-top: 0px !important; } .section-info { h2 { @@ -377,16 +384,16 @@ } &.skills { input { - width: 600px; + width: 100%; } .section-fields { - max-width: 760px; + max-width: 768px; } } } } .settings-container { - @media only screen and (min-width: 760px) { + @media only screen and (min-width: 768px) { .links { .existing-links { display: flex; diff --git a/assets/images/grid-off.svg b/assets/images/grid-off.svg new file mode 100644 index 000000000..ca2bd7c91 --- /dev/null +++ b/assets/images/grid-off.svg @@ -0,0 +1,12 @@ + + + + grid-off + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/assets/images/grid-on.svg b/assets/images/grid-on.svg new file mode 100644 index 000000000..6c481a470 --- /dev/null +++ b/assets/images/grid-on.svg @@ -0,0 +1,12 @@ + + + + grid-on + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/assets/images/list-off.svg b/assets/images/list-off.svg new file mode 100644 index 000000000..cebf290fe --- /dev/null +++ b/assets/images/list-off.svg @@ -0,0 +1,12 @@ + + + + list-off + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/assets/images/list-on.svg b/assets/images/list-on.svg new file mode 100644 index 000000000..527f6e3ad --- /dev/null +++ b/assets/images/list-on.svg @@ -0,0 +1,12 @@ + + + + list-on + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/assets/images/x-mark-gray.svg b/assets/images/x-mark-gray.svg new file mode 100644 index 000000000..2af12b0e2 --- /dev/null +++ b/assets/images/x-mark-gray.svg @@ -0,0 +1,15 @@ + + + + x-mark-gray + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/assets/images/x-mark-red.svg b/assets/images/x-mark-red.svg new file mode 100644 index 000000000..24f0c202d --- /dev/null +++ b/assets/images/x-mark-red.svg @@ -0,0 +1,15 @@ + + + + x-mark-red + Created with Sketch. + + + + + + + + + + \ No newline at end of file