layout changes for rangesearch

ckanext/odsh/fanstatic/odsh.js

 $(document).ready(function() {
     $('.mylabel').click(function() {
-	console.log($(this).siblings());
 	window.location = $(this).siblings('a').attr('href');
     });
 });

ckanext/odsh/fanstatic/odsh_rangesearch.js

+ckan.module('odsh_rangesearch', function ($)
+{
+    return {
+        initialize: function ()
+        {
+            var start = $("#ext_startdate")
+            var end = $("#ext_enddate")
+            var checkbox = $('#check-rangefilter')
+            var label = $('#rangesearch-label')
+            label.click(function ()
+            {
+                if (label.hasClass('checked'))
+                {
+                    start.val('')
+                    end.val('')
+                }
+                if (!label.hasClass('disabled'))
+                    $('#date-search-form').submit();
+            });
+
+            var updateCheckbox = function ()
+            {
+                var enable = (start.val() || end.val())
+                label.toggleClass('disabled', !enable);
+                if (!enable)
+                    $('#date-search-form').submit();
+            };
+            start.change(updateCheckbox)
+            end.change(updateCheckbox)
+        }
+    };
+});
\ No newline at end of file

ckanext/odsh/public/odsh.css

@@ -260,7 +260,8 @@ input[type=radio], input[type=checkbox] {
     display:none;
 }
 
-/* input[type=checkbox] + label.checkbox,  */
+
+label.rangesearch,
 input[type=checkbox] + label.mylabel {
     background: #fff;
     border: 1px solid black;
@@ -271,12 +272,8 @@ input[type=checkbox] + label.mylabel {
     margin-bottom: 0px;
     min-height: 8px;
 }
-/* input[type=checkbox] + label.checkbox{
-
-    border: 1px solid black;
-} */
 
-/* input[type=checkbox]:checked + label.checkbox,  */
+label.rangesearch.checked,
 input[type=checkbox]:checked + label.mylabel {
     background: url(/base/images/checked.png);
     background-color: #fff;
@@ -290,14 +287,12 @@ input[type=checkbox]:checked + label.mylabel {
     margin-bottom: 0px;
 
 }
-/* .checklabel .controls > .checkbox:first-child {
-    padding-top: 0px;
-} */
 .checklabel input[type="checkbox"]
 {
     float: inherit;
 }
 
+label.rangesearch,
 label.mylabel  {
     margin-right: 3px;
     margin-bottom: 0px;
@@ -307,10 +302,37 @@ label.mylabel  {
     user-select: none; /* Standard */
 }
 
+label.rangesearch::after,
 label.mylabel::after {
     content: "";
 }
 
+label.rangesearch.disabled {
+    cursor: default;
+    border-color: #999999;
+}
+
+.rangesearch-controls{
+    margin-top:10px;
+}
+
+.rangesearch{
+    display: inline-block;
+}
+
+.controls input.rangesearch{
+    width:155px;
+    padding: 2px;
+    font-size: 12px;
+    line-height: 1.16666667em;
+}
+
+.controls.rangesearch label{
+    font-size: 12px;
+    line-height: 1.16666667em;
+    color:black
+}
+
 /* following makes the secondary span (left side, facets etc.) the same height as the primary span */
 /* see: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height */
 .is-table-row {

ckanext/odsh/templates/package/search.html

@@ -32,15 +32,35 @@ default_extent="{ \"type\": \"Polygon\", \"coordinates\": [[[7.6574,53.1632],[11
   </div>
 
   {% block datereange_search %}
-  <form id="date-search-form" method="get" action="{% url_for controller='package', action='search' %}">
-    {{ form.input_raw('ext_startdate', id='ext_startdate', value=request.params['ext_startdate'],
-    classes=['control-full'],type='date',placeholder=_('from'))
-    }}
-    {{ form.input_raw('ext_enddate', id='ext_enddate', value=request.params['ext_enddate'],
-    classes=['control-full'],type='date',placeholder=_('to'))
-    }}
-    <a href="javascript:{}" onclick="$('#date-search-form').submit();" class="action">{{_('submit date search') }}</a>
+  {% resource 'odsh/odsh_rangesearch.js' %}
+  {% set has_range_filter = request.params.get('ext_startdate') or request.params.get('ext_enddate') %}
+<section class="module module-narrow module-shallow">
+  <nav>
+    <div class="nav-title">{{_('timerange')}}</div>
+    <div class="rangesearch-controls">
+      <form id="date-search-form" method="get" action="{% url_for controller='package', action='search' %}" data-module="odsh_rangesearch">
+        <div class='span1'>
+          <label id="rangesearch-label" class="rangesearch {% if has_range_filter %} checked {%else%} disabled {% endif %}"></label>
+        </div>
+        <div class='span1'>
+          <div class='controls rangesearch'>
+            {%- set start = request.params['ext_startdate'] -%}
+            {%- set end = request.params['ext_enddate'] -%}
+            {%- set typeStart = 'text' if not start else 'date' -%}
+            {%- set typeEnd = 'text' if not end else 'date' -%}
+            {%- set onFocus = 'onfocus=(this.type=\'date\')' -%}
+            <label for="ext_startdate">{{_('from')|title}}</label>
+            <input id="ext_startdate" name="ext_startdate" type="{{ typeStart }}" value="{{start}}" placeholder="{{ _('Date') }}"
+              {{ onFocus }} class='rangesearch' />
+            <label for="ext_enddate">{{_('to')|title}}</label>
+            <input id="ext_enddate" name="ext_enddate" type="{{ typeEnd }}" value="{{end}}" placeholder="{{ _('Date') }}"
+              {{ onFocus }} class='rangesearch' />
+          </div>
+        </div>
       </form>
+    </div>
+  </nav>
+</section>
   {% endblock %}
 
 </div>