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

adjusting login layout

Browse Source
This commit is contained in:
Roland Osborne 2022-08-03 22:07:02 -07:00
parent 1b6891c639
commit 05da046297
4 changed files with 40 additions and 11 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,5 +5,4 @@ export const AppWrapper = styled.div`
position: absolute; position: absolute;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
padding: 8px;
`; `;

BIN
net/web/src/images/login.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 410 KiB

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

@ -4,6 +4,8 @@ import { AppContext } from 'context/AppContext';
import { ViewportContext } from 'context/ViewportContext'; import { ViewportContext } from 'context/ViewportContext';
import { LoginWrapper } from './Login.styled'; import { LoginWrapper } from './Login.styled';
import login from 'images/login.png'
export function Login() { export function Login() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -21,10 +23,17 @@ export function Login() {
return ( return (
<LoginWrapper> <LoginWrapper>
{ (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && ( { (viewport.state.display === 'large' || viewport.state.display === 'xlarge') && (
<div class="split-layout"></div> <div class="split-layout">
<div class="left">
<img class="splash" src={login} alt={login} />
</div>
<div class="right">RIGHT</div>
</div>
)} )}
{ (viewport.state.display === 'medium' || viewport.state.display === 'small') && ( { (viewport.state.display === 'medium' || viewport.state.display === 'small') && (
<div class="full-layout"></div> <div class="full-layout">
<div class="center"></div>
</div>
)} )}
</LoginWrapper> </LoginWrapper>
); );

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

@ -6,17 +6,38 @@ export const LoginWrapper = styled.div`
.full-layout { .full-layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 4px; padding: 8px;
background: ${Colors.formBackground};
.center {
width: 100%;
height: 100%;
border-radius: 4px;
background: ${Colors.formBackground};
}
} }
.split-layout { .split-layout {
position: relative; display: flex;
left: 50%; flex-direction: row;
width: 50%;
height: 100%; height: 100%;
border-radius: 4px;
background: ${Colors.formBackground}; .left {
width: 50%;
height: 100%;
padding: 32px;
.splash {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.right {
width: 50%;
height: 100%;
background: ${Colors.formBackground};
}
} }
`; `;