Skip to content

Commit 8b6fc28

Browse files
velopertvelopert
committed
Basic layout for mobile write
1 parent a08220d commit 8b6fc28

File tree

4 files changed

+145
-69
lines changed

4 files changed

+145
-69
lines changed

‎src/components/write/TagInput.tsx

Lines changed: 104 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,8 @@ import * as React from 'react';
22
import styled, { css } from 'styled-components';
33
import palette from '../../lib/styles/palette';
44
import transitions from '../../lib/styles/transitions';
5-
6-
const TagInputBlock = styled.div`
7-
color: ${palette.gray8};
8-
font-size: 1.125rem;
9-
margin-bottom: 4rem;
10-
display: flex;
11-
flex-wrap: wrap;
12-
[contenteditable='true']:empty:before {
13-
content: attr(placeholder);
14-
display: block; /* For Firefox */
15-
color: ${palette.gray5};
16-
}
17-
`;
18-
const StyledInput = styled.input`
19-
display: inline-flex;
20-
outline: none;
21-
cursor: text;
22-
font-size: 1.125rem;
23-
line-height: 2rem;
24-
margin-bottom: 0.75rem;
25-
min-width: 8rem;
26-
border: none;
27-
`;
28-
29-
const Tag = styled.div`
30-
color: ${palette.gray9};
31-
font-size: 1rem;
32-
display: inline-flex;
33-
align-items: center;
34-
height: 2rem;
35-
border-radius: 1rem;
36-
padding-left: 1rem;
37-
padding-right: 1rem;
38-
background: ${palette.gray1};
39-
color: ${palette.teal7};
40-
margin-right: 0.75rem;
41-
transition: ease-in 0.125s;
42-
cursor: pointer;
43-
&:hover {
44-
opacity: 0.6;
45-
}
46-
margin-bottom: 0.75rem;
47-
animation: ${transitions.popIn} 0.125s forwards ease-in-out;
48-
`;
5+
import media, { mediaQuery } from '../../lib/styles/media';
6+
import { useTransition, animated } from 'react-spring';
497

508
export interface TagInputProps {
519
ref?: React.RefObject<HTMLDivElement>;
@@ -59,24 +17,6 @@ const TagItem: React.FC<{
5917
return <Tag onClick={onClick}>{children}</Tag>;
6018
};
6119

62-
const Help = styled.div<{ visible: boolean }>`
63-
display: block;
64-
width: 100%;
65-
font-size: 0.875rem;
66-
color: ${palette.gray7};
67-
transition: ease-in 0.125s;
68-
opacity: 0;
69-
& > .inside {
70-
margin-top: 0.5rem;
71-
position: absolute;
72-
}
73-
${props =>
74-
props.visible &&
75-
css`
76-
opacity: 1;
77-
`}
78-
`;
79-
8020
const { useState, useCallback, useEffect, useRef } = React;
8121
const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
8222
const [tags, setTags] = useState<string[]>(initialTags);
@@ -170,15 +110,110 @@ const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
170110
onFocus={() => setFocus(true)}
171111
onBlur={() => setFocus(false)}
172112
/>
173-
<Help visible={focus}>
174-
<div className="inside">
175-
쉼표 혹은 엔터를 입력하여 태그를 등록 할 수 있습니다.
176-
<br />
177-
등록된 태그를 클릭하면 삭제됩니다.
178-
</div>
179-
</Help>
113+
<Help focus={focus} />
180114
</TagInputBlock>
181115
);
182116
};
183117

118+
function Help({ focus }: { focus: boolean }) {
119+
const transitions = useTransition(focus, null, {
120+
from: { opacity: 0, transform: 'translateY(-1rem)' },
121+
enter: { opacity: 1, transform: 'translateY(0rem)' },
122+
leave: { opacity: 0, transform: 'translateY(-1rem)' },
123+
config: {
124+
tension: 350,
125+
friction: 22,
126+
},
127+
});
128+
129+
return (
130+
<HelpBlock>
131+
{transitions.map(({ item, key, props }) =>
132+
item ? (
133+
<animated.div className="inside" style={props} key={key}>
134+
쉼표 혹은 엔터를 입력하여 태그를 등록 할 수 있습니다.
135+
<br />
136+
등록된 태그를 클릭하면 삭제됩니다.
137+
</animated.div>
138+
) : null,
139+
)}
140+
</HelpBlock>
141+
);
142+
}
143+
144+
const HelpBlock = styled.div`
145+
display: block;
146+
width: 100%;
147+
148+
color: ${palette.gray7};
149+
transition: ease-in 0.125s;
150+
151+
& > .inside {
152+
position: absolute;
153+
background: ${palette.gray8};
154+
color: white;
155+
padding: 0.75rem;
156+
z-index: 20;
157+
line-height: 1.5;
158+
font-size: 0.75rem;
159+
}
160+
`;
161+
162+
const TagInputBlock = styled.div`
163+
color: ${palette.gray8};
164+
font-size: 1.125rem;
165+
166+
display: flex;
167+
flex-wrap: wrap;
168+
[contenteditable='true']:empty:before {
169+
content: attr(placeholder);
170+
display: block; /* For Firefox */
171+
color: ${palette.gray5};
172+
}
173+
`;
174+
const StyledInput = styled.input`
175+
display: inline-flex;
176+
outline: none;
177+
cursor: text;
178+
font-size: 1.125rem;
179+
line-height: 2rem;
180+
${mediaQuery(767)} {
181+
line-height: 1.5rem;
182+
font-size: 0.75rem;
183+
}
184+
margin-bottom: 0.75rem;
185+
min-width: 8rem;
186+
border: none;
187+
`;
188+
189+
const Tag = styled.div`
190+
color: ${palette.gray9};
191+
font-size: 1rem;
192+
display: inline-flex;
193+
align-items: center;
194+
height: 2rem;
195+
border-radius: 1rem;
196+
padding-left: 1rem;
197+
padding-right: 1rem;
198+
background: ${palette.gray1};
199+
color: ${palette.teal7};
200+
margin-right: 0.75rem;
201+
transition: ease-in 0.125s;
202+
cursor: pointer;
203+
&:hover {
204+
opacity: 0.6;
205+
}
206+
margin-bottom: 0.75rem;
207+
animation: ${transitions.popIn} 0.125s forwards ease-in-out;
208+
${mediaQuery(767)} {
209+
height: 1.5rem;
210+
font-size: 0.75rem;
211+
border-radius: 0.75rem;
212+
padding-left: 0.75rem;
213+
padding-right: 0.75rem;
214+
margin-right: 0.5rem;
215+
margin-bottom: 0.5rem;
216+
}
217+
`;
218+
184219
export default TagInput;

