mirror of
https://github.com/opensourcepos/opensourcepos.git
synced 2025-12-24 01:57:51 -05:00
fe6601b351
Add avatar toggle functionality to receipt views and styles Fix receipt alignment issue when avatar column is visible - Fixed black line alignment problem where total columns extended beyond borders - Added dynamic colspan calculation to handle avatar column visibility - Updated all colspan values from hardcoded '3' to dynamic '' - Ensured proper alignment regardless of avatar column show/hide state - Standardized border styling from '#000000' to 'black' for consistency style: Adjust receipt layout and spacing for improved readability Update avatar toggle test functionality
102 lines
4.2 KiB
HTML
102 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Avatar Toggle Test</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
|
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
|
crossorigin="anonymous">
|
|
<link rel="stylesheet" href="public/css/receipt.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
|
crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h3>Avatar Toggle Test</h3>
|
|
|
|
<!-- Control buttons -->
|
|
<div class="print_hide" id="control_buttons" style="text-align: right; margin-bottom: 20px;">
|
|
<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>
|
|
<a href="javascript:void(0);">
|
|
<div class="btn btn-info btn-sm" id="show_print_button">
|
|
<span class="glyphicon glyphicon-print"> </span>Print
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Receipt table -->
|
|
<div id="receipt_wrapper">
|
|
<table id="receipt_items">
|
|
<tr>
|
|
<th class="receipt-avatar-column" style="width: 15%;">Image</th>
|
|
<th style="width: 40%;">Description</th>
|
|
<th style="width: 20%;">Price</th>
|
|
<th style="width: 20%;">Quantity</th>
|
|
<th style="width: 20%;" class="total-value">Total</th>
|
|
</tr>
|
|
<tr>
|
|
<td class="receipt-avatar-column">
|
|
<img src="https://via.placeholder.com/40x40" alt="avatar" style="height:40px;max-width:40px;">
|
|
</td>
|
|
<td>Test Item 1</td>
|
|
<td>$10.00</td>
|
|
<td>2</td>
|
|
<td class="total-value">$20.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="receipt-avatar-column">
|
|
<img src="https://via.placeholder.com/40x40" alt="avatar" style="height:40px;max-width:40px;">
|
|
</td>
|
|
<td>Test Item 2</td>
|
|
<td>$15.00</td>
|
|
<td>1</td>
|
|
<td class="total-value">$15.00</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
// Avatar toggle functionality
|
|
const STORAGE_KEY = 'receipt_avatar_visible';
|
|
|
|
// Get saved state from localStorage, default to visible (true)
|
|
let isAvatarVisible = localStorage.getItem(STORAGE_KEY) !== 'false';
|
|
|
|
// Apply initial state
|
|
updateAvatarVisibility(isAvatarVisible);
|
|
|
|
// Handle toggle button click
|
|
$('#toggle_avatar_button').click(function() {
|
|
isAvatarVisible = !isAvatarVisible;
|
|
updateAvatarVisibility(isAvatarVisible);
|
|
localStorage.setItem(STORAGE_KEY, isAvatarVisible);
|
|
});
|
|
|
|
function updateAvatarVisibility(visible) {
|
|
const $avatarElements = $('.receipt-avatar-column');
|
|
const $toggleButton = $('#toggle_avatar_button');
|
|
const $toggleText = $('#avatar_toggle_text');
|
|
|
|
if (visible) {
|
|
$avatarElements.removeClass('hidden');
|
|
$toggleButton.removeClass('active');
|
|
$toggleText.text('Hide Avatar');
|
|
} else {
|
|
$avatarElements.addClass('hidden');
|
|
$toggleButton.addClass('active');
|
|
$toggleText.text('Show Avatar');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|