Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
jaspervriends committed Jan 11, 2021
1 parent baf98c0 commit 1237521
Show file tree
Hide file tree
Showing 12 changed files with 2,880 additions and 59 deletions.
798 changes: 797 additions & 1 deletion js/dist/admin.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/dist/admin.js.map

Large diffs are not rendered by default.

1,891 changes: 1,890 additions & 1 deletion js/dist/forum.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/dist/forum.js.map

Large diffs are not rendered by default.

7 changes: 1 addition & 6 deletions js/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

40 changes: 40 additions & 0 deletions js/src/forum/components/BlogItemSidebar/BlogAuthor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Component from 'flarum/Component';
import ItemList from 'flarum/utils/ItemList';
import listItems from 'flarum/helpers/listItems';
import avatar from 'flarum/helpers/avatar';

export default class BlogAuthor extends Component {
view() {
return (
<div className={"FlarumBlog-Article-Author"}>
<div className={`FlarumBlog-Article-Author-background ${this.props.loading ? 'FlarumBlog-Author-Ghost' : ''}`} style={{ backgroundColor: this.props.article && this.props.article.user() ? this.props.article && this.props.article.user().color() : null }} />

<div className={"FlarumBlog-Article-Author-Avatar"}>{this.props.article && this.props.article.user() ? avatar(this.props.article.user()) : <span className={"Avatar FlarumBlog-Author-Ghost"} />}</div>

{this.props.article && this.props.article.user() && (
<div className={"FlarumBlog-Article-Author-Info"}>
<span className={"FlarumBlog-Article-Author-Name"}>{this.props.article.user().displayName()}</span>
<p className={"FlarumBlog-Article-Author-Bio"}>{this.props.article.user().bio && this.props.article.user().bio()}</p>

<ul className={"FlarumBlog-Article-Author-Extended"}>
{listItems(this.items().toArray())}
</ul>
</div>
)}

{this.props.loading && (
<div>
<span className={"FlarumBlog-Article-Author-Name FlarumBlog-Author-Ghost"}>&nbsp;</span>
<p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
<p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
<p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
</div>
)}
</div>
);
}

items() {
return new ItemList();
}
}
27 changes: 27 additions & 0 deletions js/src/forum/components/BlogItemSidebar/BlogItemSidebar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Component from 'flarum/Component';
import ItemList from 'flarum/utils/ItemList';
import listItems from 'flarum/helpers/listItems';
import BlogAuthor from './BlogAuthor';
import BlogCategories from '../BlogCategories';

export default class BlogItemSidebar extends Component {
view() {
return (
<div className={"FlarumBlog-Article-Sidebar"}>
<ul>
{listItems(this.items().toArray())}
</ul>
</div>
)
}

items() {
const itemlist = new ItemList();

itemlist.add("author", BlogAuthor.component(this.props), 0);

itemlist.add("categories", BlogCategories.component(this.props), 0);

return itemlist;
}
}
47 changes: 47 additions & 0 deletions js/src/forum/pages/BlogComposer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import ComposerBody from 'flarum/components/ComposerBody';
import Button from 'flarum/components/Button';
import {extend} from 'flarum/extend';

