ui code review and edited

app/assets/javascripts/application.js

@@ -33,47 +33,6 @@ $(document).on('turbolinks:load', function() {
   });
   $('.datepicker').attr('ReadOnly','true');
   $('.datepicker').css('cursor','pointer');
-
-  // Image Upload
-  $("#simple_menu_item_image_path").fileinput({
-      previewFileType: "image",
-      allowedFileExtensions: ["jpg", "gif", "png"],
-      browseClass: "btn btn-success",
-      browseLabel: "Pick Image",
-      browseIcon: "<i class=\"fa fa-image\"></i> ",
-      removeClass: "btn btn-danger",
-      removeLabel: "Delete",
-      removeIcon: "<i class=\"fa fa-trash\"></i> ",
-      showUpload: false,
-      // uploadClass: "btn btn-info",
-      // uploadLabel: "Upload",
-      // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
-      previewTemplates: {
-        image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
-                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
-                '</div>\n',
-    }
-  });
-
-  $("#product_image_path").fileinput({
-      previewFileType: "image",
-      allowedFileExtensions: ["jpg", "gif", "png"],
-      browseClass: "btn btn-success",
-      browseLabel: "Pick Image",
-      browseIcon: "<i class=\"fa fa-image\"></i> ",
-      removeClass: "btn btn-danger",
-      removeLabel: "Delete",
-      removeIcon: "<i class=\"fa fa-trash\"></i> ",
-      showUpload: false,
-      // uploadClass: "btn btn-info",
-      // uploadLabel: "Upload",
-      // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
-      previewTemplates: {
-        image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
-                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
-                '</div>\n',
-    }
-  });
 });
 
  $(document).on("focus", "[data-behaviour~='datepicker']", function(e){

app/assets/stylesheets/origami.scss

@@ -11,10 +11,38 @@
 //   min-height: 75rem;
 //   padding-top: 4.5rem;
 // }
+
+/* Reset */
+.table {
+	margin-bottom: 0px;
+}
+
+select.form-control {
+  height: inherit !important;
+}
+
+.form-horizontal .form-group {
+	margin-right: 0px !important;
+}
+
 .card-columns {
 	font-size: 18px !important;
 }
 
+/* End Reset */
+
+.dining {
+	min-height:470px;
+	max-height:570px; 
+	overflow:auto
+}
+
+.order-info {
+	min-height:300px; 
+	max-height:500px; 
+	overflow:auto
+}
+
 .others-payment{
 	line-height:100px;
 	text-align:center;
@@ -62,6 +90,10 @@
 	margin-top:5px;
 }
 
+.font-12 {
+	font-size: 12px;
+}
+
 .cash-color{
 	background-color:#80CBC4;
 }
@@ -84,6 +116,12 @@
 	margin-bottom: 5px;
 }
 
+.radius-btn {
+	border-radius:5px;
+	color:#fff;
+	background-color:red;
+}
+
 .bottom-5 {
 	margin-bottom: 5px;
 }
@@ -186,16 +224,6 @@
 	margin-bottom: 1px;
 }
 
