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); |
||||
Loading…
Reference in new issue