ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refine hiding bottom navbar when virtual keyboard opens

This commit is contained in:
keyan 2024-03-28 18:18:44 -05:00
parent 176d0e2e77
commit 9820055aee
3 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/header.module.css
View File

@ -64,7 +64,7 @@
position: absolute; position: absolute;
padding: .25rem; padding: .25rem;
background-color: var(--bs-danger); background-color: var(--bs-danger);
top: 1px; top: 3px;
right: 8px; right: 8px;
border: 1px solid var(--bs-body-bg); border: 1px solid var(--bs-body-bg);
} }

4
components/nav/mobile/footer.js
View File

@ -12,7 +12,7 @@ function useDetectKeyboardOpen (minKeyboardHeight = 300, defaultValue) {
useEffect(() => { useEffect(() => {
const listener = () => { const listener = () => {
const newState = window.screen.height - minKeyboardHeight > window.visualViewport.height const newState = window.innerHeight - minKeyboardHeight > window.visualViewport.height
setIsKeyboardOpen(newState) setIsKeyboardOpen(newState)
} }
if (typeof visualViewport !== 'undefined') { if (typeof visualViewport !== 'undefined') {
@ -31,7 +31,7 @@ function useDetectKeyboardOpen (minKeyboardHeight = 300, defaultValue) {
export default function BottomBar ({ sub }) { export default function BottomBar ({ sub }) {
const router = useRouter() const router = useRouter()
const me = useMe() const me = useMe()
const isKeyboardOpen = useDetectKeyboardOpen(300, false) const isKeyboardOpen = useDetectKeyboardOpen(200, false)
if (isKeyboardOpen) { if (isKeyboardOpen) {
return null return null

78
middleware.js
View File

@ -19,47 +19,47 @@ export function middleware (request) {
resp = referrerMiddleware(request) resp = referrerMiddleware(request)
} }
const nonce = Buffer.from(crypto.randomUUID()).toString('base64') // const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
// we want to load media from other localhost ports during development // // we want to load media from other localhost ports during development
const devSrc = process.env.NODE_ENV === 'development' ? 'localhost:* ' : '' // const devSrc = process.env.NODE_ENV === 'development' ? 'localhost:* ' : ''
const cspHeader = [ // const cspHeader = [
// if something is not explicitly allowed, we don't allow it. // // if something is not explicitly allowed, we don't allow it.
"default-src 'none'", // "default-src 'none'",
"font-src 'self' a.stacker.news", // "font-src 'self' a.stacker.news",
// we want to load images from everywhere but we can limit to HTTPS at least // // 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:`, // `img-src 'self' ${devSrc}a.stacker.news m.stacker.news https: data: blob:`,
`media-src 'self' ${devSrc}a.stacker.news m.stacker.news`, // `media-src 'self' ${devSrc}a.stacker.news m.stacker.news`,
// Using nonces and strict-dynamic deploys a strict CSP. // // Using nonces and strict-dynamic deploys a strict CSP.
// see https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html#strict-policy. // // 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 // // Old browsers will ignore nonce and strict-dynamic and fallback to host-based matching and unsafe-inline
process.env.NODE_ENV === 'production' // process.env.NODE_ENV === 'production'
? `script-src 'self' 'unsafe-inline' 'nonce-${nonce}' 'strict-dynamic' https:` // ? `script-src 'self' 'unsafe-inline' 'nonce-${nonce}' 'strict-dynamic' https:`
// unsafe-eval is required during development due to react-refresh.js // // unsafe-eval is required during development due to react-refresh.js
// see https://github.com/vercel/next.js/issues/14221 // // see https://github.com/vercel/next.js/issues/14221
: `script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-${nonce}' 'strict-dynamic' https:`, // : `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 // // unsafe-inline for styles is not ideal but okay if script-src is using nonces
"style-src 'self' a.stacker.news 'unsafe-inline'", // "style-src 'self' a.stacker.news 'unsafe-inline'",
"manifest-src 'self'", // "manifest-src 'self'",
'frame-src www.youtube.com platform.twitter.com', // 'frame-src www.youtube.com platform.twitter.com',
`connect-src 'self' ${devSrc}https: wss:`, // `connect-src 'self' ${devSrc}https: wss:`,
// disable dangerous plugins like Flash // // disable dangerous plugins like Flash
"object-src 'none'", // "object-src 'none'",
// blocks injection of <base> tags // // blocks injection of <base> tags
"base-uri 'none'", // "base-uri 'none'",
// tell user agents to replace HTTP with HTTPS // // tell user agents to replace HTTP with HTTPS
'upgrade-insecure-requests', // 'upgrade-insecure-requests',
// prevents any domain from framing the content (defense against clickjacking attacks) // // prevents any domain from framing the content (defense against clickjacking attacks)
"frame-ancestors 'none'" // "frame-ancestors 'none'"
].join('; ') // ].join('; ')
resp.headers.set('Content-Security-Policy', cspHeader) // resp.headers.set('Content-Security-Policy', cspHeader)
// for browsers that don't support CSP // // for browsers that don't support CSP
resp.headers.set('X-Frame-Options', 'DENY') // resp.headers.set('X-Frame-Options', 'DENY')
// more useful headers // // more useful headers
resp.headers.set('X-Content-Type-Options', 'nosniff') // resp.headers.set('X-Content-Type-Options', 'nosniff')
resp.headers.set('Referrer-Policy', 'origin-when-cross-origin') // resp.headers.set('Referrer-Policy', 'origin-when-cross-origin')
resp.headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains') // resp.headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')
return resp return resp
} }