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/PullToRefresh.css72
-rw-r--r--src/frontend/app/components/PullToRefresh.tsx53
-rw-r--r--src/frontend/app/components/UpdateNotification.tsx2
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();