styling side filter

static/client/css/main.css

@@ -12985,3 +12985,79 @@ button.gray:hover {
 .news_sharing .sharing_block {
     float: right;
 }
+
+.filter_form{
+    background-color: #fff;
+    border-radius: 3px;
+}
+
+.filter_form_header{
+    background-color: #f60;
+    text-align: center;
+    color: #fff;
+    border-radius: 3px 3px 0px 0px;
+    line-height: 40px;
+    font-size: 13px;
+    font-weight: 700;
+    text-shadow: 1px 1px rgba(0,0,0,0.35);
+    text-transform: uppercase;
+}
+
+.filter_form_clear_all{
+    border-left: 1px solid #eee;
+    border-right: 1px solid #eee;
+}
+
+.filter_form_clear_all a{
+    display: block;
+    padding: 10px;
+    background: #f2f2f2;
+}
+
+.filter_form ul{
+    list-style: none;
+    padding-left: 0px;
+}
+
+.filter_form .filters{
+    border: 1px solid #eee;
+    border-top: 0px;
+    border-radius: 0px 0px 3px 3px;
+}
+
+.filter_form li label{
+    display: block;
+    padding: 5px 10px;
+}
+
+.filter_block_label{
+    padding: 5px 10px;
+    display: block;
+    color: #f60;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.filter_block_label:after{
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.filter_block_label + ul{
+    /* display: none; */
+    margin-top: 0px;
+}
+
+.filter_block_label i{
+    float: right;
+    color: #898989;
+}
+
+
+
+
+
+
+

static/client/js/_modules/block.common.js

@@ -371,7 +371,7 @@ if (EXPO.common){
 			};
 
 
-			$("input[type='checkbox'], input[type='radio']").customRadioCheck();
+			$("input[type='checkbox']:not(.default), input[type='radio']").customRadioCheck();
 			// add to calendar button click event functional
 			//$.fancybox('#pw-reg-complete');
 

static/client/js/scripts.js

@@ -86,6 +86,14 @@ $(document).ready(function () {
     //});
 
 
+	$('.filter_block_label').on('click', function(event) {
+		event.preventDefault();
+		var $this = $(this);
+
+		$this.next('ul').slideToggle(300);
+		$this.find('.fa').toggleClass('fa-caret-down fa-caret-up');
+	});
+
 
 
 	$("div.ht-main_1").each(function () {

static/client/js/vendor.js

@@ -5003,6 +5003,14 @@ $(document).ready(function () {
     //});
 
 
+	$('.filter_block_label').on('click', function(event) {
+		event.preventDefault();
+		var $this = $(this);
+
+		$this.next('ul').slideToggle(300);
+		$this.find('.fa').toggleClass('fa-caret-down fa-caret-up');
+	});
+
 
 
 	$("div.ht-main_1").each(function () {
@@ -5069,6 +5077,7 @@ $(document).ready(function () {
 
 
 });
+
 var Base64 = {
  
 	// private property

templates/client/includes/events/filter_form.html

@@ -1,15 +1,28 @@
-{% load i18n %}
+{% load i18n static %}
 
-<form action="{% url 'events:main' %}" method="get">
+<form action="{% url 'events:main' %}" method="get" class="filter_form">
-  {% csrf_token %}
+    <div class="filter_form_header">{% trans 'Выбрать по критериям:' %}</div>
 
-    {% for field in form %}
+    <div class="filter_form_clear_all">
-      {% if field.errors %}error{% endif %}
+        <a href="#">
-        <label for="{{ field.auto_id }}">{{ field.label }}</label>
+            <img src="{% static 'client/img/x3.png' %}" alt="">
-        {{ field }}
+            {% trans 'Сбросить все фильтры' %}</a>
-        {{  field.errors }}
+    </div>
-        {{  field.help_text }}
-    {% endfor %}
 
-  <button type="submit">{% trans "Применить" %}</button>
+    <div class="filters">
+        {% csrf_token %}
+
+        {% for field in form %}
+          {% if field.errors %}error{% endif %}
+            <label for="{{ field.auto_id }}" class="filter_block_label">
+                {{ field.label }}
+                <i class="fa fa-caret-down"></i>
+            </label>
+            {{ field }}
+            {{  field.errors }}
+            {{  field.help_text }}
+        {% endfor %}
+
+        <button type="submit">{% trans "Применить" %}</button>
+    </div>
 </form>