From 37f6f1bdd86c2bd3a50d60be8e47cedd0cb9b405 Mon Sep 17 00:00:00 2001 From: primakov Date: Tue, 29 Nov 2022 22:36:58 +0300 Subject: [PATCH] fix adaptive --- package-lock.json | 52 ++++++++++++++++++++++++++++++-- package.json | 1 + src/app.tsx | 4 +++ src/assets/logo.svg | 10 +++--- src/components/keyboard.style.ts | 7 +++-- src/pages/main.tsx | 4 +-- src/pages/style.ts | 5 +++ 7 files changed, 71 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index c59d1ea..385e484 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "express": "^4.18.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-helmet": "^6.1.0", "socket.io-client": "^4.5.4", "typescript": "^4.9.3" }, @@ -6381,7 +6382,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -6701,6 +6701,25 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "dev": true }, + "node_modules/react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, + "node_modules/react-helmet": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", + "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", + "dependencies": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.1.1", + "react-side-effect": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16.3.0" + } + }, "node_modules/react-hot-loader": { "version": "4.13.0", "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz", @@ -6790,6 +6809,14 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", "dev": true }, + "node_modules/react-side-effect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", + "peerDependencies": { + "react": "^16.3.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/rechoir": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", @@ -13350,7 +13377,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -13592,6 +13618,22 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "dev": true }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, + "react-helmet": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", + "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==", + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.1.1", + "react-side-effect": "^2.1.0" + } + }, "react-hot-loader": { "version": "4.13.0", "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz", @@ -13657,6 +13699,12 @@ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", "dev": true }, + "react-side-effect": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", + "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==", + "requires": {} + }, "rechoir": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz", diff --git a/package.json b/package.json index c5b5d4b..65f5929 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "express": "^4.18.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-helmet": "^6.1.0", "socket.io-client": "^4.5.4", "typescript": "^4.9.3" } diff --git a/src/app.tsx b/src/app.tsx index f671d11..2c137eb 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; import { Global, css } from '@emotion/react' import { MainPage } from './pages/main'; @@ -6,6 +7,9 @@ import { MainPage } from './pages/main'; const App = () => { return( <> + + + + @@ -8,10 +8,10 @@ - - - - + + + + diff --git a/src/components/keyboard.style.ts b/src/components/keyboard.style.ts index b695414..a476ce4 100644 --- a/src/components/keyboard.style.ts +++ b/src/components/keyboard.style.ts @@ -25,8 +25,9 @@ export const BackspaceBtn = styled.img` export const Key = styled.button` margin: 4px; - width: 64px; - height: 64px; + width: 8vw; + height: 7vw; + min-height: 40px; font-size: 24px; display: flex; align-items: center; @@ -42,4 +43,4 @@ export const Key = styled.button` box-shadow: inset 1px 2px 6px #5c7cc9, 0px 6px 16px #5c7cc9; } -`; \ No newline at end of file +`; diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 2267767..6606d54 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -1,7 +1,7 @@ import React, {useState, useCallback, useRef, useMemo} from 'react'; import { getFeatures } from '@ijl/cli'; -import logo from '../assets/logo-white.svg'; +import logo from '../assets/logo.svg'; import arrow from '../assets/36-arrow-right.svg'; import { Keyboard } from '../components/keyboard'; @@ -34,7 +34,7 @@ const fullScreenFeature = getFeatures('hub-video-start')?.fullScreen; const Input = ({ onStart }) => { const [value, setValue] = useState(''); - const [inFocuse, setInfocuse] = useState(false); + const [inFocuse, setInfocuse] = useState(true); const handleChange = useCallback(event => { setValue(event.target.value.toUpperCase()) }, [setValue]); diff --git a/src/pages/style.ts b/src/pages/style.ts index 5bac5c9..2a2239d 100644 --- a/src/pages/style.ts +++ b/src/pages/style.ts @@ -13,6 +13,10 @@ export const InputWrapper = styled.div` padding: 12px; display: flex; align-items: center; + + @media screen and (max-width: 600px) { + flex-direction: column; + } `; export const InputLabel = styled.label` position: absolute; @@ -26,6 +30,7 @@ export const InputElement = styled.input` font-size: 24px; border-radius: 8px; color: #117623; + max-width: 90vw; `; export const LogoImg = styled.img`