Edit UI design and table in OQS

app/assets/stylesheets/OQS.scss

@@ -105,3 +105,19 @@ i.logout_icon{
   position: relative;
   top: 5px;
 }
+
+.table-block{
+	padding: 24px 8px 0 0;
+}
+
+.label-align{
+	padding-left: 10px;
+}
+
+.table-float{
+	float: left;
+}
+
+.table-width{
+	width: 100%;
+}

app/controllers/oqs/home_controller.rb

@@ -5,7 +5,8 @@ class Oqs::HomeController < BaseOqsController
   	# @queue_items_details = queue_items_query(false)
 
     # Query for OQS with delivery status true
-    @tables   = DiningFacility.all.active.order('status desc')
+    # @tables   = DiningFacility.all.active.order('status desc')
+    @tables   = DiningFacility.where(:type => 'Table').order('status desc')
     @rooms    = Room.all.active.order('status desc')
 
     @filter = params[:filter]

app/views/oqs/home/index.html.erb

@@ -3,8 +3,8 @@
   <div class="col-lg-8 col-md-8 col-sm-8">  
     <div class="body p-l-10">
       <div class="row clearfix">
-        <div class="form-group col-md-2">
+        <div class="form-group col-lg-2 col-md-2 col-sm-2">
-          <label>Select Station</label>
+          <label class="label-align">Select Station</label>
           <span class="hidden" id="oqs_active"></span>
           <select class="form-control select oqs_click" name="oqs_id" id="oqs_id">
             <option value="0"  data-id="0">Processed</option>
@@ -80,7 +80,6 @@
                           </span> 
                         </span>
                       </span>
-
                     <p class="hidden order-status">completed</p>
                     <p class="hidden order-customer"><%= qid.customer_name %></p>
                     <p class="hidden assigned-order-item"><%= qid.assigned_order_item_id %></p>           
@@ -89,13 +88,11 @@
               <% end %>    
             </div>
            </div>
-
           <div class="card-columns oqs_append" id="oqs_container" style="padding-top:10px; column-gap: 1.2rem;">       
       </div>
     </div>
       </div>
     </div>
-
   </div>
 
   <!-- Column Two -->
@@ -142,7 +139,7 @@
   </div>
  -->
   <!-- Column Three -->
-  <div class="col-lg-3 col-md-3 col-sm-3">
+  <div class="col-lg-3 col-md-3 col-sm-3 table-block">
     <p class="hidden filter"><%= @filter %></p>
     <div class="card">
       <div class="card-block">
@@ -154,15 +151,15 @@
           <div class="tab-content">
             <div id="table" class="tab-pane fade">
               <% @tables.each do |table|  %>
-                <div class="col-lg-4 col-md-4 col-sm-4" style="float: left;">
+                <div class="col-lg-4 col-md-4 col-sm-4 table-float">
-                  <button class='btn btn-lg waves-effect green tables' style="width: 100%; text-align: center;" value="<%= table.id %>" data-id="<%= table.id %>"> <%= table.name %></button>
+                  <button class='btn btn-lg waves-effect green tables table-width' value="<%= table.id %>" data-id="<%= table.id %>"> <%= table.name %></button>
                 </div>
               <% end %> 
             </div>
             <div id="room" class="tab-pane fade">
               <% @rooms.each do |room|  %>
-                <div class="col-lg-4 col-md-4 col-sm-4" style="float: left;">
+                <div class="col-lg-4 col-md-4 col-sm-4 table-float">
-                  <button class='btn btn-lg waves-effect green tables' style="width: 100%;" value="<%= room.id %>" data-id="<%= room.id %>"> <%= room.name %></button>
+                  <button class='btn btn-lg waves-effect green tables table-width' value="<%= room.id %>" data-id="<%= room.id %>"> <%= room.name %></button>
                 </div>
               <% end %> 
             </div>