aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/frontend/app/components/StopMapSheet.css2
-rw-r--r--src/frontend/app/components/Stops/ConsolidatedCirculationList.css14
-rw-r--r--src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx39
-rw-r--r--src/frontend/app/routes/estimates-$id.css92
-rw-r--r--src/frontend/app/routes/stops-$id.css24
-rw-r--r--src/frontend/app/routes/stops-$id.tsx111
6 files changed, 83 insertions, 199 deletions
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<RegularTableProps> = ({
);
return (
- <div className="consolidated-circulation-container">
+ <>
<div className="consolidated-circulation-caption">
{t("estimates.caption", "Estimaciones de llegadas a las {{time}}", {
time: dataDate?.toLocaleTimeString(),
@@ -150,7 +150,7 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
{t("estimates.none", "No hay estimaciones disponibles")}
</div>
) : (
- <div className="consolidated-circulation-list">
+ <>
{sortedData.map((estimate, idx) => {
const displayMinutes =
estimate.realTime?.minutes ?? estimate.schedule?.minutes ?? 0;
@@ -194,44 +194,15 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
estimate.realTime &&
estimate.realTime.distance >= 0 && <> &middot; </>}
- {delayText}
-
+ {delayText}
</div>
</div>
</div>
-
- {/*<div className="card-footer">
- <span className="status-text">
- {delayText && (
- <>
- {t("estimates.bus_is", "Bus is")} {delayText}.{" "}
- </>
- )}
- </span>
- <span className="status-text">
- {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.",
- )}
- </>
- )}
- </span>
- </div>*/}
</div>
);
})}
- </div>
+ </>
)}
- </div>
+ </>
);
};
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 (
- <PullToRefresh
- onRefresh={handleManualRefresh}
- isRefreshing={isManualRefreshing}
- >
- <div className="page-container estimates-page">
- <div className="estimates-header">
- <h1 className="page-title">
- <Star className="star-icon" />
- <Edit2 className="edit-icon" />
- {t("common.loading")}...
- </h1>
- </div>
-
- <div className="table-responsive">
- <ConsolidatedCirculationListSkeleton />
- </div>
- </div>
- </PullToRefresh>
- );
- }
-
return (
<>
- <div className="page-container estimates-page">
- <div className="estimates-header">
+ <div className="page-container stops-page">
+ <div className="stops-header">
<h1 className="page-title">
<Star
className={`star-icon ${favourited ? "active" : ""}`}
@@ -248,58 +223,46 @@ export default function Estimates() {
</div>
)}
- {(isManualRefreshing || dataLoading) && (
- <div className="refresh-status">
- <RefreshCw className="refresh-icon spinning" />
- <span>{t("estimates.refreshing", "Actualizando datos...")}</span>
- </div>
- )}
-
{stopData && <StopAlert stop={stopData} />}
- <div className="estimates-content-wrapper">
- <div className="estimates-list-container">
- <div className="experimental-notice">
- <strong>
- {t("estimates.experimental_feature", "Experimental feature")}
- </strong>
- </div>
-
- <div className="table-responsive">
- {dataLoading ? (
- <ConsolidatedCirculationListSkeleton />
- ) : dataError ? (
- <ErrorDisplay
- error={dataError}
- onRetry={loadData}
- title={t(
- "errors.estimates_title",
- "Error al cargar estimaciones",
- )}
- />
- ) : data ? (
- <ConsolidatedCirculationList
- data={data}
- dataDate={dataDate}
- regionConfig={regionConfig}
- />
- ) : null}
- </div>
- </div>
+ <div className="experimental-notice">
+ <strong>
+ {t("estimates.experimental_feature", "Experimental feature")}
+ </strong>
+ </div>
- {/* Map showing stop and bus positions */}
- {stopData && (
- <StopMap
- stop={stopData}
- region={region}
- circulations={(data ?? []).map((c) => ({
- line: c.line,
- route: c.route,
- currentPosition: c.currentPosition,
- }))}
+ <div className="estimates-list-container">
+ {dataLoading ? (
+ <ConsolidatedCirculationListSkeleton />
+ ) : dataError ? (
+ <ErrorDisplay
+ error={dataError}
+ onRetry={loadData}
+ title={t(
+ "errors.estimates_title",
+ "Error al cargar estimaciones",
+ )}
+ />
+ ) : data ? (
+ <ConsolidatedCirculationList
+ data={data}
+ dataDate={dataDate}
+ regionConfig={regionConfig}
/>
- )}
+ ) : null}
</div>
+
+ {stopData && (
+ <StopMap
+ stop={stopData}
+ region={region}
+ circulations={(data ?? []).map((c) => ({
+ line: c.line,
+ route: c.route,
+ currentPosition: c.currentPosition,
+ }))}
+ />
+ )}
</div>
</>
);
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 15:39:27 +0000