Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9a6eeef

Browse files
lokesh-coderlokesh-coder
committed
fix: mobile device responsive styles
1 parent bf6f242 commit 9a6eeef

File tree

12 files changed

+172
-106
lines changed

12 files changed

+172
-106
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"license": "MIT",
6161
"scripts": {
6262
"build": "gatsby build",
63-
"develop": "gatsby develop",
63+
"develop": "gatsby develop -H 0.0.0.0",
6464
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
6565
"start": "npm run develop",
6666
"serve": "gatsby serve",

‎src/@chakra-ui/gatsby-plugin/theme.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ const theme = extendTheme({
1616
body: {
1717
bg: colorMode === 'dark' ? 'blue.800' : 'white',
1818
},
19+
'.chakra-modal__content-container': {
20+
p: { base: '2', lg: '0' },
21+
},
1922
'#blobSvg': {
2023
overflow: 'visible',
2124
},

‎src/components/Common/Input.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Input = ({ value, onEnter }) => (
1212
defaultValue={value}
1313
_focus={{ borderColor: 'primary', boxShadow: '0 0 0 1px #d7819b' }}
1414
onKeyDown={(e) => {
15-
if (e.code !== 'Enter') return;
15+
if (e.key !== 'Enter') return;
1616
if (!validateHex(e.target.value)) return;
1717
onEnter(e.target.value);
1818
}}

‎src/components/Common/Modal.js

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,26 @@ const Modal = ({ title, src, children, actions, size = '2xl' }) => {
3131
<ModalOverlay background="rgba(78,86,107,0.71)" />
3232
<ModalContent>
3333
<ModalHeader px="10">
34-
<Flex justify="space-between" align="center">
35-
<Heading fontSize="xl" variant="main">
36-
{title}
37-
</Heading>
38-
<Flex>
34+
<Flex align="center">
35+
<Flex
36+
direction={{ base: 'column', lg: 'row' }}
37+
align="center"
38+
justify={{ base: 'center', lg: 'space-between' }}
39+
flex="1"
40+
>
41+
<Heading fontSize="xl" variant="main">
42+
{title}
43+
</Heading>
3944
<Box>{actions}</Box>
40-
<Button
41-
onClick={onClose}
42-
variant="subtle"
43-
pos="relative"
44-
right="-20px"
45-
>
46-
<CloseIcon />
47-
</Button>
4845
</Flex>
46+
<Button
47+
onClick={onClose}
48+
variant="subtle"
49+
pos="relative"
50+
right="-20px"
51+
>
52+
<CloseIcon />
53+
</Button>
4954
</Flex>
5055
</ModalHeader>
5156
<Divider />

‎src/components/Common/Popover.js

Lines changed: 64 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -10,56 +10,71 @@ import {
1010
PopoverTrigger,
1111
Tooltip,
1212
} from '@chakra-ui/react';
13-
import React from 'react';
13+
import React, { useState } from 'react';
1414

15-
const Popover = ({ props, children, label, trigger }) => (
16-
<ChakPopover autoFocus={false} isLazy placement="top" arrowSize="0">
17-
<PopoverTrigger>
18-
<Box>
19-
{!!trigger && <Box>{trigger}</Box>}
20-
{!trigger && (
21-
<Box>
22-
<Tooltip
23-
label={label}
24-
aria-label={label}
25-
hasArrow
26-
variant="default"
27-
>
28-
<Box
29-
as="button"
30-
p="15px"
31-
_focus={{ outline: 0 }}
32-
_hover={{ boxShadow: 'xl' }}
33-
rounded="2xl"
34-
{...props}
35-
/>
36-
</Tooltip>
37-
</Box>
38-
)}
39-
</Box>
40-
</PopoverTrigger>
41-
<PopoverContent
42-
bg="gray.50"
43-
shadow="2xl"
44-
_dark={{ bg: 'gray.700' }}
45-
_focus={{ boxShadow: 'none', outline: 'none' }}
15+
const Popover = ({ props, children, label, trigger }) => {
16+
const [isOpen, setIsOpen] = useState(false);
17+
const open = () => setIsOpen(!isOpen);
18+
const close = () => setIsOpen(false);
19+
20+
return (
21+
<ChakPopover
22+
autoFocus={false}
23+
isLazy
24+
placement="top"
25+
arrowSize="0"
26+
isOpen={isOpen}
27+
onClose={close}
4628
>
47-
<PopoverArrow />
48-
<PopoverCloseButton mt="6px" />
49-
<PopoverHeader py="3">
50-
<Heading
51-
fontSize="md"
52-
letterSpacing="-0.9px"
53-
textAlign="center"
54-
fontWeight="700"
55-
variant="main"
56-
>
57-
{label}
58-
</Heading>
59-
</PopoverHeader>
60-
<PopoverBody p="0">{children}</PopoverBody>
61-
</PopoverContent>
62-
</ChakPopover>
63-
);
29+
<PopoverTrigger>
30+
<Box onClick={open}>
31+
{!!trigger && <Box>{trigger}</Box>}
32+
{!trigger && (
33+
<Box>
34+
<Tooltip
35+
label={label}
36+
aria-label={label}
37+
hasArrow
38+
variant="default"
39+
>
40+
<Box
41+
as="button"
42+
p="15px"
43+
_focus={{ outline: 0 }}
44+
_hover={{ boxShadow: 'xl' }}
45+
rounded="2xl"
46+
{...props}
47+
/>
48+
</Tooltip>
49+
</Box>
50+
)}
51+
</Box>
52+
</PopoverTrigger>
53+
<PopoverContent
54+
bg="gray.50"
55+
shadow="2xl"
56+
_dark={{ bg: 'gray.700' }}
57+
_focus={{ boxShadow: 'none', outline: 'none' }}
58+
>
59+
<PopoverArrow />
60+
<PopoverCloseButton mt="6px" />
61+
<PopoverHeader py="3">
62+
<Heading
63+
fontSize="md"
64+
letterSpacing="-0.9px"
65+
textAlign="center"
66+
fontWeight="700"
67+
variant="main"
68+
>
69+
{label}
70+
</Heading>
71+
</PopoverHeader>
72+
<PopoverBody p="0">
73+
{typeof children === 'function' ? children(close) : children}
74+
</PopoverBody>
75+
</PopoverContent>
76+
</ChakPopover>
77+
);
78+
};
6479

6580
export default Popover;

‎src/components/Common/UrlInput.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const UrlInput = ({ value, onEnter }) => {
1515
defaultValue={value}
1616
_focus={{ borderColor: 'primary', boxShadow: '0 0 0 1px #d7819b' }}
1717
onKeyDown={(e) => {
18-
if (e.code !== 'Enter') return;
18+
if (e.key !== 'Enter') return;
1919
const url = e.target.value;
2020
if (!urlRegex.test(url)) {
2121
setError('Invalid URL');

‎src/components/Settings/GradientColorsPicker.js

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable react/jsx-wrap-multilines */
12
import React from 'react';
23
import { Box, Divider, Flex } from '@chakra-ui/react';
34
import { dynamic } from '../../state';
@@ -38,23 +39,44 @@ const GradientColorsPicker = ({
3839
}
3940
/>
4041
);
42+
const Content = ({ close }) => (
43+
<Box>
44+
<Pallette
45+
onClick={(value) => {
46+
switchToGradientColors(value);
47+
close();
48+
}}
49+
colors={defaultColors}
50+
/>
51+
<Divider mb="4" />
52+
<Box p="3" pt="0">
53+
<Flex>
54+
<Input
55+
value={start}
56+
onEnter={(value) => {
57+
updateGradientStartColor(value);
58+
close();
59+
}}
60+
/>
61+
<Divider mx="2" orientation="vertical" />
62+
<Input
63+
value={end}
64+
onEnter={(value) => {
65+
updateGradientEndColor(value);
66+
close();
67+
}}
68+
/>
69+
</Flex>
70+
</Box>
71+
</Box>
72+
);
4173
return (
4274
<Popover
4375
props={{ bgGradient: `linear(to-b, ${start}, ${end})` }}
4476
label="Gradient colors"
4577
trigger={<Picker />}
4678
>
47-
<Box>
48-
<Pallette onClick={switchToGradientColors} colors={defaultColors} />
49-
<Divider mb="4" />
50-
<Box p="3" pt="0">
51-
<Flex>
52-
<Input value={start} onEnter={updateGradientStartColor} />
53-
<Divider mx="2" orientation="vertical" />
54-
<Input value={end} onEnter={updateGradientEndColor} />
55-
</Flex>
56-
</Box>
57-
</Box>
79+
{(close) => <Content close={close} />}
5880
</Popover>
5981
);
6082
};

‎src/components/Settings/ImageSetter.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import { Box } from '@chakra-ui/react';
2+
import { Box, Button } from '@chakra-ui/react';
33
import { dynamic } from '../../state';
44
import Popover from '../Common/Popover';
55
import UrlInput from '../Common/UrlInput';
66
import Ding from '../Common/Ding';
7-
import { ImageIcon, LandscapeIcon } from '../icons';
7+
import { ImageIcon, LandscapeIcon, RightArrowIcon } from '../icons';
88

99
const ImageSetter = ({ type, image, switchToImage }) => {
1010
const Picker = () => (
@@ -15,16 +15,20 @@ const ImageSetter = ({ type, image, switchToImage }) => {
1515
activeComp={<LandscapeIcon color="primary" />}
1616
/>
1717
);
18+
const Content = ({ close }) => (
19+
<Box p="3" textAlign="center">
20+
<UrlInput
21+
value={image}
22+
onEnter={(value) => {
23+
switchToImage(value);
24+
close();
25+
}}
26+
/>
27+
</Box>
28+
);
1829
return (
1930
<Popover props={{ bg: 'red' }} label="Set image" trigger={<Picker />}>
20-
<Box p="3">
21-
<UrlInput
22-
value={image}
23-
onEnter={(url) => {
24-
switchToImage(url);
25-
}}
26-
/>
27-
</Box>
31+
{(close) => <Content close={close} />}
2832
</Popover>
2933
);
3034
};

‎src/components/Settings/PatternSetter.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable react/jsx-wrap-multilines */
2-
import React, { useState } from 'react';
3-
import { Box, Text, useColorModeValue } from '@chakra-ui/react';
2+
import React from 'react';
3+
import { Box, useColorModeValue } from '@chakra-ui/react';
44
import { dynamic } from '../../state';
55
import Popover from '../Common/Popover';
66
import * as Patterns from '../../patterns';
@@ -63,18 +63,25 @@ const PatternSetter = ({ type, pattern, switchToPattern }) => {
6363
);
6464
};
6565

66+
const Content = ({ close }) => (
67+
<Box p="3">
68+
{Object.keys(Patterns).map((name) => (
69+
<PatternBox
70+
key={name}
71+
meta={Patterns[name]}
72+
clickHandler={(value) => {
73+
switchToPattern(value);
74+
close();
75+
}}
76+
isSelected={pattern === name}
77+
/>
78+
))}
79+
</Box>
80+
);
81+
6682
return (
6783
<Popover props={{ bg: 'red' }} label="Set pattern" trigger={<Picker />}>
68-
<Box p="3">
69-
{Object.keys(Patterns).map((name) => (
70-
<PatternBox
71-
key={name}
72-
meta={Patterns[name]}
73-
clickHandler={switchToPattern}
74-
isSelected={pattern === name}
75-
/>
76-
))}
77-
</Box>
84+
{(close) => <Content close={close} />}
7885
</Popover>
7986
);
8087
};

‎src/components/Settings/SolidColorPicker.js

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,30 @@ const SolidColorPicker = ({ type, color, switchToSolidColor }) => {
2121
<Ding
2222
label="Color"
2323
Icon={PaintIcon}
24-
isSelected={type == 'solid'}
24+
isSelected={type === 'solid'}
2525
activeComp={<Box p="4px" rounded="2xl" bg={color} w="1px" />}
2626
/>
2727
);
2828

29-
return (
30-
<Popover props={{ bg: color }} label="Choose a color" trigger={<Picker />}>
29+
const Content = ({ close }) => {
30+
const selectAndClose = (value) => {
31+
switchToSolidColor(value);
32+
close();
33+
};
34+
return (
3135
<Box>
32-
<Pallette onClick={switchToSolidColor} colors={defaultColors} />
36+
<Pallette onClick={selectAndClose} colors={defaultColors} />
3337
<Divider mb="4" />
3438
<Box p="3" pt="0">
35-
<Input value={color} onEnter={switchToSolidColor} />
39+
<Input value={color} onEnter={selectAndClose} />
3640
</Box>
3741
</Box>
42+
);
43+
};
44+
45+
return (
46+
<Popover props={{ bg: color }} label="Choose a color" trigger={<Picker />}>
47+
{(close) => <Content close={close} />}
3848
</Popover>
3949
);
4050
};

‎src/components/seo.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function SEO({ description, lang, meta, title }) {
5959
},
6060
{
6161
property: 'og:image',
62-
content: '/blobs_app_poster.png',
62+
content: 'https://blobs.app/blobs_app_poster.png',
6363
},
6464
{
6565
name: 'twitter:card',
@@ -83,7 +83,7 @@ function SEO({ description, lang, meta, title }) {
8383
},
8484
{
8585
name: 'twitter:image',
86-
content: '/blobs_app_poster.png',
86+
content: 'https://blobs.app/blobs_app_poster.png',
8787
},
8888
].concat(meta)}
8989
/>

0 commit comments

Comments
 (0)