export default class ArticleComposer extends ComposerBody {
init() {
super.init();

this.previewContent = false;
}

// Render
render() {
const hasContent = (this.content() && this.content() !== "");

return (
<div className={"Flarum-Support-ArticleComposer"}>
<div className={"Flarum-Support-ArticleComposer-tabs"}>
<Button className={!this.previewContent && "AricleComposerButtonSelected"} onclick={() => this.previewContent = false}>{app.translator.trans('v17development-flarum-support.forum.composer.write')}</Button>
<Button className={this.previewContent && "AricleComposerButtonSelected"} onclick={() => this.previewContent = true}>{app.translator.trans('v17development-flarum-support.forum.composer.view')}</Button>
</div>

<div className={"Composer Flarum-Support-ComposeArticle-body"}>
{this.previewContent ? (
<div className={"Flarum-Support-ArticleComposer-preview"} config={hasContent && this.configPreview.bind(this)}>
{!hasContent && (
app.translator.trans('v17development-flarum-support.forum.composer.nothing_to_preview')
)}
</div>
) : this.view()}
</div>
</div>
)
}

// Initialize preview content
configPreview(element) {
s9e.TextFormatter.preview(this.content() || '', element);
}

// Submit trigger
onsubmit() {
if(this.props.onsubmit) {
this.props.onsubmit();
}
}
}
56 changes: 23 additions & 33 deletions js/src/forum/pages/BlogItem.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Page from 'flarum/components/Page';
import avatar from 'flarum/helpers/avatar';
import Button from 'flarum/components/Button';
import CommentPost from 'flarum/components/CommentPost';
import ReplyComposer from 'flarum/components/ReplyComposer';
import PostStream from 'flarum/components/PostStream';
import BlogCategories from '../components/BlogCategories';
import BlogPostController from '../components/BlogPostController';
import BlogItemSidebar from '../components/BlogItemSidebar/BlogItemSidebar';

