Commit 05764d9e authored by Hugo Mayo's avatar Hugo Mayo

[hsp17] Reformats the comments page

parent 7d2d6e9c
......@@ -630,11 +630,11 @@ class Comments extends React.Component {
posComments = <p style={{textAlign:"center"}}>Nobody seems to have voiced their opinion yet, why don't you be the first?</p>;
} else {
posComments = article.posComments.map(({user_id, thumbs_up, against, statement, _id, article_id, user}) =>
<tr key={_id["$oid"]}>
<td>{statement}</td>
<td>{this.getFirstName(user[0].name)}</td>
<td><p id={_id} onClick={() => this.thumbs_up(_id)}>👍</p></td>
</tr>);
<blockquote className="quote-card" key={_id["$oid"]}>
<p className="float-right" id={_id} onClick={() => this.thumbs_up(_id)}>👍</p>
<p>{statement}</p>
<cite>{this.getFirstName(user[0].name)}</cite>
</blockquote>);
}
console.log(article.negComments);
......@@ -643,11 +643,11 @@ class Comments extends React.Component {
negComments = <p style={{textAlign:"center"}}>Nobody seems to have voiced their opinion yet, why don't you be the first?</p>;
} else {
negComments = article.negComments.map(({user_id, thumbs_up, against, statement, _id, article_id, user}) =>
<tr key={_id["$oid"]}>
<td>{statement}</td>
<td>{this.getFirstName(user[0].name)}</td>
<td><p id={_id} onClick={() => this.thumbs_up(_id)}>👍</p></td>
</tr>);
<blockquote className="quote-card" key={_id["$oid"]} style={{backgroundColor: "#efa84e"}}>
<p id={_id} className="float-right" onClick={() => this.thumbs_up(_id)}>👍</p>
<p>{statement}</p>
<cite>{this.getFirstName(user[0].name)}</cite>
</blockquote>);
}
const top3pos = <div style = {{display: "flex", flexDirection: "row", justifyContent: "center",}}>{article.top3pos.map(({user_id, thumbs_up, against, statement, _id, article_id, user}, index) =>
......@@ -658,8 +658,10 @@ class Comments extends React.Component {
<div className={"circle" + (parseInt(index)+1)} dangerouslySetInnerHTML={{ __html:"<i>'" + statement+ "'</i> - " + this.getFirstName(user[0].name)}}></div>
)}</div>
return <div className="container">
return <div className="container ">
<br/>
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-md-3">
<a onClick={() => this.markAsRead(article._id)} target="_blank" href={article.url}>
......@@ -677,36 +679,21 @@ class Comments extends React.Component {
</p>
<span className="label badge badge-primary badge-primary">{dstr}</span>
</div>
</div></div>
</div>
<br></br>
<h4>Here's what people are saying...</h4>
</div>
<br/>
<br/>
<div className="outertable" style={{padding:"8px"}}>
<div className="floatLeft">
<div className="card article">
<div className="card-header">Supporting Comments</div>
<div className="card-body">
<table className="table table-bordered">
<tbody>
{posComments}
</tbody>
</table>
</div>
</div>
<h4>Supporting Opinions</h4>
{posComments}
</div>
<div className="floatRight">
<div className="card article">
<div className="card-header">Opposing Comments</div>
<div className="card-body">
<table className="table table-bordered">
<tbody>
{negComments}
</tbody>
</table>
</div></div>
</div>
<h4>Opposing Opinions</h4>
{negComments}
</div>
</div>
......
......@@ -512,6 +512,52 @@ label.checkbox.inline .toggle {
font-size: 18px;
}
.quote-card {
background: #38b3c1;
color: #222222;
padding: 20px;
padding-left: 50px;
box-sizing: border-box;
box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12);
position: relative;
overflow: hidden;
min-height: 120px;
}
.quote-card p {
font-size: 22px;
line-height: 1.5;
margin: 0;
max-width: 80%;
}
.quote-card cite {
font-size: 16px;
margin-top: 10px;
display: block;
font-weight: 200;
opacity: 0.8;
}
.quote-card:before {
font-family: Georgia, serif;
content: "“";
position: absolute;
top: 10px;
left: 10px;
font-size: 5em;
color: rgba(238, 238, 238, 0.8);
font-weight: normal;
}
.quote-card:after {
font-family: Georgia, serif;
content: "”";
position: absolute;
bottom: -110px;
line-height: 100px;
right: -32px;
font-size: 25em;
color: rgba(238, 238, 238, 0.8);
font-weight: normal;
}
@font-face {
font-family: XPLOR;
src: url("/XPLOR.otf") format("opentype");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment