frontend Order Section Update
This commit is contained in:
@@ -38,12 +38,11 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 13.5px;
|
||||
padding: 4px 16px 4px 11px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 1px 2px 0 rgba(130,130,130,0.15);
|
||||
min-width: 76px;
|
||||
width: 90px;
|
||||
min-height: 28px;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
@@ -53,18 +52,9 @@
|
||||
.priority-badge:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
.priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); color: #fff; }
|
||||
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); color: #fff; }
|
||||
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); color: #fff; }
|
||||
|
||||
.priority-badge .icon {
|
||||
margin-right: 5px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
display:inline-block;
|
||||
width: 17px;
|
||||
text-align: center;
|
||||
}
|
||||
.priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); }
|
||||
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
|
||||
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
|
||||
|
||||
/* 🎨 Table Header (keep original bg-light color) */
|
||||
.custom-table thead th {
|
||||
@@ -75,7 +65,7 @@
|
||||
font-size: 17px;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid #bfbfbf;
|
||||
background-color: #fde4b3 /* Bootstrap bg-light */
|
||||
background-color: #fde4b3; /* Bootstrap bg-light */
|
||||
}
|
||||
|
||||
/* 🟢 Rounded Corners for Header */
|
||||
@@ -118,11 +108,87 @@
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* ⚡ Status Badges */
|
||||
/* ⚡ Status Badges - NEW ATTRACTIVE STYLES */
|
||||
.badge {
|
||||
font-size: 13px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 7px 13px !important;
|
||||
border-radius: 20px !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
color: #fff !important;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
border: 2px solid transparent !important;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.2;
|
||||
gap: 6px;
|
||||
animation: pulse 2s infinite;
|
||||
width: 99px;
|
||||
}
|
||||
|
||||
/* Status icons */
|
||||
.status-icon {
|
||||
font-size: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Custom status badge backgrounds */
|
||||
.badge-pending {
|
||||
background: url('/images/status-bg-pending.png') !important;
|
||||
}
|
||||
|
||||
.badge-approved {
|
||||
background: url('/images/status-bg-approved.png') !important;
|
||||
}
|
||||
|
||||
.badge-rejected {
|
||||
background: url('/images/status-bg-rejected.png') !important;
|
||||
}
|
||||
|
||||
/* Fallback colors if images don't load */
|
||||
.badge.badge-pending {
|
||||
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
||||
color: #d97706 !important;
|
||||
border-color: #f59e0b !important;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.badge.badge-approved {
|
||||
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
||||
color: #065f46 !important;
|
||||
border-color: #10b981 !important;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
.badge.badge-rejected {
|
||||
background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
|
||||
color: #991b1b !important;
|
||||
border-color: #ef4444 !important;
|
||||
width: 85px;
|
||||
}
|
||||
|
||||
/* Animation effects for badges */
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
|
||||
50% { box-shadow: 0 0 14px rgba(0,0,0,0.15); }
|
||||
100% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }
|
||||
}
|
||||
|
||||
/* Count badges at top */
|
||||
.count-badge {
|
||||
--bs-badge-padding-x: 0.65em;
|
||||
--bs-badge-padding-y: 0.35em;
|
||||
--bs-badge-font-size: 0.75em;
|
||||
--bs-badge-font-weight: 700;
|
||||
--bs-badge-color: #fff;
|
||||
--bs-badge-border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
/* ✨ Heading style */
|
||||
@@ -145,13 +211,13 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-2 mt-3">
|
||||
<h4 class="fw-bold mb-0">User Requests</h4>
|
||||
<div>
|
||||
<span class="badge rounded-pill bg-primary me-1">
|
||||
<span class="count-badge badge rounded-pill bg-warning text-dark me-1">
|
||||
{{ $requests->where('status', 'pending')->count() }} Pending
|
||||
</span>
|
||||
<span class="badge rounded-pill bg-success me-1">
|
||||
<span class="count-badge badge rounded-pill bg-success me-1">
|
||||
{{ $requests->where('status', 'approved')->count() }} Approved
|
||||
</span>
|
||||
<span class="badge rounded-pill bg-danger">
|
||||
<span class="count-badge badge rounded-pill bg-danger">
|
||||
{{ $requests->where('status', 'rejected')->count() }} Rejected
|
||||
</span>
|
||||
</div>
|
||||
@@ -195,11 +261,11 @@
|
||||
<td>{{ $req->address }}</td>
|
||||
<td>
|
||||
@if(strtolower($req->priority) == 'high')
|
||||
<span class="priority-badge priority-high"><span class="icon">🔥</span>High</span>
|
||||
<span class="priority-badge priority-high">High</span>
|
||||
@elseif(strtolower($req->priority) == 'medium')
|
||||
<span class="priority-badge priority-medium"><span class="icon">⚡</span>Medium</span>
|
||||
<span class="priority-badge priority-medium">Medium</span>
|
||||
@elseif(strtolower($req->priority) == 'low')
|
||||
<span class="priority-badge priority-low"><span class="icon">🟢</span>Low</span>
|
||||
<span class="priority-badge priority-low">Low</span>
|
||||
@else
|
||||
{{ $req->priority }}
|
||||
@endif
|
||||
@@ -207,11 +273,20 @@
|
||||
<td>{{ $req->date }}</td>
|
||||
<td>
|
||||
@if($req->status == 'approved')
|
||||
<span class="badge bg-success">Approved</span>
|
||||
<span class="badge badge-approved">
|
||||
<i class="bi bi-check-circle-fill status-icon"></i>
|
||||
Approved
|
||||
</span>
|
||||
@elseif($req->status == 'rejected')
|
||||
<span class="badge bg-danger">Rejected</span>
|
||||
<span class="badge badge-rejected">
|
||||
<i class="bi bi-x-circle-fill status-icon"></i>
|
||||
Rejected
|
||||
</span>
|
||||
@else
|
||||
<span class="badge bg-warning text-dark">Pending</span>
|
||||
<span class="badge badge-pending">
|
||||
<i class="bi bi-clock-fill status-icon"></i>
|
||||
Pending
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>N/A</td>
|
||||
@@ -226,4 +301,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@endsection
|
||||
Reference in New Issue
Block a user