diff options
Diffstat (limited to 'src/frontend/app/components')
| -rw-r--r-- | src/frontend/app/components/PullToRefresh.css | 72 | ||||
| -rw-r--r-- | src/frontend/app/components/PullToRefresh.tsx | 53 | ||||
| -rw-r--r-- | src/frontend/app/components/UpdateNotification.tsx | 2 |
3 files changed, 1 insertions, 126 deletions
diff --git a/src/frontend/app/components/PullToRefresh.css b/src/frontend/app/components/PullToRefresh.css index 15ca74b..e69de29 100644 --- a/src/frontend/app/components/PullToRefresh.css +++ b/src/frontend/app/components/PullToRefresh.css @@ -1,72 +0,0 @@ -.pull-to-refresh-container { - position: relative; - height: 100%; - overflow: hidden; -} - -.pull-to-refresh-indicator { - position: absolute; - top: -80px; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - padding: 16px; - z-index: 1000; - opacity: 0; - transition: opacity 0.2s ease; -} - -.pull-to-refresh-icon { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: var(--button-background-color); - color: white; - transition: all 0.3s ease; - transform-origin: center; -} - -.pull-to-refresh-icon.ready { - background-color: #28a745; -} - -.pull-to-refresh-icon.spinning { - animation: spin 1s linear infinite; -} - -@keyframes spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.pull-to-refresh-text { - font-size: 0.875rem; - color: var(--subtitle-color); - font-weight: 500; - text-align: center; - white-space: nowrap; -} - -.pull-to-refresh-content { - height: 100%; - overflow: auto; - transition: transform 0.2s ease; -} - -/* Disable browser's default pull-to-refresh on mobile */ -.pull-to-refresh-content { - overscroll-behavior-y: contain; -} - -@media (hover: hover) { - /* Hide pull-to-refresh on desktop devices */ - .pull-to-refresh-indicator { - display: none; - } -} diff --git a/src/frontend/app/components/PullToRefresh.tsx b/src/frontend/app/components/PullToRefresh.tsx index 47a6f03..e69de29 100644 --- a/src/frontend/app/components/PullToRefresh.tsx +++ b/src/frontend/app/components/PullToRefresh.tsx @@ -1,53 +0,0 @@ -import { type ReactNode } from "react"; -import { RotateCcw } from "lucide-react"; -import "./PullToRefresh.css"; - -interface PullToRefreshIndicatorProps { - pullDistance: number; - isRefreshing: boolean; - canRefresh: boolean; - children: ReactNode; -} - -export function PullToRefreshIndicator({ - pullDistance, - isRefreshing, - canRefresh, - children, -}: PullToRefreshIndicatorProps) { - const opacity = Math.min(pullDistance / 60, 1); - const rotation = isRefreshing ? 360 : pullDistance * 4; - const scale = Math.min(0.5 + (pullDistance / 120), 1); - - return ( - <div className="pull-to-refresh-container"> - <div - className="pull-to-refresh-indicator" - style={{ - transform: `translateY(${Math.min(pullDistance, 80)}px)`, - opacity: opacity, - }} - > - <div - className={`pull-to-refresh-icon ${isRefreshing ? 'spinning' : ''} ${canRefresh ? 'ready' : ''}`} - style={{ - transform: `rotate(${rotation}deg) scale(${scale})`, - }} - > - <RotateCcw size={24} /> - </div> - <div className="pull-to-refresh-text"> - {isRefreshing ? "Actualizando..." : canRefresh ? "Suelta para actualizar" : "Arrastra para actualizar"} - </div> - </div> - <div - className="pull-to-refresh-content" - style={{ - transform: `translateY(${Math.min(pullDistance * 0.5, 40)}px)`, - }} - > - {children} - </div> - </div> - ); -} diff --git a/src/frontend/app/components/UpdateNotification.tsx b/src/frontend/app/components/UpdateNotification.tsx index e07ee74..c8e21ea 100644 --- a/src/frontend/app/components/UpdateNotification.tsx +++ b/src/frontend/app/components/UpdateNotification.tsx @@ -16,7 +16,7 @@ export function UpdateNotification() { const handleUpdate = async () => { setIsUpdating(true); swManager.activateUpdate(); - + // Wait for the page to reload setTimeout(() => { window.location.reload(); |
