wip on other discussions ui.

webclient/src/Style-light.css

@@ -102,7 +102,8 @@ span.source {
   font-size: 1.4rem;
 }
 
-.article h3, .article h4 {
+.article h3,
+.article h4 {
   font-size: 1.3rem;
 }
 
@@ -111,7 +112,8 @@ span.source {
   height: auto;
 }
 
-.article figure, .article video {
+.article figure,
+.article video {
   width: 100%;
   height: auto;
   margin: 0;
@@ -144,7 +146,7 @@ span.source {
 }
 
 .story-text {
-	font: 1.2rem/1.5 'Apparatus SIL', sans-serif;
+  font: 1.2rem/1.5 "Apparatus SIL", sans-serif;
   margin-top: 1em;
 }
 
@@ -196,7 +198,7 @@ span.source {
 }
 
 .toggleDot .button {
-	font: 2rem/1 'icomoon';
+  font: 2rem/1 "icomoon";
   position: relative;
   top: 0.5rem;
   left: 0.55rem;
@@ -214,7 +216,7 @@ span.source {
 }
 
 .forwardDot .button {
-	font: 2.5rem/1 'icomoon';
+  font: 2.5rem/1 "icomoon";
   position: relative;
   top: 0.25rem;
   left: 0.3rem;
@@ -223,3 +225,7 @@ span.source {
 .search form {
   display: inline;
 }
+
+.indented {
+  padding: 0 0 0 1rem;
+}

webclient/src/pages/Article.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import localForage from 'localforage';
 import { sourceLink, infoLine, ToggleDot } from '../utils.js';
+import { Link } from "react-router-dom";
 
 class Article extends React.Component {
 	constructor(props) {
@@ -14,6 +15,7 @@ class Article extends React.Component {
 
 		this.state = {
 			story: cache[id] || false,
+			related: [],
 			error: false,
 			pConv: [],
 		};
@@ -35,7 +37,7 @@ class Article extends React.Component {
 			.then(res => res.json())
 			.then(
 				(result) => {
-					this.setState({ story: result.story });
+					this.setState({ story: result.story, related: result.related });
 					localForage.setItem(id, result.story);
 				},
 				(error) => {
@@ -51,6 +53,7 @@ class Article extends React.Component {
 	render() {
 		const id = this.props.match ? this.props.match.params.id : 'CLOL';
 		const story = this.state.story;
+		const related = this.state.related;//.filter(r => r.id != id);
 		const error = this.state.error;
 		const pConv = this.state.pConv;
 		let nodes = null;
@@ -78,6 +81,16 @@ class Article extends React.Component {
 
 						{infoLine(story)}
 
+						{related.length ? <div className='related indented info'>
+							<span>Other discussions: </span>
+							{related.map((r, i) =>
+								<>
+									{i !== 0 ? <> &bull; </> : <></>}
+									<Link className='' to={"/" + r.id + "/c"}>{r.source}</Link>
+								</>
+							)}
+						</div> : <></>}
+
 						{nodes ?
 							<div className='story-text'>
 								{Object.entries(nodes).map(([k, v]) =>

webclient/src/pages/Comments.js

@@ -6,7 +6,7 @@ import moment from 'moment';
 import localForage from 'localforage';
 import { infoLine, ToggleDot } from '../utils.js';
 
-class Article extends React.Component {
+class Comments extends React.Component {
 	constructor(props) {
 		super(props);
 
@@ -17,6 +17,7 @@ class Article extends React.Component {
 
 		this.state = {
 			story: cache[id] || false,
+			related: [],
 			error: false,
 			collapsed: [],
 			expanded: [],
@@ -37,7 +38,7 @@ class Article extends React.Component {
 			.then(res => res.json())
 			.then(
 				(result) => {
-					this.setState({ story: result.story }, () => {
+					this.setState({ story: result.story, related: result.related }, () => {
 						const hash = window.location.hash.substring(1);
 						if (hash) {
 							document.getElementById(hash).scrollIntoView();
@@ -110,6 +111,7 @@ class Article extends React.Component {
 	render() {
 		const id = this.props.match.params.id;
 		const story = this.state.story;
+		const related = this.state.related;//.filter(r => r.id != id);
 		const error = this.state.error;
 
 		return (
@@ -129,6 +131,17 @@ class Article extends React.Component {
 
 						{infoLine(story)}
 
+						{related.length ? <div className='related indented info'>
+							<span>Other discussions: </span>
+							{related.map((r, i) =>
+								<>
+									{i !== 0 ? <> &bull; </> : <></>}
+									<Link className='' to={"/" + r.id + "/c"}>{r.source}</Link>
+								</>
+							)}
+						</div> : <></>}
+
+
 						<div className='comments'>
 							{story.comments.map(c => this.displayComment(story, c, 0))}
 						</div>
@@ -142,4 +155,4 @@ class Article extends React.Component {
 	}
 }
 
-export default Article;
+export default Comments;