From 9820055aee58c96a044395e3fbbe3ed26275c79d Mon Sep 17 00:00:00 2001 From: keyan Date: Thu, 28 Mar 2024 18:18:44 -0500 Subject: [PATCH] refine hiding bottom navbar when virtual keyboard opens --- components/header.module.css | 2 +- components/nav/mobile/footer.js | 4 +- middleware.js | 78 ++++++++++++++++----------------- 3 files changed, 42 insertions(+), 42 deletions(-) diff --git a/components/header.module.css b/components/header.module.css index 7f2ecfeb..1134e848 100644 --- a/components/header.module.css +++ b/components/header.module.css @@ -64,7 +64,7 @@ position: absolute; padding: .25rem; background-color: var(--bs-danger); - top: 1px; + top: 3px; right: 8px; border: 1px solid var(--bs-body-bg); } diff --git a/components/nav/mobile/footer.js b/components/nav/mobile/footer.js index 56e84f91..fdc76d02 100644 --- a/components/nav/mobile/footer.js +++ b/components/nav/mobile/footer.js @@ -12,7 +12,7 @@ function useDetectKeyboardOpen (minKeyboardHeight = 300, defaultValue) { useEffect(() => { const listener = () => { - const newState = window.screen.height - minKeyboardHeight > window.visualViewport.height + const newState = window.innerHeight - minKeyboardHeight > window.visualViewport.height setIsKeyboardOpen(newState) } if (typeof visualViewport !== 'undefined') { @@ -31,7 +31,7 @@ function useDetectKeyboardOpen (minKeyboardHeight = 300, defaultValue) { export default function BottomBar ({ sub }) { const router = useRouter() const me = useMe() - const isKeyboardOpen = useDetectKeyboardOpen(300, false) + const isKeyboardOpen = useDetectKeyboardOpen(200, false) if (isKeyboardOpen) { return null diff --git a/middleware.js b/middleware.js index 52b29837..46c440b5 100644 --- a/middleware.js +++ b/middleware.js @@ -19,47 +19,47 @@ export function middleware (request) { resp = referrerMiddleware(request) } - const nonce = Buffer.from(crypto.randomUUID()).toString('base64') - // we want to load media from other localhost ports during development - const devSrc = process.env.NODE_ENV === 'development' ? 'localhost:* ' : '' + // const nonce = Buffer.from(crypto.randomUUID()).toString('base64') + // // we want to load media from other localhost ports during development + // const devSrc = process.env.NODE_ENV === 'development' ? 'localhost:* ' : '' - const cspHeader = [ - // if something is not explicitly allowed, we don't allow it. - "default-src 'none'", - "font-src 'self' a.stacker.news", - // we want to load images from everywhere but we can limit to HTTPS at least - `img-src 'self' ${devSrc}a.stacker.news m.stacker.news https: data: blob:`, - `media-src 'self' ${devSrc}a.stacker.news m.stacker.news`, - // Using nonces and strict-dynamic deploys a strict CSP. - // see https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#strict-policy. - // Old browsers will ignore nonce and strict-dynamic and fallback to host-based matching and unsafe-inline - process.env.NODE_ENV === 'production' - ? `script-src 'self' 'unsafe-inline' 'nonce-${nonce}' 'strict-dynamic' https:` - // unsafe-eval is required during development due to react-refresh.js - // see https://github.com/vercel/next.js/issues/14221 - : `script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-${nonce}' 'strict-dynamic' https:`, - // unsafe-inline for styles is not ideal but okay if script-src is using nonces - "style-src 'self' a.stacker.news 'unsafe-inline'", - "manifest-src 'self'", - 'frame-src www.youtube.com platform.twitter.com', - `connect-src 'self' ${devSrc}https: wss:`, - // disable dangerous plugins like Flash - "object-src 'none'", - // blocks injection of tags - "base-uri 'none'", - // tell user agents to replace HTTP with HTTPS - 'upgrade-insecure-requests', - // prevents any domain from framing the content (defense against clickjacking attacks) - "frame-ancestors 'none'" - ].join('; ') + // const cspHeader = [ + // // if something is not explicitly allowed, we don't allow it. + // "default-src 'none'", + // "font-src 'self' a.stacker.news", + // // we want to load images from everywhere but we can limit to HTTPS at least + // `img-src 'self' ${devSrc}a.stacker.news m.stacker.news https: data: blob:`, + // `media-src 'self' ${devSrc}a.stacker.news m.stacker.news`, + // // Using nonces and strict-dynamic deploys a strict CSP. + // // see https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#strict-policy. + // // Old browsers will ignore nonce and strict-dynamic and fallback to host-based matching and unsafe-inline + // process.env.NODE_ENV === 'production' + // ? `script-src 'self' 'unsafe-inline' 'nonce-${nonce}' 'strict-dynamic' https:` + // // unsafe-eval is required during development due to react-refresh.js + // // see https://github.com/vercel/next.js/issues/14221 + // : `script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-${nonce}' 'strict-dynamic' https:`, + // // unsafe-inline for styles is not ideal but okay if script-src is using nonces + // "style-src 'self' a.stacker.news 'unsafe-inline'", + // "manifest-src 'self'", + // 'frame-src www.youtube.com platform.twitter.com', + // `connect-src 'self' ${devSrc}https: wss:`, + // // disable dangerous plugins like Flash + // "object-src 'none'", + // // blocks injection of tags + // "base-uri 'none'", + // // tell user agents to replace HTTP with HTTPS + // 'upgrade-insecure-requests', + // // prevents any domain from framing the content (defense against clickjacking attacks) + // "frame-ancestors 'none'" + // ].join('; ') - resp.headers.set('Content-Security-Policy', cspHeader) - // for browsers that don't support CSP - resp.headers.set('X-Frame-Options', 'DENY') - // more useful headers - resp.headers.set('X-Content-Type-Options', 'nosniff') - resp.headers.set('Referrer-Policy', 'origin-when-cross-origin') - resp.headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains') + // resp.headers.set('Content-Security-Policy', cspHeader) + // // for browsers that don't support CSP + // resp.headers.set('X-Frame-Options', 'DENY') + // // more useful headers + // resp.headers.set('X-Content-Type-Options', 'nosniff') + // resp.headers.set('Referrer-Policy', 'origin-when-cross-origin') + // resp.headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains') return resp }