Adjusting mural responsivity

Zambom
1 parent 76b0fb72
Showing 9 changed files with 117 additions and 145 deletions Show diff stats
amadeus/static/css/base/amadeus.css
amadeus/static/css/base/amadeus_responsive.css
amadeus/static/js/mural_subject.js
amadeus/static/js/mural_ungeneral.js
amadeus/templates/base.html
mural/templates/mural/_view.html
mural/templates/mural/list.html
mural/templates/mural/list_category.html
mural/templates/mural/list_subject.html
@@ -1084,6 +1084,18 @@ li.item .notify_badge {
     cursor: text;
 }
+.post-filter-small {
+    padding-top: 10px;
+    padding-left: 15px;
+    margin-bottom: 10px;
+}
+.post-filter-small h4 {
+    margin-bottom: 10px !important;
+}
+.post-filter-small .checkbox {
+    margin-right: 15px;
+}
+
 .post-filter h4 {
     font-weight: 700;
     margin-bottom: 15px;
@@ -43,6 +43,16 @@
 	.mural .post_make .post-field h4 {
 		line-height: 2.3em;
 	}
+
+	.post .post-comment .user-img {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	.comment-section .comment .comment-img {
+		padding-left: 10px;
+		padding-right: 10px;	
+	}
 }
 @media(max-width: 768px) {
@@ -132,6 +142,16 @@
 	.mural .post_make .post-field h4 {
 		line-height: 2em;
 	}
+
+	.post .post-comment .user-img {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+
+	.comment-section .comment .comment-img {
+		padding-left: 5px;
+		padding-right: 5px;	
+	}
 }
 @media(min-width: 768px) {
@@ -1,136 +0,0 @@
-$('.mural-subject').on('shown.bs.collapse', function(e) {
-    if($(this).is(e.target)){
-    	var li = $(".breadcrumb").find('li:last-child');
-		var li_text = $(li).html();
-		var url = $(".mural_url").val();
-		var new_li = $(li).clone();
-		
-		new_li.html($(this).parent().find('.panel-title span').text());
-
-		$(li).html("<a href='" + url + "'>" + li_text + "</a>");
-		$(li).append("<span class='divider'>/</span>");
-
-		new_li.appendTo('.breadcrumb');
-
-		var post_section = $(this).find('.posts'),
-			without = $(this).find('.no-subjects'),
-			loading = $(this).find('.loading-posts'),
-			more = $(this).find('.more-posts'),
-			filters = $(this).find('.post-filters'),
-			clear_filters = $(this).find('.clear_filter'),
-			mural = post_section.parent().parent();
-
-		if (post_section.children().length == 0) {
-			var url = $(this).find('.mural').data('url');
-
-			$.ajax({
-                url: url,
-                dataType: 'json',
-                success: function (data) {
-                	loading.hide();
-
-                    if (data.count > 0) {
-                    	post_section.append(data.posts);
-
-                    	mural.data('pages', data.num_pages);
-                    	mural.data('page', data.num_page);
-
-                    	setTimeout(function () { postHeightLimits() }, 100);
-
-                    	if (data.num_page < data.num_pages) {
-                    		more.show();
-                    	} else {
-                    		more.hide();
-                    	}
-
-                    	$('.mural_badge').each(function () {
-							var actual = $(this).text();
-
-							if (actual != "+99") {
-								actual = parseInt(actual, 10) - data.unviewed;
-
-								if (actual <= 0) {
-									$(this).hide();
-								} else {
-									$(this).text(actual);
-								}
-							}
-						});
-
-						$('.sub_badge').each(function () {
-							var actual = $(this).text();
-
-							if (actual != "+99") {
-								actual = parseInt(actual, 10) - data.unviewed;
-
-								if (actual < 0) {
-									actual = 0;
-								}
-								
-								$(this).text(actual);
-							}
-						});
-
-                    	without.hide();
-                    } else {
-                    	more.hide();
-
-                    	without.show();
-                    }
-                }
-            });
-		}
-
-		more.click(function () {
-			var url = mural.data('url'),
-				pageNum = mural.data('page'),
-		        numberPages = mural.data('pages'),
-		        favorites = mural.data('fav'),
-		        mine = mural.data('mine'),
-		        showing = new_posts.join(',');
-
-		    if (pageNum == numberPages) {
-		        return false
-		    }
-
-		    pageNum = pageNum + 1;
-
-		    more.hide();
-
-		    loading.show();
-
-		    $.ajax({
-		    	url: url,
-		    	data: {'page': pageNum, 'favorite': favorites, 'mine': mine, 'showing': showing},
-		    	dataType: 'json',
-		    	success: function (data) {
-		    		loading.hide();
-
-		    		post_section.append(data.posts);
-
-                	mural.data('pages', data.num_pages);
-                	mural.data('page', data.num_page);
-
-                	setTimeout(function () { postHeightLimits() }, 100);
-
-                	if (data.num_page < data.num_pages) {
-                		more.show();
-                	} else {
-                		more.hide();
-                	}
-		    	}
-		    });
-		});
-	}
-});
-
-$('.mural-subject').on('hidden.bs.collapse', function(e) {
-    if($(this).is(e.target)){
-    	$(".breadcrumb").find('li:last-child').remove();
-
-		var li = $(".breadcrumb").find('li:last-child');
-		var text = $(li).find('a').text();
-
-		$(li).html(text);
-    }
-});
 \ No newline at end of file
@@ -122,6 +122,22 @@ $(&#39;.mural-ungeneral&#39;).on(&#39;shown.bs.collapse&#39;, function(e) {
 		    });
 		});
+		$("input[name='favorite']").on('click', function () {
+			var checked = $(this).is(':checked');
+
+			$("input[name='favorite']").each(function () {
+				$(this).prop('checked', checked);
+			});
+		});
+
+		$("input[name='mine']").on('click', function () {
+			var checked = $(this).is(':checked');
+
+			$("input[name='mine']").each(function () {
+				$(this).prop('checked', checked);
+			});
+		});
+
 		filters.submit(function () {
 			var favorite = $(this).find("input[name='favorite']").is(':checked') ? "True" : "",
 				mine = $(this).find("input[name='mine']").is(':checked') ? "True" : "",
@@ -169,7 +185,7 @@ $(&#39;.mural-ungeneral&#39;).on(&#39;shown.bs.collapse&#39;, function(e) {
 		clear_filters.click(function () {
 	        var frm = $(this).parent();
-	        frm.find("input[type='checkbox']").prop('checked', false);
+	        $("input[type='checkbox']").prop('checked', false);
 	        frm.submit();
 	    });
@@ -30,7 +30,7 @@
     <link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}">  
 	<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
-	<script type="text/javascript" src="{% static 'js/bootstrap-acessibility.min.js' %}"></script>
+	<script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>
 	<script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script>
 	<script type="text/javascript" src="{% static 'material/js/ripples.min.js' %}"></script>
 	<script type="text/javascript" src="{% static 'js/moment-with-locales.js' %}"></script>
@@ -50,7 +50,7 @@
 			<button type="button" onclick="loadComments($(this))" data-url="{% url 'mural:load_comments' post.mural_ptr_id post.id %}" data-post="{{ post.id }}" class="btn btn-block btn-default btn-sm load-btn">{% trans 'See more comments...' %}</button>
 			{% comments_list request post %}
 		</div>
-		<div class="col-md-12 post-comment">
+		<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 post-comment">
 			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img">
 				<div>
 					<img src="{{ request.user.image_url }}" class="img-responsive" />
@@ -21,7 +21,27 @@
     </div>
     <div class="col-md-12 cards-content mural" data-url="{% url 'mural:manage_general' %}" data-pages="{{ paginator.num_pages }}" data-page="{{ page_obj.number }}" data-fav="{{ favorites }}" data-mine="{{ mines }}">
-    	<div class="col-md-9 col-sm-9 col-xs-9 mural-list">
+        <div class="col-sm-12 col-xs-12 visible-xs visible-sm" style="padding-left: 0px">
+            <div class="post-filter post-filter-small">
+                <h4>{% trans 'Filter' %}</h4>
+
+                <form id="post-filters" class="form-inline" action="" method="GET">
+                    <div class="checkbox">
+                        <label>
+                            <input name="favorite" type="checkbox" {{ favorites }}> {% trans 'Favorite posts' %} <i class="fa fa-thumb-tack"></i>
+                        </label>
+                    </div>
+                    <div class="checkbox">
+                        <label>
+                            <input name="mine" type="checkbox" {{ mines }}> {% trans 'Only my posts' %}
+                        </label>
+                    </div>
+                    <button type="submit" class="btn btn-success btn-raised">{% trans 'Filter' %}</button>
+                    <button type="button" id="clear_filter" class="btn btn-default btn-raised clear_filter">{% trans 'Clean Filters' %}</button>
+                </form>
+            </div>
+        </div>
+    	<div class="col-md-9 col-sm-12 col-xs-12 mural-list">
     		<div class="post_make panel panel-default">
     			<div class="panel-body">
 	    			<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">
@@ -50,7 +70,7 @@
                 <h4>{% trans 'There are no posts in this mural yet.' %}</h4>
             </div>
     	</div>
-    	<div class="col-md-3 col-sm-3 col-xs-3 post-filter">
+    	<div class="col-lg-3 col-md-3 hidden-xs hidden-sm post-filter">
             <h4>{% trans 'Filter' %}</h4>
             <form id="post-filters" action="" method="GET">
@@ -67,7 +67,27 @@
                             </div>
                             <div id="{{category.slug}}" class="panel-collapse panel-body collapse mural-ungeneral">
                                 <div class="col-md-12 cards-content mural" data-url="{% url 'mural:load_category' category.id %}">
-                                    <div class="col-md-9 col-sm-9 col-xs-9 mural-list">
+                                    <div class="col-sm-12 col-xs-12 visible-xs visible-sm" style="padding-left: 0px">
+                                        <div class="post-filter post-filter-small">
+                                            <h4>{% trans 'Filter' %}</h4>
+
+                                            <form class="post-filters form-inline" action="" method="GET">
+                                                <div class="checkbox">
+                                                    <label>
+                                                        <input name="favorite" type="checkbox"> {% trans 'Favorite posts' %} <i class="fa fa-thumb-tack"></i>
+                                                    </label>
+                                                </div>
+                                                <div class="checkbox">
+                                                    <label>
+                                                        <input name="mine" type="checkbox"> {% trans 'Only my posts' %}
+                                                    </label>
+                                                </div>
+                                                <button type="submit" class="btn btn-success btn-raised">{% trans 'Filter' %}</button>
+                                                <button type="button" class="btn btn-default btn-raised clear_filter">{% trans 'Clean Filters' %}</button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 mural-list">
                                         <div class="post_make panel panel-default">
                                             <div class="panel-body">
                                                 <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">
@@ -99,7 +119,7 @@
                                             <h4>{% trans 'There are no posts in this mural yet.' %}</h4>
                                         </div>
                                     </div>
-                                    <div class="col-md-3 col-sm-3 col-xs-3 post-filter">
+                                    <div class="col-lg-3 col-md-3 hidden-xs hidden-sm post-filter">
                                         <h4>{% trans 'Filter' %}</h4>
                                         <form class="post-filters" action="" method="GET">
@@ -66,7 +66,27 @@
                             </div>
                             <div id="{{subject.slug}}" class="panel-collapse panel-body collapse mural-ungeneral">
                                 <div class="col-md-12 cards-content mural" data-url="{% url 'mural:load_subject' subject.id %}">
-                                    <div class="col-md-9 col-sm-9 col-xs-9 mural-list">
+                                    <div class="col-sm-12 col-xs-12 visible-xs visible-sm" style="padding-left: 0px">
+                                        <div class="post-filter post-filter-small">
+                                            <h4>{% trans 'Filter' %}</h4>
+
+                                            <form class="post-filters form-inline" action="" method="GET">
+                                                <div class="checkbox">
+                                                    <label>
+                                                        <input name="favorite" type="checkbox"> {% trans 'Favorite posts' %} <i class="fa fa-thumb-tack"></i>
+                                                    </label>
+                                                </div>
+                                                <div class="checkbox">
+                                                    <label>
+                                                        <input name="mine" type="checkbox"> {% trans 'Only my posts' %}
+                                                    </label>
+                                                </div>
+                                                <button type="submit" class="btn btn-success btn-raised">{% trans 'Filter' %}</button>
+                                                <button type="button" class="btn btn-default btn-raised clear_filter">{% trans 'Clean Filters' %}</button>
+                                            </form>
+                                        </div>
+                                    </div>
+                                    <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 mural-list">
                                         <div class="post_make panel panel-default">
                                             <div class="panel-body">
                                                 <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">
@@ -98,7 +118,7 @@
                                             <h4>{% trans 'There are no posts in this mural yet.' %}</h4>
                                         </div>
                                     </div>
-                                    <div class="col-md-3 col-sm-3 col-xs-3 post-filter">
+                                    <div class="col-lg-3 col-md-3 hidden-xs hidden-sm post-filter">
                                         <h4>{% trans 'Filter' %}</h4>
                                         <form class="post-filters" action="" method="GET">
	@@ -1084,6 +1084,18 @@ li.item .notify_badge {		@@ -1084,6 +1084,18 @@ li.item .notify_badge {
1084	cursor: text;	1084	cursor: text;
1085	}	1085	}
1086		1086
		1087	+.post-filter-small {
		1088	+ padding-top: 10px;
		1089	+ padding-left: 15px;
		1090	+ margin-bottom: 10px;
		1091	+}
		1092	+.post-filter-small h4 {
		1093	+ margin-bottom: 10px !important;
		1094	+}
		1095	+.post-filter-small .checkbox {
		1096	+ margin-right: 15px;
		1097	+}
		1098	+
1087	.post-filter h4 {	1099	.post-filter h4 {
1088	font-weight: 700;	1100	font-weight: 700;
1089	margin-bottom: 15px;	1101	margin-bottom: 15px;
	@@ -43,6 +43,16 @@		@@ -43,6 +43,16 @@
43	.mural .post_make .post-field h4 {	43	.mural .post_make .post-field h4 {
44	line-height: 2.3em;	44	line-height: 2.3em;
45	}	45	}
		46	+
		47	+ .post .post-comment .user-img {
		48	+ padding-left: 10px;
		49	+ padding-right: 10px;
		50	+ }
		51	+
		52	+ .comment-section .comment .comment-img {
		53	+ padding-left: 10px;
		54	+ padding-right: 10px;
		55	+ }
46	}	56	}
47		57
48	@media(max-width: 768px) {	58	@media(max-width: 768px) {
	@@ -132,6 +142,16 @@		@@ -132,6 +142,16 @@
132	.mural .post_make .post-field h4 {	142	.mural .post_make .post-field h4 {
133	line-height: 2em;	143	line-height: 2em;
134	}	144	}
		145	+
		146	+ .post .post-comment .user-img {
		147	+ padding-left: 5px;
		148	+ padding-right: 5px;
		149	+ }
		150	+
		151	+ .comment-section .comment .comment-img {
		152	+ padding-left: 5px;
		153	+ padding-right: 5px;
		154	+ }
135	}	155	}
136		156
137	@media(min-width: 768px) {	157	@media(min-width: 768px) {
	@@ -1,136 +0,0 @@		@@ -1,136 +0,0 @@
1	-$('.mural-subject').on('shown.bs.collapse', function(e) {
2	- if($(this).is(e.target)){
3	- var li = $(".breadcrumb").find('li:last-child');
4	- var li_text = $(li).html();
5	- var url = $(".mural_url").val();
6	- var new_li = $(li).clone();
7	-
8	- new_li.html($(this).parent().find('.panel-title span').text());
9	-
10	- $(li).html("<a href='" + url + "'>" + li_text + "</a>");
11	- $(li).append("<span class='divider'>/</span>");
12	-
13	- new_li.appendTo('.breadcrumb');
14	-
15	- var post_section = $(this).find('.posts'),
16	- without = $(this).find('.no-subjects'),
17	- loading = $(this).find('.loading-posts'),
18	- more = $(this).find('.more-posts'),
19	- filters = $(this).find('.post-filters'),
20	- clear_filters = $(this).find('.clear_filter'),
21	- mural = post_section.parent().parent();
22	-
23	- if (post_section.children().length == 0) {
24	- var url = $(this).find('.mural').data('url');
25	-
26	- $.ajax({
27	- url: url,
28	- dataType: 'json',
29	- success: function (data) {
30	- loading.hide();
31	-
32	- if (data.count > 0) {
33	- post_section.append(data.posts);
34	-
35	- mural.data('pages', data.num_pages);
36	- mural.data('page', data.num_page);
37	-
38	- setTimeout(function () { postHeightLimits() }, 100);
39	-
40	- if (data.num_page < data.num_pages) {
41	- more.show();
42	- } else {
43	- more.hide();
44	- }
45	-
46	- $('.mural_badge').each(function () {
47	- var actual = $(this).text();
48	-
49	- if (actual != "+99") {
50	- actual = parseInt(actual, 10) - data.unviewed;
51	-
52	- if (actual <= 0) {
53	- $(this).hide();
54	- } else {
55	- $(this).text(actual);
56	- }
57	- }
58	- });
59	-
60	- $('.sub_badge').each(function () {
61	- var actual = $(this).text();
62	-
63	- if (actual != "+99") {
64	- actual = parseInt(actual, 10) - data.unviewed;
65	-
66	- if (actual < 0) {
67	- actual = 0;
68	- }
69	-
70	- $(this).text(actual);
71	- }
72	- });
73	-
74	- without.hide();
75	- } else {
76	- more.hide();
77	-
78	- without.show();
79	- }
80	- }
81	- });
82	- }
83	-
84	- more.click(function () {
85	- var url = mural.data('url'),
86	- pageNum = mural.data('page'),
87	- numberPages = mural.data('pages'),
88	- favorites = mural.data('fav'),
89	- mine = mural.data('mine'),
90	- showing = new_posts.join(',');
91	-
92	- if (pageNum == numberPages) {
93	- return false
94	- }
95	-
96	- pageNum = pageNum + 1;
97	-
98	- more.hide();
99	-
100	- loading.show();
101	-
102	- $.ajax({
103	- url: url,
104	- data: {'page': pageNum, 'favorite': favorites, 'mine': mine, 'showing': showing},
105	- dataType: 'json',
106	- success: function (data) {
107	- loading.hide();
108	-
109	- post_section.append(data.posts);
110	-
111	- mural.data('pages', data.num_pages);
112	- mural.data('page', data.num_page);
113	-
114	- setTimeout(function () { postHeightLimits() }, 100);
115	-
116	- if (data.num_page < data.num_pages) {
117	- more.show();
118	- } else {
119	- more.hide();
120	- }
121	- }
122	- });
123	- });
124	- }
125	-});
126	-
127	-$('.mural-subject').on('hidden.bs.collapse', function(e) {
128	- if($(this).is(e.target)){
129	- $(".breadcrumb").find('li:last-child').remove();
130	-
131	- var li = $(".breadcrumb").find('li:last-child');
132	- var text = $(li).find('a').text();
133	-
134	- $(li).html(text);
135	- }
136	-});
137	\ No newline at end of file	0	\ No newline at end of file
	@@ -122,6 +122,22 @@ $('.mural-ungeneral').on('shown.bs.collapse', function(e) {		@@ -122,6 +122,22 @@ $('.mural-ungeneral').on('shown.bs.collapse', function(e) {
122	});	122	});
123	});	123	});
124		124
		125	+ $("input[name='favorite']").on('click', function () {
		126	+ var checked = $(this).is(':checked');
		127	+
		128	+ $("input[name='favorite']").each(function () {
		129	+ $(this).prop('checked', checked);
		130	+ });
		131	+ });
		132	+
		133	+ $("input[name='mine']").on('click', function () {
		134	+ var checked = $(this).is(':checked');
		135	+
		136	+ $("input[name='mine']").each(function () {
		137	+ $(this).prop('checked', checked);
		138	+ });
		139	+ });
		140	+
