Mobile Responsive for all reports

app/views/reports/card_settle_tran/index.html.erb

@@ -16,10 +16,10 @@
 
 			<div class="text-right">
 				<a href="javascript:export_to('<%=reports_card_settle_tran_index_path%>.xls')" class = "btn btn-info wave-effects"><%= t("views.btn.exp_to_excel") %></a>
-			</div>	  			
+			</div>
 
-		<div class="margin-top-20">
-			<div class="card">
+		<div class="margin-top-20 mbl-table">
+			<div class="card mbl-table-card">
 				<table class="table table-striped" border="0">
 					<thead>
 
@@ -28,12 +28,12 @@
 						</tr>
 						<% if @shift_from %>
 						<tr>
-							<% if @shift_data.employee %>		
+							<% if @shift_data.employee %>
 							<% cashier_name = !@shift_data.nil? ? @shift_data.employee.name : '-' %>
-							<% end %>			
+							<% end %>
 							<th colspan="9"><%= t("views.right_panel.detail.shift_name") %> =  <%= @shift_from %> - <%= @shift_to %> ( <%= cashier_name %> )</th>
 						</tr>
-						<% end %>	 
+						<% end %>
 
 			            <tr>
 			                <th><%= t("views.right_panel.detail.shift_sale_id") %></th>
@@ -81,20 +81,20 @@
 		var check_arr = [];
 		search_by_period();
 		$('#sel_period').change(function(){
-			
+
 			search_by_period();
-			
+
 		});
-		
+
 		function search_by_period(){
 			var period = $('#sel_period').val();
 			var period_type = 0;
 			var from = "";
 			var to = "";
 
-			show_shift_name(period,period_type,from,to,'shift_item');	
-		}   
-		
+			show_shift_name(period,period_type,from,to,'shift_item');
+		}
+
 		// OK button is clicked
 		$('#from').bootstrapMaterialDatePicker().on('beforeChange', function(e, date){
 			new_date = new Date(date) ;
@@ -109,50 +109,50 @@
 			to = new_date.getDate() + "-" + month + "-" + new_date.getFullYear();
 			$('#to').val(to)
 			search_by_date();
-		});   
-		
+		});
+
 		function search_by_date(){
-			
+
 	  		from = $("#from").val();
 	  		to   = $("#to").val();
 
 			var period = 0;
-			var period_type = 1;	   
+			var period_type = 1;
 
 			if(to != '' && from != ''){
 				shift_name = from + ',' + to;
 
 				check_arr.push(to);
-				
+
 				if(check_arr.length == 1){
-					show_shift_name(period,period_type,from,to,'shift_item');	   	
+					show_shift_name(period,period_type,from,to,'shift_item');
 				}
 				if(check_arr.length == 3){
 					check_arr = [];
 				}
 			}
-			
+
 		}
-		
+
 		function show_shift_name(period,period_type,from,to,shift_item){
 			var shift = $('#shift_name');
-			
+
 			shift.empty();
-			
+
 			var str = '';
-			var param_shift = '';	   
+			var param_shift = '';
 			var param_shift = '<%= params[:shift_name] rescue '-'%>';
 			if (from == '' && to == '') {
 				from = $("#from").val();
 	  		    to   = $("#to").val();
 			}
 			url = '<%= reports_get_shift_by_date_path %>';
-			
+
 			$.get(url, {period :period, period_type :period_type, from :from, to :to, report_type :shift_item} , function(data){
 
 				str = '<option value="0">--- All Shift ---</option>';
-				$(data.message).each(function(index){	
-					
+				$(data.message).each(function(index){
+
 					var local_date = data.message[index].local_opening_date + ' - ' + data.message[index].local_closing_date;
 					var sh_date = data.message[index].opening_date + ' - ' + data.message[index].closing_date;
 					var shift_id = data.message[index].shift_id ;
@@ -161,18 +161,18 @@
 							selected = 'selected = "selected"';
 						}
 						else{
-							selected = '';			   
-						}			   	
+							selected = '';
+						}
 					}else{
-						selected = '';			   
-					}		   			   
+						selected = '';
+					}
 					str += '<option value="'+ shift_id +'" '+ selected +'>' + local_date + '</option>';
-					
+
 			   // console.log(sh_date)
-			}) 
+			})
 				shift.append(str);
 			});
 		}
 
 	});
-</script>
+</script>