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

Commit 0e61f24

Browse files
author
Victor George
committed
fixed JADE style spacing; css clean, added helper classes for spacings (margin)
1 parent 478319d commit 0e61f24

File tree

4 files changed

+181
-139
lines changed

4 files changed

+181
-139
lines changed

‎app/account/reset-password/reset-password.jade

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,12 @@
33
header
44
a.logo-link(href="/")
55
img(src="/images/logo_mobile.svg", alt="Topcoder Logo")
6+
67
.arrow
8+
79
h1(class="header") PASSWORD RESET
810

911
form.reset-form(name='vm.generateTokenForm', role="form", ng-submit="vm.generateTokenForm.$valid && vm.sendLink()", novalidate)
10-
1112
p.email-label Please enter your email address, and we'll send you a link to reset your password
1213

1314
.validation-bar(ng-class="{ 'error-bar': (vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid), 'success-bar': (vm.generateTokenForm.email.$valid) }")
@@ -16,16 +17,22 @@
1617

1718
.tips.email-tips(ng-show="vm.emailTips")
1819
.arrow
20+
21+
git
22+
1923
h3 Email Tips:
2024

2125
p Enter your email address and we'll get back to you with a reset link
2226

2327
.form-errors
2428
p.form-error(ng-show="vm.generateTokenForm.email.$dirty && vm.generateTokenForm.email.$invalid") Please enter a valid email address.
29+
2530
p.form-error(ng-show="vm.alreadySent") You already requested a reset link recently. Please check your inbox or spam folder. If you have any trouble, please contact
2631
a(href="mailto:[email protected]?Subject=Unable%20to%20reset%20my%20password" target="_top") [email protected]
32+
2733
p.form-error(ng-show="vm.emailNotFound") We couldn't find a member with that email address. Please check that you entered it correctly. If you continue to have trouble, please contact
2834
a(href="mailto:[email protected]?Subject=Unable%20to%20reset%20my%20password" target="_top") [email protected]
35+
2936
p.form-error(ng-show="vm.unkownError") We were unable to send you a reset link because of a temporary problem. Please try again. If you continue to have trouble, please contact
3037
a(href="mailto:[email protected]?Subject=Unable%20to%20reset%20my%20password" target="_top") [email protected]
3138

@@ -37,29 +44,36 @@
3744
header
3845
a.logo-link(href="/")
3946
img(src="/images/logo_mobile.svg", alt="Topcoder Logo")
47+
4048
.arrow
4149

4250
h1(class="header") Back on Track!
43-
p We have sent you an email with a link to reset your password.
44-
br/
51+
52+
p(class="m-b-lg") We have sent you an email with a link to reset your password.
53+
4554
a.link(ui-sref="login") Back to Login
4655

4756
.reset-password-container(ng-show="vm.token")
4857
header
4958
img(src="/images/logo_mobile.svg", alt="Topcoder Logo")
59+
5060
.arrow
61+
5162
h1(class="header") CREATE NEW PASSWORD
5263

5364
form.reset-form(name='vm.resetPasswordForm', role="form", ng-submit="vm.resetPasswordForm.$valid && vm.resetPassword()", novalidate)
54-
5565
.validation-bar(ng-class="{ 'success-bar': (vm.resetPasswordForm.password.$valid) }")
5666
toggle-password-with-tips
5767

