martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix for viewport in mobile browser

Browse Source
This commit is contained in:
Roland Osborne 2022-08-07 17:36:42 -07:00
parent 1bea7baf0c
commit 5f2391ce7f
3 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
net/web/src/App.styled.js
View File

@ -3,5 +3,5 @@ import styled from 'styled-components';
export const AppWrapper = styled.div`
position: absolute;
width: 100vw;
height: 100vh;
height: calc(100vh - calc(100vh - 100%));
`;

16
net/web/src/context/useViewportContext.hook.js
View File

@ -13,23 +13,27 @@ export function useViewportContext() {
const handleResize = () => {
if (window.innerWidth < SMALL_MEDIUM) {
updateState({ display: 'small' });
updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight });
}
else if (window.innerWidth < MEDIUM_LARGE) {
updateState({ display: 'medium' });
updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight });
}
else if (window.innerWidth < LARGE_XLARGE) {
updateState({ display: 'large' });
updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight });
}
else {
updateState({ display: 'xlarge' });
updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight });
}
};
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleResize);
}
}, []);
return { state, actions: {} }

16
net/web/src/session/profile/Profile.jsx
View File

@ -1,4 +1,18 @@
import { useContext } from 'react';
import { Button } from 'antd';
import { AppContext } from 'context/AppContext';
import { ViewportContext } from 'context/ViewportContext';
export function Profile() {
return <></>
const app = useContext(AppContext);
const viewport = useContext(ViewportContext);
return (
<div>
<Button type="primary" onClick={() => app.actions.logout()}>LOGOUT</Button>
<div>{ JSON.stringify(viewport.state) }</div>
</div>
);
}