improve advance search form layout

diff --git a/telemeta/forms/haystack_form.py b/telemeta/forms/haystack_form.py
index 3a17df021e0256d19946b1d1eb8601973aa2a255..a3af191673e47dd9420133722e11bd2e8e8b1737 100644 (file)
--- a/telemeta/forms/haystack_form.py
+++ b/telemeta/forms/haystack_form.py
@@ -47,7 +47,7 @@ class HayAdvanceForm(SearchForm):
             type_name.append((ethnic.value, ethnic.value))
         return type_name
 
-    ethnic_group = forms.CharField(required=False, label=('Population / social group'), widget=forms.Select(choices=list_ethnic_group()))
+    ethnic_group = forms.CharField(required=False, label=('Population / social group'), widget=forms.Select(attrs={'style' : 'width:100%' }, choices=list_ethnic_group()))
 
     instruments = forms.CharField(required=False, label=('Instruments'), widget=forms.TextInput(attrs={'class': 'form-control','type': 'search'}))
     collectors = forms.CharField(required=False, label=('Recordist'), widget=forms.TextInput(attrs={'class': 'form-control','type': 'search'}))
@@ -78,8 +78,8 @@ class HayAdvanceForm(SearchForm):
             list_year.append(("01/01/" + str(year), year))
         return list_year
 
-    recorded_from_date = forms.DateField(required=False, label=('Recorded from'), widget=forms.Select(choices=list_recorded_year()))
-    recorded_to_date = forms.DateField(required=False, label=('Recorded to'), widget=forms.Select(choices=list_recorded_year()))
+    recorded_from_date = forms.DateField(required=False, label=('Recorded from'), widget=forms.Select(attrs={'style':'width:47%'},choices=list_recorded_year()))
+    recorded_to_date = forms.DateField(required=False, label=('Recorded to'), widget=forms.Select(attrs={'style':'width:47%'},choices=list_recorded_year()))
 
     #to create a dynamic list of publish year
     def list_publish_year():
@@ -105,8 +105,8 @@ class HayAdvanceForm(SearchForm):
             list_year.append((year, year))
         return list_year
 
-    year_published_from = forms.IntegerField(required=False, label=('Year published from'), widget=forms.Select(choices=list_publish_year()))
-    year_published_to = forms.IntegerField(required=False, label=('Year published to'), widget=forms.Select(choices=list_publish_year()))
+    year_published_from = forms.IntegerField(required=False, label=('Year published from'), widget=forms.Select(attrs={'style':'width:47%'},choices=list_publish_year()))
+    year_published_to = forms.IntegerField(required=False, label=('Year published to'), widget=forms.Select(attrs={'style':'width:47%'},choices=list_publish_year()))
 
     viewable_choice = (('1', 'no preference'), ('2', 'fichier dans le player + full'), ('3', 'fichier dans le player(j\'ai un compte)'))
     viewable = forms.CharField(required=False, label=('Viewable'), widget=forms.RadioSelect(choices=viewable_choice), initial=1)
@@ -133,7 +133,7 @@ class HayAdvanceForm(SearchForm):
             type_name.append((context.value, context.value))
         return type_name
 
-    recording_context = forms.CharField(required=False, label=('Recording Context'), widget=forms.Select(choices=list_recording_context()))
+    recording_context = forms.CharField(required=False, label=('Recording Context'), widget=forms.Select(attrs={'style':'width:100%'},choices=list_recording_context()))
 
     #to create a dynamic list of physical format
     def list_physical_format():
@@ -144,7 +144,7 @@ class HayAdvanceForm(SearchForm):
             type_name.append((physical_format.value, physical_format.value))
         return type_name
 
-    physical_format = forms.CharField(required=False, label=('Physical Format'), widget=forms.Select(choices=list_physical_format()))
+    physical_format = forms.CharField(required=False, label=('Physical Format'), widget=forms.Select(attrs={'style':'width:100%'},choices=list_physical_format()))
 
     code = forms.CharField(required=False, label=('Code'), widget=forms.TextInput(attrs={'class': 'form-control','type': 'search'}))
 #end