5868
.tips.password-tips(ng-show="vm.passwordFocus")
5969
.arrow
70+
6071
h3 Password Tips:
72+
6173
p(ng-class="{ 'has-length-between-range': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.minlength && !vm.resetPasswordForm.password.$error.maxlength && !vm.resetPasswordForm.password.$error.required) }") Must be between 8 and 64 characters
74+
6275
p(ng-class="{ 'has-letter': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasLetter) }") At least one letter
76+
6377
p(ng-class="{ 'has-symbol-or-number': (vm.resetPasswordForm.password.$dirty && !vm.resetPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
6478

6579
.form-errors

‎assets/css/account/account.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
.reset-password-container,
66
.registered-successfully-container {
77
@include font-with-weight('Merriweather Sans');
8-
@include ui-form-placeholder;
98
background-color: $white;
109
border-radius: 3px;
1110
box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
@@ -27,7 +26,7 @@
2726
// CSS-olny Arrow
2827
&:after {
2928
border: solid transparent;
30-
border-bottom-color: #fff;
29+
border-bottom-color: $white;
3130
border-color: rgba(255, 255, 255, 0);
3231
border-width: 13px;
3332
bottom: 0;
@@ -136,7 +135,7 @@
136135
}
137136
span {
138137
@include font-with-weight('Sofia Pro', 500);
139-
color: #a3a3ae;
138+
color: $accent-gray;
140139
cursor: pointer;
141140
font-size: 10px;
142141
line-height: 13px;
@@ -156,7 +155,7 @@
156155
margin-top: 15px;
157156
p {
158157
@include font-with-weight;
159-
color: #a3a3ae;
158+
color: $accent-gray;
160159
font-size: 13px;
161160
line-height: 22px;
162161
text-transform: uppercase;
@@ -171,7 +170,7 @@
171170
align-items: center;
172171
p {
173172
@include font-with-weight('Sofia Pro', 500);
174-
color: #a3a3ae;
173+
color: $accent-gray;
175174
cursor: pointer;
176175
font-size: 10px;
177176
line-height: 13px;

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,55 @@ html {
1818
body {
1919
min-height: 100%;
2020
}
21+
22+
23+
// UTILITIES
24+
// ----------------------------------------------------------------------------
25+
// margin and padding modifiers, adopted from Bootstrap
26+
27+
$spacer: 10px !default;
28+
$spacer-y: $spacer !default;
29+
$spacer-x: $spacer !default;
30+
31+
// Margin
32+
33+
.m-a-0 { margin: 0 !important; }
34+
.m-t-0 { margin-top: 0 !important; }
35+
.m-r-0 { margin-right: 0 !important; }
36+
.m-b-0 { margin-bottom: 0 !important; }
37+
.m-l-0 { margin-left: 0 !important; }
38+
.m-x-0 { margin-right: 0 !important; margin-left: 0 !important; }
39+
.m-y-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
40+
41+
.m-a { margin: $spacer !important; }
42+
.m-t { margin-top: $spacer-y !important; }
43+
.m-r { margin-right: $spacer-x !important; }
44+
.m-b { margin-bottom: $spacer-y !important; }
45+
.m-l { margin-left: $spacer-x !important; }
46+
.m-x { margin-right: $spacer-x !important; margin-left: $spacer-x !important; }
47+
.m-y { margin-top: $spacer-y !important; margin-bottom: $spacer-y !important; }
48+
.m-x-auto { margin-right: auto !important; margin-left: auto !important; }
49+
50+
.m-a-md { margin: ($spacer * 1.5) !important; }
51+
.m-t-md { margin-top: ($spacer-y * 1.5) !important; }
52+
.m-r-md { margin-right: ($spacer-y * 1.5) !important; }
53+
.m-b-md { margin-bottom: ($spacer-y * 1.5) !important; }
54+
.m-l-md { margin-left: ($spacer-y * 1.5) !important; }
55+
.m-x-md { margin-right: ($spacer-x * 1.5) !important; margin-left: ($spacer-x * 1.5) !important; }
56+
.m-y-md { margin-top: ($spacer-y * 1.5) !important; margin-bottom: ($spacer-y * 1.5) !important; }
57+
58+
.m-a-lg { margin: ($spacer * 2) !important; }
59+
.m-t-lg { margin-top: ($spacer-y * 2) !important; }
60+
.m-r-lg { margin-right: ($spacer-y * 2) !important; }
61+
.m-b-lg { margin-bottom: ($spacer-y * 2) !important; }
62+
.m-l-lg { margin-left: ($spacer-y * 2) !important; }
63+
.m-x-lg { margin-right: ($spacer-x * 2) !important; margin-left: ($spacer-x * 2) !important; }
64+
.m-y-lg { margin-top: ($spacer-y * 2) !important; margin-bottom: ($spacer-y * 2) !important; }
65+
66+
.m-a-xl { margin: ($spacer * 3) !important; }
67+
.m-t-xl { margin-top: ($spacer-y * 3) !important; }
68+
.m-r-xl { margin-right: ($spacer-y * 3) !important; }
69+
.m-b-xl { margin-bottom: ($spacer-y * 3) !important; }
70+
.m-l-xl { margin-left: ($spacer-y * 3) !important; }
71+
.m-x-xl { margin-right: ($spacer-x * 3) !important; margin-left: ($spacer-x * 3) !important; }
72+
.m-y-xl { margin-top: ($spacer-y * 3) !important; margin-bottom: ($spacer-y * 3) !important; }

0 commit comments

Comments
 (0)