Skip to content

Commit 51815d8

Browse files
velopertvelopert
committed
worked on mobile view for main route
1 parent 8af255b commit 51815d8

File tree

17 files changed

+15247
-13203
lines changed

17 files changed

+15247
-13203
lines changed

‎velog-frontend/src/components/landing/LandingTemplate/LandingTemplate.scss‎

Lines changed: 6 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@
103103
}
104104
}
105105
@include media("<medium") {
106+
padding-left: 1.25rem;
107+
padding-right: 1.25rem;
106108
.logo {
107109
font-size: 2.5rem;
108110
}
@@ -130,7 +132,7 @@
130132
color: $oc-gray-9;
131133
}
132134
}
133-
button+button {
135+
button + button {
134136
margin-left: 1rem;
135137
}
136138
}
@@ -142,7 +144,7 @@
142144
background: $oc-gray-1;
143145
@include media("<x-large") {
144146
align-items: flex-start;
145-
&>.wrapper {
147+
& > .wrapper {
146148
width: 100%;
147149
}
148150
}
@@ -179,108 +181,5 @@
179181
padding: 1rem;
180182
}
181183
}
182-
} // height: 100%;
183-
// display: flex;
184-
// .block {
185-
// display: flex;
186-
// @include media("<large") {
187-
// flex-direction: column;
188-
// }
189-
// }
190-
// .left-text {
191-
// flex: 1;
192-
// display: flex;
193-
// align-items: center;
194-
// h1 {
195-
// margin-top: 0;
196-
// font-size: 5rem;
197-
// margin-bottom: 2rem;
198-
// font-family: "Inconsolata", "monospace";
199-
// }
200-
// h2 {
201-
// font-size: 2.5rem;
202-
// font-weight: 500;
203-
// line-height: 1.2em;
204-
// @include media("<wide") {
205-
// font-size: 2.85rem;
206-
// }
207-
// @include media("<medium") {
208-
// font-size: 2rem;
209-
// }
210-
// }
211-
// p {
212-
// font-weight: 300;
213-
// font-size: 1.25rem;
214-
// @include media("<wide") {
215-
// font-size: 1rem;
216-
// }
217-
// @include media("<medium") {
218-
// font-size: 1.25rem;
219-
// br {
220-
// display: none;
221-
// }
222-
// }
223-
// }
224-
// }
225-
// .right {
226-
// display: flex;
227-
// align-items: center;
228-
// }
229-
// .right-form {
230-
// width: 480px;
231-
// margin-left: 2rem;
232-
// margin-top: 2rem;
233-
// @include media("<large") {
234-
// margin-left: 0;
235-
// width: 100%;
236-
// display: flex;
237-
// justify-content: center;
238-
// }
239-
// .black-box {
240-
// h2 {
241-
// margin: 0;
242-
// font-weight: 600;
243-
// }
244-
// @include media("<medium") {
245-
// display: none;
246-
// }
247-
// border-radius: 4px;
248-
// width: 100%;
249-
// background: $oc-gray-8;
250-
// color: white;
251-
// padding: 2rem;
252-
// @include material-shadow(3, 0.75);
253-
// @include media("<large") {
254-
// width: calc(100% - 2rem);
255-
// }
256-
// }
257-
// .register-button {
258-
// display: none;
259-
// @include media("<medium") {
260-
// display: flex;
261-
// }
262-
// width: 15rem;
263-
// background: $oc-gray-8;
264-
// color: white;
265-
// font-weight: 500;
266-
// padding-top: 1rem;
267-
// padding-bottom: 1rem;
268-
// justify-content: center;
269-
// font-size: 1.5rem;
270-
// border-radius: 4px;
271-
// transition: box-shadow .15s ease-in;
272-
// cursor: pointer;
273-
// border: 2px solid transparent;
274-
// user-select: none;
275-
// @include material-shadow(1, 1);
276-
// @include hover(){
277-
// @include material-shadow(3, 1);
278-
// }
279-
// &:active {
280-
// border: 2px solid $oc-gray-9;
281-
// background: white;
282-
// color: $oc-gray-9;
283-
// }
284-
// }
285-
// }
286-
}
184+
}
185+
}

‎velog-frontend/src/components/main/MainHead/MainHead.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { type Node } from 'react';
33
import Button from 'components/common/Button';
44
import type { UserData } from 'store/modules/user';
55
import MainHeadUserButton from 'components/main/MainHeadUserButton';
6+
import { Link } from 'react-router-dom';
67

78
import './MainHead.scss';
89

