Shipment Frontend
This commit is contained in:
Utkarsh Khedkar
@@ -4,6 +4,11 @@
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
/*Remove horizontal scroll bar*/
|
||||
html, body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
/* Your existing CSS remains exactly the same */
|
||||
body, .container-fluid { background: #f4f7fc; }
|
||||
.dash-top-titlebox {
|
||||
@@ -69,10 +74,11 @@ body, .container-fluid { background: #f4f7fc; }
|
||||
transform: scale(1.09) rotate(7deg);
|
||||
box-shadow:0 0 13px #2396f33b;
|
||||
}
|
||||
/* Table header box-round style */
|
||||
|
||||
/* UPDATED: Table header with curves on both sides */
|
||||
.table thead tr {
|
||||
background: #feebbe !important;
|
||||
border-radius: 17px 17px 0 0;
|
||||
border-radius: 12px 12px 0 0;
|
||||
box-shadow: 0 2px 19px #f8cf667e;
|
||||
}
|
||||
.table thead th {
|
||||
@@ -81,8 +87,8 @@ body, .container-fluid { background: #f4f7fc; }
|
||||
font-weight: 700; color: #343535; letter-spacing: 0.02em; font-size:15px;
|
||||
padding-top: 12px; padding-bottom: 10px;
|
||||
}
|
||||
.table thead th:first-child { border-radius: 17px 0 0 0;}
|
||||
.table thead th:last-child { border-radius: 0 17px 0 0;}
|
||||
.table thead th:first-child { border-radius: 9px 0 0 0;}
|
||||
.table thead th:last-child { border-radius: 0 9px 0 0;}
|
||||
/* ------- */
|
||||
|
||||
.order-mgmt-box {
|
||||
@@ -91,7 +97,7 @@ body, .container-fluid { background: #f4f7fc; }
|
||||
}
|
||||
.order-mgmt-bar {
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
border-radius:17px 17px 0 0; background: #fffbe9;
|
||||
border-radius:17px 17px 0 0; background: #fceeb8ff;
|
||||
min-height: 54px; padding: 15px 26px 10px 22px; border-bottom: 1.4px solid #e8e2cf;
|
||||
box-shadow:0 1px 13px #ffe2a888;
|
||||
}
|
||||
@@ -111,10 +117,58 @@ body, .container-fluid { background: #f4f7fc; }
|
||||
background: linear-gradient(90deg,#3264f8,#3acfff 140%);
|
||||
box-shadow:0 4px 25px #5ab8f880;
|
||||
}
|
||||
.card-body, .order-mgmt-main { background: #fff; border-radius: 0 0 17px 17px; padding:25px; }
|
||||
.card { border-radius:17px; box-shadow:0 7px 29px #e7eefd8c; border:none; margin-bottom:23px!important;}
|
||||
.table { background:#fff; border-radius:9px; box-shadow:0 2px 12px #e2ebf941;}
|
||||
.table-striped tbody tr:nth-of-type(odd) { background:#f9fafc; }
|
||||
.card-body, .order-mgmt-main {
|
||||
background: #fff;
|
||||
border-radius: 0 0 17px 17px;
|
||||
padding:25px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.card {
|
||||
border-radius:17px;
|
||||
box-shadow:0 7px 29px #e7eefd8c;
|
||||
border:none;
|
||||
margin-bottom:23px!important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* FURTHER REDUCED: Table row spacing */
|
||||
.table {
|
||||
background:#fff;
|
||||
border-radius:9px;
|
||||
box-shadow:0 2px 12px #e2ebf941;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 2px; /* FURTHER REDUCED: from 4px to 2px */
|
||||
}
|
||||
.table-striped tbody tr {
|
||||
background: #fff;
|
||||
border-radius: 6px; /* FURTHER REDUCED: from 8px to 6px */
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04); /* FURTHER REDUCED shadow */
|
||||
margin-bottom: 2px; /* FURTHER REDUCED: from 4px to 2px */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.table-striped tbody tr:hover {
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background:#f9fafc;
|
||||
}
|
||||
.table-striped tbody tr:nth-of-type(even) {
|
||||
background:#ffffff;
|
||||
}
|
||||
.table td {
|
||||
padding: 12px 6px;
|
||||
border: none;
|
||||
position: relative;
|
||||
}
|
||||
.table td:first-child {
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
.table td:last-child {
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.table-responsive { border-radius:10px; }
|
||||
.badge { font-size:13px; font-weight:600; padding:7px 17px; border-radius:12px;}
|
||||
.bg-info { background-color:#22cbfa!important; color:#fff!important;}
|
||||
@@ -361,6 +415,260 @@ body, .container-fluid { background: #f4f7fc; }
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
/* ADDED: Spacing between content sections */
|
||||
.order-mgmt-content-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* MODERN ORDER DETAILS MODAL STYLES */
|
||||
.modal.fade .modal-dialog {
|
||||
transition: transform 0.3s ease-out;
|
||||
transform: translate(0, -50px);
|
||||
}
|
||||
|
||||
.modal.show .modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-bottom: none;
|
||||
padding: 11px 16px;
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-header .btn-close {
|
||||
filter: invert(1);
|
||||
opacity: 0.8;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-header .btn-close:hover {
|
||||
opacity: 1;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 30px;
|
||||
background: #f8fafc;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Modern order details content */
|
||||
.order-details-container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.order-details-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #f1f3f4;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
padding: 8px 20px;
|
||||
border-radius: 25px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
#orderDetailsBody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#orderDetailsBody > * {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.status-pending { background: #fff3cd; color: #856404; }
|
||||
.status-completed { background: #d1edff; color: #0c5460; }
|
||||
.status-processing { background: #d4edda; color: #155724; }
|
||||
|
||||
.order-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #667eea;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.info-card h6 {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Modern table for order items */
|
||||
.modern-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.modern-table thead {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.modern-table th {
|
||||
padding: 16px 12px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modern-table tbody tr {
|
||||
transition: all 0.3s ease;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
}
|
||||
|
||||
.modern-table tbody tr:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.modern-table td {
|
||||
padding: 14px 12px;
|
||||
border: none;
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modern-table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Summary section */
|
||||
.order-summary {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
padding: 10px;
|
||||
border-radius: 16px;
|
||||
margin-top: 15px;
|
||||
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.summary-item .label {
|
||||
font-size: 0.9rem;
|
||||
color: #6c757d;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.summary-item .value {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.modal-header {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.order-details-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.order-info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modern-table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid py-3">
|
||||
@@ -729,7 +1037,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ORDER DETAILS MODAL -->
|
||||
<!-- MODERN ORDER DETAILS MODAL -->
|
||||
<div class="modal fade" id="orderDetailsModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
|
||||
Reference in New Issue
Block a user