mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-26 00:58:14 -05:00
Finalize styling for registration flow
/cc @carljbowman
One issue we ran into is that our `frameless` configuration is in `em` rather than `rem`, making it difficult to have an aboslute grid applied uniformly at all hierarchies. For now, we're using straight `rem` calculations instead of `$cols{1,8}` in the styling until we can refactor `frameless` to use `em`.
This commit is contained in:
Matthew Taylor
parent
1910d38bc6
commit
1a08e7ae49
20 changed files with 162 additions and 64 deletions
|
|
@ -7,8 +7,9 @@
|
|||
min-height: 100vh;
|
||||
|
||||
img {
|
||||
padding: 10px 0;
|
||||
width: 125px;
|
||||
margin-left: 2px;
|
||||
padding: 12px 0;
|
||||
width: 76px;
|
||||
}
|
||||
|
||||
.step-navigation {
|
||||
|
|
@ -50,7 +51,7 @@
|
|||
padding: 3rem 4rem;
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.2rem;
|
||||
|
||||
&.has-error {
|
||||
.input {
|
||||
|
|
@ -118,12 +119,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
width: 50%;
|
||||
line-height: 3rem;
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.card {
|
||||
width: 22.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
.form {
|
||||
text-align: left;
|
||||
|
||||
.button {
|
||||
width: 22.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ var CharCount = React.createClass({
|
|||
);
|
||||
return (
|
||||
<p className={classes}>
|
||||
({this.props.currentCharacters}/{this.props.maxCharacters})
|
||||
{this.props.currentCharacters}/{this.props.maxCharacters}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
p {
|
||||
&.char-count {
|
||||
color: $active-dark-gray;
|
||||
letter-spacing: 1px;
|
||||
color: lighten($type-gray, 30%);
|
||||
font-weight: 500;
|
||||
|
||||
&.overmax {
|
||||
color: $ui-orange;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
flex-flow: column wrap;
|
||||
|
||||
.checkbox {
|
||||
margin: 16px 0;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,13 @@ input {
|
|||
}
|
||||
|
||||
&:checked {
|
||||
transition: all .5s ease;
|
||||
box-shadow: 0 0 0 .25rem $active-gray;
|
||||
background-color: $ui-blue;
|
||||
text-align: center;
|
||||
text-indent: .125rem;
|
||||
line-height: 1.25rem;
|
||||
font-size: .75rem;
|
||||
|
||||
&:after {
|
||||
color: $type-white;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $pass-bg: lighten($ui-aqua, 35%);
|
|||
|
||||
.input {
|
||||
transition: all .5s ease;
|
||||
margin: .8rem 0;
|
||||
margin: .75rem 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: $base-bg;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../colors";
|
||||
|
||||
.input-group {
|
||||
margin: .8rem 0;
|
||||
margin: .75rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
&[type="radio"] {
|
||||
margin-top: 1px;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: .8rem;
|
||||
width: .8rem;
|
||||
height: .8rem;
|
||||
border-radius: 50%;
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
appearance: none;
|
||||
|
||||
&:checked,
|
||||
|
|
@ -19,15 +19,17 @@
|
|||
}
|
||||
|
||||
&:checked {
|
||||
transition: all .25s ease;
|
||||
box-shadow: 0 0 0 .25rem $active-gray;
|
||||
background-color: $ui-blue;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
transform: translate(.25rem, .25rem);
|
||||
border-radius: .2rem;
|
||||
border-radius: 50%;
|
||||
background-color: $ui-white;
|
||||
width: .2rem;
|
||||
height: .2rem;
|
||||
width: .25rem;
|
||||
height: .25rem;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,12 @@
|
|||
}
|
||||
|
||||
select {
|
||||
margin: .8rem 0;
|
||||
transition: all .5s ease;
|
||||
margin: .75rem 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background: $ui-light-gray url("../../../static/images/dropdown.png") no-repeat right center;
|
||||
background-size: 1rem 1rem;
|
||||
background: $ui-light-gray url("../../../static/svgs/forms/carot.svg") no-repeat right center;
|
||||
padding-right: 4rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
text-indent: 1rem;
|
||||
|
|
@ -20,7 +21,14 @@ select {
|
|||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
transition: all .5s ease;
|
||||
outline: none;
|
||||
border: 1px solid $ui-blue;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $ui-light-gray url("../../../static/svgs/forms/carot-hover.svg") no-repeat right center;
|
||||
}
|
||||
|
||||
> option {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,11 @@
|
|||
@import "../../colors";
|
||||
|
||||
$base-bg: $ui-light-gray;
|
||||
$focus-bg: lighten($ui-light-gray, 35%);
|
||||
$fail-bg: lighten($ui-orange, 35%);
|
||||
$pass-bg: lighten($ui-aqua, 35%);
|
||||
|
||||
.textarea {
|
||||
transition: all 1s ease;
|
||||
margin: .75rem 0;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: $base-bg;
|
||||
background-color: $ui-light-gray;
|
||||
padding: .75rem 1rem;
|
||||
width: 100%;
|
||||
min-height: 15rem;
|
||||
|
|
@ -21,17 +16,10 @@ $pass-bg: lighten($ui-aqua, 35%);
|
|||
&:focus {
|
||||
transition: all 1s ease;
|
||||
outline: none;
|
||||
border: 1px solid $active-dark-gray;
|
||||
background-color: $focus-bg;
|
||||
border: 1px solid $ui-blue;
|
||||
}
|
||||
|
||||
&.fail {
|
||||
border: 1px solid $active-dark-gray;
|
||||
background-color: $fail-bg;
|
||||
}
|
||||
|
||||
&.pass {
|
||||
border: 1px solid $active-dark-gray;
|
||||
background-color: $pass-bg;
|
||||
border: 1px solid $ui-orange;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -537,6 +537,8 @@ module.exports = {
|
|||
},
|
||||
render: function () {
|
||||
var formatMessage = this.props.intl.formatMessage;
|
||||
var textAreaClass = (this.state.characterCount > this.props.maxCharacters) ? 'fail' : '';
|
||||
|
||||
return (
|
||||
<Slide className="usescratch-step">
|
||||
<h2>
|
||||
|
|
@ -551,6 +553,7 @@ module.exports = {
|
|||
<Form onValidSubmit={this.props.onNextStep}>
|
||||
<TextArea label={formatMessage({id: 'teacherRegistration.howUseScratch'})}
|
||||
name="useScratch"
|
||||
className={textAreaClass}
|
||||
onChange={this.handleTyping}
|
||||
validations={{
|
||||
maxLength: this.props.maxCharacters
|
||||
|
|
|
|||
|
|
@ -8,14 +8,14 @@
|
|||
|
||||
li {
|
||||
display: inline-block;
|
||||
border-radius: 8px / $em;
|
||||
padding: 4px / $em;
|
||||
border-radius: 50%;
|
||||
padding: .25rem;
|
||||
|
||||
.indicator {
|
||||
border-radius: 4px / $em;
|
||||
border-radius: .25rem;
|
||||
background-color: $ui-white;
|
||||
width: 8px / $em;
|
||||
height: 8px / $em;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ var Tooltip = React.createClass({
|
|||
return (
|
||||
<span className={classes}>
|
||||
<span className="tip">
|
||||
{this.props.title}
|
||||
<img src="/svgs/tooltip/info.svg" alt="info icon" />
|
||||
</span>
|
||||
<span className="expand">
|
||||
{this.props.tipContent}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,17 @@
|
|||
|
||||
.tooltip {
|
||||
.tip {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
border-radius: $font-size;
|
||||
background-color: $ui-blue;
|
||||
padding: 0 ($font-size / 2);
|
||||
color: $type-white;
|
||||
display: inline-flex;
|
||||
margin: 0 .5rem;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 .125rem $active-gray;
|
||||
background-color: $ui-blue;
|
||||
padding: .25rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.expand {
|
||||
|
|
@ -16,7 +21,9 @@
|
|||
position: absolute;
|
||||
transform: translate(-2.75rem, 2rem);
|
||||
visibility: hidden;
|
||||
margin-top: $arrow-border-width;
|
||||
z-index: 1;
|
||||
margin-top: $arrow-border-width / 2;
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
background-color: $ui-blue;
|
||||
padding: 1rem;
|
||||
|
|
@ -32,8 +39,8 @@
|
|||
|
||||
transform: rotate(45deg);
|
||||
|
||||
border-bottom: 5px solid $ui-blue;
|
||||
border-left: 5px solid $ui-blue;
|
||||
border-top: 1px solid $active-gray;
|
||||
border-left: 1px solid $active-gray;
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: $ui-blue;
|
||||
|
|
|
|||
|
|
@ -95,7 +95,8 @@
|
|||
"name": "teacherregistration",
|
||||
"pattern": "^/educators/register$",
|
||||
"view": "teacherregistration/teacherregistration",
|
||||
"title": "Teacher Registration"
|
||||
"title": "Teacher Registration",
|
||||
"viewportWidth": "device-width"
|
||||
},
|
||||
{
|
||||
"name": "teacherwaitingroom",
|
||||
|
|
|
|||
|
|
@ -79,8 +79,6 @@ var TeacherRegistration = React.createClass({
|
|||
<Steps.RegistrationError {... this.state} />
|
||||
:
|
||||
<Progression {... this.state}>
|
||||
<Steps.UsernameStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.DemographicsStep onNextStep={this.advanceStep}
|
||||
waiting={this.state.waiting} />
|
||||
<Steps.NameStep onNextStep={this.advanceStep}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@
|
|||
|
||||
@include responsive-layout (".teacher-registration", ".slide");
|
||||
|
||||
html,
|
||||
body {
|
||||
background-color: $ui-purple;
|
||||
}
|
||||
|
||||
.teacher-registration {
|
||||
background-color: $ui-purple;
|
||||
|
||||
|
|
@ -14,14 +19,10 @@
|
|||
.other-input {
|
||||
float: right;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.gender-input {
|
||||
margin-top: -5.75rem;
|
||||
}
|
||||
|
||||
.other-input {
|
||||
margin-top: -5.875rem;
|
||||
.row {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.username-step,
|
||||
|
|
@ -34,9 +35,22 @@
|
|||
}
|
||||
|
||||
.demographics-step {
|
||||
.gender-input {
|
||||
margin-top: -5.5rem;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
transform: translate(14rem, -4rem);
|
||||
}
|
||||
|
||||
.radio {
|
||||
margin-right: 2.5rem;
|
||||
line-height: 3rem;
|
||||
|
||||
input {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone-step {
|
||||
|
|
@ -74,13 +88,31 @@
|
|||
color: $ui-dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[value="8"] {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.other-input {
|
||||
margin-top: -5.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.usescratch-step {
|
||||
.form {
|
||||
.form-group {
|
||||
margin-bottom: 0;
|
||||
|
||||
&.has-error {
|
||||
.textarea {
|
||||
border: 1px solid $ui-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.help-block {
|
||||
|
|
@ -118,13 +150,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $desktop - 1) {
|
||||
@media only screen and (max-width: $mobile - 1) {
|
||||
.teacher-registration {
|
||||
.username-step,
|
||||
.demographics-step,
|
||||
.name-step{
|
||||
.help-block {
|
||||
transform: none;
|
||||
.demographics-step {
|
||||
.radio {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.last-step {
|
||||
.card {
|
||||
margin: 0 auto;
|
||||
width: 18.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $desktop - 1) {
|
||||
.teacher-registration {
|
||||
.username-step,
|
||||
.demographics-step,
|
||||
.name-step {
|
||||
.help-block {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-step {
|
||||
.checkbox,
|
||||
.help-block {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.organization-step {
|
||||
.organization-type,
|
||||
.url-input {
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
static/svgs/forms/carot-hover.svg
Normal file
1
static/svgs/forms/carot-hover.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><title>carot</title><rect x="0.01" width="48" height="48" fill="#231f20" opacity="0.1"/><path d="M24,29.43a1.87,1.87,0,0,1-1.33-.55l-5.11-5.11a1.87,1.87,0,0,1,0-2.65c0.73-.73,12.14-0.73,12.87,0a1.87,1.87,0,0,1,0,2.65l-5.11,5.11A1.87,1.87,0,0,1,24,29.43Z" fill="#b3b3b3"/></svg>
|
||||
|
After Width: | Height: | Size: 393 B |
1
static/svgs/forms/carot.svg
Normal file
1
static/svgs/forms/carot.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><title>carot-hover</title><path d="M24,29.43a1.87,1.87,0,0,1-1.33-.55l-5.11-5.11a1.87,1.87,0,0,1,0-2.65c0.73-.73,12.14-0.73,12.87,0a1.87,1.87,0,0,1,0,2.65l-5.11,5.11A1.87,1.87,0,0,1,24,29.43Z" fill="#b3b3b3"/><rect x="0.01" width="1" height="48" fill="#231f20" opacity="0.1"/></svg>
|
||||
|
After Width: | Height: | Size: 398 B |
1
static/svgs/tooltip/info.svg
Normal file
1
static/svgs/tooltip/info.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12"><title>info</title><g id="_Group_" data-name="<Group>"><circle id="_Path_" data-name="<Path>" cx="4.71" cy="2.23" r="1.23" fill="#fff"/><path id="_Path_2" data-name="<Path>" d="M5.88,10.21l-1.63.7A1.14,1.14,0,0,1,2.69,9.65L3.28,6.5A0.43,0.43,0,0,0,2.83,6L2.17,6a0.34,0.34,0,0,1-.36-0.25h0A0.34,0.34,0,0,1,2,5.41l1.63-.86A1.14,1.14,0,0,1,5.26,5.78l-0.6,3a0.43,0.43,0,0,0,.46.51l0.51,0a0.52,0.52,0,0,1,.55.39h0A0.52,0.52,0,0,1,5.88,10.21Z" fill="#fff"/></g></svg>
|
||||
|
After Width: | Height: | Size: 593 B |
Loading…
Reference in a new issue