ui code review and edited

This commit is contained in:
Yan
2017-08-30 19:04:06 +06:30
parent c7018ee774
commit 3e8ead6a32
15 changed files with 454 additions and 466 deletions

View File

@@ -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>

View File

@@ -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) {

View File

@@ -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>