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

Commit 38586f6

Browse files
author
Victor George
committed
settings sizes fixed;
gulp-sass module updated to 2.1.0
1 parent dbe9c9e commit 38586f6

File tree

8 files changed

+181
-52
lines changed

8 files changed

+181
-52
lines changed

‎app/settings/account-info/account-info.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
.form-label.username Username
99
input.form-field.grey(name="username", value="{{vm.userData.handle}}", disabled=true)
1010

11-
.form-label email
11+
.form-label Email
1212
input.form-field.grey(name="email", value="{{vm.userData.email}}", disabled=true)
1313

1414
div(ng-hide="vm.isSocialRegistration")
@@ -43,7 +43,7 @@
4343
p(ng-class="{ 'has-symbol-or-number': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
4444

4545
.button-container
46-
button.tc-btn.tc-btn-l.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine", ng-class="{'disabled': vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine}") Change Password
46+
button.tc-btn.tc-btn.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine", ng-class="{'disabled': vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine}") Change Password
4747

4848

4949
div(ng-show="vm.isSocialRegistration")
@@ -164,4 +164,4 @@
164164

165165

166166
.save-section
167-
button.save.tc-btn.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid, 'disabled': vm.accountInfoForm.$invalid || vm.accountInfoForm.$pristine}", ng-click="vm.accountInfoForm.$valid && vm.accountInfoForm.$dirty && vm.saveAccountInfo()") Save
167+
button.save.tc-btn.tc-btn-wide(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid, 'disabled': vm.accountInfoForm.$invalid || vm.accountInfoForm.$pristine}", ng-click="vm.accountInfoForm.$valid && vm.accountInfoForm.$dirty && vm.saveAccountInfo()") Save

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
track-toggle(tracks="vm.tracks")
6060

