Skip to content

Commit 33bc9a4

Browse files
gimnathpereragimnathperera
authored
Merge pull request #18 from gimnathperera/feat/mobile-responsiveness
Feat/mobile responsiveness
2 parents eaa9522 + de63f10 commit 33bc9a4

File tree

8 files changed

+49
-46
lines changed

8 files changed

+49
-46
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"typescript.tsdk": "node_modules/typescript/lib",
3-
"cSpell.words": ["clsx", "nextui"]
3+
"cSpell.words": ["clsx", "Gimnath", "Mocktopus", "nextui"]
44
}

‎app/layout.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,14 @@ interface Props {
3131
const RootLayout: FC<Props> = ({ children }) => {
3232
return (
3333
<html lang='en' suppressHydrationWarning>
34-
<head />
34+
<head>
35+
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
36+
</head>
3537
<body className={clsx('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
3638
<Providers themeProps={{ attribute: 'class', defaultTheme: 'dark' }}>
37-
<div className='relative flex flex-col h-screen'>
39+
<div className='relative flex flex-col min-h-screen'>
3840
<Navbar />
39-
<main className='container mx-auto px-12 flex-grow'>{children}</main>
41+
<main className='container mx-auto px-4 sm:px-6 lg:px-12 flex-grow'>{children}</main>
4042
<Footer />
4143
</div>
4244
</Providers>

‎app/page.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,17 @@ const Home: FC = () => {
6565
return (
6666
<section className='h-full'>
6767
<Header onGenerate={handleOnGenerate} onReset={handleOnReset} />
68-
<div className='flex justify-center gap-6 h-[calc(100vh-12rem)]'>
69-
<CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
70-
<Result
71-
mockResult={mockResult?.current ?? ''}
72-
onCopyToClipboard={handleOnCopyToClipboard}
73-
onDownload={handleOnDownload}
74-
/>
68+
<div className='flex flex-col md:flex-row justify-center gap-6 h-full md:h-[calc(100vh-12rem)]'>
69+
<div className='w-full md:w-1/2'>
70+
<CodeEditor onCodeChange={handleOnCodeChange} initialCode={code} />
71+
</div>
72+
<div className='w-full md:w-1/2'>
73+
<Result
74+
mockResult={mockResult?.current ?? ''}
75+
onCopyToClipboard={handleOnCopyToClipboard}
76+
onDownload={handleOnDownload}
77+
/>
78+
</div>
7579
</div>
7680

7781
<InterfaceSelectModal

‎components/code-editor/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const CodeEditor: FC<Props> = ({ onCodeChange, initialCode }) => {
1818
);
1919

2020
return (
21-
<div className='bg-[#1E1E1E] rounded-lg w-1/2'>
21+
<div className='bg-[#1E1E1E] rounded-lg w-full h-[70vh] md:h-full'>
2222
<div className='py-2 h-full'>
2323
<Editor
2424
defaultLanguage='typescript'
@@ -27,7 +27,7 @@ const CodeEditor: FC<Props> = ({ onCodeChange, initialCode }) => {
2727
minimap: {
2828
enabled: false,
2929
},
30-
fontSize: 14,
30+
fontSize: 12, // Reduced font size for mobile
3131
}}
3232
loading={<Spinner size='sm' />}
3333
onChange={handleCodeChange}

‎components/header/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ type Props = {
88

99
const Header: FC<Props> = ({ onGenerate, onReset }) => {
1010
return (
11-
<div className='pb-6 text-center flex items-center justify-between'>
12-
<h1 className='tracking-tight inline font-semibold text-[2.3rem] lg:text-3xl'>
11+
<div className='pb-6 text-center flex flex-col sm:flex-row items-center justify-between px-4 sm:px-0'>
12+
<h1 className='tracking-tight inline font-semibold text-2xl sm:text-3xl mb-4 sm:mb-0'>
1313
Generate 𝔽𝕒𝕜𝕖 Data
1414
</h1>
1515
<div className='flex items-center gap-4'>
16-
<Button color='default' variant='shadow' onClick={onReset}>
16+
<Button color='default' variant='shadow' size='sm' onClick={onReset}>
1717
Reset ↻
1818
</Button>
19-
<Button color='primary' variant='shadow' onClick={onGenerate}>
19+
<Button color='primary' variant='shadow' size='sm' onClick={onGenerate}>
2020
Generate 🪄
2121
</Button>
2222
</div>

‎components/interface-select-modal/index.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,22 @@ const InterfaceSelectModal: FC<Props> = ({
3535
}) => {
3636
return (
3737
<>
38-
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
38+
<Modal
39+
isOpen={isOpen}
40+
onOpenChange={onOpenChange}
41+
size='xs' // Add responsive modal size
42+
className='max-w-[95%] sm:max-w-md' // Ensure modal fits mobile screens
43+
>
3944
<ModalContent>
4045
{(onClose): any => (
4146
<>
42-
<ModalHeader className='flex flex-col gap-1'>
47+
<ModalHeader className='flex flex-col gap-1 text-lg sm:text-xl'>
4348
Following 𝕀𝕟𝕥𝕖𝕣𝕗𝕒𝕔𝕖𝕤 Detected
4449
</ModalHeader>
4550
<ModalBody>
46-
<p>Please select the interfaces you want to generate mock data for.</p>
51+
<p className='text-sm'>
52+
Please select the interfaces you want to generate mock data for.
53+
</p>
4754
<InterfaceSelectContent
4855
detectedInterfaces={detectedInterfaces ?? []}
4956
numberOfRows={numberOfRows}
@@ -54,10 +61,10 @@ const InterfaceSelectModal: FC<Props> = ({
5461
/>
5562
</ModalBody>
5663
<ModalFooter>
57-
<Button color='danger' variant='bordered' onPress={onClose}>
64+
<Button color='danger' variant='bordered' size='sm' onPress={onClose}>
5865
Close
5966
</Button>
60-
<Button color='primary' onPress={onMockGenerate}>
67+
<Button color='primary' size='sm' onPress={onMockGenerate}>
6168
🪄 Generate
6269
</Button>
6370
</ModalFooter>

‎components/navbar/index.tsx‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
1-
import { FC } from 'react';
2-
import {
3-
Navbar as NextUINavbar,
4-
NavbarContent,
5-
NavbarMenu,
6-
NavbarMenuToggle,
7-
NavbarBrand,
8-
NavbarItem,
9-
} from '@nextui-org/navbar';
10-
import { Link } from '@nextui-org/link';
11-
import { siteConfig } from '@/config/site';
12-
import NextLink from 'next/link';
13-
import { ThemeSwitch } from '@/components/theme-switch';
141
import { GithubIcon } from '@/components/icons';
2+
import { ThemeSwitch } from '@/components/theme-switch';
3+
import { siteConfig } from '@/config/site';
4+
import { Link } from '@nextui-org/link';
5+
import { NavbarBrand, NavbarContent, NavbarItem, Navbar as NextUINavbar } from '@nextui-org/navbar';
156
import Image from 'next/image';
7+
import NextLink from 'next/link';
8+
import { FC } from 'react';
169
import logo from '../../public/logo.png';
1710

1811
export const Navbar: FC = () => {
@@ -41,12 +34,7 @@ export const Navbar: FC = () => {
4134
<GithubIcon className='text-default-500' />
4235
</Link>
4336
<ThemeSwitch />
44-
<NavbarMenuToggle />
4537
</NavbarContent>
46-
47-
<NavbarMenu>
48-
<div className='mx-4 mt-2 flex flex-col gap-2'></div>
49-
</NavbarMenu>
5038
</NextUINavbar>
5139
);
5240
};

‎components/result/index.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,23 @@ const Result: FC<Props> = ({ mockResult, onCopyToClipboard, onDownload }) => {
2020
}, []);
2121

2222
return (
23-
<div className='relative bg-[#1E1E1E] rounded-lg py-2 pl-8 pr-2 w-1/2'>
23+
<div className='relative bg-[#1E1E1E] rounded-lg py-2 pl-4 pr-2 w-full h-[70vh] md:h-full'>
2424
<div className='h-full overflow-auto'>
2525
{loading ? (
2626
<Spinner size='sm' className='w-full h-full' />
2727
) : (
28-
<pre className='text-[#ced4da]'>
29-
<code className='p-2 rounded-md shadow-sm text-sm font-mono'>{mockResult}</code>
28+
<pre className='text-[#ced4da] overflow-x-auto'>
29+
<code className='p-2 rounded-md shadow-sm text-xs sm:text-sm font-mono break-words'>
30+
{mockResult}
31+
</code>
3032
</pre>
3133
)}
3234
</div>
33-
<div className='absolute bottom-4 right-7'>
34-
<Button color='success' variant='shadow' className='mr-4' onClick={onDownload}>
35+
<div className='absolute bottom-4 right-4 flex flex-col sm:flex-row gap-2'>
36+
<Button color='success' variant='shadow' size='sm' className='sm:mr-4' onClick={onDownload}>
3537
Download
3638
</Button>
37-
<Button color='warning' variant='shadow' onClick={onCopyToClipboard}>
39+
<Button color='warning' variant='shadow' size='sm' onClick={onCopyToClipboard}>
3840
Copy to Clipboard
3941
</Button>
4042
</div>

0 commit comments

Comments
 (0)