DigitalCampus#302: Finished styling search form

chaotic-kingdoms · Apr 18, 2016 · e36685b · e36685b
1 parent 47876ff
commit e36685b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 11 deletions.
diff --git a/oppia/profile/forms.py b/oppia/profile/forms.py
@@ -13,7 +13,7 @@
 from django.utils.translation import ugettext as _
 
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Button, Layout, Fieldset, ButtonHolder, Submit, Div, HTML, Field, Row
+from crispy_forms.layout import Button, Layout, Fieldset, ButtonHolder, Submit, Div, HTML, Field, Row, Column
 
 
 class LoginForm(forms.Form):
@@ -298,19 +298,27 @@ class UserSearchForm(forms.Form):
     is_staff = forms.BooleanField(initial=False)
 
     register_start_date = forms.CharField(required=False,label=False)
-
     register_end_date = forms.CharField(required=False,label=False)
 
     def __init__(self, *args, **kwargs):
         super(UserSearchForm, self).__init__(*args, **kwargs)
         self.helper = FormHelper()
-        self.fields['register_start_date'].label = False
         self.helper.form_class = 'form-horizontal'
+        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2 control-label'
+        self.helper.field_class = 'col-sm-8 col-md-5 col-lg-5'
+        self.helper.form_method = 'GET'
         self.helper.layout = Layout(
-                'first_name','last_name','is_active','is_staff',
+                'first_name','last_name',
+                Row(Div('is_active', css_class='col-sm-4'),Div('is_staff',css_class='col-sm-4')),
                 Row(
-                    Div(Field('register_start_date',css_class='date-picker-input'),css_class='date-picker-row-fluid'),
-                    Div(Field('register_end_date',css_class='date-picker-input'),css_class='date-picker-row-fluid'),
-                    css_class='date-picker-row-fluid'
+                    Column(HTML('<label>Register date</label>'), css_class=self.helper.label_class),
+                    Div(HTML('<div class="btn hidden-xs disabled">from</div>'),css_class='date-picker-row-fluid'),
+                    Column(Field('register_start_date',css_class='date-picker-input'),css_class='date-picker-row-fluid'),
+                    Div(HTML('<div class="btn hidden-xs disabled">to</div>'),css_class='date-picker-row-fluid'),
+                    Column(Field('register_end_date',css_class='date-picker-input'),css_class='date-picker-row-fluid'),
                 ),
+                Div(
+                   Submit('submit', _('Search'), css_class='btn btn-default'),
+                   css_class='col-lg-7 col-md-7 col-sm-11 text-right',
+                )
             )
diff --git a/oppia/static/oppia/style.css b/oppia/static/oppia/style.css
@@ -201,6 +201,7 @@ tr.hover:hover {
 div.date-picker-row-fluid {
 	float:left;
 }
+div.date-picker-row-fluid .controls{ width: 100%;}
 
 .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
     background-color: #77A240;

diff --git a/oppia/templates/oppia/profile/search_user.html b/oppia/templates/oppia/profile/search_user.html
@@ -17,7 +17,7 @@ <h2>{% trans 'Search users' %}</h2>
 
     <div class="panel-heading" role="tab" id="headingOne">
           <div class="row">
-              <div class="col-sm-3">
+              <div class="col-sm-3 col-xs-10">
                   <form method="get">
               <div class="input-group">
 
@@ -27,14 +27,14 @@ <h2>{% trans 'Search users' %}</h2>
                 </div>
                       </form>
             </div>
-              <div class="col-sm-9">
-                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-plus-sign"></span> advanced search </a>
+              <div class="col-sm-9 col-xs-2 text-right">
+                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-plus-sign"></span> <span class="hidden-xs">advanced search </span></a>
               </div>
           </div>
 
     </div>
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
-      <div class="panel-body row">
+      <div class="panel-body">
             {% crispy search_form %}
       </div>
     </div>