Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 203: Improve responsive design and refactor layout

Browse source
This commit is contained in:
Eric Nguyen 2022-10-03 12:05:16 +00:00
parent 50626218ba
commit 0d05f0959c
27 changed files with 968 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/Components/MainMenu/MainMenu.tsx
View file

@ -28,7 +28,13 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
switch (windowState) {
case WindowState.Load:
return (
<div className='flex flex-col drop-shadow-lg bg-blue-50 p-12 rounded-lg absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<div
className='flex flex-col drop-shadow-lg
bg-blue-50 p-12 rounded-lg absolute
h-full sm:h-auto
w-full sm:w-auto
sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'
>
<form className="flex items-center space-x-6">
<label className="block">
<span className="sr-only">Import save</span>
@ -67,7 +73,12 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
);
default:
return (
<div className='absolute bg-blue-50 p-12 rounded-lg drop-shadow-lg grid grid-cols-1 md:grid-cols-2 gap-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
<div className='absolute bg-blue-50 p-12
rounded-lg drop-shadow-lg
grid grid-cols-1 md:grid-cols-2 gap-8
h-full sm:h-auto
w-full sm:w-auto
sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'>
<button type="button" className='mainmenu-btn' onClick={() => {
setWindowState(WindowState.Loading);
props.newEditor();