From c6091beefa93f5103170df1743710a6113edcbc0 Mon Sep 17 00:00:00 2001 From: Developer From Jokela Date: Wed, 30 Oct 2024 12:24:47 +0200 Subject: [PATCH] Fix scroll and make user friendlier on mobile --- client/package-lock.json | 51 +++++++++++++++++++ client/package.json | 1 + .../src/components/availabilities/Meeting.tsx | 10 ++-- .../availabilities/WeeklyTimeViewPicker.tsx | 8 ++- 4 files changed, 64 insertions(+), 6 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index c86f963..8c6b5fd 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -21,6 +21,7 @@ "luxon": "^3.2.1", "react": "^18.2.0", "react-bootstrap": "^2.5.0", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-redux": "^8.0.2", "react-router-bootstrap": "^0.26.2", @@ -13450,6 +13451,18 @@ "node": ">= 12.13.0" } }, + "node_modules/react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "dependencies": { + "ua-parser-js": "^1.0.33" + }, + "peerDependencies": { + "react": ">= 0.14.0", + "react-dom": ">= 0.14.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -15537,6 +15550,31 @@ "node": ">=4.2.0" } }, + "node_modules/ua-parser-js": { + "version": "1.0.39", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.39.tgz", + "integrity": "sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "bin": { + "ua-parser-js": "script/cli.js" + }, + "engines": { + "node": "*" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -26102,6 +26140,14 @@ } } }, + "react-device-detect": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", + "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==", + "requires": { + "ua-parser-js": "^1.0.33" + } + }, "react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -27660,6 +27706,11 @@ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==" }, + "ua-parser-js": { + "version": "1.0.39", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.39.tgz", + "integrity": "sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==" + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/client/package.json b/client/package.json index 4887249..bdf6bae 100644 --- a/client/package.json +++ b/client/package.json @@ -16,6 +16,7 @@ "luxon": "^3.2.1", "react": "^18.2.0", "react-bootstrap": "^2.5.0", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-redux": "^8.0.2", "react-router-bootstrap": "^0.26.2", diff --git a/client/src/components/availabilities/Meeting.tsx b/client/src/components/availabilities/Meeting.tsx index 8a9ff99..2e57b0d 100644 --- a/client/src/components/availabilities/Meeting.tsx +++ b/client/src/components/availabilities/Meeting.tsx @@ -9,16 +9,18 @@ import { useGetMeetingQuery } from 'slices/enhancedApi'; import { getReqErrorMessage } from 'utils/requests.utils'; import { useGetCurrentMeetingWithSelector } from 'utils/meetings.hooks'; import { useSelfInfoIsPresent } from 'utils/auth.hooks'; -import { useAppDispatch } from 'app/hooks'; +import {useAppDispatch, useAppSelector} from 'app/hooks'; import { setCurrentMeetingID } from 'slices/currentMeeting'; import InfoModal from 'components/InfoModal'; import { useToast } from 'components/Toast'; -import { resetSelection } from 'slices/availabilitiesSelection'; +import {resetSelection, selectSelMode} from 'slices/availabilitiesSelection'; import useSetTitle from 'utils/title.hook'; +import {isMobile} from 'react-device-detect'; export default function Meeting() { const [isEditingMeeting, setIsEditingMeeting] = useState(false); const dispatch = useAppDispatch(); + const selMode = useAppSelector(selectSelMode); const params = useParams(); const meetingID = params.id; const skip = !meetingID; @@ -69,8 +71,8 @@ export default function Meeting() { return (
- -
+ {(!isMobile || selMode.type === 'none') && } +
); diff --git a/client/src/components/availabilities/WeeklyTimeViewPicker.tsx b/client/src/components/availabilities/WeeklyTimeViewPicker.tsx index 5843137..b3773e0 100644 --- a/client/src/components/availabilities/WeeklyTimeViewPicker.tsx +++ b/client/src/components/availabilities/WeeklyTimeViewPicker.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useReducer } from 'react'; +import React, {useMemo, useReducer, useState} from 'react'; import { LeftArrow as SVGLeftArrow, RightArrow as SVGRightArrow } from 'components/Arrows'; import { getDateFromString, @@ -16,6 +16,7 @@ import { assert } from 'utils/misc.utils'; import { useGetCurrentMeetingWithSelector } from 'utils/meetings.hooks'; import { useAppSelector } from 'app/hooks'; import { selectSelMode } from 'slices/availabilitiesSelection'; +import {isMobile} from "react-device-detect"; /** * Returns a string which can be used in the CSS grid-template-areas property @@ -114,6 +115,8 @@ export default function WeeklyViewTimePicker() { // As of this writing (2022-10-01), LettuceMeet has this bug as well. // !!!!!!!!!! // TODO: Need to add an extra day (prior to earliest tentative date) in this scenario. + const selMode = useAppSelector(selectSelMode); + const startHour = Math.floor(startTime); const endHour = Math.ceil(endTime); const [page, pageDispatch] = useReducer(pageNumberReducer, 0); @@ -152,6 +155,7 @@ export default function WeeklyViewTimePicker() { /* Row order: month title, days of week, schedule grid */ gridTemplateRows: `auto auto repeat(${numRows}, 1.75em)`, gridTemplateAreas, + touchAction: 'none' }} className={className} > @@ -169,7 +173,7 @@ export default function WeeklyViewTimePicker() { Näytetään paikallisessa aikavyöhykkeessä ({tzAbbr}) - + {(!isMobile || selMode.type === 'none') && } );