gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: fix body height

This commit is contained in:
fantasticit 2022-04-25 23:22:57 +08:00
parent 180eec9c19
commit c932af5d0a
3 changed files with 8 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/client/src/hooks/use-safari-100vh.tsx
View File

@ -1,16 +0,0 @@
import { useEffect } from 'react';
export function useSafari100vh() {
useEffect(() => {
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height', `${window.innerHeight}px`);
};
window.addEventListener('resize', appHeight);
appHeight();
return () => {
window.removeEventListener('resize', appHeight);
};
}, []);
}

2
packages/client/src/pages/_app.tsx
View File

@ -1,13 +1,11 @@
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import Head from 'next/head'; import Head from 'next/head';
import { useSafari100vh } from 'hooks/use-safari-100vh';
import { useTheme } from 'hooks/use-theme'; import { useTheme } from 'hooks/use-theme';
import 'viewerjs/dist/viewer.css'; import 'viewerjs/dist/viewer.css';
import 'styles/globals.scss'; import 'styles/globals.scss';
import 'tiptap/styles/index.scss'; import 'tiptap/styles/index.scss';
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
useSafari100vh();
useTheme(); useTheme();
return ( return (

20
packages/client/src/styles/reset.scss
View File

@ -5,8 +5,9 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body,
body { html {
height: 100%; /* Fill the window */
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -16,13 +17,8 @@ html:focus-within {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Set core body defaults */
body { body {
height: 100vh; margin: 0;
/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
height: var(--app-height);
line-height: 1.5;
text-rendering: optimizespeed;
/* stylelint-disable-next-line selector-id-pattern */ /* stylelint-disable-next-line selector-id-pattern */
> div#__next { > div#__next {
@ -84,8 +80,8 @@ select {
*, *,
*::before, *::before,
*::after { *::after {
transition-duration: .01ms !important; transition-duration: 0.01ms !important;
animation-duration: .01ms !important; animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important; animation-iteration-count: 1 !important;
scroll-behavior: auto !important; scroll-behavior: auto !important;
} }
@ -98,8 +94,8 @@ select {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: transparent; background-color: transparent;
border-radius: .5rem; border-radius: 0.5rem;
transition: all .2s; transition: all 0.2s;
} }
*:hover { *:hover {