From f349c491284c0cb007a97c9a11220cc00adbb64f Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Sat, 15 Nov 2025 17:12:12 +0100 Subject: Fix old tables, improve new styles --- src/frontend/app/components/StopMapSheet.css | 2 - .../Stops/ConsolidatedCirculationList.css | 14 +-- .../Stops/ConsolidatedCirculationList.tsx | 39 +------- src/frontend/app/routes/estimates-$id.css | 92 +++++------------ src/frontend/app/routes/stops-$id.css | 24 +++-- src/frontend/app/routes/stops-$id.tsx | 111 +++++++-------------- 6 files changed, 83 insertions(+), 199 deletions(-) (limited to 'src') diff --git a/src/frontend/app/components/StopMapSheet.css b/src/frontend/app/components/StopMapSheet.css index edf1f52..7a3b88c 100644 --- a/src/frontend/app/components/StopMapSheet.css +++ b/src/frontend/app/components/StopMapSheet.css @@ -2,11 +2,9 @@ .stop-map-container { width: 100%; height: 300px; - border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); margin-block-start: 0; - margin-block-end: 1rem; flex-shrink: 0; } diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css index 3ce8a02..ca136d8 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css @@ -1,8 +1,3 @@ -/* Consolidated Circulation List Styles */ -.consolidated-circulation-container { - width: 100%; -} - .consolidated-circulation-caption { font-size: 0.9rem; color: var(--subtitle-color); @@ -18,14 +13,9 @@ font-size: 0.95rem; } -.consolidated-circulation-list { - display: flex; - flex-direction: column; - gap: 0.75rem; - padding-block: 0 1rem; -} - .consolidated-circulation-card { + flex: 0 0 auto; + display: flex; flex-direction: column; background-color: var(--message-background-color); diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx index aae9b05..4ee296d 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx @@ -138,7 +138,7 @@ export const ConsolidatedCirculationList: React.FC = ({ ); return ( -
+ <>
{t("estimates.caption", "Estimaciones de llegadas a las {{time}}", { time: dataDate?.toLocaleTimeString(), @@ -150,7 +150,7 @@ export const ConsolidatedCirculationList: React.FC = ({ {t("estimates.none", "No hay estimaciones disponibles")}
) : ( -
+ <> {sortedData.map((estimate, idx) => { const displayMinutes = estimate.realTime?.minutes ?? estimate.schedule?.minutes ?? 0; @@ -194,44 +194,15 @@ export const ConsolidatedCirculationList: React.FC = ({ estimate.realTime && estimate.realTime.distance >= 0 && <> · } - {delayText} - + {delayText}
- - {/*
- - {delayText && ( - <> - {t("estimates.bus_is", "Bus is")} {delayText}.{" "} - - )} - - - {estimate.schedule ? ( - <> - {t("estimates.service", "Service")}{" "} - {parseServiceId(estimate.schedule.serviceId)} - {", "} - {t("estimates.trip", "trip")}{" "} - {getTripIdDisplay(estimate.schedule.tripId)} - - ) : ( - <> - {t( - "estimates.unknown_service", - "Unknown service. It may be a reinforcement or the service has a different name than planned.", - )} - - )} - -
*/} ); })} - + )} - + ); }; diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css index be0775a..0658156 100644 --- a/src/frontend/app/routes/estimates-$id.css +++ b/src/frontend/app/routes/estimates-$id.css @@ -1,20 +1,6 @@ -.estimates-content-wrapper { - display: flex; - flex-direction: column; - gap: 1rem; - min-height: 0; - flex: 1; -} - -.estimates-list-container { - overflow-y: auto; - flex: 1; - min-height: 0; - border-radius: 0.5rem; -} - .table-responsive { overflow-x: auto; + margin-bottom: 1.5rem; } .table { @@ -43,20 +29,12 @@ } /* Estimates page specific styles */ -.estimates-page { - display: flex; - flex-direction: column; - height: 100vh; - overflow: hidden; -} - .estimates-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; - flex-shrink: 0; } .manual-refresh-button { @@ -85,32 +63,6 @@ transform: none; } -.toggle-map-button { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.5rem 0.75rem; - background: var(--primary-color); - border: none; - border-radius: 0.375rem; - font-size: 0.875rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - min-width: max-content; -} - -.toggle-map-button:hover:not(:disabled) { - background: var(--primary-color-hover); - transform: translateY(-1px); -} - -.toggle-map-button:disabled { - opacity: 0.6; - cursor: not-allowed; - transform: none; -} - .refresh-icon { width: 1.5rem; height: 1.5rem; @@ -263,7 +215,6 @@ gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; - flex-shrink: 0; } .estimates-lines-container.scrollable { @@ -287,28 +238,33 @@ flex-shrink: 0; } -.refresh-status { - display: flex; - align-items: center; - gap: 0.5rem; - justify-content: center; - padding: 0.75rem 1rem; - margin-bottom: 1rem; - background-color: rgba(0, 123, 255, 0.1); - border: 1px solid rgba(0, 123, 255, 0.2); +.experimental-notice { + background-color: #fff3cd; + border: 1px solid #ffc107; border-radius: 8px; - color: var(--primary-color); + padding: 1rem; + margin-bottom: 1rem; + color: #856404; +} + +.experimental-notice strong { + display: block; + margin-bottom: 0.5rem; + color: #856404; +} + +.experimental-notice p { + margin: 0; font-size: 0.9rem; - font-weight: 500; - flex-shrink: 0; + line-height: 1.4; } -.refresh-status .refresh-icon { - width: 1rem; - height: 1rem; +[data-theme="dark"] .experimental-notice { + background-color: #3d3100; + border-color: #ffc107; + color: #ffd966; } -[data-theme="dark"] .refresh-status { - background-color: rgba(0, 123, 255, 0.15); - border-color: rgba(0, 123, 255, 0.3); +[data-theme="dark"] .experimental-notice strong { + color: #ffd966; } diff --git a/src/frontend/app/routes/stops-$id.css b/src/frontend/app/routes/stops-$id.css index 50d30f3..3b377a7 100644 --- a/src/frontend/app/routes/stops-$id.css +++ b/src/frontend/app/routes/stops-$id.css @@ -1,3 +1,7 @@ +.page-title { + margin-block: 0; +} + .estimates-content-wrapper { display: flex; flex-direction: column; @@ -10,11 +14,11 @@ overflow-y: auto; flex: 1; min-height: 0; - border-radius: 0.5rem; -} -.table-responsive { - overflow-x: auto; + display: flex; + flex-direction: column; + gap: 0.75rem; + padding-block: 0 1rem; } .table { @@ -43,18 +47,22 @@ } /* Estimates page specific styles */ -.estimates-page { +.stops-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; + + padding-block: 1rem; + box-sizing: border-box; + + gap: 1rem; } -.estimates-header { +.stops-header { display: flex; align-items: center; justify-content: space-between; - margin-bottom: 1rem; gap: 1rem; flex-shrink: 0; } @@ -233,7 +241,6 @@ display: flex; gap: 0.5rem; flex-wrap: wrap; - margin-bottom: 1rem; flex-shrink: 0; } @@ -263,7 +270,6 @@ border: 1px solid #ffc107; border-radius: 8px; padding: 1rem; - margin-bottom: 1rem; color: #856404; flex-shrink: 0; } diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx index 30a8d1b..812821d 100644 --- a/src/frontend/app/routes/stops-$id.tsx +++ b/src/frontend/app/routes/stops-$id.tsx @@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next"; import { useParams } from "react-router"; import { ErrorDisplay } from "~/components/ErrorDisplay"; import LineIcon from "~/components/LineIcon"; -import { PullToRefresh } from "~/components/PullToRefresh"; import { StopAlert } from "~/components/StopAlert"; import { StopMap } from "~/components/StopMapSheet"; import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList"; @@ -188,34 +187,10 @@ export default function Estimates() { } }; - // Show loading skeleton while initial data is loading - if (dataLoading && !data) { - return ( - -
-
-

- - - {t("common.loading")}... -

-
- -
- -
-
- - ); - } - return ( <> -
-
+
+

)} - {(isManualRefreshing || dataLoading) && ( -
- - {t("estimates.refreshing", "Actualizando datos...")} -
- )} - {stopData && } -
-
-
- - {t("estimates.experimental_feature", "Experimental feature")} - -
- -
- {dataLoading ? ( - - ) : dataError ? ( - - ) : data ? ( - - ) : null} -
-
+
+ + {t("estimates.experimental_feature", "Experimental feature")} + +
- {/* Map showing stop and bus positions */} - {stopData && ( - ({ - line: c.line, - route: c.route, - currentPosition: c.currentPosition, - }))} +
+ {dataLoading ? ( + + ) : dataError ? ( + + ) : data ? ( + - )} + ) : null}
+ + {stopData && ( + ({ + line: c.line, + route: c.route, + currentPosition: c.currentPosition, + }))} + /> + )}
); -- cgit v1.3