Skip to content

GitLab

S
scratch-www
Commit 8dae646f authored by Ray Schamp's avatar Ray Schamp
Browse files
Options

Style tweaks

parent b06a9e49
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 66 deletions
src/components/card/card.scss
View file @ 8dae646f
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
} }
.form { .form {
position: relative;
padding: 3rem 4rem; padding: 3rem 4rem;
.card-button { .card-button {
...@@ -39,10 +40,12 @@ ...@@ -39,10 +40,12 @@
} }
} }
.help-block { .validation-message {
$arrow-border-width: 1rem; $arrow-border-width: 1rem;
display: block; display: block;
position: absolute; position: absolute;
left: 0;
transform: translate(20rem, -4rem);
margin-left: $arrow-border-width; margin-left: $arrow-border-width;
border: 1px solid $active-gray; border: 1px solid $active-gray;
border-radius: 5px; border-radius: 5px;
...@@ -100,7 +103,7 @@ ...@@ -100,7 +103,7 @@
@media only screen and (max-width: $desktop - 1) { @media only screen and (max-width: $desktop - 1) {
.card { .card {
.help-block { .validation-message {
position: relative; position: relative;
transform: none; transform: none;
margin: inherit; margin: inherit;
......
src/components/registration/steps.jsx
View file @ 8dae646f
...@@ -122,11 +122,16 @@ module.exports = { ...@@ -122,11 +122,16 @@ module.exports = {
</p> </p>
<Card> <Card>
<Form onValidSubmit={this.onValidSubmit}> <Form onValidSubmit={this.onValidSubmit}>
<Input label={formatMessage({id: 'registration.createUsername'})} <div>
className={this.state.validUsername} <b>{formatMessage({id: 'registration.createUsername'})}</b>
{this.props.usernameHelp ? (
<p className="help-text">{this.props.usernameHelp}</p>
):(
null
)}
<Input className={this.state.validUsername}
type="text" type="text"
name="user.username" name="user.username"
help={this.props.usernameHelp}
validations={{ validations={{
matchRegexp: /^[\w-]*$/, matchRegexp: /^[\w-]*$/,
minLength: 3, minLength: 3,
...@@ -144,6 +149,7 @@ module.exports = { ...@@ -144,6 +149,7 @@ module.exports = {
}) })
}} }}
required /> required />
</div>
<Input label={formatMessage({id: 'general.password'})} <Input label={formatMessage({id: 'general.password'})}
type={this.state.showPassword ? 'text' : 'password'} type={this.state.showPassword ? 'text' : 'password'}
name="user.password" name="user.password"
...@@ -419,7 +425,9 @@ module.exports = { ...@@ -419,7 +425,9 @@ module.exports = {
required /> required />
<div className="organization-type"> <div className="organization-type">
<b><intl.FormattedMessage id="teacherRegistration.orgType" /></b> <b><intl.FormattedMessage id="teacherRegistration.orgType" /></b>
<p><intl.FormattedMessage id="teacherRegistration.checkAll" /></p> <p className="help-text">
<intl.FormattedMessage id="teacherRegistration.checkAll" />
</p>
<CheckboxGroup name="organization.type" <CheckboxGroup name="organization.type"
value={[]} value={[]}
options={this.getOrganizationOptions()} options={this.getOrganizationOptions()}
...@@ -435,7 +443,9 @@ module.exports = { ...@@ -435,7 +443,9 @@ module.exports = {
</div> </div>
<div className="url-input"> <div className="url-input">
<b><intl.FormattedMessage id="general.website" /></b> <b><intl.FormattedMessage id="general.website" /></b>
<p><intl.FormattedMessage id="teacherRegistration.notRequired" /></p> <p className="help-text">
<intl.FormattedMessage id="teacherRegistration.notRequired" />
</p>
<Input type="url" <Input type="url"
name="organization.url" name="organization.url"
required="isFalse" required="isFalse"
......
src/components/registration/steps.scss
View file @ 8dae646f
...@@ -23,6 +23,13 @@ ...@@ -23,6 +23,13 @@
} }
} }
.help-text {
margin: .25rem 0;
text-align: left;
color: $ui-dark-gray;
}
&.class-invite-step, &.class-invite-step,
&.class-welcome-step { &.class-welcome-step {
.card { .card {
...@@ -34,24 +41,11 @@ ...@@ -34,24 +41,11 @@
} }
} }
&.username-step,
&.name-step,
&.address-step,
&.email-step {
.help-block {
transform: translate(15.75rem, -4rem);
}
}
&.demographics-step { &.demographics-step {
.gender-input { .gender-input {
margin-top: -5.5rem; margin-top: -5.5rem;
} }
.help-block {
transform: translate(13rem, -2rem);
}
.radio { .radio {
margin-right: 2.5rem; margin-right: 2.5rem;
line-height: 3rem; line-height: 3rem;
...@@ -73,37 +67,28 @@ ...@@ -73,37 +67,28 @@
} }
} }
.help-block { .validation-message {
margin-top: .5rem; margin-top: .5rem;
} }
.checkbox-row { .checkbox-row {
.help-block { .validation-message {
margin-top: 0; margin-top: 0;
} }
} }
} }
&.organization-step { &.organization-step {
.help-block { .validation-message {
transform: translate(16rem, -4rem); transform: translate(16rem, -4rem);
} }
.checkbox-group { .checkbox-group {
.help-block { .validation-message {
transform: translate(16rem, -16rem); transform: translate(16rem, -16rem);
} }
} }
.organization-type,
.url-input {
p {
margin: .25rem 0;
text-align: left;
color: $ui-dark-gray;
}
}
input { input {
&[value="8"] { &[value="8"] {
margin: 1rem 0; margin: 1rem 0;
...@@ -117,7 +102,7 @@ ...@@ -117,7 +102,7 @@
&.address-step { &.address-step {
.select { .select {
.help-block { .validation-message {
transform: translate(0, .5rem); transform: translate(0, .5rem);
} }
} }
...@@ -138,7 +123,7 @@ ...@@ -138,7 +123,7 @@
} }
.help-block { .validation-message {
margin-top: .75rem; margin-top: .75rem;
} }
...@@ -199,19 +184,9 @@ ...@@ -199,19 +184,9 @@
text-align: left; text-align: left;
} }
&.username-step,
&.demographics-step,
&.name-step,
&.address-step,
&.email-step {
.help-block {
transform: none;
}
}
&.phone-step { &.phone-step {
.checkbox, .checkbox,
.help-block { .validation-message {
text-align: left; text-align: left;
} }
...@@ -238,7 +213,7 @@ ...@@ -238,7 +213,7 @@
&.organization-step, &.organization-step,
&.address-step, &.address-step,
&.email-step { &.email-step {
.help-block { .validation-message {
position: relative; position: relative;
transform: none; transform: none;
margin: inherit; margin: inherit;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment