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:
parent
c74924d3aa
commit
c0a50acaef
@ -501,4 +501,151 @@
|
|||||||
.ifnx-menu-item { border-right: none; border-bottom: 3px solid transparent; padding: 10px 14px; }
|
.ifnx-menu-item { border-right: none; border-bottom: 3px solid transparent; padding: 10px 14px; }
|
||||||
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -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'): ?>
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user