style(ui): modernize transaction list styling and update plugin version

Update the transaction interface with a modern design including improved
typography, card-based layouts, and color-coded status badges.

- Add comprehensive CSS for transaction items, types, and statuses
- Implement responsive styles for mobile transaction views
- Update transaction shortcode to include pagination limit
- Increment plugin asset version to 1.5.0
This commit is contained in:
Kazem Alghasi 2026-08-24 04:04:29 +03:30
parent c74924d3aa
commit c0a50acaef
3 changed files with 149 additions and 2 deletions

View File

@ -502,3 +502,150 @@
.ifnx-menu-item.active { border-bottom-color: #f97316; } .ifnx-menu-item.active { border-bottom-color: #f97316; }
.ifnx-menu-divider { display: none; } .ifnx-menu-divider { display: none; }
} }
/* ═══ Transactions (Modernized) ═══ */
.ifnex-transactions h3 {
margin: 0 0 20px 0;
color: #0f172a;
font-size: 20px;
font-weight: 800;
}
.ifnex-transactions-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ifnex-transaction-item {
background: #fff;
border-radius: 14px;
padding: 18px 20px;
border: 1px solid #eef2f7;
box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 6px 20px rgba(15,23,42,0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ifnex-transaction-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(15,23,42,0.1);
}
.ifnex-transaction-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.ifnex-transaction-type {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-transform: capitalize;
}
.ifnex-transaction-type.deposit,
.ifnex-transaction-type.credit {
background: #d1fae5;
color: #065f46;
}
.ifnex-transaction-type.withdraw,
.ifnex-transaction-type.debit {
background: #fee2e2;
color: #991b1b;
}
.ifnex-transaction-type.order_payment {
background: #fef3c7;
color: #92400e;
}
.ifnex-transaction-type.refund {
background: #e0e7ff;
color: #3730a3;
}
.ifnex-transaction-type.adjustment {
background: #f3f4f6;
color: #374151;
}
.ifnex-transaction-amount {
font-size: 16px;
font-weight: 800;
font-family: 'Inter', 'Tahoma', sans-serif;
}
.ifnex-transaction-amount.positive { color: #059669; }
.ifnex-transaction-amount.negative { color: #dc2626; }
.ifnex-transaction-details {
padding-top: 10px;
border-top: 1px solid #f1f5f9;
}
.ifnex-transaction-description {
font-size: 14px;
color: #334155;
margin: 0 0 8px 0;
line-height: 1.5;
}
.ifnex-transaction-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.ifnex-transaction-status {
font-size: 12px;
padding: 3px 10px;
border-radius: 999px;
font-weight: 600;
}
.ifnex-transaction-status.pending {
background: #fef3c7;
color: #92400e;
}
.ifnex-transaction-status.completed,
.ifnex-transaction-status.success {
background: #d1fae5;
color: #065f46;
}
.ifnex-transaction-status.failed {
background: #fee2e2;
color: #991b1b;
}
.ifnex-transaction-date {
font-size: 12px;
color: #94a3b8;
direction: ltr;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ifnex-transaction-ref {
font-size: 12px;
color: #94a3b8;
margin: 8px 0 0 0;
direction: ltr;
}
.ifnex-transaction-ref strong {
color: #64748b;
font-weight: 600;
}
@media (max-width: 640px) {
.ifnex-transaction-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.ifnex-transaction-meta {
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
}

View File

@ -1289,7 +1289,7 @@ function ifnex_customer_dashboard_shortcode($atts) {
</div> </div>
</div> </div>
<?php elseif ($tab === 'transactions'): ?> <?php elseif ($tab === 'transactions'): ?>
<?php echo do_shortcode('[ifnex_transactions]'); ?> <?php echo do_shortcode('[ifnex_transactions per_page="20"]'); ?>
<?php elseif ($tab === 'tracking'): ?> <?php elseif ($tab === 'tracking'): ?>
<?php echo do_shortcode('[ifnex_tracking_form]'); ?> <?php echo do_shortcode('[ifnex_tracking_form]'); ?>
<?php elseif ($tab === 'profile'): ?> <?php elseif ($tab === 'profile'): ?>

View File

@ -565,7 +565,7 @@ function ifnex_enqueue_global_assets() {
'ifnex-orders-css', 'ifnex-orders-css',
$plugin_url . 'assets/css/ifnex-orders.css', $plugin_url . 'assets/css/ifnex-orders.css',
array(), array(),
'1.4.0' '1.5.0'
); );
// لود jQuery // لود jQuery