Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 8ff78d9

Browse files
nlitwinnlitwin
committedSep 30, 2015
Merge pull request #274 from appirio-tech/skills-states
Update settings CSS
2 parents a958fba + 8ac5795 commit 8ff78d9

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
}

‎assets/css/settings/settings.scss

Lines changed: 67 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,43 @@
11
@import '../partials/combined';
22
.settings-header {
33
@include module-full-width;
4-
background-color: $white;
5-
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
6-
header {
7-
display: flex;
8-
flex-direction: column;
9-
align-items: center;
10-
max-width: 1242px;
11-
margin: 0 auto;
12-
padding-top: 20px;
13-
@media only screen and (min-width: 600px) {
14-
flex-direction: row;
15-
justify-content: space-between;
16-
padding: 25px 25px 23px;
17-
}
18-
@media only screen and (min-width: 900px) {
19-
padding: 40px 50px 33px;
20-
}
21-
h1 {
22-
margin-bottom: 10px;
23-
@include sofia-pro-bold;
24-
font-size: 22px;
25-
line-height: 26px;
26-
color: black;
27-
text-transform: uppercase;
28-
@media only screen and (min-width: 760px) {
29-
margin-bottom: 0;
30-
font-size: 32px;
31-
line-height: 38px;
32-
}
4+
background-color: $white;
5+
box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
6+
7+
header {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
max-width: 1242px;
12+
margin: 0 auto;
13+
padding-top: 20px;
14+
@media only screen and (min-width: 600px) {
15+
flex-direction: row;
16+
justify-content: space-between;
17+
padding: 25px 25px 23px;
18+
}
19+
@media only screen and (min-width: 900px) {
20+
padding: 40px 50px 33px;
21+
}
22+
h1 {
23+
margin-bottom: 10px;
24+
@include sofia-pro-bold;
25+
font-size: 22px;
26+
line-height: 26px;
27+
color: black;
28+
text-transform: uppercase;
29+
@media only screen and (min-width: 768px) {
30+
margin-bottom: 0;
31+
font-size: 32px;
32+
line-height: 38px;
3333
}
3434
}
35+
}
3536
}
3637

3738
.settings-container {
3839
@include module-l;
39-
@media only screen and (min-width: 760px) {
40+
@media only screen and (min-width: 768px) {
4041
margin-top: 80px;
4142
padding-left: 30px;
4243
padding-right: 30px;
@@ -48,16 +49,15 @@
4849
display: flex;
4950
flex-direction: row;
5051
justify-content: center;
51-
@media only screen and (min-width: 760px) {
52+
@media only screen and (min-width: 768px) {
5253
display: flex;
5354
flex-direction: row;
5455
justify-content: center;
5556
}
5657
li {
57-
margin-top: 10px;
5858
display: inline-block;
59-
margin-right: 30px;
60-
@media only screen and (min-width: 760px) {
59+
margin-right: 35px;
60+
@media only screen and (min-width: 768px) {
6161
}
6262
}
6363
a {
@@ -67,13 +67,13 @@
6767
text-transform: uppercase;
6868
text-decoration: none;
6969
cursor: pointer;
70-
@media only screen and (min-width: 760px) {
70+
@media only screen and (min-width: 768px) {
7171
font-size: 16px;
7272
}
7373
}
7474
}
7575
.active-tab {
76-
padding-bottom: 6px;
76+
padding: 0 5px 6px;
7777
border-bottom: 4px #0096FF solid;
7878
color: black;
7979
}
@@ -119,15 +119,16 @@
119119
justify-content: flex-start;
120120
align-self: flex-start;
121121
@media only screen and (min-width: 768px) {
122-
width: 320px;
123-
padding-right: 30px;
124-
margin-right: 35px;
122+
width: 270px;
123+
margin-right: 33px;
125124
}
125+
126126
h2 {
127127
text-transform: uppercase;
128128
@include sofia-pro-light;
129129
font-size: 16px;
130130
}
131+
131132
.description {
132133
font-size: 13px;
133134
line-height: 20px;
@@ -164,20 +165,19 @@
164165
@include form-field-focused;
165166
}
166167
.image {
167-
margin-top: 20px;
168168
.edit-image {
169169
img.profile-circle {
170170
margin-top: 10px;
171171
}
172172
}
173-
input {
174-
}
175173
}
176174
.country {
177175
margin-top: 30px;
176+
178177
input {
179178
background-color: white;
180179
}
180+
181181
span.error-message {
182182
color: #EF3A3A;
183183
font-family: 'Sofia Pro';
@@ -189,6 +189,7 @@
189189

190190
.bio {
191191
margin-top: 30px;
192+
192193
textarea {
193194
background: white;
194195
width: 100%;
@@ -198,10 +199,12 @@
198199
}
199200
}
200201
.tracks {
202+
padding-bottom: 0px;
203+
201204
.section-fields {
202205
margin-top: 40px;
203206
}
204-
padding-bottom: 0px;
207+
205208
button {
206209
@include button-2-l;
207210
margin-bottom: 20px;
@@ -210,23 +213,26 @@
210213
}
211214
}
212215
.skills {
213-
.section-info {
214-
}
215216
.section-fields {
216217
margin-top: 20px;
217218
width: 100%;
218219
display: flex;
219220
flex-direction: column;
221+
220222
.field-label, angucomplete-alt {
221223
align-self: flex-start;
222224
}
225+
223226
.field-label {
224227
font-family: 'Sofia Pro';
225228
font-size: 12px;
226229
text-transform: uppercase;
227230
}
231+
228232
angucomplete-alt {
233+
width: 100%;
229234
margin-top: 6px;
235+
230236
input {
231237
font-family: 'Source Sans Pro';
232238
font-style: italic;
@@ -237,25 +243,25 @@
237243
.list {
238244
display: flex;
239245
flex-direction: row;
240-
justify-content: center;
241246
flex-wrap: wrap;
242247
margin-top: 20px;
248+
243249
.skill {
244-
margin: 0 20px 10px 20px;
250+
margin: 0 20px 10px;
251+
@media only screen and (min-width: 768px) {
252+
margin: 0;
253+
margin-right: 30px;
254+
margin-bottom: 5px;
255+
}
245256
}
246-
247257
}
248-
249-
250-
251258
}
252259
}
253260
.links {
254261
.field-label {
255262
font-family: 'Sofia Pro';
256263
font-size: 12px;
257264
text-transform: uppercase;
258-
margin-top: 15px;
259265
}
260266
.external-links {
261267
margin-top: 10px;
@@ -273,19 +279,19 @@
273279
.account-info-container,
274280
.update-password-container,
275281
.preferences-container {
276-
@media only screen and (min-width: 760px) {
282+
@media only screen and (min-width: 768px) {
277283
}
278284
.tab-title {
279285
margin-bottom: 35px;
280286
font-size: 32px;
281287
@include source-sans-light;
282288
color: $ui-light-gray;
283-
@media only screen and (min-width: 760px) {
289+
@media only screen and (min-width: 768px) {
284290
margin-top: 50px;
285291
}
286292
}
287293
.fields {
288-
@media only screen and (min-width: 760px) {
294+
@media only screen and (min-width: 768px) {
289295
margin-left: 3px;
290296
}
291297
}
@@ -355,11 +361,12 @@
355361
}
356362

357363
.settings-section {
358-
@media only screen and (min-width: 760px) {
364+
@media only screen and (min-width: 768px) {
359365
padding-top: 40px;
360366
padding-bottom: 40px;
361367
.section-fields {
362-
margin-top: 0px;
368+
// Remove !important during refactor
369+
margin-top: 0px !important;
363370
}
364371
.section-info {
365372
h2 {
@@ -377,16 +384,16 @@
377384
}
378385
&.skills {
379386
input {
380-
width: 600px;
387+
width: 100%;
381388
}
382389
.section-fields {
383-
max-width: 760px;
390+
max-width: 768px;
384391
}
385392
}
386393
}
387394
}
388395
.settings-container {
389-
@media only screen and (min-width: 760px) {
396+
@media only screen and (min-width: 768px) {
390397
.links {
391398
.existing-links {
392399
display: flex;

‎assets/images/grid-off.svg

Lines changed: 12 additions & 0 deletions
Loading

‎assets/images/grid-on.svg

Lines changed: 12 additions & 0 deletions
Loading

‎assets/images/list-off.svg

Lines changed: 12 additions & 0 deletions
Loading

‎assets/images/list-on.svg

Lines changed: 12 additions & 0 deletions
Loading

‎assets/images/x-mark-gray.svg

Lines changed: 15 additions & 0 deletions
Loading

‎assets/images/x-mark-red.svg

Lines changed: 15 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)
This repository has been archived.