Show exerpt of hidden comments

master
Tanner Collin 4 years ago
parent 99d3a234f4
commit 72802a6fcf
  1. 2
      webclient/src/Comments.js
  2. 30
      webclient/src/Style-light.css

@ -93,7 +93,7 @@ class Article extends React.Component {
</p> </p>
</div> </div>
<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} /> <div className={collapsed ? 'text hidden' : 'text'} dangerouslySetInnerHTML={{ __html: c.text }} />
{hidden && hasChildren ? {hidden && hasChildren ?
<div className='comment lined info pointer' onClick={() => this.expandComment(cid)}>[show {this.countComments(c)-1} more]</div> <div className='comment lined info pointer' onClick={() => this.expandComment(cid)}>[show {this.countComments(c)-1} more]</div>

@ -159,6 +159,27 @@ span.source {
margin-top: -0.5rem; margin-top: -0.5rem;
} }
.comment .text.hidden > p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: none;
color: #828282;
}
.comment .text.hidden > p:first-child {
display: block;
}
.comment .collapser {
padding-left: 0.5rem;
padding-right: 1.5rem;
}
.comment .pointer {
cursor: pointer;
}
.toggleDot { .toggleDot {
position: fixed; position: fixed;
bottom: 1rem; bottom: 1rem;
@ -197,12 +218,3 @@ span.source {
.search form { .search form {
display: inline; display: inline;
} }
.collapser {
padding-left: 0.5rem;
padding-right: 1.5rem;
}
.pointer {
cursor: pointer;
}

Loading…
Cancel
Save