mirror of https://gitlab.com/ecentrics/concordia
29 changed files with 697 additions and 609 deletions
@ -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; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
/* NAVBAR */ |
|||
|
|||
.nav-link:hover { |
|||
background: rgba(255,255,255,.08) !important; |
|||
color: #fff !important; |
|||
cursor: pointer !important; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
/* PROFILE SCREEN */ |
|||
|
|||
.profile-tab { |
|||
width: 100%; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
/* START TOPIC SCREEN */ |
|||
|
|||
.topic-form { |
|||
width: 100%; |
|||
margin: 20px 0px; |
|||
} |
|||
|
|||
.markdownPreview { |
|||
padding: 0px 20px; |
|||
} |
|||
@ -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; |
|||
} |
|||
@ -1,19 +0,0 @@ |
|||
import React from 'react'; |
|||
|
|||
const HeaderBar = (props) => { |
|||
return ( |
|||
<div className="header-bar"> |
|||
<img className="logo" src={require('../resources/logo.png')} alt="logo"/> |
|||
<div className="inline header-bar-text"> |
|||
<div> |
|||
<div> |
|||
<h1 className="no-margin">Welcome to Apella</h1> |
|||
<p className="no-margin">A decentralized forum</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default HeaderBar; |
|||
@ -0,0 +1,65 @@ |
|||
import React, { Component } from 'react'; |
|||
import { drizzleConnect } from 'drizzle-react'; |
|||
|
|||
import { Grid, Divider, Button, Icon, Label } from 'semantic-ui-react' |
|||
|
|||
import TimeAgo from 'react-timeago'; |
|||
import UserAvatar from 'react-user-avatar'; |
|||
import ReactMarkdown from 'react-markdown'; |
|||
|
|||
class Post extends Component { |
|||
constructor(props, context) { |
|||
super(props); |
|||
} |
|||
|
|||
render(){ |
|||
return ( |
|||
<div className="post"> |
|||
<Divider horizontal> |
|||
<span className="grey-text">#0</span> |
|||
</Divider> |
|||
<Grid> |
|||
<Grid.Row columns={16} stretched> |
|||
<Grid.Column width={1} className="user-avatar"> |
|||
<UserAvatar |
|||
size="52" |
|||
className="inline" |
|||
src={this.props.user.avatarUrl} |
|||
name={this.props.user.username}/> |
|||
</Grid.Column> |
|||
<Grid.Column width={15}> |
|||
<div className=""> |
|||
<div className="stretch-space-between"> |
|||
<span> |
|||
<strong> |
|||
{this.props.user.username} |
|||
</strong> |
|||
</span> |
|||
<span className="grey-text"> |
|||
<TimeAgo date={this.props.date}/> |
|||
</span> |
|||
</div> |
|||
<div className="stretch-space-between"> |
|||
<span><strong> |
|||
Subject: {this.props.subject} |
|||
</strong></span> |
|||
</div> |
|||
<div className="post-content"> |
|||
<ReactMarkdown source={this.props.content} /> |
|||
</div> |
|||
</div> |
|||
</Grid.Column> |
|||
</Grid.Row> |
|||
</Grid> |
|||
</div> |
|||
); |
|||
} |
|||
}; |
|||
|
|||
const mapStateToProps = state => { |
|||
return { |
|||
user: state.user |
|||
} |
|||
}; |
|||
|
|||
export default drizzleConnect(Post, mapStateToProps); |
|||
@ -1,23 +1,37 @@ |
|||
import React, { Component } from 'react'; |
|||
import HeaderBar from '../../components/HeaderBar'; |
|||
import NavBar from '../../components/NavBar'; |
|||
|
|||
// Styles
|
|||
import '../../assets/fonts/fontawesome-free-5.0.13/fontawesome-all.js'; |
|||
import '../../assets/css/App.css'; |
|||
import '../../assets/css/loading-container.css'; |
|||
import '../../assets/css/sign-up-container.css'; |
|||
import '../../assets/css/navbar.css'; |
|||
|
|||
import '../../assets/css/board-container.css'; |
|||
import '../../assets/css/start-topic-container.css'; |
|||
import '../../assets/css/topic-container.css'; |
|||
import '../../assets/css/profile-container.css'; |
|||
|
|||
class CoreLayout extends Component { |
|||
render() { |
|||
return ( |
|||
<div className="App"> |
|||
<HeaderBar/> |
|||
<NavBar/> |
|||
<div className="view-container"> |
|||
{this.props.children} |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
render() { |
|||
return ( |
|||
<div className="App"> |
|||
<NavBar/> |
|||
<div className="page-container"> |
|||
<aside className="left-side-panel"> |
|||
</aside> |
|||
<div className="main-panel"> |
|||
<div className="view-container"> |
|||
{this.props.children} |
|||
</div> |
|||
</div> |
|||
<aside className="right-side-panel"> |
|||
</aside> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default CoreLayout; |
|||
Loading…
Reference in new issue