Card issue (#265)

* カードのスクロールをとりやめ * クリック時にカードが少し小さくなる(UX改善) * モバイルかつ横画面の時に警告(応急処置)
ut-code · Sep 24, 2024 · dc57b06 · dc57b06
1 parent d7ec294
commit dc57b06
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/web/src/components/BanLandscape.tsx b/web/src/components/BanLandscape.tsx
@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from "react";
+
+const BanLandscape = () => {
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  const checkOrientation = useCallback(() => {
+    const userAgent = navigator.userAgent;
+    const isMobile = /iPhone|Android|Mobile/i.test(userAgent);
+    if (isMobile) {
+      setIsLandscape(window.innerHeight < window.innerWidth);
+    } else {
+      setIsLandscape(false); // モバイルデバイスでない場合は常に縦画面扱い
+    }
+  }, []);
+
+  useEffect(() => {
+    checkOrientation();
+    window.addEventListener("resize", checkOrientation);
+    return () => {
+      window.removeEventListener("resize", checkOrientation);
+    };
+  }, [checkOrientation]);
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      {isLandscape && (
+        <div
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 1000,
+          }}
+        >
+          <div
+            style={{
+              backgroundColor: "white",
+              padding: "20px",
+              borderRadius: "10px",
+              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+              textAlign: "center",
+              fontSize: "20px",
+              color: "#333",
+            }}
+          >
+            このアプリは縦画面で使用してください
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BanLandscape;
diff --git a/web/src/components/Card.tsx b/web/src/components/Card.tsx
@@ -70,7 +70,7 @@ const CardFront = ({ displayedUser }: CardProps) => {
         border: "2px solid #3596C6",
         padding: "10px",
         height: "100%",
-        overflow: "scroll",
+        overflow: "hidden",
       }}
     >
       <div
@@ -116,7 +116,7 @@ const CardBack = ({ displayedUser }: CardProps) => {
         border: "2px solid #3596C6",
         padding: "10px",
         height: "100%",
-        overflow: "scroll",
+        overflow: "hidden",
       }}
     >
       <div style={{ display: "flex", justifyContent: "center" }}>

diff --git a/web/src/components/DraggableCard.tsx b/web/src/components/DraggableCard.tsx
@@ -69,6 +69,7 @@ export const DraggableCard = ({
           handleDragEnd();
         }}
         style={{ x: dragX, y: dragY, padding: "10px" }}
+        whileTap={{ scale: 0.95 }}
       >
         <Card displayedUser={displayedUser} />
       </motion.div>

diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -7,6 +7,7 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import { CssBaseline } from "@mui/material";
 import App from "./App";
+import BanLandscape from "./components/BanLandscape";
 import { AlertProvider } from "./components/common/alert/AlertProvider";
 import { ModalProvider } from "./components/common/modal/ModalProvider";
 import AuthProvider from "./firebase/auth/AuthProvider";
@@ -19,6 +20,7 @@ ReactDOM.createRoot(root).render(
       <CssBaseline />
       <AlertProvider>
         <ModalProvider>
+          <BanLandscape />
           <App />
         </ModalProvider>
       </AlertProvider>