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

@@ -1,5 +1,5 @@
 $(document).ready(function () {
-	
+
 
 	//$('ul.about_block_menu li.m_01').click(function () {
     //    $(this).parents('ul').find('li').removeClass('active');
@@ -84,14 +84,22 @@ $(document).ready(function () {
 		//$('div.review_about_block_text').removeClass('about_show');
     //    return false;
     //});
-	
-	
-	
-	
+
+
+	$('.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 () {
         $(this).width($('div.serv-links').width());
     });
-	
+
 	$(window).resize(function () {
 
         $("div.ht-main_1").each(function () {
@@ -99,20 +107,20 @@ $(document).ready(function () {
 		});
 
     });
-	
-	
+
+
 	$("a.small_link").click(function(){
 		$("#large img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
 		return false;
 	});
 	$("#large>img").load(function(){$("#large>img:hidden").fadeIn("slow")});
-	
-	
+
+
 	setTimeout(function () {
 		$('a.subscribe_link').click();
 	}, 3000);
-	
-	
+
+
 	$('.subscribe_success').click(function () {
 		$('div.subscribe_before').hide();
 		$('div.subscribe_after').show();
@@ -121,34 +129,34 @@ $(document).ready(function () {
 		}, 2000);
         return false;
     });
-	
 
 
 
 
-	
+
+
 	var number_subjects_list = $("div.subjects_list ul li").length;
-	
+
 	var number_subjects_list_x = number_subjects_list -5;
-	
+
 	$('div.subjects_list ul li:gt(4)').hide();
-	
+
 	$('div.subjects_list span i').text(number_subjects_list_x);
-	
+
 	if (number_subjects_list > 5) {
 		$('div.subjects_list').addClass('more');
-		
+
     }
     else {
 
     }
-	
+
 	$('div.subjects_list span').click(function () {
 		$(this).parents('div.subjects_list').removeClass('more');
 		$(this).parents('div.subjects_list').find('li').show();
         return false;
     });
-	
-	
-	
-});
+
+
+
+});

static/client/js/vendor.js

@@ -4916,7 +4916,7 @@ function placeInput(width){
 
 
 $(document).ready(function () {
-	
+
 
 	//$('ul.about_block_menu li.m_01').click(function () {
     //    $(this).parents('ul').find('li').removeClass('active');
@@ -5001,14 +5001,22 @@ $(document).ready(function () {
 		//$('div.review_about_block_text').removeClass('about_show');
     //    return false;
     //});
-	
-	
-	
-	
+
+
+	$('.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 () {
         $(this).width($('div.serv-links').width());
     });
-	
+
 	$(window).resize(function () {
 
         $("div.ht-main_1").each(function () {
@@ -5016,20 +5024,20 @@ $(document).ready(function () {
 		});
 
     });
-	
-	
+
+
 	$("a.small_link").click(function(){
 		$("#large img").hide().attr({"src": $(this).attr("href"), "title": $("> img", this).attr("title")});
 		return false;
 	});
 	$("#large>img").load(function(){$("#large>img:hidden").fadeIn("slow")});
-	
-	
+
+
 	setTimeout(function () {
 		$('a.subscribe_link').click();
 	}, 3000);
-	
-	
+
+
 	$('.subscribe_success').click(function () {
 		$('div.subscribe_before').hide();
 		$('div.subscribe_after').show();
@@ -5038,37 +5046,38 @@ $(document).ready(function () {
 		}, 2000);
         return false;
     });
-	
 
 
 
 
-	
+
+
 	var number_subjects_list = $("div.subjects_list ul li").length;
-	
+
 	var number_subjects_list_x = number_subjects_list -5;
-	
+
 	$('div.subjects_list ul li:gt(4)').hide();
-	
+
 	$('div.subjects_list span i').text(number_subjects_list_x);
-	
+
 	if (number_subjects_list > 5) {
 		$('div.subjects_list').addClass('more');
-		
+
     }
     else {
 
     }
-	
+
 	$('div.subjects_list span').click(function () {
 		$(this).parents('div.subjects_list').removeClass('more');
 		$(this).parents('div.subjects_list').find('li').show();
         return false;
     });
-	
-	
-	
+
+
+
 });
+
 var Base64 = {
  
 	// private property

templates/client/includes/events/filter_form.html

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