fix: lỗi hiển thị trong itineraryTimeline
This commit is contained in:
@@ -1,10 +1,299 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--main-header-height: 56px;
|
||||
--sub-nav-height: 48px;
|
||||
--combined-top-height: 104px;
|
||||
}
|
||||
|
||||
html, body, #root, .app-container {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 100vw !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
/* Fix viewport overflow on all container levels */
|
||||
body, html {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.itinerary-timeline-page {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.main-top-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: var(--main-header-height);
|
||||
z-index: 50;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.sub-nav-menu {
|
||||
position: sticky;
|
||||
top: var(--main-header-height);
|
||||
height: var(--sub-nav-height);
|
||||
z-index: 40;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Master viewport wrapper - contains entire itinerary */
|
||||
.itinerary-viewport {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
height: 100dvh !important;
|
||||
width: 100vw !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.itinerary-viewport-wrapper {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
height: 100dvh !important;
|
||||
width: 100vw !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Global sticky header zone - locks main header + sub-nav at top */
|
||||
.global-sticky-header-zone {
|
||||
position: sticky !important;
|
||||
top: 0;
|
||||
z-index: 100 !important;
|
||||
background-color: #ffffff;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Fixed header block (handled at parent TourDetailPage level) */
|
||||
.fixed-top-header-block {
|
||||
flex-shrink: 0 !important;
|
||||
width: 100% !important;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
/* Timeline scroll container - main scrollable region */
|
||||
.directory-scroll-viewport {
|
||||
flex: 1 !important;
|
||||
overflow-y: auto !important;
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.timeline-scroll-container {
|
||||
flex: 1 !important;
|
||||
overflow-y: auto !important;
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Scrollable timeline area - removes all padding gaps */
|
||||
.timeline-scroll-area {
|
||||
flex: 1 1 0% !important;
|
||||
overflow-y: auto !important;
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin-top: 0px !important;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.timeline-scroll-viewport {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Main timeline container with dynamic height support */
|
||||
.itinerary-timeline-container {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 100vw !important;
|
||||
height: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Individual folder node wrapper - base stage container */
|
||||
.folder-node-wrapper {
|
||||
width: 100% !important;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 1px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Individual stage card block - backwards compatibility */
|
||||
.stage-card-block {
|
||||
width: 100% !important;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 1px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Stage section - semantic wrapper */
|
||||
.stage-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: block !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Folder header row - sticky positioning for pinned effect */
|
||||
.folder-header-row {
|
||||
position: sticky !important;
|
||||
top: 0px !important;
|
||||
z-index: 30 !important;
|
||||
width: 100% !important;
|
||||
padding: 12px 16px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff !important;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.folder-header-row:hover {
|
||||
background-color: #f9fafb !important;
|
||||
}
|
||||
|
||||
/* Stage header row - sticky positioning for pinned effect */
|
||||
.stage-header-row {
|
||||
position: sticky !important;
|
||||
top: 0px !important;
|
||||
z-index: 40 !important;
|
||||
width: 100% !important;
|
||||
padding: 12px 16px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff !important;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.stage-header-row:hover {
|
||||
background-color: #f9fafb !important;
|
||||
}
|
||||
|
||||
/* Alternate sticky header styling (kept for backwards compatibility) */
|
||||
.stage-sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Folder child content box - Grid accordion for exclusive expansion */
|
||||
.folder-child-content-box {
|
||||
display: grid !important;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Expanded folder state - children visible */
|
||||
.folder-child-content-box.expanded {
|
||||
grid-template-rows: 1fr !important;
|
||||
}
|
||||
|
||||
/* Wrapper for child nodes list - proper z-index layering */
|
||||
.child-nodes-list-wrapper {
|
||||
position: relative;
|
||||
z-index: 20 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Child nodes list - content container within expanded folder */
|
||||
.child-nodes-list {
|
||||
overflow: hidden;
|
||||
min-height: 0px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* CSS Grid Accordion Engine - Smooth expand/collapse without layout shattering */
|
||||
.stage-accordion-content {
|
||||
display: grid !important;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.25s ease-out !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Expanded state - opens to full content height */
|
||||
.stage-accordion-content.expanded {
|
||||
grid-template-rows: 1fr !important;
|
||||
}
|
||||
|
||||
/* Scrollable content body - lower z-index so it scrolls behind header */
|
||||
.stage-scrollable-content-body {
|
||||
position: relative;
|
||||
z-index: 20 !important;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Inner content wrapper - structural compliance */
|
||||
.stage-points-list {
|
||||
overflow: hidden;
|
||||
min-height: 0px;
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
/* Legacy accordion container classes (for backwards compatibility) */
|
||||
.stage-accordion-transition-container {
|
||||
display: grid !important;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.stage-accordion-transition-container.expanded {
|
||||
grid-template-rows: 1fr !important;
|
||||
}
|
||||
|
||||
.stage-accordion-inner-content {
|
||||
overflow: hidden !important;
|
||||
min-height: 0px !important;
|
||||
width: 100% !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stage-content-body {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user