styling filter aside

events/forms.py

@@ -267,10 +267,10 @@ class FilterForm(forms.Form):
             for field in ['members', 'visitors', 'price']:
                 self.fields[field].choices = self.make_local_field_count(field) or self.fields[field].choices
 
-        # for field in self.fields:
-        #     field = self.fields[field]
-        #     if hasattr(field, 'queryset'):
-        #         field.queryset = field.queryset[:15]
+        for field in self.fields:
+            field = self.fields[field]
+            if hasattr(field, 'queryset'):
+                field.queryset = field.queryset[:15]
 
     def make_ids_in_sql_format(self, values):
         return tuple(values) if len(values) > 1 else '({})'.format(*values)

static/client/css/main.css

@@ -13019,6 +13019,15 @@ button.gray:hover {
     display: block;
     padding: 10px;
     background: #f2f2f2;
+    text-decoration: none;
+}
+
+.filter_form_clear_all span{
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 5px;
+    color: #464646;
+    border-bottom: 1px dotted #464646;
 }
 
 .filter_form ul{
@@ -13062,6 +13071,44 @@ button.gray:hover {
     color: #898989;
 }
 
+.filters input[type=checkbox]{
+    display: none;
+}
+
+.filters input[type=checkbox] + label{
+    cursor: pointer;
+}
+
+.filters input[type=checkbox] + label:hover{
+    background: #eee;
+}
+
+.filters input[type=checkbox]:checked + label{
+    background: #ffbc88;
+}
+
+.filters input[type=checkbox] + label:before{
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 5px;
+    width: 10px;
+    height: 10px;
+    border:  1px solid #c2c2c2;
+    border-radius: 2px;
+    background: #fff;
+}
+
+.filters input[type=checkbox]:checked + label:before{
+    background: #fff url(../img/cc.png) no-repeat 1px 1px;
+}
+
+.filter_help_text{
+    display: block;
+    color: #a3a3a3;
+    line-height: 1.2;
+    padding: 0px 10px;
+}
 
 
 

static/client/js/scripts.js

@@ -88,12 +88,30 @@ $(document).ready(function () {
 
 	$('.filter_block_label').on('click', function(event) {
 		event.preventDefault();
-		var $this = $(this);
+		var $this = $(this),
+            target = '#' +  $this.attr('for');
 
-		$this.next('ul').slideToggle(300);
+		$(target).slideToggle(300);
 		$this.find('.fa').toggleClass('fa-caret-down fa-caret-up');
 	});
 
+    $('.filter_form').on('change', 'input[type="checkbox"]', function(event) {
+        event.preventDefault();
+        var params = $('.filter_form').serialize();
+
+        console.log(params)
+        console.log(window.location);
+        console.log('------')
+
+        window.location.search = params;
+    });
+
+    $('.filter_form_clear_all').on('click', function(event) {
+        event.preventDefault();
+
+        $('.filter_form input').prop('checked', false);
+    });
+
 
 
 	$("div.ht-main_1").each(function () {

static/client/js/vendor.js

@@ -5005,12 +5005,30 @@ $(document).ready(function () {
 
 	$('.filter_block_label').on('click', function(event) {
 		event.preventDefault();
-		var $this = $(this);
+		var $this = $(this),
+            target = '#' +  $this.attr('for');
 
-		$this.next('ul').slideToggle(300);
+		$(target).slideToggle(300);
 		$this.find('.fa').toggleClass('fa-caret-down fa-caret-up');
 	});
 
+    $('.filter_form').on('change', 'input[type="checkbox"]', function(event) {
+        event.preventDefault();
+        var params = $('.filter_form').serialize();
+
+        console.log(params)
+        console.log(window.location);
+        console.log('------')
+
+        window.location.search = params;
+    });
+
+    $('.filter_form_clear_all').on('click', function(event) {
+        event.preventDefault();
+
+        $('.filter_form input').prop('checked', false);
+    });
+
 
 
 	$("div.ht-main_1").each(function () {

templates/client/includes/events/filter_form.html

@@ -6,7 +6,7 @@
     <div class="filter_form_clear_all">
         <a href="#">
             <img src="{% static 'client/img/x3.png' %}" alt="">
-            {% trans 'Сбросить все фильтры' %}</a>
+            <span>{% trans 'Сбросить все фильтры' %}</a></span>
     </div>
 
     <div class="filters">
@@ -18,8 +18,10 @@
                 {{ field.label }}
                 <i class="fa fa-caret-down"></i>
             </label>
-            {{ field.help_text|safe }}
-            {{ field }}
+            <span class="filter_help_text">{{ field.help_text|safe }}</span>
+            <div id="{{ field.auto_id }}">
+                {{ field }}
+            </div>
             {{ field.errors }}
         {% endfor %}