tsr/mwe-comments
1
0
Fork 0
forked from notnull/mwe-comments
Code Releases Activity

fixed comment style

Browse Source
This commit is contained in:
notnull 2019-07-13 18:55:35 -04:00
parent e2d72d00e0
commit 402d5bff80
2 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Components/Comments/SingleComment/CollapsedComment.js
View File

@ -7,17 +7,15 @@ const CollapsedComment = props => {
<img className="px-2" alt="profile" src="anon.jpeg" height={16} /> <img className="px-2" alt="profile" src="anon.jpeg" height={16} />
<a href="#user">username</a> <a href="#user">username</a>
<small className="px-3">One day ago</small> <small className="px-3">One day ago</small>
<span <a
className="a" href="#toggle"
style={{ style={{
fontVariant: 'small-caps', fontVariant: 'small-caps',
color: 'blue',
cursor: 'pointer',
}} }}
onClick={() => props.toggleCollapse(props.id)} onClick={() => props.toggleCollapse(props.id)}
> >
expand expand
</span> </a>
</div> </div>
</li> </li>
) )

56
src/Components/Comments/SingleComment/ExpandedComment.js
View File

@ -8,38 +8,40 @@ const ExpandedComment = props => {
onMouseEnter={() => props.showCollapseLink(props.id, true)} onMouseEnter={() => props.showCollapseLink(props.id, true)}
onMouseLeave={() => props.showCollapseLink(props.id, false)} onMouseLeave={() => props.showCollapseLink(props.id, false)}
> >
<div className="media bg bg-dark"> <div id="media-image" className="media bg bg-dark">
<img alt="profile" src="anon.jpeg" height={64} /> <img alt="profile" src="anon.jpeg" height={64} />
<div className="media-body ml-3 my-auto"> <div id="media-body" className="media-body ml-3 my-auto">
<a className="" href="#user"> <a href="#user">username</a>
username <div className="text-white-50">
</a> <small>{props.createdAt}</small>
</div> {props.replies.length > 0 ? (
<div className="white"> <a
<small>{props.createdAt}</small> href="#toggle"
{props.replies.length > 0 ? ( className="ml-3"
<span style={{
className="a ml-3" fontVariant: 'small-caps',
style={{ display: props.displayCollapse || 'none',
fontVariant: 'small-caps', }}
color: 'blue', onClick={() => props.toggleCollapse(props.id, !props.collapsed)}
cursor: 'pointer', >
display: props.displayCollapse || 'none', {props.collapsed ? 'expand' : 'collapse'}
}} </a>
onClick={() => props.toggleCollapse(props.id, !props.collapsed)} ) : (
> ''
{props.collapsed ? 'expand' : 'collapse'} )}
</span> </div>
) : (
''
)}
<a className="float-right ml-2" href="#replies">
reply
</a>
</div> </div>
</div> </div>
<div className="">{props.text}</div> <div className="">{props.text}</div>
{props.collapsed ? (
<div />
) : (
<a className="" href="#replies">
reply
</a>
)}
</li> </li>
) )
} }