diff options
author | 2018-12-07 12:47:16 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 85f38801a34825be69fec27ae523537fbc72f1d6 (patch) | |
tree | b7f68862496a5f556d83ff3356b7122a773dccda /vnext | |
parent | 675d8e64c891950189c477d30949ee9b4e160eb8 (diff) |
mobile navigation
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/App.js | 32 | ||||
-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 | ||||
-rw-r--r-- | vnext/src/style/main.css | 19 |
9 files changed, 66 insertions, 28 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 3a825770..0764281a 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -11,9 +11,10 @@ import Chat from './components/Chat'; import Post from './components/Post'; import Thread from './components/Thread'; import LoginButton from './components/LoginButton'; -import { AvatarLink } from './components/Avatar'; +import Avatar from './components/Avatar'; import Header from './components/Header'; import SearchBox from './components/SearchBox'; +import NavigationIcon from './components/NavigationIcon'; import cookies from 'react-cookies'; @@ -31,10 +32,12 @@ export default class App extends React.Component { visitor: { uid: Number(cookies.load('_juick_uid')), hash: cookies.load('hash') - } + }, + appMarginLeft: 'inherit' }; this.pm = React.createRef(); this.thread = React.createRef(); + this.sidebar = React.createRef(); } initES = () => { @@ -85,20 +88,22 @@ export default class App extends React.Component { location.search = `?search=${searchString}`; history.push(location); } + toggleSidebar = () => { + let width = this.sidebar.current.style.width; + this.sidebar.current.style.width = width === '248px' ? '0' : '248px'; + this.setState({ + appMarginLeft: this.state.appMarginLeft === 'inherit' ? '250px' : 'inherit' + }); + } render() { const user = this.state.visitor; return ( <Router> <> - <Header> + <Header style={{ marginLeft: this.state.appMarginLeft }}> <div id="header_wrapper"> - {user.uid > 0 ? - <div id="ctitle"> - {user.uname ? <AvatarLink user={user} /> : <Icon name="ei-spinner" size="m" />} - </div> - : - <div id="logo"><Link to="/">Juick</Link></div> - } + <NavigationIcon onToggle={this.toggleSidebar} /> + <div id="logo" className="desktop"><Link to="/">Juick</Link></div> <div id="search" className="desktop"> <SearchBox pathname="/discover" onSearch={this.search} {...this.props} /> </div> @@ -133,7 +138,7 @@ export default class App extends React.Component { </nav> </div> </Header> - <div id="wrapper"> + <div id="wrapper" style={{ marginLeft: this.state.appMarginLeft }}> <section id="content"> <Switch> <Route exact path="/" render={(props) => <Discussions visitor={user} {...props} />} /> @@ -154,7 +159,8 @@ export default class App extends React.Component { <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} /> </Switch> </section> - <aside id="sidebar"> + <aside id="sidebar" ref={this.sidebar}> + <Avatar user={user} /> <Link to="/?show=my"> <Icon name="ei-clock" size="s" /> <span className="desktop">My feed</span> @@ -173,7 +179,7 @@ export default class App extends React.Component { </Link> </aside> </div> - <div id="footer"> + <div id="footer" style={{ marginLeft: this.state.appMarginLeft }}> <div id="footer-right"> · <a href="/help/contacts" rel="nofollow">Contacts</a> · <a href="/help/tos" rel="nofollow">TOS</a> 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> + </> ); } } diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 20ff7978..69e638f6 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -45,7 +45,7 @@ img, hr { display: grid; grid-template-areas: "header" "content" "footer"; grid-template-columns: 1fr; - grid-template-rows: minmax(1fr, auto) minmax(1fr, auto) auto; + grid-template-rows: min-content minmax(1fr, min-content) min-content; min-height: 100vh; font: -apple-system-body; font-family: -apple-system, Segoe UI; @@ -56,6 +56,8 @@ img, hr { grid-area: header; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); + transition: margin-left 0.4s; + overflow-x: hidden; } #header_wrapper, .footer_container { display: flex; @@ -64,14 +66,15 @@ img, hr { flex-wrap: wrap; } #sidebar { - border-right: 1px solid #ccc; color: #222; transition: width 0.4s; position: fixed; width: 0; top: 0; left: 0; + margin-right: 2px; overflow-x: hidden; + overflow-y: auto; height: 100%; z-index: 1; display: flex; @@ -87,7 +90,9 @@ img, hr { grid-area: content; height: 100%; width: 100%; - margin-top: 12px; + margin-top: 12px; + overflow-x: hidden; + transition: margin-left 0.4s; } #footer { @@ -96,6 +101,8 @@ img, hr { border-top: 1px solid #ccc; color: #222; padding: 10px; + transition: margin-left 0.4s; + overflow-x: hidden; } .desktop { @@ -127,7 +134,7 @@ img, hr { display: flex; } -#ctitle img { +#ctitle:first-child { margin-right: 5px; vertical-align: middle; max-width: 48px; @@ -150,7 +157,7 @@ img, hr { padding: 14px 16px; } -#sidebar a { +#sidebar > a { color: #88958d; border-right: 2px solid transparent; display: flex; @@ -158,7 +165,7 @@ img, hr { align-items: center; vertical-align: middle; } -#sidebar a:hover { +#sidebar > a:hover { background-color: #f8f8f8; border-right: 2px solid #ff339a; cursor: pointer; |