mirror of
https://github.com/opensourcepos/opensourcepos.git
synced 2026-02-06 15:41:17 -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
135 lines
2.3 KiB
CSS
135 lines
2.3 KiB
CSS
#receipt_wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
#receipt_header {
|
|
text-align: center;
|
|
}
|
|
|
|
#company_name {
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#company_name img {
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
}
|
|
|
|
#company_phone {
|
|
margin-bottom: 15px;
|
|
|
|
}
|
|
|
|
#sale_time {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#receipt_items {
|
|
position: relative;
|
|
border-collapse: collapse;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
#receipt_items td {
|
|
position: relative;
|
|
padding: 1px 0px;
|
|
margin: 0;
|
|
border: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#receipt_items th {
|
|
padding: 1px 0px;
|
|
margin: 0;
|
|
border: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#receipt_items tr {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Remove all spacing between specific columns */
|
|
#receipt_items td:nth-child(2), /* Description column */
|
|
#receipt_items th:nth-child(2) {
|
|
padding-right: 0;
|
|
}
|
|
|
|
#receipt_items td:nth-child(3), /* Price column */
|
|
#receipt_items th:nth-child(3) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#receipt_items td:nth-child(4), /* Quantity column */
|
|
#receipt_items th:nth-child(4) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#receipt_items td:nth-child(5), /* Total column */
|
|
#receipt_items th:nth-child(5) {
|
|
padding-left: 0;
|
|
}
|
|
|
|
#sale_return_policy {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
#receipt_wrapper #barcode {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.total-value {
|
|
text-align: right;
|
|
}
|
|
|
|
.discount {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Avatar toggle functionality */
|
|
.receipt-avatar-column {
|
|
display: table-cell;
|
|
width: 10%;
|
|
}
|
|
|
|
.receipt-avatar-column.hidden {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
}
|
|
|
|
/* When avatar column is hidden, redistribute the width */
|
|
.receipt-avatar-column.hidden ~ th:nth-child(2) {
|
|
width: 50% !important; /* Description gets more space */
|
|
}
|
|
|
|
.receipt-avatar-column.hidden ~ th:nth-child(3) {
|
|
width: 17% !important; /* Price */
|
|
}
|
|
|
|
.receipt-avatar-column.hidden ~ th:nth-child(4) {
|
|
width: 17% !important; /* Quantity */
|
|
}
|
|
|
|
.receipt-avatar-column.hidden ~ th:nth-child(5) {
|
|
width: 16% !important; /* Total */
|
|
}
|
|
|
|
.receipt-avatar-toggle-btn {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.receipt-avatar-toggle-btn.active {
|
|
background-color: #d9534f;
|
|
border-color: #d43f3a;
|
|
}
|