diff options
Diffstat (limited to 'src/frontend')
| -rw-r--r-- | src/frontend/app/components/StopSheet.css | 11 | ||||
| -rw-r--r-- | src/frontend/app/components/StopSheet.tsx | 91 | ||||
| -rw-r--r-- | src/frontend/eslint.config.js | 4 |
3 files changed, 57 insertions, 49 deletions
diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css index 41dfbe0..31770a1 100644 --- a/src/frontend/app/components/StopSheet.css +++ b/src/frontend/app/components/StopSheet.css @@ -4,6 +4,15 @@ 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; @@ -45,7 +54,6 @@ scrollbar-width: thin; gap: 0.5rem 1rem; overflow-x: scroll; - overflow-y: auto; } .stop-sheet-lines-container.scrollable::-webkit-scrollbar { @@ -72,7 +80,6 @@ .stop-sheet-estimates { flex: 1; - overflow-y: auto; min-height: 0; margin-block-start: 1.25rem; } diff --git a/src/frontend/app/components/StopSheet.tsx b/src/frontend/app/components/StopSheet.tsx index 440f283..6977d87 100644 --- a/src/frontend/app/components/StopSheet.tsx +++ b/src/frontend/app/components/StopSheet.tsx @@ -1,17 +1,17 @@ +import { Clock, RefreshCw } from "lucide-react"; import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import { Sheet } from "react-modal-sheet"; import { Link } from "react-router"; -import { useTranslation } from "react-i18next"; -import { Clock, RefreshCw } from "lucide-react"; -import LineIcon from "./LineIcon"; -import { StopSheetSkeleton } from "./StopSheetSkeleton"; +import type { Stop } from "~/data/StopDataProvider"; +import { useApp } from "../AppContext"; +import { REGIONS, type RegionId, getRegionConfig } from "../data/RegionConfig"; +import { type Estimate } from "../routes/estimates-$id"; import { ErrorDisplay } from "./ErrorDisplay"; +import LineIcon from "./LineIcon"; import { StopAlert } from "./StopAlert"; -import { type Estimate } from "../routes/estimates-$id"; -import { REGIONS, type RegionId, getRegionConfig } from "../data/RegionConfig"; -import { useApp } from "../AppContext"; import "./StopSheet.css"; -import type { Stop } from "~/data/StopDataProvider"; +import { StopSheetSkeleton } from "./StopSheetSkeleton"; interface StopSheetProps { isOpen: boolean; @@ -50,7 +50,6 @@ export const StopSheet: React.FC<StopSheetProps> = ({ }) => { const { t } = useTranslation(); const { region } = useApp(); - const regionConfig = getRegionConfig(region); const [data, setData] = useState<Estimate[] | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState<ErrorInfo | null>(null); @@ -206,46 +205,48 @@ export const StopSheet: React.FC<StopSheetProps> = ({ )} </div> - <div className="stop-sheet-footer"> - {lastUpdated && ( - <div className="stop-sheet-timestamp"> - {t("estimates.last_updated", "Actualizado a las")}{" "} - {lastUpdated.toLocaleTimeString(undefined, { - hour: "2-digit", - minute: "2-digit", - second: "2-digit", - })} - </div> - )} - - <div className="stop-sheet-actions"> - <button - className="stop-sheet-reload" - onClick={loadData} - disabled={loading} - title={t("estimates.reload", "Recargar estimaciones")} - > - <RefreshCw - className={`reload-icon ${loading ? "spinning" : ""}`} - /> - {t("estimates.reload", "Recargar")} - </button> - <Link - to={`/estimates/${stop.stopId}`} - className="stop-sheet-view-all" - onClick={onClose} - > - {t( - "map.view_all_estimates", - "Ver todas las estimaciones", - )} - </Link> - </div> - </div> </> ) : null} </div> + + <div className="stop-sheet-footer"> + {lastUpdated && ( + <div className="stop-sheet-timestamp"> + {t("estimates.last_updated", "Actualizado a las")}{" "} + {lastUpdated.toLocaleTimeString(undefined, { + hour: "2-digit", + minute: "2-digit", + second: "2-digit", + })} + </div> + )} + + <div className="stop-sheet-actions"> + <button + className="stop-sheet-reload" + onClick={loadData} + disabled={loading} + title={t("estimates.reload", "Recargar estimaciones")} + > + <RefreshCw + className={`reload-icon ${loading ? "spinning" : ""}`} + /> + {t("estimates.reload", "Recargar")} + </button> + + <Link + to={`/estimates/${stop.stopId}`} + className="stop-sheet-view-all" + onClick={onClose} + > + {t( + "map.view_all_estimates", + "Ver todas las estimaciones", + )} + </Link> + </div> + </div> </Sheet.Content> </Sheet.Container> <Sheet.Backdrop onTap={onClose} /> diff --git a/src/frontend/eslint.config.js b/src/frontend/eslint.config.js index 2439911..9414644 100644 --- a/src/frontend/eslint.config.js +++ b/src/frontend/eslint.config.js @@ -1,13 +1,13 @@ import js from "@eslint/js"; -import globals from "globals"; import reactHooks from "eslint-plugin-react-hooks"; import reactRefresh from "eslint-plugin-react-refresh"; +import globals from "globals"; import tseslint from "typescript-eslint"; export default tseslint.config( { ignores: ["dist", "build", ".react-router", "node_modules"] }, { - extends: [js.configs.recommended, ...tseslint.configs.recommended], + extends: [js.configs.recommended], files: ["**/*.{ts,tsx}"], languageOptions: { ecmaVersion: 2020, |