6161
.save-section
62-
button.tc-btn.tc-btn-primary.tc-btn-s(ng-show="!(vm.editProfile.$invalid || vm.editProfile.$pristine || !vm.tracksValid())", type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': disabled}") Save
63-
button.tc-btn.tc-btn-secondary.tc-btn-s.disabled(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine || !vm.tracksValid()", type="button") Save
62+
button.tc-btn.tc-btn-primary.tc-btn-wide(ng-show="!(vm.editProfile.$invalid || vm.editProfile.$pristine || !vm.tracksValid())", type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': disabled}") Save
63+
button.tc-btn.tc-btn-secondary.tc-btn-wide.disabled(ng-show="vm.editProfile.$invalid || vm.editProfile.$pristine || !vm.tracksValid()", type="button") Save
6464

6565
.settings-section.skills
6666
.section-info

‎assets/css/partials/_tc-inputs.scss

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,30 +46,39 @@ toggle-password-with-tips {
4646
}
4747

4848
// Style the placeholders
49-
input::-webkit-input-placeholder{
50-
color: $accent-gray;
51-
font-size: 12px;
52-
@include sofia-pro-medium;
53-
text-transform: uppercase;
49+
input {
50+
@include placeholder {
51+
color: $accent-gray;
52+
font-size: 12px;
53+
@include font-with-weight;
54+
text-transform: uppercase;
55+
transition: opacity .15s;
56+
opacity: 1;
57+
}
5458
}
5559

56-
input:focus::-webkit-input-placeholder{
57-
opacity: 0;
58-
transition: opacity .15s;
60+
input:focus {
61+
@include placeholder {
62+
opacity: 0;
63+
transition: opacity .15s;
64+
}
5965
}
6066

67+
6168
textarea {
6269
padding: 10px;
6370
line-height: 24px;
6471

65-
&::-webkit-input-placeholder{
66-
color: $accent-gray;
67-
font-weight: 300;
72+
@include placeholder {
73+
color: $accent-gray;
74+
font-weight: 300;
6875
}
6976

70-
&:focus::-webkit-input-placeholder {
71-
opacity: 0;
72-
transition: opacity .15s;
77+
&:focus {
78+
@include placeholder {
79+
opacity: 0;
80+
transition: opacity .15s;
81+
}
7382
}
7483
}
7584

‎assets/css/partials/_tc-mixins.scss

Lines changed: 102 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,109 @@
11
@import '_tc-variables';
22

33
// SPECIFY FONTS THE SMART WAY
4-
// --------------------------------------------------------------------------------------------
4+
// ----------------------------------------------------------------------------
55
// Instead of repeating the use of fonts, we can build a simple mixin to do that for us
6-
@mixin font-with-weight($font-family: 'Sofia Pro', $font-weight: 400, $font-fallback: sans-serif){
7-
@if $font-fallback == serif {
8-
font-family: $font-family, $fonts-family-serif;
9-
font-weight: $font-weight;
6+
@mixin font-with-weight($family: 'Sofia Pro', $weight: 400, $fallback: sans-serif){
7+
@if $fallback == serif {
8+
font-family: $family, $fonts-family-serif;
9+
font-weight: $weight;
1010

1111
}
12-
@else if $font-fallback == sans-serif {
13-
font-family: $font-family, $fonts-family-sans-serif;
14-
font-weight: $font-weight;
12+
@else if $fallback == sans-serif {
13+
font-family: $family, $fonts-family-sans-serif;
14+
font-weight: $weight;
1515

1616
}
17-
@else if $font-fallback == monospace {
18-
font-family: $font-family, $fonts-family-monospace;
19-
font-weight: $font-weight;
17+
@else if $fallback == monospace {
18+
font-family: $family, $fonts-family-monospace;
19+
font-weight: $weight;
2020
}
2121
@else {
22-
font-family: $font-family, $fonts-family-monospace;
23-
font-weight: $font-familyt-base;
22+
font-family: $family, $fonts-family-monospace;
23+
font-weight: $familyt-base;
2424
}
2525
}
2626

2727

28+
// Placeholders refactored
29+
// ----------------------------------------------------------------------------
30+
// from 'http://stackoverflow.com/questions/17181849/placeholder-mixin-scss-css'
31+
//
32+
// Usage:
33+
//
34+
// .foo {
35+
// @include placeholder {
36+
// color: green;
37+
// }
38+
// }
39+
40+
// @include placeholder {
41+
// color: red;
42+
// }
43+
44+
45+
// Smart, but not working for me currently :(
46+
// @mixin optional-at-root($sel) {
47+
// @at-root #{if(not &, $sel, selector-append(&, $sel))} {
48+
// @content;
49+
// }
50+
// }
51+
52+
// @mixin placeholder {
53+
// @include optional-at-root('::-webkit-input-placeholder') {
54+
// @content;
55+
// }
56+
57+
// @include optional-at-root(':-moz-placeholder') {
58+
// @content;
59+
// }
60+
61+
// @include optional-at-root('::-moz-placeholder') {
62+
// @content;
63+
// }
64+
65+
// @include optional-at-root(':-ms-input-placeholder') {
66+
// @content;
67+
// }
68+
// }
69+
70+
@mixin placeholder {
71+
&::-webkit-input-placeholder {@content}
72+
&:-moz-placeholder {@content}
73+
&::-moz-placeholder {@content}
74+
&:-ms-input-placeholder {@content}
75+
}
76+
77+
78+
//
79+
// Pass a number, and use in different places. How to use:
80+
//
81+
// @include media(320px) {
82+
// background: red; // the content will be wrapped with the mixin;
83+
// }
84+
//
85+
// from 'https://robots.thoughtbot.com/sasss-content-directive'
86+
87+
88+
// @MEDIA MIXIN
89+
// ----------------------------------------------------------------------------
90+
91+
@mixin media-max($width) {
92+
@media only screen and (max-width: $width) {
93+
@content;
94+
}
95+
}
96+
97+
@mixin media-min($width) {
98+
@media only screen and (min-width: $width) {
99+
@content;
100+
}
101+
}
102+
103+
104+
28105
// HELPERS
29-
// --------------------------------------------------------------------------------------------
106+
// ----------------------------------------------------------------------------
30107
@mixin clearfix {
31108
&:after {
32109
content: "";
@@ -192,7 +269,7 @@
192269
padding: 30px 0;
193270
}
194271
}
195-
272+
// VIC: Left for refactoring
196273
@mixin form-field {
197274
// padding-left: 10px;
198275
// margin-bottom: 5px;
@@ -230,6 +307,8 @@
230307
background-repeat: no-repeat;
231308
}
232309

310+
311+
// TODO: Reafactor those as $variables; you can also build a mixin to pass a parameter;
233312
@mixin develop-icon-outline {
234313
background-image: url(/images/ico-track-develop.svg);
235314
}
@@ -264,6 +343,8 @@
264343
font-size: 46px;
265344
}
266345

346+
347+
// TODO: Cleanup
267348
@mixin ui-form-field {
268349
// height: 40px;
269350
// width: 300px;
@@ -308,6 +389,12 @@
308389
// TODO REMOVED: use _tc-inputs !!!!
309390
}
310391

392+
393+
394+
// OLD MIXINS
395+
// ----------------------------------------------------------------------------
396+
// We have to review those;
397+
311398
@mixin ui-enabled-button {
312399
background-color: $ui-enabled-button-blue;
313400
cursor: pointer;

‎assets/css/settings/account-info.scss

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '../partials/combined';
33

44
.account-info-container {
5-
padding-bottom: 75px;
5+
// padding-bottom: 75px;
66

77
.account-info-error {
88
color: #ef3a3a;
@@ -16,13 +16,19 @@
1616
.section-fields {
1717
display: flex;
1818
flex-direction: column;
19+
1920
.form-field {
21+
2022
&.grey {
2123
background-color: #fcfcfc;
2224
}
2325
}
26+
2427
.form-label {
2528
margin-top: 10px;
29+
width: 100%;
30+
31+
2632
&.username {
2733
margin-top: 0px;
2834
}
@@ -36,8 +42,11 @@
3642
display: flex;
3743
flex-direction: column;
3844
align-items: flex-start;
45+
3946
.form-label {
47+
width: 100%;
4048
margin-top: 10px;
49+
4150
&.first {
4251
margin-top: 0;
4352
}
@@ -67,7 +76,7 @@
6776
width: 630px;
6877

6978
.address-fields {
70-
@media only screen and (min-width: 768px) {
79+
@include media-min(768) {
7180
display: flex;
7281
flex-flow: row wrap;
7382
justify-content: space-between;
@@ -96,9 +105,8 @@
96105
}
97106
}
98107
.save-section {
99-
width: 95%;
100-
margin-left: auto;
101-
margin-right: auto;
108+
width: 100%;
109+
margin: 0 auto;
102110
background-color: #fcfcfc;
103111
border-top: 1px solid #f0f0f0;
104112
display: flex;
@@ -114,18 +122,37 @@
114122
}
115123
}
116124

117-
@media only screen and (min-width: 760px) {
118-
.account-info-container {
119-
.section-fields {
125+
.validation-bar,
126+
.angucomplete-holder {
127+
width: 100%;
128+
display: block;
129+
130+
& input[type='text'],
131+
& input[type='password'] {
132+
width: 100% !important;
133+
}
134+
}
135+
136+
.address.settings-section {
137+
border-bottom: none;
138+
}
139+
140+
@include media-min(768px) {
141+
.account-info-container .section-fields {
120142
margin-top: 0px;
121-
}
122-
.section-info {
123-
h2 {
124-
font-size: 18px;
125-
}
126-
.description {
127-
margin-top: 10px;
128-
}
129-
}
143+
}
144+
145+
// size the main container to accomodate for the tooltips
146+
// HaCKY!
147+
.account-info-container .credentials .section-fields,
148+
.account-info-container .name .section-fields,
149+
.account-info-container .address .section-fields {
150+
min-width: 400px;
151+
width: 100%;
152+
padding-right: 340px;
153+
}
154+
155+
.tips {
156+
left: 105%;
130157
}
131158
}

‎assets/css/settings/edit-profile.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,7 @@
150150
margin-bottom: 30px;
151151
}
152152
}
153+
154+
.links.settings-section {
155+
border-bottom: none;
156+
}

‎assets/css/topcoder.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ body {
8989
border: 1px solid $error-light;
9090
color: $error;
9191
text-align: left;
92+
font-size: 12px;
93+
line-height: 20px;
9294
}
9395

9496

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"gulp-rev": "^5.0.1",
5555
"gulp-rev-all": "0.8.18",
5656
"gulp-rev-replace": "^0.4.2",
57-
"gulp-sass": "^2.0.1",
57+
"gulp-sass": "^2.1.0",
5858
"gulp-sourcemaps": "^1.5.2",
5959
"gulp-svg-sprite": "^1.2.11",
6060
"gulp-task-listing": "^1.0.1",

0 commit comments

Comments
 (0)