mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 08:20:58 +00:00
17dc505d50
- Removed the BookingClearanceWorkflowBanner from ClearanceCard as the clearance progress is now integrated into the unified journey wizard. - Eliminated the MilestoneTimeline component from DocumentsTab, consolidating customs progress into the JourneyWizard. - Updated PageHeader to include a ContractReferenceLink for better navigation to contract details. - Simplified ShipmentTrackingCard to focus on duty/tax payment slip upload, removing unnecessary milestone display. - Integrated JourneyWizard component to visualize the booking journey, replacing the previous progress tracker. - Enhanced ContractDetailPage to better categorize documents and improve user experience with clearer sections for profile, business license, clearance, and other documents. - Introduced CSS for contracts table to manage column sizing and sticky headers effectively. - Added ContractReferenceLink component for backoffice to link to contract details, ensuring consistent navigation across applications.
79 lines
2.4 KiB
CSS
79 lines
2.4 KiB
CSS
/*
|
|
* Scoped to .edr-contracts-table — every rule below is prefixed, so no other
|
|
* Mantine Table in the portal is affected.
|
|
*
|
|
* Column sizing: table-layout stays `auto`, so a column with short content
|
|
* (a currency code, a badge) keeps its natural narrow width. The cap only
|
|
* kicks in for columns whose content would otherwise push past it — those
|
|
* wrap onto extra lines instead of widening the table.
|
|
*/
|
|
.edr-contracts-table {
|
|
/* Single knob for the cap — raise this if the columns read too cramped. */
|
|
--edr-col-max: 60px;
|
|
}
|
|
|
|
.edr-contracts-table th,
|
|
.edr-contracts-table td {
|
|
max-width: var(--edr-col-max);
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/*
|
|
* The two fixed-purpose columns are exempt from the cap: the expander is a
|
|
* 28px icon button that must not wrap, and the action column holds two
|
|
* buttons side by side.
|
|
*/
|
|
.edr-contracts-table th:first-child,
|
|
.edr-contracts-table td:first-child:not([colspan]),
|
|
.edr-contracts-table th:last-child,
|
|
.edr-contracts-table td:last-child:not([colspan]) {
|
|
max-width: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Sticky header row (moved off the Mantine `styles` prop — see ContractsList). */
|
|
.edr-contracts-table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
/*
|
|
* Sticky action column. `:not([colspan])` keeps the full-width rows — loading,
|
|
* error, empty state, and the expanded ContractStepBanner row — out of it;
|
|
* those span every column and have no separate action cell to pin.
|
|
*/
|
|
.edr-contracts-table th:last-child,
|
|
.edr-contracts-table td:last-child:not([colspan]) {
|
|
position: sticky;
|
|
right: 0;
|
|
box-shadow: -8px 0 8px -8px rgba(16, 32, 47, 0.18);
|
|
}
|
|
|
|
/*
|
|
* Sticky cells sit above the scrolling ones, so they need their own opaque
|
|
* background or the columns underneath show through. Each state below mirrors
|
|
* the background the row already has.
|
|
*/
|
|
.edr-contracts-table td:last-child:not([colspan]) {
|
|
background: #ffffff;
|
|
z-index: 2;
|
|
}
|
|
|
|
.edr-contracts-table tbody tr:hover td:last-child:not([colspan]) {
|
|
background: #f4fbf8;
|
|
}
|
|
|
|
/* Expanded row: the parent <tr> carries an inline #F4FBF8 background. */
|
|
.edr-contracts-table tbody tr[data-expanded="true"] td:last-child:not([colspan]) {
|
|
background: #f4fbf8;
|
|
}
|
|
|
|
/* Header cell is sticky on both axes — it must outrank the body's sticky column. */
|
|
.edr-contracts-table th:last-child {
|
|
background: #f8fafc;
|
|
z-index: 3;
|
|
}
|