mirror of
https://github.com/balzack/databag.git
synced 2025-02-12 03:29:16 +00:00
added more resolution on width category
This commit is contained in:
parent
c01a6e6e8f
commit
1b6891c639
@ -5,4 +5,5 @@ export const AppWrapper = styled.div`
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
padding: 8px;
|
||||||
`;
|
`;
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
const Colors = {
|
const Colors = {
|
||||||
background: '#8fbea7',
|
background: '#8fbea7',
|
||||||
|
formBackground: '#f4f4f4',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Colors;
|
export default Colors;
|
||||||
|
@ -3,8 +3,9 @@ import { useEffect, useState } from 'react';
|
|||||||
export function useViewportContext() {
|
export function useViewportContext() {
|
||||||
|
|
||||||
const [state, setState] = useState({ });
|
const [state, setState] = useState({ });
|
||||||
const SMALL_MEDIUM = 600;
|
const SMALL_MEDIUM = 640;
|
||||||
const MEDIUM_LARGE = 1600
|
const MEDIUM_LARGE = 1024;
|
||||||
|
const LARGE_XLARGE = 1600;
|
||||||
|
|
||||||
const updateState = (value) => {
|
const updateState = (value) => {
|
||||||
setState((s) => ({ ...s, ...value }));
|
setState((s) => ({ ...s, ...value }));
|
||||||
@ -17,9 +18,12 @@ export function useViewportContext() {
|
|||||||
else if (window.innerWidth < MEDIUM_LARGE) {
|
else if (window.innerWidth < MEDIUM_LARGE) {
|
||||||
updateState({ display: 'medium' });
|
updateState({ display: 'medium' });
|
||||||
}
|
}
|
||||||
else {
|
else if (window.innerWidth < LARGE_XLARGE) {
|
||||||
updateState({ display: 'large' });
|
updateState({ display: 'large' });
|
||||||
}
|
}
|
||||||
|
else {
|
||||||
|
updateState({ display: 'xlarge' });
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -20,14 +20,11 @@ export function Login() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<LoginWrapper>
|
<LoginWrapper>
|
||||||
{ viewport.state.display === 'large' && (
|
{ (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
|
||||||
<div>LARGE</div>
|
<div class="split-layout"></div>
|
||||||
)}
|
)}
|
||||||
{ viewport.state.display === 'medium' && (
|
{ (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
|
||||||
<div>MEDIUM</div>
|
<div class="full-layout"></div>
|
||||||
)}
|
|
||||||
{ viewport.state.display === 'small' && (
|
|
||||||
<div>SMALL</div>
|
|
||||||
)}
|
)}
|
||||||
</LoginWrapper>
|
</LoginWrapper>
|
||||||
);
|
);
|
||||||
|
@ -2,4 +2,21 @@ import styled from 'styled-components';
|
|||||||
import Colors from 'constants/Colors';
|
import Colors from 'constants/Colors';
|
||||||
|
|
||||||
export const LoginWrapper = styled.div`
|
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};
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user