ECEntrics
/
concordia
mirror of https://gitlab.com/ecentrics/concordia
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge fixes, Add sticky navBar, Fix various views

develop
Apostolos Fanakis 7 years ago
parent
8c6d37585e
commit
8e4162c010
7 changed files with 197 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      src/assets/css/App.css
  2. 60
      src/components/NavBar.js
  3. 138
      src/components/NewPost.js
  4. 94
      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
View File

@ -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%;

60
src/components/NavBar.js
View File

@ -1,25 +1,51 @@
import React from 'react';
import React, { Component } from 'react';
import { drizzleConnect } from 'drizzle-react';
import { Link } from 'react-router';
const NavBar = (props) => {
return (
<nav>
<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 &&
class NavBar extends Component {
constructor(props){
super(props);
this.handleScroll = this.handleScroll.bind(this);
this.navRef = React.createRef();
}
render() {
return (
<nav ref={this.navRef}>
<div className="nav-wrapper navColor">
<ul id="nav-mobile" className="left hide-on-med-and-down">
<li>
<Link to="/profile">Profile</Link>
<Link to="/">Home</Link>
</li>
}
</ul>
</div>
</nav>
);
{this.props.hasSignedUp &&
<li>
<Link to="/profile">Profile</Link>
</li>
}
</ul>
</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 => {

138
src/components/NewPost.js
View File

@ -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;
@ -67,8 +71,8 @@ class NewPost extends Component {
handlePreviewToggle() {
this.setState((prevState, props) => ({
previewEnabled: !prevState.previewEnabled,
previewDate: this.getDate()
previewEnabled: !prevState.previewEnabled,
previewDate: this.getDate()
}));
}
@ -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,58 +97,76 @@ class NewPost extends Component {
</div>
</div>
}
<div className="post-header">
<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>
<div className="row">
<div className="col s1">
<UserAvatar
size="40"
className="inline user-avatar"
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>
<div>
<form className="topic-form">
{this.state.previewEnabled
? <ReactMarkdown source={this.state.postContentInput}
className="markdownPreview" />
: [
<input key={"postSubjectInput"}
name={"postSubjectInput"}
className={this.state.postSubjectInputEmptySubmit ? "form-input-required" : ""}
type="text"
value={this.state.postSubjectInput}
placeholder="Subject"
id="postSubjectInput"
ref={this.subjectInputRef}
onChange={this.handleInputChange} />,
<textarea key={"postContentInput"}
name={"postContentInput"}
value={this.state.postContentInput}
placeholder="Post"
id="postContentInput"
onChange={this.handleInputChange} />
]}
<button key="submit"
className="btn waves-effect waves-teal white black-text"
type="button"
onClick={this.validateAndPost}>
<i className="material-icons right">send</i>Post
</button>
<button className="waves-effect waves-orange btn white black-text margin-left-small"
type="button"
onClick={this.handlePreviewToggle}>
<span>{this.state.previewEnabled ? "Edit" : "Preview"}</span>
</button>
<button className="btn red margin-left-small"
type="button"
onClick={this.props.onCancelClick}>
<span>Cancel</span>
</button>
</form>
</div>
</div>
</div>
</div>
<hr/>
<div className="post-content">
<form className="topic-form">
{this.state.previewEnabled
? <ReactMarkdown source={this.state.postContentInput} className="markdownPreview" />
: [
<input key={"postSubjectInput"}
name={"postSubjectInput"}
className={this.state.postSubjectInputEmptySubmit ? "form-input-required" : ""}
type="text"
value={this.state.postSubjectInput}
placeholder="Subject"
id="postSubjectInput"
onChange={this.handleInputChange} />,
<textarea key={"postContentInput"}
name={"postContentInput"}
value={this.state.postContentInput}
placeholder="Post"
id="postContentInput"
onChange={this.handleInputChange} />
]}
<button key="submit"
type="button"
onClick={this.validateAndPost}>
Post
</button>
<button className="margin-left-small"
type="button"
onClick={this.handlePreviewToggle}>
{this.state.previewEnabled ? "Edit" : "Preview"}
</button>
<button className="margin-left-small"
type="button"
onClick={this.props.onCancelClick}>
Cancel
</button>
</form>
</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 = {

94
src/components/Post.js
View File

@ -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]}
@ -56,51 +53,54 @@ class Post extends Component {
</Link>
:avatarView
}
</div>
<div className="col s11">
<div>
<div className="stretch-space-between">
<strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}}>
</div>
<div className="col s11">
<div>
<div className="stretch-space-between">
<strong><span className={this.props.blockchainData[0].returnData !== null ? "" : "grey-text"}>
{this.props.blockchainData[0].returnData !== null
?this.props.blockchainData[0].returnData[2]
:"Username"
}
</span></strong>
<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}
</span>
</div>
<div className="stretch-space-between">
<strong><span className={this.orbitPostData.subject ? "" : "grey-text"}>
<span className="grey-text text-darken-2">
{this.props.blockchainData[0].returnData !== null &&
<TimeAgo date={epochTimeConverter(this.props.blockchainData[0].returnData[3])}/>
}{this.props.blockchainData[0].returnData !== null && ","} #{this.props.postIndex}
</span>
</div>
<div className="stretch-space-between">
<strong><span className={this.orbitPostData.subject ? "" : "grey-text"}>
Subject: {this.orbitPostData.subject}
</span></strong>
</div>
<div>
{this.orbitPostData.content
? <ReactMarkdown source={this.orbitPostData.content} />
: <p className="grey-text">Post content...</p>
}
</div>
</div>
</div>
</div>
<div className="row">
<div className="post-meta grey-text text-darken-2">
<i className="material-icons waves-effect waves-teal circle">
keyboard_arrow_up
</i>
<span>8</span>
<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}>
link
</i>
</div>
</div>
<div className="divider"></div>
</div>
<div className="post-content">
{this.orbitPostData.content
? <ReactMarkdown source={this.orbitPostData.content} />
: <p className="grey-text">Post content...</p>
}
</div>
</div>
</div>
</div>
<div className="row">
<div className="post-meta grey-text text-darken-2">
<i className="material-icons waves-effect waves-teal circle">
keyboard_arrow_up
</i>
<span>8</span>
<i className="material-icons waves-effect waves-teal circle">
keyboard_arrow_down
</i>
<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>
</div>
<div className="divider"></div>
</div>
);
}

2
src/components/Topic.js
View File

@ -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
View File

@ -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
View File

@ -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}/>
}

Write Preview
Loading…
Cancel
Save