scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Style tweaks

Browse source
This commit is contained in:
Ray Schamp 2016-07-21 20:43:58 -04:00
parent b06a9e49d0
commit 8dae646ff3
3 changed files with 54 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/card/card.scss
View file

@ -22,6 +22,7 @@
}
.form {
position: relative;
padding: 3rem 4rem;
.card-button {
@ -39,10 +40,12 @@
}
}
.help-block {
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;
left: 0;
transform: translate(20rem, -4rem);
margin-left: $arrow-border-width;
border: 1px solid $active-gray;
border-radius: 5px;
@ -100,7 +103,7 @@
@media only screen and (max-width: $desktop - 1) {
.card {
.help-block {
.validation-message {
position: relative;
transform: none;
margin: inherit;

58
src/components/registration/steps.jsx
View file

@ -122,28 +122,34 @@ module.exports = {
</p>
<Card>
<Form onValidSubmit={this.onValidSubmit}>
<Input label={formatMessage({id: 'registration.createUsername'})}
className={this.state.validUsername}
type="text"
name="user.username"
help={this.props.usernameHelp}
validations={{
matchRegexp: /^[\w-]*$/,
minLength: 3,
maxLength: 20
}}
validationErrors={{
matchRegexp: formatMessage({
id: 'registration.validationUsernameRegexp'
}),
minLength: formatMessage({
id: 'registration.validationUsernameMinLength'
}),
maxLength: formatMessage({
id: 'registration.validationUsernameMaxLength'
})
}}
required />
<div>
<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"
name="user.username"
validations={{
matchRegexp: /^[\w-]*$/,
minLength: 3,
maxLength: 20
}}
validationErrors={{
matchRegexp: formatMessage({
id: 'registration.validationUsernameRegexp'
}),
minLength: formatMessage({
id: 'registration.validationUsernameMinLength'
}),
maxLength: formatMessage({
id: 'registration.validationUsernameMaxLength'
})
}}
required />
</div>
<Input label={formatMessage({id: 'general.password'})}
type={this.state.showPassword ? 'text' : 'password'}
name="user.password"
@ -419,7 +425,9 @@ module.exports = {
required />
<div className="organization-type">
<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"
value={[]}
options={this.getOrganizationOptions()}
@ -435,7 +443,9 @@ module.exports = {
</div>
<div className="url-input">
<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"
name="organization.url"
required="isFalse"

55
src/components/registration/steps.scss
View file

@ -23,6 +23,13 @@
}
}
.help-text {
margin: .25rem 0;
text-align: left;
color: $ui-dark-gray;
}
&.class-invite-step,
&.class-welcome-step {
.card {
@ -34,24 +41,11 @@
}
}
&.username-step,
&.name-step,
&.address-step,
&.email-step {
.help-block {
transform: translate(15.75rem, -4rem);
}
}
&.demographics-step {
.gender-input {
margin-top: -5.5rem;
}
.help-block {
transform: translate(13rem, -2rem);
}
.radio {
margin-right: 2.5rem;
line-height: 3rem;
@ -73,37 +67,28 @@
}
}
.help-block {
.validation-message {
margin-top: .5rem;
}
.checkbox-row {
.help-block {
.validation-message {
margin-top: 0;
}
}
}
&.organization-step {
.help-block {
.validation-message {
transform: translate(16rem, -4rem);
}
.checkbox-group {
.help-block {
.validation-message {
transform: translate(16rem, -16rem);
}
}
.organization-type,
.url-input {
p {
margin: .25rem 0;
text-align: left;
color: $ui-dark-gray;
}
}
input {
&[value="8"] {
margin: 1rem 0;
@ -117,7 +102,7 @@
&.address-step {
.select {
.help-block {
.validation-message {
transform: translate(0, .5rem);
}
}
@ -138,7 +123,7 @@
}
.help-block {
.validation-message {
margin-top: .75rem;
}
@ -199,19 +184,9 @@
text-align: left;
}
&.username-step,
&.demographics-step,
&.name-step,
&.address-step,
&.email-step {
.help-block {
transform: none;
}
}
&.phone-step {
.checkbox,
.help-block {
.validation-message {
text-align: left;
}
@ -238,7 +213,7 @@
&.organization-step,
&.address-step,
&.email-step {
.help-block {
.validation-message {
position: relative;
transform: none;
margin: inherit;