-/*----- Reset -----*/
-
-select.form-control {
-  height: inherit !important;
-}
-
-.form-horizontal .form-group {
-	margin-right: 0px !important;
-}
-
 /*  Discount */
 
 .discount-item-row {
@@ -248,7 +276,6 @@ tr.discount-item-row:hover {
 /*Loading gif for payment*/
 
 #loading_wrapper{
-
     position: fixed;
     background-color: #C8C8C8 ;
     height: 100%;
@@ -258,6 +285,7 @@ tr.discount-item-row:hover {
     top: 0;
     z-index: 9999999;
 }
+
 #loading{
     position: relative;
     height: 100%;

app/assets/stylesheets/settings.scss

@@ -46,23 +46,27 @@ ul.dropdown-menu li a{
     width: 100%;
   }
 
- .footer-header {
- 	color : #ef404a;
- 	font-weight:bold;
- 	font-style:italic;
- 	margin-bottom:0px;
- }
+.footer-header {
+	color : #ef404a;
+	font-weight:bold;
+	font-style:italic;
+	margin-bottom:0px;
+}
 
- .menu-item-img {
+.menu-item-img {
  	margin: 10px;
  	text-align: center;
- }
+}
 
- .padding-10 {
+.padding-10 {
  	padding: 10px;
- }
+}
 
 /* Colors */
+.white {
+  color: #fff;
+}
+
 .purple {
   background-color:#7a62d3;
 }
@@ -79,7 +83,7 @@ ul.dropdown-menu li a{
   background-color: #009900;
 }
 
-.orange{
+.yellow {
   background-color: #FF8C00;
 }
 
@@ -87,4 +91,110 @@ ul.dropdown-menu li a{
   background-color: blue;
 }
 
-/* End Colors */
+/* End Colors */
+
+.pin_pad {
+  width: 33%;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+  background: #54A5AF;
+  font-size: 20px;
+  color: white;
+}
+
+.bottom {
+  margin-bottom: 1px;
+}
+
+.left {
+  margin-left: 1px;
+}
+
+.card {
+  margin-top: 10px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  background-clip: padding-box;
+  transition: 0.3s ease;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.card-footer {
+  padding: 0;
+  background-color: #fff;
+  border-top: none;
+}
+
+.dashboard-nav {
+  cursor: pointer;
+  color: #7a62d3;
+  padding: 10px;
+  font-size: 24px;
+  font-weight: bold;
+  border-radius: 0 0 2px 2px;
+  background-clip: padding-box;
+  box-sizing: border-box;
+  transition: color 0.3s ease;
+  text-align: center;
+}
+
+.card:hover {
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.16), 0 10px 20px 0 rgba(0, 0, 0, 0.12);
+}
+
+#admin ul {
+  line-height: 25px;
+}
+
+.panel-body {
+  padding: 5px !important;
+}
+
+.panel-title .glyphicon {
+  float: right;
+}
+
+@media screen and (min-height: 800px){
+  .card .card-content {
+    padding: 30px !important;
+  }
+}
+
+@media screen and (min-height: 540px){
+  .card .card-content {
+    padding: 20px !important;
+  }
+}
+
+@media (min-width: 34em) {
+  .card-columns {
+    -webkit-column-count: 2;
+    -moz-column-count: 2;
+    column-count: 2;
+  }
+}
+
+@media (min-width: 48em) {
+  .card-columns {
+    -webkit-column-count: 3;
+    -moz-column-count: 3;
+    column-count: 3;
+  }
+}
+
+@media (min-width: 62em) {
+  .card-columns {
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+  }
+}
+
+@media (min-width: 75em) {
+  .card-columns {
+    -webkit-column-count: 5;
+    -moz-column-count: 5;
+    column-count: 5;
+  }
+}

app/views/home/dashboard.html.erb

@@ -15,220 +15,192 @@
   </div>
 </div>
 
-<div class="col-md-2 container pull-right" style="margin: 0px !important;">
-  <div class="row">
-    <div class="col-md-12">
-      <div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
-        <div class="card-content">
-          <span class="card-title">OQS</span>
-        </div>
-      </div>
+<div class="row">
+  <div class="col-md-9 col-lg-9">
+      <h4><strong>Role Features</strong></h4>
+      <!--  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
+      <div class="panel-group" id="accordion">
+        <% if current_user.role == 'administrator' %>
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                <h4 class="panel-title">
+                  Administrator
+                </h4>
+              </div>
+              <div id="admin" class="panel-collapse collapse in">
+                <div class="panel-body">
+                  <ul class="col-md-4">
+                    <li><strong>All Settings</strong></li>
+                    <ul>
+                      <li>Zone</li>
+                      <li>OQS</li>
+                      <li>Menu</li>
+                      <li>Cashier Terminal</li>
+                      <li>Payment</li>
+                      <li>Merbership</li>
+                      <li>Print</li>
+                      <li>Employees</li>
+                      <li>Accounts</li>
+                    </ul>
+                  </ul>
+                  <ul class="col-md-4">
+                    <li><strong>Transactions</strong></li>
+                    <ul class="">
+                      <li>Order</li>
+                      <li>Sale</li>
+                      <li>Credit Note</li>
+                    </ul><br>
+                    <li><strong>Reports</strong></li>
+                    <ul class="">
+                      <li>Daily Sale</li>
+                      <li>Sale Item</li>
+                      <li>Receipt</li>
+                      <li>Shift Sale</li>
+                      <li>Credit Sale</li>
+                      <li>Void Sale</li>
+                    </ul>
+                  </ul>
+                  <ul class="col-md-4">
+                    <li><strong>OQS</strong></li><br>
+                    <li><strong>Cashier</strong></li><br>
+                    <li><strong>CRM</strong></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+        <% elsif current_user.role == 'manager' %>
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                <h4 class="panel-title">
+                  Manager
+                </h4>
+              </div>
+              <div id="admin" class="panel-collapse collapse in">
+                <div class="panel-body">
+                  <ul class="col-md-4">
+                    <li class="">All Settings</li>
+                    <ul class="">
+                      <li>Zone</li>
+                      <li>OQS</li>
+                      <li>Menu</li>
+                      <li>Cashier Terminal</li>
+                      <li>Print</li>
+                      <li>Employees</li>
+                      <li>Accounts</li>
+                    </ul>
+                  </ul>
+                  <ul class="col-md-4">
+                    <li class="">Transactions</li>
+                    <ul class="">
+                      <li>Order</li>
+                      <li>Sale</li>
+                      <li>Credit Note</li>
+                    </ul><br>
+                    <li>Reports</li>
+                    <ul class="">
+                      <li>Daily Sale</li>
+                      <li>Sale Item</li>
+                      <li>Receipt</li>
+                      <li>Shift Sale</li>
+                      <li>Credit Sale</li>
+                      <li>Void Sale</li>
+                    </ul>
+                  </ul>
+                  <ul class="col-md-4">
+                    <li>OQS</li><br>
+                    <li>Cashier</li><br>
+                    <li>CRM</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+        <% elsif current_user.role == 'supervisour' %>
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                <h4 class="panel-title">
+                  Supervisor
+                </h4>
+              </div>
+              <div id="supervisor" class="panel-collapse collapse in">
+                <div class="panel-body">
+                  <ul class="">
+                    <li>OQS</li>
+                    <ul>
+                      <li class="">Void</li>
+                      <li class="">FOC</li>
+                      <li class="">Edit</li>
+                      <li class="">Credit</li>
+                      <li class="">Payment</li>
+                    </ul>
+                  </ul>
+                </div>
+              </div>
+            </div>
+        <% elsif current_user.role == 'cashier' %>
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                <h4 class="panel-title">
+                  Cashier
+                </h4>
+              </div>
+              <div id="cashier" class="panel-collapse collapse in">
+                <div class="panel-body">
+                  <ul class="">
+                    <li class="">Cashier Panel except Edit and Void</li>
+                    <li class="">Sale and Order</li>
+                    <li class="">and Queue in CRM</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+        <% elsif current_user.role == 'account' %>
+            <div class="panel panel-default">
+              <div class="panel-heading">
+                <h4 class="panel-title">
+                  Accountant
+                </h4>
+              </div>
+              <div id="accountant" class="panel-collapse collapse in">
+                <div class="panel-body">
+                  <ul class="">
+                    <li class="">Daily Sale Report</li>
+                    <li class="">Sale Item Report</li>
+                    <li class="">Receipt No Report</li>
+                    <li class="">ShiftSale Report</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+        <% end %>
     </div>
   </div>
 
-  <div class="row">
-    <div class="col-md-12">
-      <div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
-        <div class="card-content">
-          <span class="card-title">Cashier</span>
-        </div>
+  <div class="col-md-3">
+    <div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
+      <div class="card-content dashboard-nav">OQS</div>
+    </div>
+    
+    <div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
+      <div class="card-content dashboard-nav">Cashier</div>
+    </div>
+    
+    <div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
+      <div class="card-content dashboard-nav">CRM</div>
+    </div>
+    
+    <!-- No Needs
+    <div class="card" id="backend" onclick="location.href='<%= dashboard_path %>'">
+      <div class="card-content">
+        <span class="card-title">Backend</span>
       </div>
+    </div> -->
+    
+    <div class="card" id="backend" onclick="location.href='<%= inventory_inventory_path %>'">
+      <div class="card-content dashboard-nav">Inventory</div>
     </div>
   </div>
-
-  <div class="row">
-    <div class="col-md-12">
-      <div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
-        <div class="card-content">
-          <span class="card-title">CRM</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-12">
-      <div class="card" id="backend" onclick="location.href='<%= dashboard_path %>'">
-        <div class="card-content">
-          <span class="card-title">Backend</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-12">
-      <div class="card" id="backend" onclick="location.href='<%= inventory_inventory_path %>'">
-        <div class="card-content">
-          <span class="card-title">Inventory</span>
-        </div>
-      </div>
-    </div>
-  </div>
-
 </div>
 
-<div class="col-md-8 col-lg-8">
-  <div class="" style="max-height:550px; overflow:auto;padding: 15px">
-    <h4 class="card-title"><strong>Role Features</strong></h4>
-    <!--  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
-    <div class="panel-group" id="accordion">
-      <% if current_user.role == 'administrator' %>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h4 class="panel-title">
-                Administrator
-              </h4>
-            </div>
-            <div id="admin" class="panel-collapse collapse in">
-              <div class="panel-body">
-                <ul class="col-md-4">
-                  <li class="">All Settings</li>
-                  <ul class="">
-                    <li>Zone</li>
-                    <li>OQS</li>
-                    <li>Menu</li>
-                    <li>Cashier Terminal</li>
-                    <li>Payment</li>
-                    <li>Merbership</li>
-                    <li>Print</li>
-                    <li>Employees</li>
-                    <li>Accounts</li>
-                  </ul>
-                </ul>
-                <ul class="col-md-4">
-                  <li class="">Transactions</li>
-                  <ul class="">
-                    <li>Order</li>
-                    <li>Sale</li>
-                    <li>Credit Note</li>
-                  </ul><br>
-                  <li>Reports</li>
-                  <ul class="">
-                    <li>Daily Sale</li>
-                    <li>Sale Item</li>
-                    <li>Receipt</li>
-                    <li>Shift Sale</li>
-                    <li>Credit Sale</li>
-                    <li>Void Sale</li>
-                  </ul>
-                </ul>
-                <ul class="col-md-4">
-                  <li>OQS</li><br>
-                  <li>Cashier</li><br>
-                  <li>CRM</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-      <% elsif current_user.role == 'manager' %>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h4 class="panel-title">
-                Manager
-              </h4>
-            </div>
-            <div id="admin" class="panel-collapse collapse in">
-              <div class="panel-body">
-                <ul class="col-md-4">
-                  <li class="">All Settings</li>
-                  <ul class="">
-                    <li>Zone</li>
-                    <li>OQS</li>
-                    <li>Menu</li>
-                    <li>Cashier Terminal</li>
-                    <li>Print</li>
-                    <li>Employees</li>
-                    <li>Accounts</li>
-                  </ul>
-                </ul>
-                <ul class="col-md-4">
-                  <li class="">Transactions</li>
-                  <ul class="">
-                    <li>Order</li>
-                    <li>Sale</li>
-                    <li>Credit Note</li>
-                  </ul><br>
-                  <li>Reports</li>
-                  <ul class="">
-                    <li>Daily Sale</li>
-                    <li>Sale Item</li>
-                    <li>Receipt</li>
-                    <li>Shift Sale</li>
-                    <li>Credit Sale</li>
-                    <li>Void Sale</li>
-                  </ul>
-                </ul>
-                <ul class="col-md-4">
-                  <li>OQS</li><br>
-                  <li>Cashier</li><br>
-                  <li>CRM</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-      <% elsif current_user.role == 'supervisour' %>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h4 class="panel-title">
-                Supervisor
-              </h4>
-            </div>
-            <div id="supervisor" class="panel-collapse collapse in">
-              <div class="panel-body">
-                <ul class="">
-                  <li>OQS</li>
-                  <ul>
-                    <li class="">Void</li>
-                    <li class="">FOC</li>
-                    <li class="">Edit</li>
-                    <li class="">Credit</li>
-                    <li class="">Payment</li>
-                  </ul>
-                </ul>
-              </div>
-            </div>
-          </div>
-      <% elsif current_user.role == 'cashier' %>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h4 class="panel-title">
-                Cashier
-              </h4>
-            </div>
-            <div id="cashier" class="panel-collapse collapse in">
-              <div class="panel-body">
-                <ul class="">
-                  <li class="">Cashier Panel except Edit and Void</li>
-                  <li class="">Sale and Order</li>
-                  <li class="">and Queue in CRM</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-      <% elsif current_user.role == 'account' %>
-          <div class="panel panel-default">
-            <div class="panel-heading">
-              <h4 class="panel-title">
-                Accountant
-              </h4>
-            </div>
-            <div id="accountant" class="panel-collapse collapse in">
-              <div class="panel-body">
-                <ul class="">
-                  <li class="">Daily Sale Report</li>
-                  <li class="">Sale Item Report</li>
-                  <li class="">Receipt No Report</li>
-                  <li class="">ShiftSale Report</li>
-                </ul>
-              </div>
-            </div>
-          </div>
-      <% end %>
-    </div> <!-- end accordion id -->
-  </div>
-</div> <!-- end col-md-4 -->
-
 <div class="footer" style="background-color: inherit">
   <div class="card">
     <div class="page-header center-text">
@@ -244,44 +216,3 @@
     </div>
   </div>
 </div>
-
-<style type="text/css">
-  .card {
-    margin-top: 10px;
-    box-sizing: border-box;
-    border-radius: 2px;
-    background-clip: padding-box;
-    transition: 0.3s ease;
-    background-color: white;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  }
-
-  .card span.card-title {
-    color: purple;
-    font-size: 28px;
-    font-weight: 400;
-    text-transform: uppercase;
-    transition: color 0.3s ease;
-    /*line-height: 48px;*/
-  }
-
-  .card .card-content {
-    padding: 15%;
-    border-radius: 0 0 2px 2px;
-    background-clip: padding-box;
-    box-sizing: border-box;
-    /*height: 120px;*/
-    transition: color 0.3s ease;
-    text-align: center;
-  }
-
-  .card .card-content p {
-    margin: 0;
-    color: inherit;
-  }
-
-  .card:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.16), 0 10px 20px 0 rgba(0, 0, 0, 0.12);
-  }
-
-</style>

