Merge branch 'main' into hotfix/thkids

.github/workflows/podman.yml

@@ -282,7 +282,7 @@ jobs:
       - name: Prune old images
         run: podman image prune -a -f
       - name: Check Podman images
-        run: podman-compose -f docker compose-deploy.yml ps
+        run: podman-compose -f docker-compose-deploy.yml ps
 
   e2e-acceptance:
     name: E2E tests on acceptance environment

docker-compose.yaml

@@ -1,4 +1,4 @@
-# Docker-compose definition for development
+# docker compose definition for development
 
 version: '2.4'
 

frontend/src/components/App/App.tsx

@@ -18,6 +18,7 @@ import Profile from "../Profile/Profile";
 import Reload from "../Reload/Reload";
 import StoreProfile from "../StoreProfile/StoreProfile";
 import useDisableRightClickOnTouchDevices from "../../hooks/useDisableRightClickOnTouchDevices";
+import useDisableIOSPinchZoomOnTouchDevices from "@/hooks/useDisableIOSPinchZoomOnTouchDevices";
 import { InternalRedirect } from "../InternalRedirect/InternalRedirect";
 import Helmet from "@/components/Helmet/Helmet";
 
@@ -31,6 +32,7 @@ const App = () => {
     const queryParams = window.location.search;
 
     useDisableRightClickOnTouchDevices();
+    useDisableIOSPinchZoomOnTouchDevices();
 
     useEffect(() => {
         const urlParams = new URLSearchParams(queryParams);

frontend/src/components/Circle/Circle.scss

@@ -3,20 +3,22 @@
     margin-bottom: 15px;
     margin-top: 15px;
 
-    > svg,
+    >svg,
     .content {
         position: absolute;
         left: 0;
         top: 0;
     }
 
-    > svg {
+    >svg {
         @extend .circleIntro;
     }
 
     .circle-percentage {
         transition: stroke-dashoffset 0.1s linear;
-        transform: rotate(-90deg);
-        transform-origin: 50% 50%;
+
+        // 102.5px is the radius of the circle
+        // translateX because the circle is rotated -90deg
+        transform: rotate(-90deg) translateX(calc(-102.5px * 2));
     }
 }

frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.test.ts

@@ -0,0 +1,36 @@
+import { vi, describe, test, expect, afterEach } from "vitest";
+import { renderHook } from "@testing-library/react-hooks";
+import { waitFor } from "@testing-library/react";
+import useDisableIOSPinchZoomOnTouchDevices from "./useDisableIOSPinchZoomOnTouchDevices";
+
+describe("useDisableIOSPinchZoomOnTouchDevices", () => {
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+
+    test("should prevent gesturestart on touch devices", async () => {
+        vi.stubGlobal("ontouchstart", true);
+
+        const mockEvent = new Event('gesturestart');
+        mockEvent.preventDefault = vi.fn();
+
+        const spy = vi.spyOn(mockEvent, 'preventDefault').mockImplementation(() => { });
+
+        renderHook(() => useDisableIOSPinchZoomOnTouchDevices());
+
+        await waitFor(() => document.dispatchEvent(mockEvent));
+        await waitFor(() => expect(spy).toHaveBeenCalledTimes(1));
+    });
+
+    test("should not prevent gesturestart on non-touch devices", () => {
+        const mockEvent = new Event('gesturestart');
+        mockEvent.preventDefault = vi.fn();
+
+        const spy = vi.spyOn(mockEvent, 'preventDefault').mockImplementation(() => { });
+
+        renderHook(() => useDisableIOSPinchZoomOnTouchDevices());
+
+        document.dispatchEvent(mockEvent);
+        expect(spy).not.toHaveBeenCalled();
+    });
+});

frontend/src/hooks/useDisableIOSPinchZoomOnTouchDevices.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react';
+
+const useDisableIOSPinchZoomOnTouchDevices = () => useEffect(() => {
+    const isTouchDevice = () => !!('ontouchstart' in window || !!(navigator.maxTouchPoints));
+
+    const handlePinchZoom = (event: Event) => {
+        if (isTouchDevice()) {
+            event.preventDefault();
+        }
+    };
+
+    document.addEventListener('gesturestart', handlePinchZoom);
+
+    return () => {
+        document.removeEventListener('gesturestart', handlePinchZoom);
+    };
+}, []);
+
+
+export default useDisableIOSPinchZoomOnTouchDevices;

frontend/src/scss/layout.scss

@@ -6,6 +6,9 @@ body.root {
     background-position: center center;
     background-repeat: no-repeat;
     min-height: 100vh;
+
+    /* disable pinch zoom on iOS */
+    touch-action: manipulation;
 }
 
 #root {

frontend/src/stories/Circle.stories.jsx

@@ -113,7 +113,7 @@ export const LongDuration = {
         radius: 100,
         strokeWidth: 5,
         color: "white",
-        duration: 30,
+        duration: 60,
         animateCircle: true,
         running: true,
     },

scripts/build-front

@@ -1,3 +1,2 @@
 #!/bin/bash
 docker compose run --rm client yarn build
-

scripts/test-back

@@ -1,3 +1,2 @@
 #!/bin/bash
 docker compose run --rm server bash -c "python manage.py test $@"
-

scripts/test-back-coverage

@@ -1,3 +1,2 @@
 #!/bin/bash
 docker compose run --rm server bash -c "coverage run manage.py test && coverage report --show-missing"
-

scripts/test-front

@@ -1,3 +1,2 @@
 #!/bin/bash
 docker compose run --rm client yarn test --watch=false
-

scripts/test-front-watch

@@ -1,3 +1,2 @@
 #!/bin/bash
 docker compose run --rm client yarn test --watch=true
-