Skip to content

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

adds styles to new inputs on signup form

parent dd0cd57e
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 {
-webkit-font-smoothing: antialiased;
}
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
......@@ -34,6 +35,10 @@ form {
}
}
textarea {
height: 60px;
}
input[type="submit"] {
@include button(shiny, $blue);
@include border-radius(3px);
......
lms/static/sass/shared/_modal.scss
......@@ -138,6 +138,14 @@
position: relative;
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 {
display: none;
}
......@@ -146,6 +154,14 @@
margin-right: 5px;
}
textarea {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
input[type="email"],
input[type="text"],
input[type="password"] {
......@@ -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 {
padding-top: 10px;
......
lms/templates/signup_modal.html
......@@ -16,58 +16,84 @@
<div class="notice"></div>
<div id="enroll_error" class="modal-form-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">
<label>Password</label>
<input name="password" type="password" placeholder="Password">
<label>Public Username</label>
<input name="username" type="text" placeholder="Public Username">
<label>Full Name</label>
<input name="name" type="text" placeholder="Full Name">
<p>
<label>Mailing address</label>
<textarea name="mailing_address" placeholder="Mailing address"></textarea>
</p>
<label>Country of citizenship</label>
<select name="country">
%for country_code, country_name in COUNTRIES:
<option value="${country_code}">${country_name}</option>
%endfor
</select>
<label>Preferred Language</label>
<input name="language" type="text" placeholder="Preferred Language">
<label>Gender</label>
<select name="gender">
%for code, gender in UserProfile.GENDER_CHOICES:
<option value="${code}">${gender}</option>
%endfor
</select>
<label>Date of birth</label>
<select name='date_of_birth__month'>
%for month in range(1,13):
<option value="${month}">${month}</option>
%endfor
</select>
<select name='date_of_birth__day'>
%for day in range(1,32):
<option value="${day}">${day}</option>
%endfor
</select>
<select name='date_of_birth__year'>
%for year in range(date.today().year,1899,-1):
<option value="${year}">${year}</option>
%endfor
</select>
<label class="terms-of-service">
<input name="terms_of_service" type="checkbox" value="true">
I agree to the
<a href="${reverse('tos')}">Terms of Service</a>
</label>
<label class="honor-code">
<input name="honor_code" type="checkbox" value="true">
I agree to the
<a href="${reverse('honor')}" target="blank">Honor Code</a>
</label>
<div class="input-group">
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail">
<label>Password</label>
<input name="password" type="password" placeholder="Password">
<label>Public Username</label>
<input name="username" type="text" placeholder="Public Username">
<label>Full Name</label>
<input name="name" type="text" placeholder="Full Name">
<label>Mailing address</label>
<textarea name="mailing_address" placeholder="Mailing address"></textarea>
</div>
<div class="input-group">
<section class="citizenship">
<label>Citizenship</label>
<div class="input-wrapper">
<select name="country">
%for country_code, country_name in COUNTRIES:
<option value="${country_code}">${country_name}</option>
%endfor
</select>
</div>
</section>
<section class="gender">
<label>Gender</label>
<div class="input-wrapper">
<select name="gender">
%for code, gender in UserProfile.GENDER_CHOICES:
<option value="${code}">${gender}</option>
%endfor
</select>
</div>
</section>
<section class="date-of-birth">
<label>Date of birth</label>
<div class="input-wrapper">
<select name='date_of_birth__month'>
<option value="">month</option>
%for month in range(1,13):
<option value="${month}">${month}</option>
%endfor
</select>
<select name='date_of_birth__day'>
<option value="">day</option>
%for day in range(1,32):
<option value="${day}">${day}</option>
%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">
<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