aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/app/components')
-rw-r--r--src/frontend/app/components/NavBar.tsx8
-rw-r--r--src/frontend/app/components/StopAlert.css1
-rw-r--r--src/frontend/app/components/StopAlert.tsx8
-rw-r--r--src/frontend/app/components/StopItemSkeleton.tsx51
-rw-r--r--src/frontend/app/components/StopSheet.css4
-rw-r--r--src/frontend/app/components/StopSheet.tsx13
-rw-r--r--src/frontend/app/components/StopSheetSkeleton.tsx18
-rw-r--r--src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx27
-rw-r--r--src/frontend/app/components/TimetableSkeleton.tsx5
9 files changed, 79 insertions, 56 deletions
diff --git a/src/frontend/app/components/NavBar.tsx b/src/frontend/app/components/NavBar.tsx
index bb73d58..f9f1a03 100644
--- a/src/frontend/app/components/NavBar.tsx
+++ b/src/frontend/app/components/NavBar.tsx
@@ -28,7 +28,7 @@ export default function NavBar() {
name: t("navbar.stops", "Paradas"),
icon: MapPin,
path: "/",
- exact: true
+ exact: true,
},
{
name: t("navbar.map", "Mapa"),
@@ -66,9 +66,9 @@ export default function NavBar() {
<nav className="navigation-bar">
{navItems.map((item) => {
const Icon = item.icon;
- const isActive = item.exact ?
- location.pathname === item.path :
- location.pathname.startsWith(item.path);
+ const isActive = item.exact
+ ? location.pathname === item.path
+ : location.pathname.startsWith(item.path);
return (
<Link
diff --git a/src/frontend/app/components/StopAlert.css b/src/frontend/app/components/StopAlert.css
index c1d9a0a..8bcc4b0 100644
--- a/src/frontend/app/components/StopAlert.css
+++ b/src/frontend/app/components/StopAlert.css
@@ -83,4 +83,3 @@
.stop-alert-compact .stop-alert-message {
font-size: 0.85rem;
}
-
diff --git a/src/frontend/app/components/StopAlert.tsx b/src/frontend/app/components/StopAlert.tsx
index 1cbbd75..6b8da12 100644
--- a/src/frontend/app/components/StopAlert.tsx
+++ b/src/frontend/app/components/StopAlert.tsx
@@ -31,11 +31,15 @@ export const StopAlert: React.FC<StopAlertProps> = ({
}, [stop.alert]);
return (
- <div className={`stop-alert ${alertType} ${compact ? 'stop-alert-compact' : ''}`}>
+ <div
+ className={`stop-alert ${alertType} ${compact ? "stop-alert-compact" : ""}`}
+ >
{alertIcon}
<div className="stop-alert-content">
{stop.title && <div className="stop-alert-title">{stop.title}</div>}
- {stop.message && <div className="stop-alert-message">{stop.message}</div>}
+ {stop.message && (
+ <div className="stop-alert-message">{stop.message}</div>
+ )}
</div>
</div>
);
diff --git a/src/frontend/app/components/StopItemSkeleton.tsx b/src/frontend/app/components/StopItemSkeleton.tsx
index 2791bdc..68172fd 100644
--- a/src/frontend/app/components/StopItemSkeleton.tsx
+++ b/src/frontend/app/components/StopItemSkeleton.tsx
@@ -11,32 +11,31 @@ const StopItemSkeleton: React.FC<StopItemSkeletonProps> = ({
showId = false,
stopId,
}) => {
- return (
- <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
- <li className="list-item">
- <div className="list-item-link">
- <span>
- {showId && stopId && (
- <>({stopId}) </>
- )}
- </span>
- <Skeleton
- width={showId ? "60%" : "80%"}
- style={{ display: "inline-block" }}
- />
- <div className="line-icons" style={{ marginTop: "4px" }}>
- <Skeleton
- count={3}
- width="30px"
- height="20px"
- inline={true}
- style={{ marginRight: "0.5rem" }}
- />
- </div>
- </div>
- </li>
- </SkeletonTheme>
- );
+ return (
+ <SkeletonTheme
+ baseColor="var(--skeleton-base)"
+ highlightColor="var(--skeleton-highlight)"
+ >
+ <li className="list-item">
+ <div className="list-item-link">
+ <span>{showId && stopId && <>({stopId}) </>}</span>
+ <Skeleton
+ width={showId ? "60%" : "80%"}
+ style={{ display: "inline-block" }}
+ />
+ <div className="line-icons" style={{ marginTop: "4px" }}>
+ <Skeleton
+ count={3}
+ width="30px"
+ height="20px"
+ inline={true}
+ style={{ marginRight: "0.5rem" }}
+ />
+ </div>
+ </div>
+ </li>
+ </SkeletonTheme>
+ );
};
export default StopItemSkeleton;
diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index 75b12f0..41dfbe0 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -1,6 +1,7 @@
/* Stop Sheet Styles */
.react-modal-sheet-container {
background-color: var(--background-color) !important;
+ touch-action: none;
}
.stop-sheet-content {
@@ -8,6 +9,7 @@
display: flex;
flex-direction: column;
overflow: hidden;
+ touch-action: pan-y;
}
.stop-sheet-header {
@@ -275,6 +277,7 @@
[data-rsbs-header] {
background-color: var(--background-color);
border-bottom: 1px solid var(--border-color);
+ touch-action: none;
}
[data-rsbs-header]:before {
@@ -292,4 +295,5 @@
border-top-right-radius: 16px;
max-height: 95vh;
overflow: hidden;
+ touch-action: none;
}
diff --git a/src/frontend/app/components/StopSheet.tsx b/src/frontend/app/components/StopSheet.tsx
index 2f37519..4bc6f63 100644
--- a/src/frontend/app/components/StopSheet.tsx
+++ b/src/frontend/app/components/StopSheet.tsx
@@ -129,7 +129,7 @@ export const StopSheet: React.FC<StopSheetProps> = ({
data?.sort((a, b) => a.minutes - b.minutes).slice(0, 4) || [];
return (
- <Sheet isOpen={isOpen} onClose={onClose} detent={"content-height" as any} >
+ <Sheet isOpen={isOpen} onClose={onClose} detent={"content-height" as any}>
<Sheet.Container drag="y">
<Sheet.Header />
<Sheet.Content>
@@ -193,11 +193,12 @@ export const StopSheet: React.FC<StopSheetProps> = ({
<Clock />
{formatTime(estimate.minutes)}
</div>
- {REGIONS[region].showMeters && estimate.meters >= 0 && (
- <div className="stop-sheet-estimate-distance">
- {formatDistance(estimate.meters)}
- </div>
- )}
+ {REGIONS[region].showMeters &&
+ estimate.meters >= 0 && (
+ <div className="stop-sheet-estimate-distance">
+ {formatDistance(estimate.meters)}
+ </div>
+ )}
</div>
</div>
))}
diff --git a/src/frontend/app/components/StopSheetSkeleton.tsx b/src/frontend/app/components/StopSheetSkeleton.tsx
index 0ae83b8..3874038 100644
--- a/src/frontend/app/components/StopSheetSkeleton.tsx
+++ b/src/frontend/app/components/StopSheetSkeleton.tsx
@@ -13,7 +13,10 @@ export const StopSheetSkeleton: React.FC<StopSheetSkeletonProps> = ({
const { t } = useTranslation();
return (
- <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
+ <SkeletonTheme
+ baseColor="var(--skeleton-base)"
+ highlightColor="var(--skeleton-highlight)"
+ >
<div className="stop-sheet-estimates">
<h3 className="stop-sheet-subtitle">
{t("estimates.next_arrivals", "Next arrivals")}
@@ -59,11 +62,14 @@ export const StopSheetSkeleton: React.FC<StopSheetSkeletonProps> = ({
<Skeleton width="70px" height="0.85rem" />
</div>
- <div className="stop-sheet-view-all" style={{
- background: "var(--service-background)",
- cursor: "not-allowed",
- pointerEvents: "none"
- }}>
+ <div
+ className="stop-sheet-view-all"
+ style={{
+ background: "var(--service-background)",
+ cursor: "not-allowed",
+ pointerEvents: "none",
+ }}
+ >
<Skeleton width="180px" height="0.85rem" />
</div>
</div>
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
index a1b50f2..1ba460b 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
@@ -4,7 +4,7 @@ import { type ConsolidatedCirculation } from "~routes/stops-$id";
import LineIcon from "~components/LineIcon";
import { type RegionConfig } from "~data/RegionConfig";
-import './ConsolidatedCirculationList.css';
+import "./ConsolidatedCirculationList.css";
interface RegularTableProps {
data: ConsolidatedCirculation[];
@@ -106,9 +106,13 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
if (delay >= -1 && delay <= 2) {
return t("estimates.on_time", "on time");
} else if (delay > 2) {
- return t("estimates.minutes_late", "{{minutes}} minutes late", { minutes: delay });
+ return t("estimates.minutes_late", "{{minutes}} minutes late", {
+ minutes: delay,
+ });
} else {
- return t("estimates.minutes_early", "{{minutes}} minutes early", { minutes: Math.abs(delay) });
+ return t("estimates.minutes_early", "{{minutes}} minutes early", {
+ minutes: Math.abs(delay),
+ });
}
};
@@ -124,9 +128,7 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
if (estimate.realTime && !estimate.schedule) {
return "time-running";
- }
-
- else if (estimate.realTime && !estimate.schedule?.running) {
+ } else if (estimate.realTime && !estimate.schedule?.running) {
return "time-delayed";
}
@@ -134,8 +136,9 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
};
const sortedData = [...data].sort(
- (a, b) => (a.realTime?.minutes ?? a.schedule?.minutes ?? 999) -
- (b.realTime?.minutes ?? b.schedule?.minutes ?? 999)
+ (a, b) =>
+ (a.realTime?.minutes ?? a.schedule?.minutes ?? 999) -
+ (b.realTime?.minutes ?? b.schedule?.minutes ?? 999),
);
return (
@@ -153,7 +156,8 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
) : (
<div className="consolidated-circulation-list">
{sortedData.map((estimate, idx) => {
- const displayMinutes = estimate.realTime?.minutes ?? estimate.schedule?.minutes ?? 0;
+ const displayMinutes =
+ estimate.realTime?.minutes ?? estimate.schedule?.minutes ?? 0;
const timeClass = getTimeClass(estimate);
const delayText = getDelayText(estimate);
@@ -202,7 +206,10 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
</>
) : (
<>
- {t("estimates.unknown_service", "Unknown service. It may be a reinforcement or the service has a different name than planned.")}
+ {t(
+ "estimates.unknown_service",
+ "Unknown service. It may be a reinforcement or the service has a different name than planned.",
+ )}
</>
)}
</span>
diff --git a/src/frontend/app/components/TimetableSkeleton.tsx b/src/frontend/app/components/TimetableSkeleton.tsx
index cd5bc81..2d4fc29 100644
--- a/src/frontend/app/components/TimetableSkeleton.tsx
+++ b/src/frontend/app/components/TimetableSkeleton.tsx
@@ -13,7 +13,10 @@ export const TimetableSkeleton: React.FC<TimetableSkeletonProps> = ({
const { t } = useTranslation();
return (
- <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
+ <SkeletonTheme
+ baseColor="var(--skeleton-base)"
+ highlightColor="var(--skeleton-highlight)"
+ >
<div className="timetable-container">
<div className="timetable-caption">
<Skeleton width="250px" height="1.1rem" />
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 09:22:03 +0000