export default class BlogItem extends Page {
init() {
Expand Down Expand Up @@ -90,6 +90,21 @@ export default class BlogItem extends Page {
return (
<div className={"FlarumBlogItem"}>
<div className={"container"}>
<div className={"FlarumBlog-ToolButtons"}>
<Button
className={"Button"}
onclick={() => {
if(app.previous && app.previous.props.routeName === "blog") {
app.history.back();
}else{
m.route(app.route("blog"));
}
}}
icon={"fas fa-angle-left"}
>
{app.translator.trans('v17development-flarum-blog.forum.return_to_overview')}
</Button>
</div>
<div className={"FlarumBlog-Article"}>
<div className={"FlarumBlog-Article-Container"}>
<div className={"FlarumBlog-Article-Content"}>
Expand Down Expand Up @@ -132,14 +147,13 @@ export default class BlogItem extends Page {
</div>
))}

<div className={"Post-body"}>
{!this.loading && this.article.blogMeta() && this.article.blogMeta().isPendingReview() == true && (
{!this.loading && this.article.blogMeta() && this.article.blogMeta().isPendingReview() == true && (
<div className={"Post"}>
<blockquote class="uncited" style={{ fontSize: '16px' }}><div><span className={"far fa-clock"} style={{ marginRight: '5px' }} /> {app.translator.trans('v17development-flarum-blog.forum.review_article.pending_review')}</div></blockquote>
)}

{!this.loading && articlePost && m.trust(articlePost.contentHtml())}
</div>
)}

</div>
{!this.loading && articlePost && <CommentPost post={articlePost} />}
</div>
</div>

Expand All @@ -156,31 +170,7 @@ export default class BlogItem extends Page {
</div>
</div>

<div className={"FlarumBlog-Article-Author"}>
<div className={"FlarumBlog-Article-Author-Info"}>
<div className={`FlarumBlog-Article-Author-background ${this.loading ? 'FlarumBlog-Author-Ghost' : ''}`} style={{ backgroundColor: this.article && this.article.user() ? this.article && this.article.user().color() : null }} />

<div className={"FlarumBlog-Article-Author-Avatar"}>{this.article && this.article.user() ? avatar(this.article.user()) : <span className={"Avatar FlarumBlog-Author-Ghost"} />}</div>

{this.article && this.article.user() && (
<div style={{ padding: '0 20px 20px' }}>
<span className={"FlarumBlog-Article-Author-Name"}>{this.article.user().displayName()}</span>
<p className={"FlarumBlog-Article-Author-Bio"}>{this.article.user().bio()}</p>
</div>
)}

{this.loading && (
<div>
<span className={"FlarumBlog-Article-Author-Name FlarumBlog-Author-Ghost"}>&nbsp;</span>
<p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
<p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
<p className={"FlarumBlog-Article-Author-Bio FlarumBlog-Author-Ghost"}>&nbsp;</p>
</div>
)}
</div>

<BlogCategories />
</div>
<BlogItemSidebar article={this.article} loading={this.loading} />
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions js/src/forum/pages/BlogOverview.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ export default class BlogOverview extends Page {
app.store.find('discussions', {
filter: {
q: `is:blog${m.route.param('slug') ? ` tag:${m.route.param('slug')}` : ''}`
}
},
sort: '-createdAt'
})
.then(this.show.bind(this))
.catch(() => {
Expand Down Expand Up @@ -234,7 +235,7 @@ export default class BlogOverview extends Page {
app.forum.attribute('blogTags').forEach(tagId => {
const tag = app.store.getById('tags', tagId);

if(tags.length === 0 && !tag.isChild()) {
if(tag && tags.length === 0 && !tag.isChild()) {
tags.push(tag);
}
});
Expand Down
61 changes: 48 additions & 13 deletions less/Forum/Item.less
Original file line number Diff line number Diff line change
@@ -1,26 +1,39 @@
.BlogItemPage {
background: #fafafa;

.App-composer {
.Composer {
margin-left: -20px;
margin-right: 320px;
@media screen and (min-width: 992px) {
.App-composer {
.Composer {
margin-left: -20px;
margin-right: 320px;
}
}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: unset;
}
}
}

.FlarumBlogItem {
padding: 30px 0 50px;

.FlarumBlog-ToolButtons {
margin-bottom: 15px;
}

.FlarumBlog-Article {
padding: 50px 0;

@media screen and (min-width: 768px) {
@media screen and (min-width: 840px) {
display: flex;
flex-direction: row;
}

/* Blog Article */
.FlarumBlog-Article-Container {
@media screen and (min-width: 768px) {
@media screen and (min-width: 840px) {
flex-grow: 1;
margin-right: 25px;
overflow: hidden;
Expand All @@ -37,7 +50,7 @@
background-size: cover;
height: 300px;

@media screen and (min-width: 768px) {
@media screen and (min-width: 840px) {
height: 400px;
}
}
Expand Down Expand Up @@ -89,6 +102,10 @@
.Post {
padding: 0;
margin: 0;

.Post-header {
display: none;
}
}
}

Expand All @@ -113,17 +130,30 @@
}
}

/** Author information */
.FlarumBlog-Article-Author {
@media screen and (min-width: 768px) {
/** Article sidebar */
.FlarumBlog-Article-Sidebar {
@media screen and (max-width: 840px) {
margin-top: 25px;
}

@media screen and (min-width: 840px) {
flex-grow: 0;
flex-shrink: 0;
width: 320px;
}

.FlarumBlog-Article-Author-Info {
> ul, ul.FlarumBlog-Article-Author-Extended {
margin: 0;
padding: 0;
list-style: none;

li {
margin-bottom: 25px;
}
}

.FlarumBlog-Article-Author {
background: #FFFFFF;
margin-bottom: 25px;
box-shadow: 1px 3px 9px 0px #e8e8e8;

.FlarumBlog-Article-Author-background {
Expand All @@ -146,6 +176,10 @@
}
}

.FlarumBlog-Article-Author-Info {
padding: 0 20px 20px;
}

.FlarumBlog-Article-Author-Name {
text-align: center;
font-size: 18px;
Expand All @@ -160,6 +194,7 @@
padding: 0 10px;
margin: 15px 0;
}

}
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/Controller/BlogOverviewController.php
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ public function __invoke(Document $document, ServerRequestInterface $request)
$apiDocument = $this->getApiDocument($request->getAttribute('actor'), [
"filter" => [
"q" => "is:blog" . (Arr::get($queryParams, 'category') ? " tag:" . Arr::get($queryParams, 'category') : "")
]
],
"sort" => "-createdAt"
]);

// Set payload
Expand Down

0 comments on commit 1237521

Please sign in to comment.