From 15d7110c2d4209454ad1f112484890e3352a97a7 Mon Sep 17 00:00:00 2001 From: Apostolof Date: Sun, 17 Jun 2018 03:06:48 +0300 Subject: [PATCH] Migrate to Semantic UI, Minor improvements --- package.json | 1 + public/index.html | 42 +++-- src/assets/css/App.css | 203 ++++++++--------------- src/assets/css/board-container.css | 30 ++++ src/assets/css/loading-container.css | 17 ++ src/assets/css/materialTabs.css | 61 ------- src/assets/css/navbar.css | 7 + src/assets/css/profile-container.css | 5 + src/assets/css/sign-up-container.css | 12 ++ src/assets/css/start-topic-container.css | 10 ++ src/assets/css/topic-container.css | 46 +++++ src/components/FloatingButton.js | 20 +-- src/components/HeaderBar.js | 19 --- src/components/LoadingSpinner.js | 12 +- src/components/NavBar.js | 66 ++++---- src/components/NewPost.js | 156 +++++++++-------- src/components/NewTopicPreview.js | 65 ++++++++ src/components/Post.js | 122 +++++++------- src/components/Topic.js | 68 ++++---- src/containers/BoardContainer.js | 21 ++- src/containers/HomeContainer.js | 6 +- src/containers/LoadingContainer.js | 6 +- src/containers/ProfileContainer.js | 96 ++++------- src/containers/SignUpContainer.js | 16 +- src/containers/StartTopicContainer.js | 69 ++++---- src/containers/TopicContainer.js | 5 +- src/containers/UsernameFormContainer.js | 71 +++++--- src/layouts/CoreLayout/CoreLayout.js | 38 +++-- src/redux/store.js | 16 +- 29 files changed, 697 insertions(+), 609 deletions(-) create mode 100644 src/assets/css/board-container.css create mode 100644 src/assets/css/loading-container.css delete mode 100644 src/assets/css/materialTabs.css create mode 100644 src/assets/css/navbar.css create mode 100644 src/assets/css/profile-container.css create mode 100644 src/assets/css/sign-up-container.css create mode 100644 src/assets/css/start-topic-container.css create mode 100644 src/assets/css/topic-container.css delete mode 100644 src/components/HeaderBar.js create mode 100644 src/components/NewTopicPreview.js diff --git a/package.json b/package.json index c463321..e7d00ad 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-user-avatar": "^1.10.0", "redux": "^3.7.2", "redux-saga": "0.16.0", + "semantic-ui-react": "^0.81.1", "uuid": "^3.2.1", "web3": "^1.0.0-beta.34" }, diff --git a/public/index.html b/public/index.html index 6464f72..6500537 100644 --- a/public/index.html +++ b/public/index.html @@ -1,16 +1,16 @@ - - - - - - - + + + - - + --> + + - - - - - - Apella + + Apella - -
- + --> diff --git a/src/assets/css/App.css b/src/assets/css/App.css index d45cb27..f19033b 100644 --- a/src/assets/css/App.css +++ b/src/assets/css/App.css @@ -14,167 +14,89 @@ strong { font-weight: bold !important; } +#root { + height: 100%; +} + .App { width: 100%; + height: 100%; margin: 0px; display: flex; flex-flow: column nowrap; align-items: flex-start; } -.view-container { - width: 60%; - margin: 10px auto; -} - -/* LOADING SCREEN */ - -.loading-screen { - opacity: 1; - visibility: visible; - transition: all .25s ease-in-out; -} - -.loading-screen.loaded { - opacity: 0; - visibility: hidden; -} - -/* HEADER BAR */ - -.header-bar { - max-height: 100px; - max-width: 100%; - padding: 7px 0px; - background: #0c1a2b; - color: white; - align-self: center; - text-align: center; -} - -.logo { +.page-container { + width: 100%; height: 100%; + margin: 71px 0px 0px; } -.header-bar-text { - height: 100%; - margin-left: 8px; +.left-side-panel { + margin-top: 71px; + position: fixed; + width: 20%; + height: calc(100% - 71px); + top: 0; + left: 0; } - -.header-bar-text div { +.main-panel { + width: 60%; height: 100%; - display: table; -} - -.header-bar-text div>div { - display: table-cell; - vertical-align: middle; + margin: 0px 20%; } -/* NAVBAR */ - -.navColor { - background: #0c1a2b; -} - -.stick { - z-index: 2; +.right-side-panel { + margin-top: 71px; position: fixed; + width: 20%; + height: calc(100% - 71px); top: 0; - width: 100%; -} - -/* TOPICS */ - -.topic { - width: 100%; - margin: 18px 0px; -} - -.topic-subject { - margin: 0px 0px 5px; + right: 0; } -.topic-meta { - margin: 5px 0px 0px; -} - -.topic-date { - margin-bottom: 0px; - font-size: 0.82vw !important; - text-align: right; -} - -/* START TOPIC */ - -.topic-form { +.view-container { width: 100%; - margin: 20px 0px; -} - -.topic-form input[type=text], textarea { - width: 100%; - padding: 12px 20px; - margin: 8px 0; - display: inline-block; - border: 1px solid #ccc; - border-radius: 4px; - resize: vertical; - box-sizing: border-box; + height: 100%; + margin: 0px auto; } -.topic-form textarea { - min-height: 200px; -} +/* MISC */ -.form-input-required { - border-color: red !important; +.form-textarea-required { + color: rgb(159, 58, 56) !important; + outline-color: rgb(159, 58, 56) !important; + border-color: rgb(224, 180, 180) !important; + background-color: rgb(255, 246, 246) !important; } -.markdownPreview { - padding: 0px 20px; +.card { + width: 100% !important; } -/* POSTS */ - -.post { - width: 100%; - background-color: #FFFFFF; - margin: 20px 0px; +.bottom-overlay-pad { + background: rgba(255, 255, 255, 0.85); + z-index: 10; + position: fixed; + bottom: 0px; + height: 62px; + width: 60%; + margin: 0px; padding: 0px; } -.post-meta { - float: right; - margin-right: 11.25px; -} - -.user-avatar { - width: 52px; - height: 52px; - text-align: center; -} - -.stretch-space-between { - display: flex; - flex-flow: row nowrap; - justify-content: space-between; -} - -.user-info { - background-color: #FFFFFF; - margin: 12px auto; - padding: 7px; +.action-button { + z-index: 11; + position: fixed; + bottom: 10px; + left: calc(50% - 24px); } -/* PROFILE */ - -.profile-tab { - width: 100%; +.grey-text { + color: grey; } -/* MISC */ - .inline { display: inline-block; } @@ -192,7 +114,9 @@ hr { margin: 0px; } -*:focus {outline:none !important} +*:focus { + outline:none !important +} .centerDiv { margin: 0 auto; @@ -203,20 +127,24 @@ a { text-decoration: none; } -.post-content a{ - color: #039be5; -} - .center-in-parent { width: 100%; - height: 100%; text-align: center; } +.vertical-center-in-parent { + vertical-align: middle; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + .vertical-center-children { + height: 100%; display: flex; - flex-flow: row nowrap; - align-items: flex-start; + flex-direction: column; + justify-content: center; } #overlay { @@ -242,6 +170,11 @@ a { -ms-transform: translate(-50%,-50%); } +.fill { + width: 100%; + height: 100%; +} + .full-width { max-width: 100% !important; width: 100% !important; diff --git a/src/assets/css/board-container.css b/src/assets/css/board-container.css new file mode 100644 index 0000000..d9db724 --- /dev/null +++ b/src/assets/css/board-container.css @@ -0,0 +1,30 @@ +/* TOPICS LIST SCREEN */ + +.topics-list { + padding: 0px 2px; + margin-bottom: 75px; +} + +.topics-list a { + color: black !important; + text-decoration: none !important; +} + +.topics-list a:hover { + color: black !important; + text-decoration: none !important; +} + +.topic-subject { + margin: 0px 0px 5px; +} + +.topic-meta { + margin: 5px 0px 0px; +} + +.topic-date { + margin-bottom: 0px; + font-size: 0.77vw !important; + text-align: right; +} \ No newline at end of file diff --git a/src/assets/css/loading-container.css b/src/assets/css/loading-container.css new file mode 100644 index 0000000..4c130a4 --- /dev/null +++ b/src/assets/css/loading-container.css @@ -0,0 +1,17 @@ +/* LOADING SCREEN */ + +.loading-screen { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + opacity: 1; + visibility: visible; + transition: all .25s ease-in-out; +} + +.loading-screen.loaded { + opacity: 0; + visibility: hidden; +} \ No newline at end of file diff --git a/src/assets/css/materialTabs.css b/src/assets/css/materialTabs.css deleted file mode 100644 index abd632c..0000000 --- a/src/assets/css/materialTabs.css +++ /dev/null @@ -1,61 +0,0 @@ -header { - position: relative; -} - -.hide { - display: none; -} - -.show { - display: block; -} - -.tab-content { - padding:25px; -} - -#material-tabs { - position: relative; - display: block; - padding:0; -} - -#material-tabs>a { - position: relative; - display:inline-block; - text-decoration: none; - padding: 22px; - text-transform: uppercase; - font-size: 14px; - font-weight: 600; - color: #0c1a2b; - text-align: center; - outline:; -} - -#material-tabs>a.active { - font-weight: 700; -} - -#material-tabs>a:not(.active):hover { - background-color: inherit; - color: #7c848a; -} - -@media only screen and (max-width: 520px) { - .nav-tabs#material-tabs>li>a { - font-size: 11px; - } -} - -.underline-bar { - position: absolute; - z-index: 10; - bottom: 0; - height: 3px; - background: #0c1a2b; - display: block; - left: 0; - transition: left .2s ease; - -webkit-transition: left .2s ease; -} \ No newline at end of file diff --git a/src/assets/css/navbar.css b/src/assets/css/navbar.css new file mode 100644 index 0000000..8e65749 --- /dev/null +++ b/src/assets/css/navbar.css @@ -0,0 +1,7 @@ +/* NAVBAR */ + +.nav-link:hover { + background: rgba(255,255,255,.08) !important; + color: #fff !important; + cursor: pointer !important; +} \ No newline at end of file diff --git a/src/assets/css/profile-container.css b/src/assets/css/profile-container.css new file mode 100644 index 0000000..ac510b7 --- /dev/null +++ b/src/assets/css/profile-container.css @@ -0,0 +1,5 @@ +/* PROFILE SCREEN */ + +.profile-tab { + width: 100%; +} \ No newline at end of file diff --git a/src/assets/css/sign-up-container.css b/src/assets/css/sign-up-container.css new file mode 100644 index 0000000..94b6893 --- /dev/null +++ b/src/assets/css/sign-up-container.css @@ -0,0 +1,12 @@ +/* SIGN UP SCREEN */ + +.sign-up-container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +.sign-up-container>div { + margin: auto; +} \ No newline at end of file diff --git a/src/assets/css/start-topic-container.css b/src/assets/css/start-topic-container.css new file mode 100644 index 0000000..2c7c64a --- /dev/null +++ b/src/assets/css/start-topic-container.css @@ -0,0 +1,10 @@ +/* START TOPIC SCREEN */ + +.topic-form { + width: 100%; + margin: 20px 0px; +} + +.markdownPreview { + padding: 0px 20px; +} \ No newline at end of file diff --git a/src/assets/css/topic-container.css b/src/assets/css/topic-container.css new file mode 100644 index 0000000..7a8bad1 --- /dev/null +++ b/src/assets/css/topic-container.css @@ -0,0 +1,46 @@ +/* POSTS LIST SCREEN */ + +.post { + width: 100%; + background-color: #FFFFFF; + margin: 20px 0px; + padding: 0px; +} + +.post-meta { + float: right; + margin-right: 11.25px; +} + +.user-avatar { + width: 52px; + height: 52px; + text-align: center; +} + +.user-avatar a { + color: inherit !important; + text-decoration: none !important; +} + +.stretch-space-between { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; +} + +.user-info { + background-color: #FFFFFF; + margin: 12px auto; + padding: 7px; +} + +.post-content a{ + margin-top: 10px; + color: #039be5; +} + +.post-form { + width: 100%; + margin: 20px 0px; +} \ No newline at end of file diff --git a/src/components/FloatingButton.js b/src/components/FloatingButton.js index 9374fc5..75178da 100644 --- a/src/components/FloatingButton.js +++ b/src/components/FloatingButton.js @@ -1,23 +1,13 @@ import React from 'react'; import { Link } from 'react-router'; +import { Button, Icon } from 'semantic-ui-react' const FloatingButton = (props) => { return ( -
- {props.to - ?
- - add - -
- :
-

- add -

-
- } +
+
); }; diff --git a/src/components/HeaderBar.js b/src/components/HeaderBar.js deleted file mode 100644 index 441f6fc..0000000 --- a/src/components/HeaderBar.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -const HeaderBar = (props) => { - return ( -
- logo -
-
-
-

Welcome to Apella

-

A decentralized forum

-
-
-
-
- ); -}; - -export default HeaderBar; \ No newline at end of file diff --git a/src/components/LoadingSpinner.js b/src/components/LoadingSpinner.js index 44c035d..e863c6b 100644 --- a/src/components/LoadingSpinner.js +++ b/src/components/LoadingSpinner.js @@ -2,11 +2,13 @@ import React from 'react'; const LoadingSpinner = (props) => { return( -
-

- -

+
+
+

+ +

+
); } diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 6e7c60d..77176aa 100644 --- a/src/components/NavBar.js +++ b/src/components/NavBar.js @@ -1,51 +1,53 @@ import React, { Component } from 'react'; import { drizzleConnect } from 'drizzle-react'; -import { Link } from 'react-router'; +import PropTypes from 'prop-types'; + +import { Image, Menu } from 'semantic-ui-react' class NavBar extends Component { constructor(props){ super(props); - this.handleScroll = this.handleScroll.bind(this); + this.handleItemClick = this.handleItemClick.bind(this); this.navRef = React.createRef(); } + handleItemClick(to) { + this.context.router.push(to); + } + render() { return ( - + + {this.handleItemClick("/")}}> + + Apella + + {this.handleItemClick("/")}}> + Home + + {this.props.hasSignedUp + ? {this.handleItemClick("/profile")}}> + Profile + + : + {this.handleItemClick("/signUp")}}> + Sign Up + + + } + ); } +}; - 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"); - } - } +NavBar.contextTypes = { + router: PropTypes.object }; const mapStateToProps = state => { diff --git a/src/components/NewPost.js b/src/components/NewPost.js index fb0fb1a..70d1027 100644 --- a/src/components/NewPost.js +++ b/src/components/NewPost.js @@ -3,6 +3,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import uuidv4 from 'uuid/v4'; +import { Grid, Form, TextArea, Button, Icon, Divider } from 'semantic-ui-react' + import TimeAgo from 'react-timeago'; import UserAvatar from 'react-user-avatar'; import ReactMarkdown from 'react-markdown'; @@ -20,7 +22,6 @@ class NewPost extends Component { this.pushToDatabase = this.pushToDatabase.bind(this); this.newPostOuterRef = React.createRef(); - this.subjectInputRef = React.createRef(); this.transactionProgressText = []; this.drizzle = context.drizzle; @@ -97,76 +98,91 @@ class NewPost extends Component {
} -
-
- -
-
-
-
- {this.props.user.username} - - {this.state.previewEnabled && - - }{this.state.previewEnabled && ","} #{this.props.postIndex} - -
-
- - {this.state.previewEnabled && - ("Subject: " + this.state.postSubjectInput) - } - + + #{this.props.postIndex} + + + + + + + +
+
+ {this.props.user.username} + + {this.state.previewEnabled && + + } + +
+
+ + {this.state.previewEnabled && + ("Subject: " + this.state.postSubjectInput) + } + +
+
+
+ {this.state.previewEnabled + ? + : [ + , +