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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ 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 @@
+
+
\ No newline at end of file