Skip to content

E
edx-platform
Commit b7174d6a by Galen Frechette Committed by Matthew Mongeau
Options

adds styles to new inputs on signup form

parent d26330be
Showing with 141 additions and 52 deletions
lms/static/sass/application.css 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/sass/shared/_forms.scss
...@@ -9,6 +9,7 @@ form { ...@@ -9,6 +9,7 @@ form {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
textarea,
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"] {
...@@ -34,6 +35,10 @@ form { ...@@ -34,6 +35,10 @@ form {
} }
} }
textarea {
height: 60px;
}
input[type="submit"] { input[type="submit"] {
@include button(shiny, $blue); @include button(shiny, $blue);
@include border-radius(3px); @include border-radius(3px);
......
lms/static/sass/shared/_modal.scss
...@@ -138,6 +138,14 @@ ...@@ -138,6 +138,14 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
.input-group {
@include clearfix;
border-bottom: 1px solid rgb(210,210,210);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
margin-bottom: 30px;
padding-bottom: 10px;
}
label { label {
display: none; display: none;
} }
...@@ -146,6 +154,14 @@ ...@@ -146,6 +154,14 @@
margin-right: 5px; margin-right: 5px;
} }
textarea {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
input[type="email"], input[type="email"],
input[type="text"], input[type="text"],
input[type="password"] { input[type="password"] {
...@@ -177,6 +193,48 @@ ...@@ -177,6 +193,48 @@
} }
} }
.citizenship, .gender, .date-of-birth {
margin-bottom: 20px;
.input-wrapper {
}
label {
display: block;
}
select {
width: 100%;
}
}
.citizenship, .gender {
float: left;
width: flex-grid(6);
}
.citizenship {
margin-right: flex-gutter();
}
.date-of-birth {
float: left;
width: flex-grid(12);
select {
@include box-sizing(border-box);
display: block;
float: left;
margin-right: flex-gutter();
max-width: flex-grid(4);
width: flex-grid(4);
&:last-child {
margin: 0px;
}
}
}
.submit { .submit {
padding-top: 10px; padding-top: 10px;
......
lms/templates/signup_modal.html
...@@ -16,58 +16,84 @@ ...@@ -16,58 +16,84 @@
<div class="notice"></div> <div class="notice"></div>
<div id="enroll_error" class="modal-form-error" name="enroll_error"></div> <div id="enroll_error" class="modal-form-error" name="enroll_error"></div>
<div id="enroll_error" name="enroll_error"></div> <div id="enroll_error" name="enroll_error"></div>
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail"> <div class="input-group">
<label>Password</label> <label>E-mail</label>
<input name="password" type="password" placeholder="Password"> <input name="email" type="email" placeholder="E-mail">
<label>Public Username</label> <label>Password</label>
<input name="username" type="text" placeholder="Public Username"> <input name="password" type="password" placeholder="Password">
<label>Full Name</label> <label>Public Username</label>
<input name="name" type="text" placeholder="Full Name"> <input name="username" type="text" placeholder="Public Username">
<p> <label>Full Name</label>
<label>Mailing address</label> <input name="name" type="text" placeholder="Full Name">
<textarea name="mailing_address" placeholder="Mailing address"></textarea> <label>Mailing address</label>
</p> <textarea name="mailing_address" placeholder="Mailing address"></textarea>
<label>Country of citizenship</label> </div>
<select name="country">
%for country_code, country_name in COUNTRIES: <div class="input-group">
<option value="${country_code}">${country_name}</option> <section class="citizenship">
%endfor <label>Citizenship</label>
</select> <div class="input-wrapper">
<label>Preferred Language</label> <select name="country">
<input name="language" type="text" placeholder="Preferred Language"> %for country_code, country_name in COUNTRIES:
<label>Gender</label> <option value="${country_code}">${country_name}</option>
<select name="gender"> %endfor
%for code, gender in UserProfile.GENDER_CHOICES: </select>
<option value="${code}">${gender}</option> </div>
%endfor </section>
</select>
<label>Date of birth</label> <section class="gender">
<select name='date_of_birth__month'> <label>Gender</label>
%for month in range(1,13): <div class="input-wrapper">
<option value="${month}">${month}</option> <select name="gender">
%endfor %for code, gender in UserProfile.GENDER_CHOICES:
</select> <option value="${code}">${gender}</option>
<select name='date_of_birth__day'> %endfor
%for day in range(1,32): </select>
<option value="${day}">${day}</option> </div>
%endfor </section>
</select>
<select name='date_of_birth__year'> <section class="date-of-birth">
%for year in range(date.today().year,1899,-1): <label>Date of birth</label>
<option value="${year}">${year}</option> <div class="input-wrapper">
%endfor <select name='date_of_birth__month'>
</select> <option value="">month</option>
<label class="terms-of-service"> %for month in range(1,13):
<input name="terms_of_service" type="checkbox" value="true"> <option value="${month}">${month}</option>
I agree to the %endfor
<a href="${reverse('tos')}">Terms of Service</a> </select>
</label>
<label class="honor-code"> <select name='date_of_birth__day'>
<input name="honor_code" type="checkbox" value="true"> <option value="">day</option>
I agree to the %for day in range(1,32):
<a href="${reverse('honor')}" target="blank">Honor Code</a> <option value="${day}">${day}</option>
</label> %endfor
</select>
<select name='date_of_birth__year'>
<option value="">year</option>
%for year in range(date.today().year,1899,-1):
<option value="${year}">${year}</option>
%endfor
</select>
</div>
</section>
</div>
<div class="input-group">
<label class="terms-of-service">
<input name="terms_of_service" type="checkbox" value="true">
I agree to the
<a href="#">Terms of Service</a>
</label>
<label class="honor-code">
<input name="honor_code" type="checkbox" value="true">
I agree to the
<a href="#">Honor Code</a>
, sumarized below as:
</label>
</div>
<div class="submit"> <div class="submit">
<input name="submit" type="submit" value="Create My Account"> <input name="submit" type="submit" value="Create My Account">
......
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