From 3227c7bc6bd233c92b1cf54bec689f0582dca547 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Mon, 1 Dec 2025 22:25:56 +0100 Subject: refactor: replace StopSheet with StopSummarySheet and update related components - Deleted StopSheet and StopSheetSkeleton components. - Introduced StopSummarySheet and StopSummarySheetSkeleton components. - Updated ConsolidatedCirculationCard to support a reduced view. - Modified ConsolidatedCirculationList to accept a reduced prop. - Adjusted map route to use StopSummarySheet. - Cleaned up CSS styles related to the stop sheet components. - Enhanced error handling and loading states in the new summary sheet. - Updated stop report logic to filter out empty next streets. --- src/frontend/app/components/StopSummarySheet.css | 309 +++++++++++++++++++++++ 1 file changed, 309 insertions(+) create mode 100644 src/frontend/app/components/StopSummarySheet.css (limited to 'src/frontend/app/components/StopSummarySheet.css') diff --git a/src/frontend/app/components/StopSummarySheet.css b/src/frontend/app/components/StopSummarySheet.css new file mode 100644 index 0000000..5869d41 --- /dev/null +++ b/src/frontend/app/components/StopSummarySheet.css @@ -0,0 +1,309 @@ +/* Stop Sheet Styles */ +.react-modal-sheet-container { + background-color: var(--background-color) !important; + touch-action: none; +} + +/*.react-modal-sheet-content > * > *:not(.stop-sheet-actions){ + interactivity: inert; +}*/ + +.react-modal-sheet-content-scroller { + overscroll-behavior-y: unset !important; + overflow-y: unset !important; +} + +.stop-sheet-content { + padding: 16px; + display: flex; + flex-direction: column; + /* overflow: hidden; */ + touch-action: pan-y; +} + +.stop-sheet-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 16px; +} + +.stop-sheet-title { + font-size: 1.5rem; + font-weight: 600; + color: var(--text-color); + margin: 0; +} + +.stop-sheet-id { + font-size: 1rem; + color: var(--subtitle-color); +} + +.stop-sheet-lines-container { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +.stop-sheet-lines-container.scrollable { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-auto-flow: column; + /* align-content: flex-start; */ + scrollbar-width: thin; + gap: 0.5rem 1rem; + overflow-x: scroll; +} + +.stop-sheet-lines-container.scrollable::-webkit-scrollbar { + height: 6px; +} + +.stop-sheet-lines-container.scrollable::-webkit-scrollbar-thumb { + background-color: var(--border-color); + border-radius: 3px; +} + +.stop-sheet-line-icon { + flex-shrink: 0; +} + +.stop-sheet-loading { + display: flex; + justify-content: center; + align-items: center; + padding: 32px; + color: var(--subtitle-color); + font-size: 1rem; +} + +.stop-sheet-estimates { + flex: 1; + min-height: 0; + margin-block-start: 1.25rem; +} + +.stop-sheet-subtitle { + font-size: 1.1rem; + font-weight: 500; + color: var(--text-color); + margin: 0 0 12px 0; +} + +.stop-sheet-no-estimates { + text-align: center; + padding: 32px 16px; + color: var(--subtitle-color); + font-size: 0.95rem; +} + +.stop-sheet-estimates-list { + display: flex; + flex-direction: column; + gap: 12px; +} + +.stop-sheet-estimate-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px; + background-color: var(--message-background-color); + border-radius: 8px; + border: 1px solid var(--border-color); +} + +.stop-sheet-estimate-line { + flex-shrink: 0; +} + +.stop-sheet-estimate-details { + flex: 1; + min-width: 0; +} + +.stop-sheet-estimate-route { + font-weight: 500; + color: var(--text-color); + font-size: 0.95rem; + margin-bottom: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.stop-sheet-estimate-arrival { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; + flex-shrink: 0; +} + +.stop-sheet-estimate-time { + display: flex; + align-items: center; + gap: 6px; + font-size: 1.05rem; + font-weight: 600; + color: var(--text-color); +} + +.stop-sheet-estimate-time.is-minutes { + color: #22c55e; +} + +.stop-sheet-estimate-time svg { + width: 18px; + height: 18px; + color: var(--subtitle-color); + flex-shrink: 0; +} + +.stop-sheet-estimate-time.is-minutes svg { + color: #22c55e; +} + +.stop-sheet-estimate-distance { + font-size: 0.75rem; + color: var(--subtitle-color); + text-align: right; +} + +.stop-sheet-footer { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin: 0; + padding: 0.75rem 16px 1rem 16px; + border-top: 1px solid var(--border-color); + background-color: var(--background-color); + z-index: 10; +} + +.stop-sheet-timestamp { + font-size: 0.8rem; + color: var(--subtitle-color); + text-align: center; +} + +.stop-sheet-actions { + display: flex; + gap: 0.75rem; +} + +.stop-sheet-reload { + display: inline-flex; + align-items: center; + gap: 0.4rem; + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-color); + padding: 0.5rem 0.75rem; + border-radius: 6px; + font-size: 0.85rem; + cursor: pointer; + transition: all 0.2s ease; + flex: 1; + justify-content: center; +} + +.stop-sheet-reload:hover:not(:disabled) { + background: var(--message-background-color); + border-color: var(--button-background-color); +} + +.stop-sheet-reload:disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.reload-icon { + width: 14px; + height: 14px; + transition: transform 0.5s ease; +} + +.reload-icon.spinning { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.stop-sheet-view-all { + display: block; + padding: 0.5rem 0.75rem; + background-color: var(--button-background-color); + color: white; + text-decoration: none; + text-align: center; + border-radius: 6px; + font-weight: 500; + font-size: 0.85rem; + transition: background-color 0.2s ease; + flex: 2; +} + +.stop-sheet-view-all:hover { + background-color: var(--button-hover-background-color); + text-decoration: none; +} + +/* Error display adjustments for sheet */ +.stop-sheet-content .error-display { + margin: 1rem 0; +} + +.stop-sheet-content .error-display.compact { + min-height: 100px; + padding: 1rem; +} + +.stop-sheet-content .error-display.compact .error-icon { + width: 28px; + height: 28px; +} + +.stop-sheet-content .error-display.compact .error-title { + font-size: 1.1rem; +} + +.stop-sheet-content .error-display.compact .error-message { + font-size: 0.85rem; +} + +[data-rsbs-overlay] { + background-color: rgba(0, 0, 0, 0.3); +} + +[data-rsbs-header] { + background-color: var(--background-color); + border-bottom: 1px solid var(--border-color); + touch-action: none; +} + +[data-rsbs-header]:before { + background-color: var(--subtitle-color); +} + +[data-rsbs-root] [data-rsbs-overlay] { + border-top-left-radius: 16px; + border-top-right-radius: 16px; +} + +[data-rsbs-root] [data-rsbs-content] { + background-color: var(--background-color); + border-top-left-radius: 16px; + border-top-right-radius: 16px; + max-height: 95vh; + overflow: hidden; + touch-action: none; +} -- cgit v1.3