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

added more resolution on width category

Browse Source
This commit is contained in:
Roland Osborne 2022-08-03 14:30:24 -07:00
parent c01a6e6e8f
commit 1b6891c639
5 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,4 +5,5 @@ export const AppWrapper = styled.div`
position: absolute;
width: 100vw;
height: 100vh;
padding: 8px;
`;

1
net/web/src/constants/Colors.js
View File

@ -1,5 +1,6 @@
const Colors = {
background: '#8fbea7',
formBackground: '#f4f4f4',
};
export default Colors;

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

@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
export function useViewportContext() {
const [state, setState] = useState({ });
const SMALL_MEDIUM = 600;
const MEDIUM_LARGE = 1600
const SMALL_MEDIUM = 640;
const MEDIUM_LARGE = 1024;
const LARGE_XLARGE = 1600;
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
@ -17,9 +18,12 @@ export function useViewportContext() {
else if (window.innerWidth < MEDIUM_LARGE) {
updateState({ display: 'medium' });
}
else {
else if (window.innerWidth < LARGE_XLARGE) {
updateState({ display: 'large' });
}
else {
updateState({ display: 'xlarge' });
}
};
useEffect(() => {

11
net/web/src/login/Login.jsx
View File

@ -20,14 +20,11 @@ export function Login() {
return (
<LoginWrapper>
{ viewport.state.display === 'large' && (
<div>LARGE</div>
{ (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
<div class="split-layout"></div>
)}
{ viewport.state.display === 'medium' && (
<div>MEDIUM</div>
)}
{ viewport.state.display === 'small' && (
<div>SMALL</div>
{ (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
<div class="full-layout"></div>
)}
</LoginWrapper>
);

17
net/web/src/login/Login.styled.js
View File

@ -2,4 +2,21 @@ import styled from 'styled-components';
import Colors from 'constants/Colors';
export const LoginWrapper = styled.div`
height: 100%;
.full-layout {
width: 100%;
height: 100%;
border-radius: 4px;
background: ${Colors.formBackground};
}
.split-layout {
position: relative;
left: 50%;
width: 50%;
height: 100%;
border-radius: 4px;
background: ${Colors.formBackground};
}
`;