Browse Source

Merge fixes, Add sticky navBar, Fix various views

develop
Apostolos Fanakis 7 years ago
parent
commit
8e4162c010
  1. 19
      src/assets/css/App.css
  2. 36
      src/components/NavBar.js
  3. 68
      src/components/NewPost.js
  4. 26
      src/components/Post.js
  5. 2
      src/components/Topic.js
  6. 2
      src/containers/ProfileContainer.js
  7. 3
      src/containers/TopicContainer.js

19
src/assets/css/App.css

@ -23,7 +23,7 @@ strong {
}
.view-container {
width: 70%;
width: 60%;
margin: 10px auto;
}
@ -77,6 +77,13 @@ strong {
background: #0c1a2b;
}
.stick {
z-index: 2;
position: fixed;
top: 0;
width: 100%;
}
/* TOPICS */
.topic {
@ -142,6 +149,12 @@ strong {
margin-right: 11.25px;
}
.user-avatar {
width: 52px;
height: 52px;
text-align: center;
}
.stretch-space-between {
display: flex;
flex-flow: row nowrap;
@ -190,6 +203,10 @@ a {
text-decoration: none;
}
.post-content a{
color: #039be5;
}
.center-in-parent {
width: 100%;
height: 100%;

36
src/components/NavBar.js

@ -1,17 +1,25 @@
import React from 'react';
import React, { Component } from 'react';
import { drizzleConnect } from 'drizzle-react';
import { Link } from 'react-router';
const NavBar = (props) => {
class NavBar extends Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.navRef = React.createRef();
}
render() {
return (
<nav>
<nav ref={this.navRef}>
<div className="nav-wrapper navColor">
{/*<a href="#" className="brand-logo right">Logo</a>*/}
<ul id="nav-mobile" className="left hide-on-med-and-down">
<li>
<Link to="/">Home</Link>
</li>
{props.hasSignedUp &&
{this.props.hasSignedUp &&
<li>
<Link to="/profile">Profile</Link>
</li>
@ -20,6 +28,24 @@ const NavBar = (props) => {
</div>
</nav>
);
}
componentDidMount(){
this.headerHeight = this.navRef.current.offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount(){
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll(){
if (window.pageYOffset >= this.headerHeight) {
this.navRef.current.classList.add("stick")
} else {
this.navRef.current.classList.remove("stick");
}
}
};
const mapStateToProps = state => {

68
src/components/NewPost.js

@ -3,6 +3,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import uuidv4 from 'uuid/v4';
import TimeAgo from 'react-timeago';
import UserAvatar from 'react-user-avatar';
import ReactMarkdown from 'react-markdown';
@ -18,6 +19,9 @@ class NewPost extends Component {
this.validateAndPost = this.validateAndPost.bind(this);
this.pushToDatabase = this.pushToDatabase.bind(this);
this.newPostOuterRef = React.createRef();
this.subjectInputRef = React.createRef();
this.transactionProgressText = [];
this.drizzle = context.drizzle;
@ -84,7 +88,7 @@ class NewPost extends Component {
render() {
return (
<div className="post card">
<div className="post" ref={this.newPostOuterRef}>
{this.state.creatingPost && <div id="overlay">
<div id="overlay-content">
<p><i className="fas fa-spinner fa-3x fa-spin"></i></p>
@ -93,25 +97,37 @@ class NewPost extends Component {
</div>
</div>
}
<div className="post-header">
<div className="row">
<div className="col s1">
<UserAvatar
size="40"
className="inline user-avatar"
src={this.props.user.avatarUrl}
name={this.props.user.username}/>
<p className="inline no-margin">
<strong>{this.props.user.username}<br/>Subject: {this.state.postSubjectInput}</strong>
</p>
<div className="post-info">
<span></span>
<span>#{this.props.postIndex}</span>
src={this.props.avatarUrl}
name={this.props.user.username}
/>
</div>
<div className="col s11">
<div>
<div className="stretch-space-between">
<strong><span>{this.props.user.username}</span></strong>
<span className="grey-text text-darken-2">
{this.state.previewEnabled &&
<TimeAgo date={this.state.previewDate}/>
}{this.state.previewEnabled && ","} #{this.props.postIndex}
</span>
</div>
<div className="stretch-space-between">
<strong><span>
{this.state.previewEnabled &&
("Subject: " + this.state.postSubjectInput)
}
</span></strong>
</div>
<hr/>
<div className="post-content">
<div>
<form className="topic-form">
{this.state.previewEnabled
? <ReactMarkdown source={this.state.postContentInput} className="markdownPreview" />
? <ReactMarkdown source={this.state.postContentInput}
className="markdownPreview" />
: [
<input key={"postSubjectInput"}
name={"postSubjectInput"}
@ -120,6 +136,7 @@ class NewPost extends Component {
value={this.state.postSubjectInput}
placeholder="Subject"
id="postSubjectInput"
ref={this.subjectInputRef}
onChange={this.handleInputChange} />,
<textarea key={"postContentInput"}
name={"postContentInput"}
@ -129,23 +146,28 @@ class NewPost extends Component {
onChange={this.handleInputChange} />
]}
<button key="submit"
className="btn waves-effect waves-teal white black-text"
type="button"
onClick={this.validateAndPost}>
Post
<i className="material-icons right">send</i>Post
</button>
<button className="margin-left-small"
<button className="waves-effect waves-orange btn white black-text margin-left-small"
type="button"
onClick={this.handlePreviewToggle}>
{this.state.previewEnabled ? "Edit" : "Preview"}
<span>{this.state.previewEnabled ? "Edit" : "Preview"}</span>
</button>
<button className="margin-left-small"
<button className="btn red margin-left-small"
type="button"
onClick={this.props.onCancelClick}>
Cancel
<span>Cancel</span>
</button>
</form>
</div>
</div>
</div>
</div>
<div className="divider"></div>
</div>
);
}
@ -298,6 +320,16 @@ class NewPost extends Component {
}
}
}
componentDidUpdate(prevProps, prevState){
if (!this.state.previewEnabled && prevState.previewEnabled){
this.newPostOuterRef.current.scrollIntoView(true);
}
}
componentDidMount(){
this.newPostOuterRef.current.scrollIntoView(true);
}
}
NewPost.contextTypes = {

26
src/components/Post.js

@ -4,7 +4,7 @@ import { drizzleConnect } from 'drizzle-react';
import PropTypes from 'prop-types';
import TimeAgo from 'react-timeago';
import epochTimeConverter from '../helpers/EpochTimeConverter'
import epochTimeConverter from '../helpers/EpochTimeConverter';
import UserAvatar from 'react-user-avatar';
import ReactMarkdown from 'react-markdown';
@ -34,20 +34,17 @@ class Post extends Component {
render(){
let avatarView = (this.props.blockchainData[0].returnData
? <UserAvatar
size="40"
className="inline user-avatar"
size="52"
className="inline"
src={this.props.avatarUrl}
name={this.props.blockchainData[0].returnData[2]}/>
: <div className="user-avatar" style={{width: "40px"}}></div>
: <div></div>
);
return (
<div className="post"
onClick={() => { this.context.router.push("/topic/"
+ this.props.blockchainData[0].returnData[4] + "/"
+ this.props.postID)}}>
<div className="post">
<div className="row">
<div className="col s1">
<div className="col s1 user-avatar">
{this.props.blockchainData[0].returnData !== null
?<Link to={"/profile/" + this.props.blockchainData[0].returnData[1]
+ "/" + this.props.blockchainData[0].returnData[2]}
@ -60,7 +57,7 @@ class Post extends Component {
<div className="col s11">
<div>
<div className="stretch-space-between">
<strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}}>
<strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}>
{this.props.blockchainData[0].returnData !== null
?this.props.blockchainData[0].returnData[2]
:"Username"
@ -69,7 +66,7 @@ class Post extends Component {
<span className="grey-text text-darken-2">
{this.props.blockchainData[0].returnData !== null &&
<TimeAgo date={epochTimeConverter(this.props.blockchainData[0].returnData[3])}/>
}, #{this.props.postIndex}
}{this.props.blockchainData[0].returnData !== null && ","} #{this.props.postIndex}
</span>
</div>
<div className="stretch-space-between">
@ -77,7 +74,7 @@ class Post extends Component {
Subject: {this.orbitPostData.subject}
</span></strong>
</div>
<div>
<div className="post-content">
{this.orbitPostData.content
? <ReactMarkdown source={this.orbitPostData.content} />
: <p className="grey-text">Post content...</p>
@ -95,7 +92,10 @@ class Post extends Component {
<i className="material-icons waves-effect waves-teal circle">
keyboard_arrow_down
</i>
<i className="material-icons waves-effect waves-teal circle" onClick={props.onHrefClick}>
<i className="material-icons waves-effect waves-teal circle"
onClick={() => { this.context.router.push("/topic/"
+ this.props.blockchainData[0].returnData[4] + "/"
+ this.props.postID)}}>
link
</i>
</div>

2
src/components/Topic.js

@ -45,7 +45,7 @@ class Topic extends Component {
<div className="card-content">
<div className={"topic-subject" + (this.topicSubject ? "" : "grey-text")}>
<p>
{topic.topicSubject !== null ? topic.topicSubject : "Subject"}
{this.topicSubject !== null ? this.topicSubject : "Subject"}
</p>
</div>
<hr/>

2
src/containers/ProfileContainer.js

@ -26,7 +26,7 @@ class Profile extends Component {
this.state = {
viewSelected: "profile-info-tab",
userAddress: this.profile.userAddress
userAddress: this.props.params.address ? this.props.params.address : this.props.user.address
};
}

3
src/containers/TopicContainer.js

@ -66,14 +66,15 @@ class Topic extends Component {
} else {
topicContents = (
(<div style={{marginBottom: '100px'}}>
{this.postList}
{this.state.posting &&
<NewPost topicID={this.state.topicID}
subject={this.state.topicSubject}
postIndex={this.props.blockchainData[0].returnData[4].length}
onCancelClick={() => {this.handleClick()}}
onPostCreated={() => {this.postCreated()}}
/>
}
{this.postList}
{!this.state.posting &&
<FloatingButton onClick={this.handleClick}/>
}

Loading…
Cancel
Save