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

Commit 8ac5795

Browse files
author
Nick Litwin
committed
Update settings CSS
1 parent 27640c6 commit 8ac5795

File tree

11 files changed

+241
-103
lines changed

11 files changed

+241
-103
lines changed

‎app/directives/skill-tile/skill-tile.directive.jade

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
a(ng-click="enableHide && toggle()", ng-class="{'hidden': skill.hidden, 'new': skill.isNew}")
2-
32
.skill-icon(ng-switch="skill.category")
3+
.remove-indicator
4+
5+
.hidden-indicator
6+
47
img(ng-switch-when="DEVELOP", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-develop.svg")
8+
59
img(ng-switch-when="DESIGN", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-design.svg")
10+
611
img(ng-switch-when="DATA_SCIENCE", ng-src="{{ASSET_PREFIX}}images/skills/id-{{skill.tagId}}.svg", fallback-src="/images/skills/id-data.svg")
7-
.name {{skill.tagName}}
8-
span.hidden(ng-if="skill.hidden") (Hidden)
912

13+
.name {{skill.tagName}}

‎app/profile/subtrack/data/data.jade

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
.top
33
ul.horizontal-stats
44
li.stat
5-
.value.rating {{vm.typeStats.rank.rating}}
5+
.value.rating(style="color: {{vm.typeStats.rank.rating | ratingColor}}") {{vm.typeStats.rank.rating}}
66
span.square(style="background-color: {{vm.typeStats.rank.rating | ratingColor}}")
77
.name RATING
88

‎app/settings/edit-profile/edit-profile.jade

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
.section-fields
5050
track-toggle(tracks="vm.tracks")
51-
51+
5252
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
5353

5454
.settings-section.skills
@@ -87,7 +87,7 @@
8787
.field-label Link your accounts
8888
.external-links
8989
external-accounts(linked-accounts="vm.linkedExternalAccounts.length", read-only="false")
90-
90+
9191
.field-label(ng-show="vm.hasLinks") your accounts
9292
.existing-links
9393
external-links-data(ng-show="vm.hasLinks" linked-accounts-data="vm.linkedExternalAccountsData")

‎assets/css/directives/skill-tile.scss

Lines changed: 86 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,111 @@
11
@import '../partials/combined';
2+
23
skill-tile {
34
display: flex;
45
flex-direction: column;
56
align-items: center;
6-
justify-content: flex-start;
7-
text-align: center;
87
height: 130px;
98
width: 100px;
9+
10+
@media (min-width: 768px) {
11+
width: 100px;
12+
height: 180px;
13+
width: 100px;
14+
}
15+
16+
a:not(.hidden):hover {
17+
div.skill-icon {
18+
background-color: #FEE8EC;
19+
border: 1px solid #FCBBC5;
20+
box-shadow: none;
21+
22+
.remove-indicator {
23+
display: block;
24+
}
25+
}
26+
img {
27+
opacity: .3;
28+
}
29+
}
30+
31+
.new {
32+
.skill-icon {
33+
background-color: #F2FAFF;
34+
border: 1px solid #85CCFF;
35+
box-shadow: 0 0 3px #0096FF;
36+
}
37+
}
38+
39+
a.hidden {
40+
img {
41+
opacity: .3;
42+
}
43+
44+
.hidden-indicator {
45+
display: block;
46+
}
47+
48+
.name {
49+
text-decoration: line-through;
50+
color: $system-gray;
51+
}
52+
}
53+
1054
.skill-icon {
55+
position: relative;
1156
display: flex;
1257
flex-direction: column;
1358
justify-content: center;
1459
align-items: center;
15-
background-color: #fbfbfb;
60+
background-color: #FBFBFB;
1661
padding: 10px;
17-
border: 1px solid #f0f0f0;
62+
border: 1px solid $gray-light;
1863
height: 80px;
1964
width: 80px;
20-
img, i {
21-
font-size: 45px;
22-
height: 45px;
23-
width: 45px;
65+
@media (min-width: 768px) {
66+
height: 100px;
67+
width: 100px;
2468
}
25-
&.new {
26-
background-color: #85CCFF;
27-
border: 1px solid #F2FAFF;
69+
70+
.remove-indicator {
71+
position: absolute;
72+
display: none;
73+
top: 34px;
74+
left: 30px;
75+
@include background-image-size(40px, 50px);
76+
background: url(/images/x-mark-red.svg);
77+
z-index: 100;
2878
}
29-
}
30-
.name {
31-
font-family: 'Sofia Pro';
32-
font-weight: 300;
33-
text-align: center;
34-
margin-top: 10px;
35-
font-size: 12px;
36-
&.hidden {
37-
@include sofia-pro-light;
38-
text-decoration: line-through;
79+
80+
.hidden-indicator {
81+
position: absolute;
82+
display: none;
83+
top: 32px;
84+
left: 31px;
85+
@include background-image-size(36px, 36px);
86+
background: url(/images/x-mark-gray.svg);
87+
z-index: 100;
3988
}
40-
}
41-
@media (min-width: 768px) {
42-
width: 100px;
43-
height: 180px;
44-
margin: 0 30px;
45-
width: 100px;
46-
.skill-icon {
47-
height: 100px;
48-
width: 100px;
49-
i {
50-
font-size: 60px;
51-
height: 60px;
89+
90+
img {
91+
width: 48px;
92+
height: 48px;
93+
@media only screen and (min-width: 768px) {
5294
width: 60px;
95+
height: 60px;
5396
}
5497
}
55-
.name {
56-
text-align: center;
57-
margin-top: 10px;
98+
99+
}
100+
101+
.name {
102+
@include sofia-pro-light;
103+
margin-top: 10px;
104+
font-size: 12px;
105+
color: #3A3C3E;
106+
text-align: center;
107+
@media (min-width: 768px) {
58108
font-size: 14px;
59-
line-height: 18px;
60109
}
61110
}
62111
}

0 commit comments

Comments
 (0)