@@ -16,6 +17,9 @@ const MainHead = ({ logged, onLogin, rightArea }: Props) => (
1617
<div className="MainHead">
1718
<div className="button-area">{logged && <Button to="/write">새 포스트 작성</Button>}</div>
1819
<div className="spacer" />
20+
<Link to="/" className="mobile-logo">
21+
velog
22+
</Link>
1923
<div className="right-area">
2024
{rightArea || (
2125
<Button theme="outline" onClick={onLogin}>

‎velog-frontend/src/components/main/MainHead/MainHead.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,17 @@
44
padding: 1.75rem;
55
display: flex;
66
align-items: center;
7-
.button-area {
7+
.mobile-logo {
8+
@include media(">=large") {
9+
display: none;
10+
}
11+
font-family: "Inconsolata";
12+
color: $oc-gray-9;
13+
position: absolute;
14+
left: 50%;
15+
transform: translate(-50%);
16+
font-size: 2rem;
17+
font-weight: 500;
818
}
919
.spacer {
1020
flex: 1;
@@ -13,4 +23,8 @@
1323
display: flex;
1424
align-items: center;
1525
}
26+
@include media("<large") {
27+
background: white;
28+
padding-bottom: 0;
29+
}
1630
}

‎velog-frontend/src/components/main/MainMobileHead/MainMobileHead.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// @flow
2+
import React, { Component } from 'react';
3+
import TrendingIcon from 'react-icons/lib/md/trending-up';
4+
import RecentIcon from 'react-icons/lib/md/access-time';
5+
import TagIcon from 'react-icons/lib/md/label-outline';
6+
7+
import './MainMobileHead.scss';
8+
import MainMobileHeadItem from '../MainMobileHeadItem';
9+
10+
type Props = {
11+
url: string,
12+
};
13+
14+
class MainMobileHead extends Component<Props> {
15+
render() {
16+
const { url } = this.props;
17+
return (
18+
<div className="MainMobileHead">
19+
<MainMobileHeadItem
20+
active={['/', '/trending'].indexOf(url) > -1}
21+
to="/trending"
22+
name="트렌딩"
23+
icon={TrendingIcon}
24+
/>
25+
<MainMobileHeadItem
26+
active={url === '/recent'}
27+
to="/recent"
28+
name="최신 포스트"
29+
icon={RecentIcon}
30+
/>
31+
<MainMobileHeadItem active={/^\/tags/.test(url)} to="/tags" name="태그" icon={TagIcon} />
32+
</div>
33+
);
34+
}
35+
}
36+
37+
export default MainMobileHead;

‎velog-frontend/src/components/main/MainMobileHead/MainMobileHead.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "utils";
2+
3+
.MainMobileHead {
4+
background: white;
5+
box-shadow: 0 6px 12px 0px #d6dee41f;
6+
padding-top: 0.75rem;
7+
8+
display: flex;
9+
width: 100%;
10+
@include media(">=large") {
11+
display: none;
12+
}
13+
}

‎velog-frontend/src/components/main/MainMobileHead/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// @flow
2+
export { default } from './MainMobileHead';

‎velog-frontend/src/components/main/MainMobileHeadItem/MainMobileHeadItem.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// @flow
2+
import React, { type ComponentType } from 'react';
3+
import { Link } from 'react-router-dom';
4+
import cx from 'classnames';
5+
import './MainMobileHeadItem.scss';
6+
7+
type Props = {
8+
name: string,
9+
to: string,
10+
active: boolean,
11+
icon: ComponentType<any>,
12+
};
13+
14+
const MainMobileHeadItem = ({ to, name, icon, active }: Props) => {
15+
const iconElement = React.createElement(icon);
16+
return (
17+
<Link to={to} className={cx('MainMobileHeadItem', { active })}>
18+
<div className="icon-wrapper">{iconElement}</div>
19+
<div className="item-name">{name}</div>
20+
</Link>
21+
);
22+
};
23+
24+
export default MainMobileHeadItem;

‎velog-frontend/src/components/main/MainMobileHeadItem/MainMobileHeadItem.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "utils";
2+
3+
.MainMobileHeadItem {
4+
display: flex;
5+
flex: 1;
6+
align-items: center;
7+
justify-content: center;
8+
color: $oc-gray-7;
9+
padding-top: 1rem;
10+
padding-bottom: 1rem;
11+
.icon-wrapper {
12+
margin-right: 1rem;
13+
font-size: 1.5rem;
14+
}
15+
.item-name {
16+
font-size: 1.25rem;
17+
}
18+
border-bottom: 2px solid transparent;
19+
&.active {
20+
border-bottom: 2px solid $oc-violet-4;
21+
color: $oc-violet-5;
22+
font-weight: 600;
23+
}
24+
}

‎velog-frontend/src/components/main/MainMobileHeadItem/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// @flow
2+
export { default } from './MainMobileHeadItem';

‎velog-frontend/src/components/main/MainSidebar/MainSidebar.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
@include media("<x-wide") {
66
width: 15rem;
77
}
8+
@include media("<large") {
9+
transform: translate(-100%);
10+
}
811
background: white;
912
height: 100%;
1013
top: 0;
@@ -23,4 +26,4 @@
2326
list-style: none;
2427
padding-left: 0;
2528
}
26-
}
29+
}

0 commit comments

Comments
 (0)