mirror of
https://github.com/opensourcepos/opensourcepos.git
synced 2026-04-02 06:14:51 -04:00
Fix review issues: CSS syntax, accessibility, colspan values, and avatar toggle state persistence
- Fixed invalid CSS syntax (padding:10px; !important -> padding:10px;) - Added type="button" to avatar toggle buttons to prevent form submission - Fixed colspan values for avatar column in receivings/receiving.php and receivings/receipt.php - Added summary_colspan for tax indicator in sales/receipt_default.php - Changed avatar toggle from <a><div> to proper <button> elements - Fixed persisted avatar state to also hide header columns - Fixed column widths to total 100% in sales/register.php - Fixed no-items-in-cart colspan from 8 to 9 in sales/register.php - Unified localStorage key to 'avatarColumnVisible' across all views
This commit is contained in:
Ollama
@@ -125,7 +125,7 @@ use App\Models\Employee;
|
||||
</div>
|
||||
|
||||
<div id="table_holder">
|
||||
<table id="table" style="padding:10px; !important"></table>
|
||||
<table id="table" style="padding:10px;"></table>
|
||||
</div>
|
||||
|
||||
<?= view('partial/footer') ?>
|
||||
|
||||
@@ -27,11 +27,9 @@ if (isset($error_message)) {
|
||||
echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'selected_printer' => 'receipt_printer']) ?>
|
||||
|
||||
<div class="print_hide" id="control_buttons" style="text-align: right;">
|
||||
<a href="javascript:void(0);">
|
||||
<div class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<span class="glyphicon glyphicon-picture"> </span><span id="avatar_toggle_text">Hide Avatar</span>
|
||||
</div>
|
||||
</a>
|
||||
<button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<span class="glyphicon glyphicon-picture"> </span><span id="avatar_toggle_text">Hide Avatar</span>
|
||||
</button>
|
||||
<a href="javascript:printdoc();">
|
||||
<div class="btn btn-info btn-sm" id="show_print_button"><?= '<span class="glyphicon glyphicon-print"> </span>' . lang('Common.print') ?></div>
|
||||
</a>
|
||||
@@ -70,9 +68,9 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
|
||||
<table id="receipt_items">
|
||||
<tr>
|
||||
<th class="receipt-avatar-column" style="width: 15%;"><?= lang('Items.image') ?></th>
|
||||
<th style="width: 40%;"><?= lang('Items.item') ?></th>
|
||||
<th style="width: 35%;"><?= lang('Items.item') ?></th>
|
||||
<th style="width: 20%;"><?= lang('Common.price') ?></th>
|
||||
<th style="width: 20%;"><?= lang('Sales.quantity') ?></th>
|
||||
<th style="width: 15%;"><?= lang('Sales.quantity') ?></th>
|
||||
<th style="width: 15%; text-align: right;"><?= lang('Sales.total') ?></th>
|
||||
</tr>
|
||||
|
||||
@@ -91,27 +89,27 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
|
||||
<td><div class="total-value"><?= to_currency($item['total']) ?></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><?= esc($item['serialnumber']) ?></td>
|
||||
<td colspan="2"><?= esc($item['serialnumber']) ?></td>
|
||||
</tr>
|
||||
<?php if ($item['discount'] > 0) { ?>
|
||||
<tr>
|
||||
<?php if ($item['discount_type'] == FIXED) { ?>
|
||||
<td colspan="3" class="discount"><?= to_currency($item['discount']) . ' ' . lang('Sales.discount') ?></td>
|
||||
<td colspan="4" class="discount"><?= to_currency($item['discount']) . ' ' . lang('Sales.discount') ?></td>
|
||||
<?php } elseif ($item['discount_type'] == PERCENT) { ?>
|
||||
<td colspan="3" class="discount"><?= to_decimals($item['discount']) . ' ' . lang('Sales.discount_included') ?></td>
|
||||
<td colspan="4" class="discount"><?= to_decimals($item['discount']) . ' ' . lang('Sales.discount_included') ?></td>
|
||||
<?php } ?>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: right; border-top: 2px solid #000000;"><?= lang('Sales.total') ?></td>
|
||||
<td colspan="4" style="text-align: right; border-top: 2px solid #000000;"><?= lang('Sales.total') ?></td>
|
||||
<td style="border-top: 2px solid #000000;">
|
||||
<div class="total-value"><?= to_currency($total) ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php if ($mode != 'requisition') { ?>
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: right;"><?= lang('Sales.payment') ?></td>
|
||||
<td colspan="4" style="text-align: right;"><?= lang('Sales.payment') ?></td>
|
||||
<td>
|
||||
<div class="total-value"><?= esc($payment_type) ?></div>
|
||||
</td>
|
||||
@@ -119,14 +117,14 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
|
||||
|
||||
<?php if (isset($amount_change)) { ?>
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: right;"><?= lang('Sales.amount_tendered') ?></td>
|
||||
<td colspan="4" style="text-align: right;"><?= lang('Sales.amount_tendered') ?></td>
|
||||
<td>
|
||||
<div class="total-value"><?= to_currency($amount_tendered) ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="3" style="text-align: right;"><?= lang('Sales.change_due') ?></td>
|
||||
<td colspan="4" style="text-align: right;"><?= lang('Sales.change_due') ?></td>
|
||||
<td>
|
||||
<div class="total-value"><?= $amount_change ?></div>
|
||||
</td>
|
||||
@@ -148,16 +146,17 @@ echo view('partial/print_receipt', ['print_after_sale', $print_after_sale, 'sele
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Avatar toggle functionality
|
||||
const STORAGE_KEY = 'receipt_avatar_visible';
|
||||
const STORAGE_KEY = 'avatarColumnVisible';
|
||||
|
||||
// Get saved state from localStorage, default to visible (true)
|
||||
let isAvatarVisible = localStorage.getItem(STORAGE_KEY) !== 'false';
|
||||
|
||||
// Apply initial state
|
||||
// Apply initial state (also handle header visibility)
|
||||
updateAvatarVisibility(isAvatarVisible);
|
||||
|
||||
// Handle toggle button click
|
||||
$('#toggle_avatar_button').click(function() {
|
||||
$('#toggle_avatar_button').click(function(e) {
|
||||
e.preventDefault();
|
||||
isAvatarVisible = !isAvatarVisible;
|
||||
updateAvatarVisibility(isAvatarVisible);
|
||||
localStorage.setItem(STORAGE_KEY, isAvatarVisible);
|
||||
|
||||
@@ -97,7 +97,7 @@ if (isset($success)) {
|
||||
</button>
|
||||
</li>
|
||||
<li class="pull-right">
|
||||
<button class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<span class="glyphicon glyphicon-picture"> </span><span id="avatar_toggle_text">Hide Avatar</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -111,7 +111,7 @@ if (isset($success)) {
|
||||
<table class="sales_table_100" id="register">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 6%;"><?= lang('Items.image') ?></th>
|
||||
<th style="width: 6%;" class="avatar-header"><?= lang('Items.image') ?></th>
|
||||
<th style="width: 5%;"><?= lang('Common.delete') ?></th>
|
||||
<th style="width: 12%;"><?= lang('Sales.item_number') ?></th>
|
||||
<th style="width: 20%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
|
||||
@@ -220,7 +220,7 @@ if (isset($success)) {
|
||||
?>
|
||||
<td style="color: #2F4F4F;"><?= lang('Sales.description_abbrv') . ':' ?></td>
|
||||
<?php } ?>
|
||||
<td colspan="2" style="text-align: left;">
|
||||
<td colspan="3" style="text-align: left;">
|
||||
<?php
|
||||
if ($item['allow_alt_description'] == 1) { // TODO: ===?
|
||||
echo form_input([
|
||||
@@ -555,11 +555,15 @@ if (isset($success)) {
|
||||
const isAvatarVisible = localStorage.getItem('avatarColumnVisible') !== 'false';
|
||||
if (!isAvatarVisible) {
|
||||
$('.avatar-column').hide();
|
||||
$('.avatar-header').hide();
|
||||
$('#avatar_toggle_text').text('Show Avatar');
|
||||
}
|
||||
|
||||
$('#toggle_avatar_button').click(function() {
|
||||
$('#toggle_avatar_button').click(function(e) {
|
||||
e.preventDefault();
|
||||
const isVisible = $('.avatar-column').is(':visible');
|
||||
$('.avatar-column').toggle();
|
||||
$('.avatar-header').toggle();
|
||||
localStorage.setItem('avatarColumnVisible', !isVisible);
|
||||
$(this).toggleClass('active');
|
||||
var $toggleText = $('#avatar_toggle_text');
|
||||
|
||||
@@ -45,16 +45,17 @@ if (isset($error_message)) {
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Avatar toggle functionality
|
||||
const STORAGE_KEY = 'receipt_avatar_visible';
|
||||
const STORAGE_KEY = 'avatarColumnVisible';
|
||||
|
||||
// Get saved state from localStorage, default to visible (true)
|
||||
let isAvatarVisible = localStorage.getItem(STORAGE_KEY) !== 'false';
|
||||
|
||||
// Apply initial state
|
||||
// Apply initial state (also handle header visibility)
|
||||
updateAvatarVisibility(isAvatarVisible);
|
||||
|
||||
// Handle toggle button click
|
||||
$('#toggle_avatar_button').click(function() {
|
||||
$('#toggle_avatar_button').click(function(e) {
|
||||
e.preventDefault();
|
||||
isAvatarVisible = !isAvatarVisible;
|
||||
updateAvatarVisibility(isAvatarVisible);
|
||||
localStorage.setItem(STORAGE_KEY, isAvatarVisible);
|
||||
@@ -81,11 +82,9 @@ if (isset($error_message)) {
|
||||
<?= view('partial/print_receipt', ['print_after_sale' => $print_after_sale, 'selected_printer' => 'receipt_printer']) ?>
|
||||
|
||||
<div class="print_hide" id="control_buttons" style="text-align: right;">
|
||||
<a href="javascript:void(0);">
|
||||
<div class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<span class="glyphicon glyphicon-picture"> </span><span id="avatar_toggle_text">Hide Avatar</span>
|
||||
</div>
|
||||
</a>
|
||||
<button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<span class="glyphicon glyphicon-picture"> </span><span id="avatar_toggle_text">Hide Avatar</span>
|
||||
</button>
|
||||
<a href="javascript:printdoc();">
|
||||
<div class="btn btn-info btn-sm" id="show_print_button"><?= '<span class="glyphicon glyphicon-print"> </span>' . lang('Common.print') ?></div>
|
||||
</a>
|
||||
|
||||
@@ -54,7 +54,9 @@
|
||||
// Calculate colspan for totals based on visible columns
|
||||
// Avatar(1) + Description(1) + Price(1) + Quantity(1) = 4 columns before Total
|
||||
// When avatar is hidden via CSS, we still need to account for it in colspan
|
||||
$total_colspan = 4; // avatar + description + price + quantity
|
||||
$item_colspan = 4; // avatar + description + price + quantity
|
||||
// Summary rows need to account for tax indicator column when enabled
|
||||
$summary_colspan = $item_colspan + ($config['receipt_show_tax_ind'] ? 1 : 0);
|
||||
?>
|
||||
<tr>
|
||||
<th class="receipt-avatar-column" style="width: 10%;"><?= lang('Items.image') ?></th>
|
||||
@@ -87,7 +89,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<?php if ($config['receipt_show_description']) { ?>
|
||||
<td colspan="<?= $total_colspan - 1 ?>"><?= esc($item['description']) ?></td>
|
||||
<td colspan="<?= $item_colspan - 1 ?>"><?= esc($item['description']) ?></td>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($config['receipt_show_serialnumber']) { ?>
|
||||
@@ -97,9 +99,9 @@
|
||||
<?php if ($item['discount'] > 0) { ?>
|
||||
<tr>
|
||||
<?php if ($item['discount_type'] == FIXED) { ?>
|
||||
<td colspan="<?= $total_colspan ?>" class="discount"><?= to_currency($item['discount']) . " " . lang('Sales.discount') ?></td>
|
||||
<td colspan="<?= $item_colspan ?>" class="discount"><?= to_currency($item['discount']) . " " . lang('Sales.discount') ?></td>
|
||||
<?php } elseif ($item['discount_type'] == PERCENT) { ?>
|
||||
<td colspan="<?= $total_colspan ?>" class="discount"><?= to_decimals($item['discount']) . " " . lang('Sales.discount_included') ?></td>
|
||||
<td colspan="<?= $item_colspan ?>" class="discount"><?= to_decimals($item['discount']) . " " . lang('Sales.discount_included') ?></td>
|
||||
<?php } ?>
|
||||
<td class="total-value"><?= to_currency($item['discounted_total']) ?></td>
|
||||
</tr>
|
||||
@@ -111,23 +113,23 @@
|
||||
|
||||
<?php if ($config['receipt_show_total_discount'] && $discount > 0) { ?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
|
||||
<td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
|
||||
<td style="text-align: right; border-top: 2px solid black;"><?= to_currency($prediscount_subtotal) ?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" class="total-value"><?= lang('Sales.customer_discount') ?>:</td>
|
||||
<td colspan="<?= $summary_colspan ?>" class="total-value"><?= lang('Sales.customer_discount') ?>:</td>
|
||||
<td class="total-value"><?= to_currency($discount * -1) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($config['receipt_show_taxes']) { ?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
|
||||
<td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= lang('Sales.sub_total') ?></td>
|
||||
<td style="text-align: right;"><?= to_currency($subtotal) ?></td>
|
||||
</tr>
|
||||
<?php foreach ($taxes as $tax_group_index => $tax) { ?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" class="total-value"><?= (float)$tax['tax_rate'] . '% ' . $tax['tax_group'] ?>:</td>
|
||||
<td colspan="<?= $summary_colspan ?>" class="total-value"><?= (float)$tax['tax_rate'] . '% ' . $tax['tax_group'] ?>:</td>
|
||||
<td class="total-value"><?= to_currency_tax($tax['sale_tax_amount']) ?></td>
|
||||
</tr>
|
||||
<?php
|
||||
@@ -137,12 +139,12 @@
|
||||
|
||||
<?php $border = (!$config['receipt_show_taxes'] && !($config['receipt_show_total_discount'] && $discount > 0)); ?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" style="text-align: right;<?= $border ? ' border-top: 2px solid black;' : '' ?>"><?= lang('Sales.total') ?></td>
|
||||
<td colspan="<?= $summary_colspan ?>" style="text-align: right;<?= $border ? ' border-top: 2px solid black;' : '' ?>"><?= lang('Sales.total') ?></td>
|
||||
<td style="text-align: right;<?= $border ? ' border-top: 2px solid black;' : '' ?>"><?= to_currency($total) ?></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan + 1 ?>"> </td>
|
||||
<td colspan="<?= $summary_colspan + 1 ?>"> </td>
|
||||
</tr>
|
||||
|
||||
<?php
|
||||
@@ -154,7 +156,7 @@
|
||||
$show_giftcard_remainder |= $splitpayment[0] == lang('Sales.giftcard');
|
||||
?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= $splitpayment[0] ?> </td>
|
||||
<td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= $splitpayment[0] ?> </td>
|
||||
<td class="total-value"><?= to_currency($payment['payment_amount'] * -1) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
@@ -163,12 +165,12 @@
|
||||
|
||||
<?php if (isset($cur_giftcard_value) && $show_giftcard_remainder) { ?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" style="text-align: right;"><?= lang('Sales.giftcard_balance') ?></td>
|
||||
<td colspan="<?= $summary_colspan ?>" style="text-align: right;"><?= lang('Sales.giftcard_balance') ?></td>
|
||||
<td class="total-value"><?= to_currency($cur_giftcard_value) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<tr>
|
||||
<td colspan="<?= $total_colspan ?>" style="text-align: right;"> <?= lang($amount_change >= 0 ? ($only_sale_check ? 'Sales.check_balance' : 'Sales.change_due') : 'Sales.amount_due') ?> </td>
|
||||
<td colspan="<?= $summary_colspan ?>" style="text-align: right;"> <?= lang($amount_change >= 0 ? ($only_sale_check ? 'Sales.check_balance' : 'Sales.change_due') : 'Sales.amount_due') ?> </td>
|
||||
<td class="total-value"><?= to_currency($amount_change) ?></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -96,7 +96,7 @@ helper('url');
|
||||
</button>
|
||||
</li>
|
||||
<li class="pull-right">
|
||||
<button class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<button type="button" class="btn btn-warning btn-sm receipt-avatar-toggle-btn" id="toggle_avatar_button">
|
||||
<span class="glyphicon glyphicon-picture"> </span><span id="avatar_toggle_text">Hide Avatar</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -144,13 +144,13 @@ helper('url');
|
||||
<table class="sales_table_100" id="register">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 15%;" ><?= lang('Items.image') ?></th>
|
||||
<th class="avatar-header" style="width: 8%;" ><?= lang('Items.image') ?></th>
|
||||
<th style="width: 5%;"><?= lang('Common.delete') ?></th>
|
||||
<th style="width: 15%;"><?= lang(ucfirst($controller_name) . '.item_number') ?></th>
|
||||
<th style="width: 30%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
|
||||
<th style="width: 12%;"><?= lang(ucfirst($controller_name) . '.item_number') ?></th>
|
||||
<th style="width: 27%;"><?= lang(ucfirst($controller_name) . '.item_name') ?></th>
|
||||
<th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.price') ?></th>
|
||||
<th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.quantity') ?></th>
|
||||
<th style="width: 15%;"><?= lang(ucfirst($controller_name) . '.discount') ?></th>
|
||||
<th style="width: 13%;"><?= lang(ucfirst($controller_name) . '.discount') ?></th>
|
||||
<th style="width: 10%;"><?= lang(ucfirst($controller_name) . '.total') ?></th>
|
||||
<th style="width: 5%;"><?= lang(ucfirst($controller_name) . '.update') ?></th>
|
||||
</tr>
|
||||
@@ -159,7 +159,7 @@ helper('url');
|
||||
<tbody id="cart_contents">
|
||||
<?php if (count($cart) == 0) { ?>
|
||||
<tr>
|
||||
<td colspan="8">
|
||||
<td colspan="9">
|
||||
<div class="alert alert-dismissible alert-info"><?= lang(ucfirst($controller_name) . '.no_items_in_cart') ?></div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -169,12 +169,10 @@ helper('url');
|
||||
?>
|
||||
<?= form_open("$controller_name/editItem/$line", ['class' => 'form-horizontal', 'id' => "cart_$line"]) ?>
|
||||
<tr>
|
||||
<td class="avatar-column">
|
||||
|
||||
<?php if (!empty($item['pic_filename'])): ?>
|
||||
<img src="<?= base_url('uploads/item_pics/' . esc($item['pic_filename'], 'url')) ?>" alt="avatar" style="height:40px;max-width:40px;">
|
||||
|
||||
<?php endif; ?>
|
||||
<td class="avatar-column">
|
||||
<?php if (!empty($item['pic_filename'])): ?>
|
||||
<img src="<?= base_url('uploads/item_pics/' . esc($item['pic_filename'], 'url')) ?>" alt="avatar" style="height:40px;max-width:40px;">
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
<td>
|
||||
<?php
|
||||
@@ -582,12 +580,16 @@ helper('url');
|
||||
const isAvatarVisible = localStorage.getItem('avatarColumnVisible') !== 'false';
|
||||
if (!isAvatarVisible) {
|
||||
$('.avatar-column').hide();
|
||||
$('.avatar-header').hide();
|
||||
$('#avatar_toggle_text').text('Show Avatar');
|
||||
}
|
||||
|
||||
// Handle avatar toggle button click
|
||||
$('#toggle_avatar_button').click(function() {
|
||||
$('#toggle_avatar_button').click(function(e) {
|
||||
e.preventDefault();
|
||||
const isVisible = $('.avatar-column').is(':visible');
|
||||
$('.avatar-column').toggle();
|
||||
$('.avatar-header').toggle();
|
||||
localStorage.setItem('avatarColumnVisible', !isVisible);
|
||||
$(this).toggleClass('active');
|
||||
var $toggleText = $('#avatar_toggle_text');
|
||||
|
||||
Reference in New Issue
Block a user