125	filters.submit(function () {	141	filters.submit(function () {
126	var favorite = $(this).find("input[name='favorite']").is(':checked') ? "True" : "",	142	var favorite = $(this).find("input[name='favorite']").is(':checked') ? "True" : "",
127	mine = $(this).find("input[name='mine']").is(':checked') ? "True" : "",	143	mine = $(this).find("input[name='mine']").is(':checked') ? "True" : "",
	@@ -169,7 +185,7 @@ $('.mural-ungeneral').on('shown.bs.collapse', function(e) {		@@ -169,7 +185,7 @@ $('.mural-ungeneral').on('shown.bs.collapse', function(e) {
169	clear_filters.click(function () {	185	clear_filters.click(function () {
170	var frm = $(this).parent();	186	var frm = $(this).parent();
171		187
172	- frm.find("input[type='checkbox']").prop('checked', false);	188	+ $("input[type='checkbox']").prop('checked', false);
173		189
174	frm.submit();	190	frm.submit();
175	});	191	});
	@@ -30,7 +30,7 @@		@@ -30,7 +30,7 @@
30	<link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}">	30	<link rel="stylesheet" type="text/css" href="{% static 'css/jPages.css' %}">
31		31
32	<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>	32	<script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
33	- <script type="text/javascript" src="{% static 'js/bootstrap-acessibility.min.js' %}"></script>	33	+ <script type="text/javascript" src="{% static 'js/bootstrap-acessibility2.min.js' %}"></script>
34	<script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script>	34	<script type="text/javascript" src="{% static 'material/js/material.min.js' %}"></script>
35	<script type="text/javascript" src="{% static 'material/js/ripples.min.js' %}"></script>	35	<script type="text/javascript" src="{% static 'material/js/ripples.min.js' %}"></script>
36	<script type="text/javascript" src="{% static 'js/moment-with-locales.js' %}"></script>	36	<script type="text/javascript" src="{% static 'js/moment-with-locales.js' %}"></script>
	@@ -50,7 +50,7 @@		@@ -50,7 +50,7 @@
50	<button type="button" onclick="loadComments($(this))" data-url="{% url 'mural:load_comments' post.mural_ptr_id post.id %}" data-post="{{ post.id }}" class="btn btn-block btn-default btn-sm load-btn">{% trans 'See more comments...' %}</button>	50	<button type="button" onclick="loadComments($(this))" data-url="{% url 'mural:load_comments' post.mural_ptr_id post.id %}" data-post="{{ post.id }}" class="btn btn-block btn-default btn-sm load-btn">{% trans 'See more comments...' %}</button>
51	{% comments_list request post %}	51	{% comments_list request post %}
52	</div>	52	</div>
53	- <div class="col-md-12 post-comment">	53	+ <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 post-comment">
54	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img">	54	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img">
55	<div>	55	<div>
56	<img src="{{ request.user.image_url }}" class="img-responsive" />	56	<img src="{{ request.user.image_url }}" class="img-responsive" />
	@@ -21,7 +21,27 @@		@@ -21,7 +21,27 @@
21	</div>	21	</div>
22		22
23	<div class="col-md-12 cards-content mural" data-url="{% url 'mural:manage_general' %}" data-pages="{{ paginator.num_pages }}" data-page="{{ page_obj.number }}" data-fav="{{ favorites }}" data-mine="{{ mines }}">	23	<div class="col-md-12 cards-content mural" data-url="{% url 'mural:manage_general' %}" data-pages="{{ paginator.num_pages }}" data-page="{{ page_obj.number }}" data-fav="{{ favorites }}" data-mine="{{ mines }}">
24	- <div class="col-md-9 col-sm-9 col-xs-9 mural-list">	24	+ <div class="col-sm-12 col-xs-12 visible-xs visible-sm" style="padding-left: 0px">
		25	+ <div class="post-filter post-filter-small">
		26	+ <h4>{% trans 'Filter' %}</h4>
		27	+
		28	+ <form id="post-filters" class="form-inline" action="" method="GET">
		29	+ <div class="checkbox">
		30	+ <label>
		31	+ <input name="favorite" type="checkbox" {{ favorites }}> {% trans 'Favorite posts' %} <i class="fa fa-thumb-tack"></i>
		32	+ </label>
		33	+ </div>
		34	+ <div class="checkbox">
		35	+ <label>
		36	+ <input name="mine" type="checkbox" {{ mines }}> {% trans 'Only my posts' %}
		37	+ </label>
		38	+ </div>
		39	+ <button type="submit" class="btn btn-success btn-raised">{% trans 'Filter' %}</button>
		40	+ <button type="button" id="clear_filter" class="btn btn-default btn-raised clear_filter">{% trans 'Clean Filters' %}</button>
		41	+ </form>
		42	+ </div>
		43	+ </div>
		44	+ <div class="col-md-9 col-sm-12 col-xs-12 mural-list">
25	<div class="post_make panel panel-default">	45	<div class="post_make panel panel-default">
26	<div class="panel-body">	46	<div class="panel-body">
27	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">	47	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">
	@@ -50,7 +70,7 @@		@@ -50,7 +70,7 @@
50	<h4>{% trans 'There are no posts in this mural yet.' %}</h4>	70	<h4>{% trans 'There are no posts in this mural yet.' %}</h4>
51	</div>	71	</div>
52	</div>	72	</div>
53	- <div class="col-md-3 col-sm-3 col-xs-3 post-filter">	73	+ <div class="col-lg-3 col-md-3 hidden-xs hidden-sm post-filter">
54	<h4>{% trans 'Filter' %}</h4>	74	<h4>{% trans 'Filter' %}</h4>
55		75
56	<form id="post-filters" action="" method="GET">	76	<form id="post-filters" action="" method="GET">
	@@ -67,7 +67,27 @@		@@ -67,7 +67,27 @@
67	</div>	67	</div>
68	<div id="{{category.slug}}" class="panel-collapse panel-body collapse mural-ungeneral">	68	<div id="{{category.slug}}" class="panel-collapse panel-body collapse mural-ungeneral">
69	<div class="col-md-12 cards-content mural" data-url="{% url 'mural:load_category' category.id %}">	69	<div class="col-md-12 cards-content mural" data-url="{% url 'mural:load_category' category.id %}">
70	- <div class="col-md-9 col-sm-9 col-xs-9 mural-list">	70	+ <div class="col-sm-12 col-xs-12 visible-xs visible-sm" style="padding-left: 0px">
		71	+ <div class="post-filter post-filter-small">
		72	+ <h4>{% trans 'Filter' %}</h4>
		73	+
		74	+ <form class="post-filters form-inline" action="" method="GET">
		75	+ <div class="checkbox">
		76	+ <label>
		77	+ <input name="favorite" type="checkbox"> {% trans 'Favorite posts' %} <i class="fa fa-thumb-tack"></i>
		78	+ </label>
		79	+ </div>
		80	+ <div class="checkbox">
		81	+ <label>
		82	+ <input name="mine" type="checkbox"> {% trans 'Only my posts' %}
		83	+ </label>
		84	+ </div>
		85	+ <button type="submit" class="btn btn-success btn-raised">{% trans 'Filter' %}</button>
		86	+ <button type="button" class="btn btn-default btn-raised clear_filter">{% trans 'Clean Filters' %}</button>
		87	+ </form>
		88	+ </div>
		89	+ </div>
		90	+ <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 mural-list">
71	<div class="post_make panel panel-default">	91	<div class="post_make panel panel-default">
72	<div class="panel-body">	92	<div class="panel-body">
73	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">	93	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">
	@@ -99,7 +119,7 @@		@@ -99,7 +119,7 @@
99	<h4>{% trans 'There are no posts in this mural yet.' %}</h4>	119	<h4>{% trans 'There are no posts in this mural yet.' %}</h4>
100	</div>	120	</div>
101	</div>	121	</div>
102	- <div class="col-md-3 col-sm-3 col-xs-3 post-filter">	122	+ <div class="col-lg-3 col-md-3 hidden-xs hidden-sm post-filter">
103	<h4>{% trans 'Filter' %}</h4>	123	<h4>{% trans 'Filter' %}</h4>
104		124
105	<form class="post-filters" action="" method="GET">	125	<form class="post-filters" action="" method="GET">
	@@ -66,7 +66,27 @@		@@ -66,7 +66,27 @@
66	</div>	66	</div>
67	<div id="{{subject.slug}}" class="panel-collapse panel-body collapse mural-ungeneral">	67	<div id="{{subject.slug}}" class="panel-collapse panel-body collapse mural-ungeneral">
68	<div class="col-md-12 cards-content mural" data-url="{% url 'mural:load_subject' subject.id %}">	68	<div class="col-md-12 cards-content mural" data-url="{% url 'mural:load_subject' subject.id %}">
69	- <div class="col-md-9 col-sm-9 col-xs-9 mural-list">	69	+ <div class="col-sm-12 col-xs-12 visible-xs visible-sm" style="padding-left: 0px">
		70	+ <div class="post-filter post-filter-small">
		71	+ <h4>{% trans 'Filter' %}</h4>
		72	+
		73	+ <form class="post-filters form-inline" action="" method="GET">
		74	+ <div class="checkbox">
		75	+ <label>
		76	+ <input name="favorite" type="checkbox"> {% trans 'Favorite posts' %} <i class="fa fa-thumb-tack"></i>
		77	+ </label>
		78	+ </div>
		79	+ <div class="checkbox">
		80	+ <label>
		81	+ <input name="mine" type="checkbox"> {% trans 'Only my posts' %}
		82	+ </label>
		83	+ </div>
		84	+ <button type="submit" class="btn btn-success btn-raised">{% trans 'Filter' %}</button>
		85	+ <button type="button" class="btn btn-default btn-raised clear_filter">{% trans 'Clean Filters' %}</button>
		86	+ </form>
		87	+ </div>
		88	+ </div>
		89	+ <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 mural-list">
70	<div class="post_make panel panel-default">	90	<div class="post_make panel panel-default">
71	<div class="panel-body">	91	<div class="panel-body">
72	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">	92	<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 user-img text-center">
	@@ -98,7 +118,7 @@		@@ -98,7 +118,7 @@
98	<h4>{% trans 'There are no posts in this mural yet.' %}</h4>	118	<h4>{% trans 'There are no posts in this mural yet.' %}</h4>
99	</div>	119	</div>
100	</div>	120	</div>
101	- <div class="col-md-3 col-sm-3 col-xs-3 post-filter">	121	+ <div class="col-lg-3 col-md-3 hidden-xs hidden-sm post-filter">
102	<h4>{% trans 'Filter' %}</h4>	122	<h4>{% trans 'Filter' %}</h4>
103		123
104	<form class="post-filters" action="" method="GET">	124	<form class="post-filters" action="" method="GET">