Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ECOM-466 Added support for custom error messages. Styled select widths

Browse Source
This commit is contained in:
AlasdairSwan
2014-10-24 13:23:56 -04:00
parent 60f02feb71
commit a86e9e68db
3 changed files with 92 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lms/static/sass/views/_login-register.scss
View File

@@ -119,6 +119,8 @@
}
.form-field {
@include clearfix;
clear: both;
width: 100%;
margin: 0 0 $baseline 0;
@@ -277,6 +279,12 @@
@include media( $tablet ) {
$grid-columns: 8;
%inline-form-field-tablet {
clear: none;
display: inline-block;
float: left;
}
.headline,
.tagline,
.form-type {
@@ -287,11 +295,30 @@
.form-toggle {
margin-right: 5px;
}
.form-field {
&.select-gender {
@extend %inline-form-field-tablet;
width: calc( 50% - 10px );
margin-right: 20px;
}
&.select-year_of_birth {
@extend %inline-form-field-tablet;
width: calc( 50% - 10px );
}
}
}
@include media( $desktop ) {
$grid-columns: 12;
%inline-form-field-desktop {
clear: none;
display: inline-block;
float: left;
}
.headline,
.tagline,
.form-type {
@@ -302,5 +329,24 @@
.form-toggle {
margin-right: 10px;
}
.form-field {
&.select-level_of_education {
@extend %inline-form-field-desktop;
width: 290px;
margin-right: 20px;
}
&.select-gender {
@extend %inline-form-field-desktop;
width: 60px;
margin-right: 20px;
}
&.select-year_of_birth {
@extend %inline-form-field-desktop;
width: 100px;
}
}
}
}

25
lms/templates/student_account/form_field.underscore
View File

@@ -1,4 +1,4 @@
<p class="form-field">
<p class="form-field <%=type%>-<%= name %>">
<% if ( type !== 'checkbox' ) { %>
<label for="<%= form %>-<%= name %>">
<%= label %>
@@ -11,22 +11,39 @@
<% } %>
<% if ( type === 'select' ) { %>
<select id="<%= form %>-<%= name %>" name="<%= name %>" class="input-inline" aria-describedby="<%= form %>-<%= name %>-desc">
<select id="<%= form %>-<%= name %>"
name="<%= name %>"
class="input-inline"
aria-describedby="<%= form %>-<%= name %>-desc">
<% _.each(options, function(el) { %>
<option value="<%= el.value%>"><%= el.name %></option>
<% }); %>
</select>
<% } else if ( type === 'textarea' ) { %>
<textarea id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" class="input-block" aria-describedby="<%= form %>-<%= name %>-desc"
<textarea id="<%= form %>-<%= name %>"
type="<%= type %>"
name="<%= name %>"
class="input-block"
aria-describedby="<%= form %>-<%= name %>-desc"
<% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
<% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
<% if ( typeof errorMessages !== 'undefined' ) { _.each(errorMessages, function(msg, type) {%>
data-errormsg-<%= type %>="<%= msg %>"
<% }); } %>
<% if ( required ) { %> required<% } %> >
</textarea>
<% } else { %>
<input id="<%= form %>-<%= name %>" type="<%= type %>" name="<%= name %>" class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>" aria-describedby="<%= form %>-<%= name %>-desc"
<input id="<%= form %>-<%= name %>"
type="<%= type %>"
name="<%= name %>"
class="input-block <% if ( type === 'checkbox' ) { %>checkbox<% } %>"
aria-describedby="<%= form %>-<%= name %>-desc"
<% if ( restrictions.min_length ) { %> minlength="<%= restrictions.min_length %>"<% } %>
<% if ( restrictions.max_length ) { %> maxlength="<%= restrictions.max_length %>"<% } %>
<% if ( required ) { %> required<% } %>
<% if ( typeof errorMessages !== 'undefined' ) { _.each(errorMessages, function(msg, type) {%>
data-errormsg-<%= type %>="<%= msg %>"
<% }); } %>
value="<%- defaultValue %>"
/>
<% } %>