diff options
author | 2018-12-07 12:47:16 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 85f38801a34825be69fec27ae523537fbc72f1d6 (patch) | |
tree | b7f68862496a5f556d83ff3356b7122a773dccda /vnext/src/components | |
parent | 675d8e64c891950189c477d30949ee9b4e160eb8 (diff) |
mobile navigation
Diffstat (limited to 'vnext/src/components')
-rw-r--r-- | vnext/src/components/Avatar.js | 4 | ||||
-rw-r--r-- | vnext/src/components/Feeds.js | 4 | ||||
-rw-r--r-- | vnext/src/components/Header.js | 5 | ||||
-rw-r--r-- | vnext/src/components/NavigationIcon.css | 3 | ||||
-rw-r--r-- | vnext/src/components/NavigationIcon.js | 19 | ||||
-rw-r--r-- | vnext/src/components/Post.js | 4 | ||||
-rw-r--r-- | vnext/src/components/UserInfo.js | 4 |
7 files changed, 34 insertions, 9 deletions
diff --git a/vnext/src/components/Avatar.js b/vnext/src/components/Avatar.js index dfa197c1..9cb03267 100644 --- a/vnext/src/components/Avatar.js +++ b/vnext/src/components/Avatar.js @@ -6,13 +6,13 @@ import { UserType } from './Types'; const Avatar = React.memo(props => { return ( - <div style={{ display: 'flex' }}> + <div style={{ display: 'flex', padding: '12px' }}> <div className="msg-avatar"> <Link to={{ pathname: props.link || `/${props.user.uname}/` }}> <img src={props.user.avatar} alt={`${props.user.uname}`} /> </Link> </div> - <div style={{ display: 'flex', flexDirection: 'column' }}> + <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}> <span> <Link to={{ pathname: `/${props.user.uname}/` }}> <span>{props.user.uname}</span> diff --git a/vnext/src/components/Feeds.js b/vnext/src/components/Feeds.js index be9a1573..e8558084 100644 --- a/vnext/src/components/Feeds.js +++ b/vnext/src/components/Feeds.js @@ -42,7 +42,9 @@ export function Blog(props) { }; return ( <> - <UserInfo user={user} /> + <div className="msg-cont"> + <UserInfo user={user} /> + </div> <Feed authRequired={false} query={query} {...props} /> </> ); diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js index 43b4a676..8bf4bc8d 100644 --- a/vnext/src/components/Header.js +++ b/vnext/src/components/Header.js @@ -66,10 +66,11 @@ export default class Header extends React.Component { this.wScrollBefore = this.wScrollCurrent; } render() { - return (<header id="header" ref={this.header}>{this.props.children}</header>); + return (<header id="header" ref={this.header} style={this.props.style}>{this.props.children}</header>); } } Header.propTypes = { - children: PropTypes.node + children: PropTypes.node, + style: PropTypes.style }; diff --git a/vnext/src/components/NavigationIcon.css b/vnext/src/components/NavigationIcon.css new file mode 100644 index 00000000..bc5f5ac9 --- /dev/null +++ b/vnext/src/components/NavigationIcon.css @@ -0,0 +1,3 @@ +#navicon { + padding: 12px; +}
\ No newline at end of file diff --git a/vnext/src/components/NavigationIcon.js b/vnext/src/components/NavigationIcon.js new file mode 100644 index 00000000..5c5415ef --- /dev/null +++ b/vnext/src/components/NavigationIcon.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Icon from './Icon'; + +import './NavigationIcon.css'; + +export default function NavigationIcon(props) { + return ( + <div id="navicon" className="mobile" onClick={props.onToggle}> + <Icon name="ei-navicon" size="s"/> + </div> + ); +} + +NavigationIcon.propTypes = { + onToggle: PropTypes.func.isRequired +}; + diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js index ce64018a..1776fe78 100644 --- a/vnext/src/components/Post.js +++ b/vnext/src/components/Post.js @@ -42,11 +42,11 @@ export default class Post extends React.Component { render() { return ( <div className="msgs"> - <article className="msg-cont"> + <div className="msg-cont"> <MessageInput rows="7" text={this.state.body} data={{ mid: 0, timestamp: '0' }} onSend={this.postMessage}> *weather It is very cold today! </MessageInput> - </article> + </div> </div> ); } diff --git a/vnext/src/components/UserInfo.js b/vnext/src/components/UserInfo.js index bd9cbc5f..7b4ae2ee 100644 --- a/vnext/src/components/UserInfo.js +++ b/vnext/src/components/UserInfo.js @@ -27,7 +27,7 @@ export default class UserInfo extends React.Component { render() { const { user } = this.state; return ( - <div className="msg-cont"> + <> <Avatar user={user}> <div className="msg-ts">Was online recently</div> </Avatar> @@ -78,7 +78,7 @@ export default class UserInfo extends React.Component { </> } </div> - </div> + </> ); } } |