diff --git a/telemeta/static/telemeta/css/jquery-ui.css b/telemeta/static/telemeta/css/jquery-ui.css
index 159ad9ae18a5d63b32dc2e0c7d073210e8129951..6cd87fc6f19d02793d1ff5f65b148eb23af17ba4 100644 (file)
--- a/telemeta/static/telemeta/css/jquery-ui.css
+++ b/telemeta/static/telemeta/css/jquery-ui.css
@@ -932,7 +932,7 @@ body .ui-tooltip {
        border-color:#6a0307;
 }
 
-li {
+.ui-buttonset li {
        display:inline;
 }
 

diff --git a/telemeta/templates/search/advanceSearch.html b/telemeta/templates/search/advanceSearch.html
index bde392c196880ea54c844c17bd9bd4462c28c20b..32b8150b5e3f7954720f9c0e2e30da058bece18c 100644 (file)
--- a/telemeta/templates/search/advanceSearch.html
+++ b/telemeta/templates/search/advanceSearch.html
@@ -8,6 +8,51 @@
 {% endblock %}
 {% block extra_stylesheets %}
     <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}telemeta/css/jquery-ui.css" />
+    <style>
+        .overflow{
+            max-height:200px;
+        }
+
+        .module ul, li {
+            border-radius: 0px 0px 0px 0px;
+        }
+
+        .ui-selectmenu-button.ui-widget.ui-state-default{
+            background-image:none;
+            background-color:#6a0307;
+            border-color:#6a0307;
+            color:white;
+        }
+        .ui-selectmenu-button.ui-widget.ui-state-hover{
+            background-image:none;
+            background-color:#6a0307;
+            border-color:#6a0307;
+            color:white;
+        }
+
+        .ui-selectmenu-button.ui-widget.ui-state-focus{
+            background-image:none;
+            background-color:#6a0307;
+            border-color:#6a0307;
+            color:white;
+        }
+
+        .ui-selectmenu-button.ui-widget.ui-state-default .ui-icon{
+            background-image:url("{{ STATIC_URL }}telemeta/css/images/ui-icons_ffffff_256x240.png");
+        }
+
+        .ui-menu-item{
+            background-color:white;
+        }
+
+        .ui-menu-item.ui-state-focus{
+            background-image:none;
+            background-color:#6a0307;
+            border-color:#6a0307;
+            color:white;
+        }
+
+    </style>
 {% endblock %}
 {% block content %}
     <form method="get" action=".">
@@ -36,7 +81,7 @@
                 <div class="fieldWrapper">
                     {{form.year_published_from.errors}} {{form.year_published_to.errors}}
                     <label>Year Published :</label></br>
-                    {{form.year_published_from}} - {{form.year_published_to}}
+                    {{form.year_published_from}} <span style="font-size:3em" aria-hidden="true">-</span> {{form.year_published_to}}
                 </div>
                 <div class="fieldWrapper">
                     {{form.media_type.errors}}
@@ -91,7 +136,7 @@
                 <div class="fieldWrapper">
                     {{form.recorded_from_date.errors}} {{form.recorded_to_date.errors}}
                     <label>Recording date:</label></br>
-                    {{form.recorded_from_date}} - {{form.recorded_to_date}}
+                    {{form.recorded_from_date}} <span style="font-size:3em" aria-hidden="true">-</span> {{form.recorded_to_date}}
                 </div>
                 <div class="fieldWrapper">
                     {{form.item_status_errors}}
@@ -187,6 +232,28 @@
             $("#id_media_type").buttonset();
             $("#id_viewable").buttonset();
             $("#id_item_status").buttonset();
+            $("#id_ethnic_group").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+            $("#id_year_published_from").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+            $("#id_year_published_to").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+            $("#id_recorded_from_date").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+            $("#id_recorded_to_date").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+            $("#id_recording_context").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+            $("#id_physical_format").selectmenu({
+                icons : {button: "ui-icon-carat-2-n-s"}
+            }).selectmenu("menuWidget").addClass("overflow");
+
         });
     </script>
 {% endblock %}