‎src/components/write/TitleTextarea.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import styled, { css } from 'styled-components';
22
import TextareaAutosize from 'react-textarea-autosize';
33
import palette from '../../lib/styles/palette';
4+
import { mediaQuery } from '../../lib/styles/media';
45

56
const style = css`
67
display: block;
78
padding: 0;
89
font-size: 2.75rem;
10+
${mediaQuery(767)} {
11+
font-size: 1.8rem;
12+
}
913
width: 100%;
1014
resize: none;
1115
line-height: 1.5;

‎src/components/write/Toolbar.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from 'react-icons/md';
1313
import palette from '../../lib/styles/palette';
1414
import zIndexes from '../../lib/styles/zIndexes';
15+
import { mediaQuery } from '../../lib/styles/media';
1516

1617
// box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.09);
1718
const ToolbarBlock = styled.div<{
@@ -35,6 +36,13 @@ const ToolbarBlock = styled.div<{
3536
margin-bottom: 1rem;
3637
padding-left: 3rem;
3738
padding-right: 3rem;
39+
40+
${mediaQuery(767)} {
41+
padding-left: 1rem;
42+
padding-right: 1rem;
43+
flex-wrap: unset;
44+
overflow-x: auto;
45+
}
3846
width: auto;
3947
`}
4048
@@ -44,6 +52,16 @@ const ToolbarBlock = styled.div<{
4452
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.09);
4553
margin-bottom: 0;
4654
`}
55+
56+
.mobile-placeholder {
57+
display: none;
58+
${mediaQuery(767)} {
59+
display: block;
60+
}
61+
height: 1px;
62+
width: 1rem;
63+
flex-shrink: 0;
64+
}
4765
`;
4866

4967
const ToolbarGroup = styled.div`
@@ -68,6 +86,13 @@ const ToolbarItem = styled.button`
6886
font-size: 1.75rem;
6987
color: ${palette.gray6};
7088
cursor: pointer;
89+
flex-shrink: 0;
90+
91+
${mediaQuery(767)} {
92+
width: 2.5rem;
93+
height: 2.5rem;
94+
font-size: 1.45rem;
95+
}
7196
&:hover {
7297
color: ${palette.gray9};
7398
background: ${palette.gray0};
@@ -182,6 +207,7 @@ const Toolbar: React.FC<ToolbarProps> = ({
182207
>
183208
<MdCode />
184209
</ToolbarItem>
210+
<div className="mobile-placeholder"></div>
185211
{/* <Separator /> */}
186212
{/* <ToolbarGroup> */}
187213
{/* forMarkdown ? (

‎src/components/write/WriteMarkdownEditor.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import AskChangeEditor from './AskChangeEditor';
1313
import { WriteMode } from '../../modules/write';
1414
import zIndexes from '../../lib/styles/zIndexes';
1515
import { useSpring, animated } from 'react-spring';
16+
import media, { mediaQuery } from '../../lib/styles/media';
1617
require('codemirror/mode/markdown/markdown');
1718
require('codemirror/mode/javascript/javascript');
1819
require('codemirror/mode/jsx/jsx');
@@ -81,6 +82,9 @@ const MarkdownEditorBlock = styled.div`
8182
.CodeMirror pre.CodeMirror-line,
8283
.CodeMirror pre.CodeMirror-line-like {
8384
padding: 0 3rem; /* Horizontal padding of content */
85+
${mediaQuery(767)} {
86+
padding: 0 1rem;
87+
}
8488
}
8589
8690
.CodeMirror {
@@ -126,13 +130,20 @@ const HorizontalBar = styled.div`
126130
width: 4rem;
127131
margin-top: 1.5rem;
128132
margin-bottom: 1rem;
133+
${mediaQuery(767)} {
134+
margin-top: 1rem;
135+
margin-bottom: 0.66rem;
136+
}
129137
border-radius: 1px;
130138
`;
131139

132140
const PaddingWrapper = styled.div`
133141
padding-top: 2rem;
134142
padding-left: 3rem;
135143
padding-right: 3rem;
144+
${mediaQuery(767)} {
145+
padding: 1rem;
146+
}
136147
`;
137148

138149
const MarkdownWrapper = styled.div`

0 commit comments

Comments
 (0)