aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-12-07 12:47:16 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit85f38801a34825be69fec27ae523537fbc72f1d6 (patch)
treeb7f68862496a5f556d83ff3356b7122a773dccda /vnext/src/components
parent675d8e64c891950189c477d30949ee9b4e160eb8 (diff)
mobile navigation
Diffstat (limited to 'vnext/src/components')
-rw-r--r--vnext/src/components/Avatar.js4
-rw-r--r--vnext/src/components/Feeds.js4
-rw-r--r--vnext/src/components/Header.js5
-rw-r--r--vnext/src/components/NavigationIcon.css3
-rw-r--r--vnext/src/components/NavigationIcon.js19
-rw-r--r--vnext/src/components/Post.js4
-rw-r--r--vnext/src/components/UserInfo.js4
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>
+ </>
);
}
}