martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 11:39:17 +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` export const AppWrapper = styled.div`
position: absolute; position: absolute;
width: 100vw; 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 = () => { const handleResize = () => {
if (window.innerWidth < SMALL_MEDIUM) { if (window.innerWidth < SMALL_MEDIUM) {
updateState({ display: 'small' }); updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight });
} }
else if (window.innerWidth < MEDIUM_LARGE) { else if (window.innerWidth < MEDIUM_LARGE) {
updateState({ display: 'medium' }); updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight });
} }
else if (window.innerWidth < LARGE_XLARGE) { else if (window.innerWidth < LARGE_XLARGE) {
updateState({ display: 'large' }); updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight });
} }
else { else {
updateState({ display: 'xlarge' }); updateState({ display: 'xlarge', width: window.innerWidth, height: window.innerHeight });
} }
}; };
useEffect(() => { useEffect(() => {
handleResize(); handleResize();
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize) window.addEventListener('orientationchange', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleResize);
}
}, []); }, []);
return { state, actions: {} } 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() { 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>
);
} }