app/views/home/index.html.erb

@@ -29,7 +29,7 @@
 
       <% @employees.each do |employee| %>
 
-          <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-inverse card-primary mb-3 text-center" style="">
+          <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-primary white mb-3 text-center" style="">
             <form id="form_<%= employee.emp_id %>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH"></form>
             <div class="card-block">
               <h4 class="card-title">
@@ -48,8 +48,8 @@
   </div>
 
   <div class="col-md-4 col-lg-4">
-    <div class="card" style="max-height:550px; overflow:auto;padding: 15px">
-      <h4 class="card-title">Role Features</h4>
+    <div class="card">
+      <h4 class="card-title text-center">Role Features</h4>
       <!--  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
       <div class="panel-group" id="accordion">
         <div class="panel panel-default">
@@ -141,52 +141,6 @@
   </div> <!-- end col-md-4 -->
 </div>
 
-<style type="text/css">
-  .panel-body {
-    padding: 5px !important;
-  }
-
-  /*.card-columns {
-    column-count: 4;
-    display: inline-block;
-  }*/
-  .panel-title .glyphicon {
-
-    float: right;
-  }
-
-  @media (min-width: 34em) {
-    .card-columns {
-      -webkit-column-count: 2;
-      -moz-column-count: 2;
-      column-count: 2;
-    }
-  }
-
-  @media (min-width: 48em) {
-    .card-columns {
-      -webkit-column-count: 3;
-      -moz-column-count: 3;
-      column-count: 3;
-    }
-  }
-
-  @media (min-width: 62em) {
-    .card-columns {
-      -webkit-column-count: 4;
-      -moz-column-count: 4;
-      column-count: 4;
-    }
-  }
-
-  @media (min-width: 75em) {
-    .card-columns {
-      -webkit-column-count: 5;
-      -moz-column-count: 5;
-      column-count: 5;
-    }
-  }
-</style>
 <script type="text/javascript">
     $(document).on('turbolinks:load', function () {
         $(".empBtn").click(function (event) {

app/views/home/show.html.erb

@@ -1,43 +1,15 @@
-<style>
-  .pin_pad {
-    width: 30%;
-    height: 70px;
-    line-height: 70px;
-    text-align: center;
-    background: #54A5AF;
-    font-size: 20px;
-    color: white;
-  }
-
-  .bottom {
-    margin-bottom: 1px;
-  }
-
-  .left {
-    margin-left: 1px;
-  }
-
-  .orange {
-    background-color: #FF7F50;
-  }
-
-  .purple {
-    background-color: #7a62d3;
-  }
-</style>
-
 <div class="row">
   <div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
     <%= simple_form_for(@login_form, url: emp_login_update_path, method: "PATCH") do |f| %>
-        <div class="card">
-          <div class="content" style="margin:10px">
+        <div class="card padding-10">
+          <div class="card-header">
             <div class="form-group">
               <%= f.input :emp_id, as: :hidden, label: "Access PIN", required: false, class: "form-control" %>
 
               <%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
             </div>
           </div>
-          <div class="content row" style="padding-left:10px;margin-left:10px; margin-top:0px; text-align:center">
+          <div class="card-content">
             <div class='col-md-12'>
               <div class='row bottom'>
                 <div class="pin_pad " data-value="1">1</div>
@@ -60,12 +32,7 @@
                 <div class="pin_pad left purple" data-value="ENT">ENT</div>
               </div>
             </div>
-            <div class="footer text-center" style="margin:10px">
-
-            </div>
-
           </div>
-
     <% end %>
     </div>
   </div>

app/views/layouts/application.html.erb

@@ -37,5 +37,50 @@
 			<% end %>
       <%= yield %>      
     </div>
+
+    <script type="text/javascript">
+      $(document).ready(function(){
+          // Image Upload
+          $("#simple_menu_item_image_path").fileinput({
+              previewFileType: "image",
+              allowedFileExtensions: ["jpg", "gif", "png"],
+              browseClass: "btn btn-success",
+              browseLabel: "Pick Image",
+              browseIcon: "<i class=\"fa fa-image\"></i> ",
+              removeClass: "btn btn-danger",
+              removeLabel: "Delete",
+              removeIcon: "<i class=\"fa fa-trash\"></i> ",
+              showUpload: false,
+              // uploadClass: "btn btn-info",
+              // uploadLabel: "Upload",
+              // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
+              previewTemplates: {
+                image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
+                        '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
+                        '</div>\n',
+            }
+          });
+
+          $("#product_image_path").fileinput({
+              previewFileType: "image",
+              allowedFileExtensions: ["jpg", "gif", "png"],
+              browseClass: "btn btn-success",
+              browseLabel: "Pick Image",
+              browseIcon: "<i class=\"fa fa-image\"></i> ",
+              removeClass: "btn btn-danger",
+              removeLabel: "Delete",
+              removeIcon: "<i class=\"fa fa-trash\"></i> ",
+              showUpload: false,
+              // uploadClass: "btn btn-info",
+              // uploadLabel: "Upload",
+              // uploadIcon: "<i class=\"fa fa-upload\"></i> ",
+              previewTemplates: {
+                image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
+                        '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 200px;">\n' +
+                        '</div>\n',
+            }
+          });
+      });
+    </script>
   </body>
 </html>

app/views/origami/discounts/index.html.erb

@@ -17,7 +17,7 @@
               <p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
             </div>
           </div>
-          <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
+          <div class="card-text dining">
             <table class="table table-default" id="order-items-table">
               <thead>
                 <tr>

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

@@ -21,13 +21,13 @@
 
    <div class="tab-content" >
      <!--- Panel 0 - Completed Orders -->
-     <div class="tab-pane" id="Completed" role="tabpanel" style="max-height:670px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining" id="Completed" role="tabpanel">
+       <div class="card-columns">
          <% @complete.each do |sale| %>
          <div class="card sales red text-white" data-id = "<%= sale.sale_id %>">
            <div class="card-block">
               <%= sale.receipt_no %>
-             <span style="font-size:12px;float:right;line-height:inherit;"><%= sale.sale_status %></span>
+             <span class="pull-right"><%= sale.sale_status %></span>
            </div>
          </div>
          <% end %>
@@ -35,8 +35,8 @@
      </div>
 
      <!--- Panel 1 - Table Orders -->
-     <div class="tab-pane active" id="tables" role="tabpanel" style="max-height:670px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining active" id="tables" role="tabpanel">
+       <div class="card-columns">
          <% @tables.each do |table| %>
          <% if table.status == 'occupied' %>
              <% if table.get_booking.nil? %>
@@ -67,8 +67,8 @@
      </div>
 
      <!--- Panel 2 - Room Orders -->
-     <div class="tab-pane" id="rooms" role="tabpanel" style="max-height:670px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining" id="rooms" role="tabpanel">
+       <div class="card-columns">
          <% @rooms.each do |room| %>
          <% if room.status == 'occupied' %>
          <div class="card rooms red text-white" data-id="<%= room.id %>">
@@ -88,8 +88,8 @@
      </div>
 
      <!--- Panel 3 - Orders -->
-     <div class="tab-pane" id="orders" role="tabpanel" style="max-height:670px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining" id="orders" role="tabpanel">
+       <div class="card-columns">
          <% @orders.each do |order| %>
          <div class="card orders red text-white" data-id = "<%= order.order_id %>">
            <div class="card-block">
@@ -104,13 +104,12 @@
    <!-- tabs - End -->
  </div>
  <div class="col-lg-2 col-md-2 col-sm-2">
-   <button id="refreshbutton" type="button" class="btn btn-block" style="border-radius:5px;color:#fff;background-color:red;"> Refresh off </button>
+   <button id="refreshbutton" type="button" class="btn btn-block radius-btn"> Refresh off </button>
    <button id="cash_in" type="button" class="btn btn-block btn-primary"> Cash In </button>
    <button id="cash_out" type="button" class="btn btn-block btn-primary"> Cash Out </button>
    <!-- Temporary Disabled -->
 
-   <button id="close_cashier" type="button" class="btn btn-block btn-primary"> Close Cashier </button>
-
+   <button id="close_cashier" type="button" class="btn btn-block btn-primary"> Close Cashier</button>
 
    <%if current_login_employee.role == "administrator" || current_login_employee.role == "manager" %>
       <button id="back" type="button" class="btn btn-block btn-primary"><i class="fa fa-home fa-lg"></i> Back

app/views/origami/home/show.html.erb

@@ -23,13 +23,13 @@
     <div class="tab-content">
       <!--- Panel 0 - Completed Orders -->
 
-      <div class="tab-pane" id="completed" role="tabpanel" style="max-height:600px; overflow:auto">
-        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+      <div class="tab-pane dining" id="completed" role="tabpanel">
+        <div class="card-columns">
           <% @complete.each do |sale| %>
               <div class="card sales red text-white" data-id="<%= sale.sale_id %>">
                 <div class="card-block">
                   <%= sale.receipt_no %>
-                  <span style="font-size:12px;float:right;line-height:inherit;"><%= sale.sale_status %></span>
+                  <span class="pull-right font-12"><%= sale.sale_status %></span>
                 </div>
               </div>
           <% end %>
@@ -37,8 +37,8 @@
       </div>
 
       <!--- Panel 1 - Table Orders -->
-      <div class="tab-pane active" id="tables" role="tabpanel" style="max-height:600px; overflow:auto">
-        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+      <div class="tab-pane dining active" id="tables" role="tabpanel">
+        <div class="card-columns">
           <% @tables.each do |table| %>
               <% if table.status == 'occupied' %>
 
@@ -46,7 +46,7 @@
                       <div class="card tables red text-white" data-id="<%= table.id %>">
                         <div class="card-block">
                           <%= table.name %>
-                          <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
+                          <span class="pull-right font-12"> billed</span>
                           <div style="font-size:12px;"></div>
                         </div>
                       </div>
@@ -54,7 +54,7 @@
                       <div class="card tables blue text-white" data-id="<%= table.id %>">
                         <div class="card-block">
                           <%= table.name %>
-                          <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
+                          <span class="pull-right font-12"> new</span>
                         </div>
                       </div>
                   <% end %>
@@ -70,8 +70,8 @@
       </div>
 
       <!--- Panel 2 - Room Orders -->
-      <div class="tab-pane" id="rooms" role="tabpanel" style="max-height:600px; overflow:auto">
-        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+      <div class="tab-pane dining" id="rooms" role="tabpanel">
+        <div class="card-columns">
           <% @rooms.each do |room| %>
               <% if room.status == 'occupied' %>
 
@@ -79,9 +79,9 @@
                     <div class="card-block">
                       <%= room.name %>
                       <% if room.get_booking.nil? %>
-                          <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
+                          <span class="pull-right font-12"> billed</span>
                       <% else %>
-                          <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
+                          <span class="pull-right font-12"> new</span>
                       <% end %>
                     </div>
                   </div>
@@ -97,9 +97,8 @@
       </div>
 
       <!--- Panel 3 - Orders -->
-      <div class="tab-pane" id="orders" role="tabpanel" style="max-height:600px; overflow:auto">
-        <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
-
+      <div class="tab-pane dining" id="orders" role="tabpanel">
+        <div class="card-columns">
           <% @orders.each do |order| %>
               <div class="card orders red text-white" data-id="<%= order.order_id %>">
                 <div class="card-block">
@@ -118,7 +117,6 @@
   <div class="col-lg-5 col-md-5 col-sm-5">
     <div class="card">
       <div class="card-header">
-
         <% if @status_order == 'order' && @status_sale != 'sale' %>
             <div id="save_order_id" data-order="<%= @obj_order.order_id %>">
               <strong id="order-title">ORDER DETAILS </strong> | Table <%= @dining.name rescue "" %></div>
@@ -127,25 +125,23 @@
         <% end %>
       </div>
       <div class="card-block">
-        <div class="card-title row">
-          <div class="col-lg-6 col-md-6 col-sm-6">
-            <p> Receipt No: <span id="receipt_no">
+        <div class="card-title">
+          <div class="row">
+            <div class="col-lg-6 col-md-6 col-sm-6">
+              <p> Receipt No: <span id="receipt_no">
+                 <% if @status_sale == 'sale' %>
+                   <%= @sale_array[0].receipt_no rescue '' %>
 
-               <% if @status_sale == 'sale' %>
-                 <%= @sale_array[0].receipt_no rescue '' %>
-
-               <% end %>
-             </span></p>
+                 <% end %>
+               </span></p>
+            </div>
+            <div class="col-lg-6 col-md-6 col-sm-6 text-right">
+              <p>Date: <span id="receipt_date"><%= @date.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></span>
+              </p>
+            </div>
           </div>
-          <div class="col-lg-6 col-md-6 col-sm-6 text-right">
-
-            <p>Date: <span id="receipt_date"><%= @date.utc.getlocal.strftime("%d/%m/%Y - %I:%M %p") rescue '-' %></span>
-            </p>
-          </div>
-        </div>
-
-        <div class="card-title row">
-          <div class="col-lg-6 col-md-6 col-sm-6">
+          <div class="row">
+              <div class="col-lg-6 col-md-6 col-sm-6">
             <% if @status_sale == 'sale' %>
                 <p class="hidden customer-id"><%= @sale_array[0].customer_id rescue '' %></p>
                 <p>Customer : <%= @sale_array[0].customer.name rescue '' %></p>
@@ -154,8 +150,10 @@
                 <p>Customer : <%= @customer.name rescue "" %></p>
             <% end %>
           </div>
+          </div>
         </div>
-        <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
+
+        <div class="card-text order-info">
           <table class="table table-striped" id="order-items-table">
             <thead>
             <tr>
@@ -251,10 +249,9 @@
                   </td>
                 </tr>
             <% end %>
-            <tr class="rebate_amount"></tr>
+            <!-- <tr class="rebate_amount"></tr> -->
           </table>
         </div>
-        <br>
 
         <%
           if @status_sale == 'sale'
@@ -314,7 +311,7 @@
   <div class="col-lg-1 col-md-1 col-sm-1">
     <!-- Waiter Buttons -->
 
-    <button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
+    <button type="button" class="btn btn-primary btn-block" id='back'><i class="fa fa-arrow-left"></i> Back</button>
     <button type="button" id="add_order" class="btn btn-primary btn-block">Add Order</button>
     <% if @dining.bookings.length >= 1 %>
         <% if @status_order == 'order' && @status_sale != 'sale' %>

app/views/origami/in_juties/_assign_in_juty.html.erb

@@ -26,6 +26,8 @@
       <%= f.button :submit, "Create", :class => 'btn btn-primary ', :id => 'create' %>
       <%= f.button :submit, "Update", :class => 'btn btn-primary ', :disabled => '', :id => 'update' %>
       <%= f.button :button, "Reset", :class => 'btn btn-danger ', :id => 'reset' %>
+
+      <button type="button" class="btn btn-inverse pull-right" id='back'><i class="fa fa-arrow-left"></i> Back</button>
     </div>
 
 <% end %>

app/views/origami/in_juties/index_in_juty.html.erb

@@ -35,10 +35,6 @@
   </div>
 </div>
 
-<div class="col-md-1">
-  <button type="button" class="btn btn-primary btn-block" id='back'>Back</button>
-</div>
-
 <script type="text/javascript">
     $(document).on('click', ".injuty_tr", function () {
 

app/views/origami/other_charges/index.html.erb

@@ -17,7 +17,7 @@
               <p>Date:  <span id="receipt_date"> <%=@sale_data.receipt_date.strftime("%d/%m/%Y - %I:%M %p") rescue '-'%></span></p>
             </div>
           </div>
-          <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
+          <div class="card-text dining">
             <table class="table table-default" id="order-items-table">
               <thead>
                 <tr>

app/views/origami/rooms/show.html.erb

@@ -21,12 +21,12 @@
 
    <div class="tab-content" >
      <!--- Panel 0 - Completed Orders -->
-     <div class="tab-pane" id="completed" role="tabpanel" style="max-height:600px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining" id="completed" role="tabpanel">
+       <div class="card-columns">
          <% @complete.each do |sale| %>
          <div class="card sales red text-white" data-id = "<%= sale.sale_id %>">
            <div class="card-block">
-              <%= sale.receipt_no %><span style="font-size:12px;float:right;line-height:inherit;"><%= sale.sale_status %></span>
+              <%= sale.receipt_no %><span class="pull-right font-12"><%= sale.sale_status %></span>
            </div>
          </div>
          <% end %>
@@ -34,22 +34,22 @@
      </div>
 
      <!--- Panel 1 - Table Orders -->
-     <div class="tab-pane " id="tables" role="tabpanel" style="max-height:600px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining" id="tables" role="tabpanel">
+       <div class="card-columns">
          <% @tables.each do |table| %>
          <% if table.status == 'occupied' %>
             <% if table.get_booking.nil? %>
                 <div class="card tables red text-white" data-id="<%= table.id %>">
                   <div class="card-block">
                      <%= table.name %>
-                       <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
+                       <span class="pull-right font-12"> billed</span>
                   </div>
                 </div>
             <% else %>
                 <div class="card tables blue text-white" data-id="<%= table.id %>">
                   <div class="card-block">
                      <%= table.name %>
-                       <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
+                       <span class="pull-right font-12"> new</span>
                   </div>
                 </div>
             <% end %>
@@ -65,8 +65,8 @@
      </div>
 
      <!--- Panel 2 - Room Orders -->
-     <div class="tab-pane active" id="rooms" role="tabpanel" style="max-height:600px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining active" id="rooms" role="tabpanel">
+       <div class="card-columns">
          <% @rooms.each do |room| %>
          <% if room.status == 'occupied' %>
 
@@ -74,7 +74,7 @@
                <div class="card rooms red text-white" data-id="<%= room.id %>">
                  <div class="card-block">
                     <%= room.name %>
-                    <span style="font-size:12px;float:right;line-height:inherit;"> billed</span>
+                    <span class="pull-right font-12"> billed</span>
                     <div  style="font-size:12px;"></div>
                  </div>
                </div>
@@ -82,7 +82,7 @@
                <div class="card rooms blue text-white" data-id="<%= room.id %>">
                  <div class="card-block">
                     <%= room.name %>
-                    <span style="font-size:12px;float:right;line-height:inherit;"> new</span>
+                    <span class="pull-right font-12"> new</span>
                  </div>
                </div>
            <% end %>
@@ -98,8 +98,8 @@
      </div>
 
      <!--- Panel 3 - Orders -->
-     <div class="tab-pane" id="orders" role="tabpanel" style="max-height:600px; overflow:auto">
-       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
+     <div class="tab-pane dining" id="orders" role="tabpanel">
+       <div class="card-columns">
          <% @orders.each do |order| %>
          <div class="card orders red text-white" data-id = "<%= order.order_id %>">
            <div class="card-block">
@@ -152,7 +152,7 @@
            </div>
 
          </div>
-         <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
+         <div class="card-text order-info">
            <table class="table table-striped" id="order-items-table">
              <thead>
                <tr>
@@ -301,7 +301,7 @@
  <!-- Column Three -->
  <div class="col-lg-1 col-md-1 col-sm-1">
    <!-- Waiter Buttons -->
-   <button type="button" class="btn btn-primary btn-block" id='back' >Back</button>
+   <button type="button" class="btn btn-primary btn-block" id='back'><i class="fa fa-arrow-left"></i>  Back</button>
    <% if @room.bookings.length >= 1 %>
    <% if @status_order == 'order' && @status_sale != 'sale' %>
      <!-- <button type="button" class="btn btn-primary btn-block" >Add Order</button> -->

app/views/origami/sale_edit/edit.html.erb

@@ -24,7 +24,7 @@
           </div>
 
         </div>
-        <div class="card-text" style="min-height:500px; max-height:500px; overflow-x:scroll">
+        <div class="card-text dining">
           <table class="table " id="order-items-table">
             <thead>
             <tr>