aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/App.js32
-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
-rw-r--r--vnext/src/style/main.css19
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"> &middot;
<a href="/help/contacts" rel="nofollow">Contacts</a> &middot;
<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;
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-24 04:35:14 +0000