mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change comment layout: move avatar to the info line

Browse Source
This commit is contained in:
igoradamenko
2018-05-01 23:47:55 +03:00
parent 04e964709e
commit 8013e2806d
9 changed files with 122 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app/components/comment/__avatar/comment__avatar.scss
+1 -2
View File
@@ -1,11 +1,10 @@
@import '../comment.vars';
.comment__avatar {
flex-shrink: 0;
flex-grow: 0;
display: inline-block;
width: $avatarSize;
height: $avatarSize;
margin-right: $avatarOffset;
vertical-align: middle;
border-radius: 4px;
}
web/app/components/comment/__body/comment__body.scss
-3
View File
@@ -1,3 +0,0 @@
.comment__body {
display: flex;
}
web/app/components/comment/__controls/comment__controls.scss
+1
View File
@@ -1,5 +1,6 @@
.comment__controls {
display: inline;
vertical-align: middle;
user-select: none;
@media (hover: hover) {
web/app/components/comment/__score/comment__score.scss
+2
View File
@@ -1,5 +1,7 @@
.comment__score {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
font-size: 0;
color: #666;
cursor: default;
web/app/components/comment/__status/comment__status.scss
+1
View File
@@ -1,4 +1,5 @@
.comment__status {
margin-left: 8px;
vertical-align: middle;
font-weight: 700;
}
web/app/components/comment/__time/comment__time.scss
+1
View File
@@ -1,5 +1,6 @@
.comment__time {
margin-left: 8px;
vertical-align: middle;
font-size: 14px;
color: #666;
}
web/app/components/comment/__username/comment__username.scss
+2 -1
View File
@@ -1,7 +1,8 @@
.comment__username {
color: #777;
vertical-align: middle;
font-weight: 700;
text-decoration: none;
color: #777;
&:link {
&:hover {
web/app/components/comment/comment.jsx
+114 -114
View File
@@ -212,140 +212,140 @@ export default class Comment extends Component {
replying: isInputVisible,
};
// TODO: remove so much mods.view !== 'preview'
return (
<div className={b('comment', props, defaultMods)} id={`remark__comment-${o.id}`}>
<div className="comment__body">
{
mods.view !== 'preview' && (
<img src={o.user.picture} alt="" className="comment__avatar"/>
)
}
<div className="comment__info">
{
mods.view !== 'preview' && (
<img src={o.user.picture} alt="" className="comment__avatar"/>
)
}
<div className="comment__content">
<div className="comment__info">
{
mods.view !== 'preview' && (
<span className="comment__username">{o.user.name}</span>
)
}
{
mods.view !== 'preview' && (
<span className="comment__username">{o.user.name}</span>
)
}
{
mods.view === 'preview' && (
<a href={`${o.locator.url}#remark__comment-${o.id}`} className="comment__username">{o.user.name}</a>
)
}
{
mods.view === 'preview' && (
<a href={`${o.locator.url}#remark__comment-${o.id}`} className="comment__username">{o.user.name}</a>
)
}
{
!isGuest && (
<span className="comment__score">
<span
className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased })}
onClick={this.increaseScore}
>vote up</span>
{
!isGuest && (
<span className="comment__score">
<span
className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased })}
onClick={this.increaseScore}
>vote up</span>
<span className="comment__score-sign">{o.score.sign}</span>
<span className="comment__score-sign">{o.score.sign}</span>
<span className="comment__score-value">{o.score.value}</span>
<span className="comment__score-value">{o.score.value}</span>
<span
className={b('comment__vote', {}, { type: 'down', selected: scoreDecreased })}
onClick={this.decreaseScore}
>vote down</span>
</span>
)
}
<span
className={b('comment__vote', {}, { type: 'down', selected: scoreDecreased })}
onClick={this.decreaseScore}
>vote down</span>
</span>
)
}
{
mods.view !== 'preview' && (
<span className="comment__time">{o.time}</span>
)
}
{
mods.view !== 'preview' && (
<span className="comment__time">{o.time}</span>
)
}
{
isAdmin && userBlocked && (
<span className="comment__status">blocked</span>
)
}
{
isAdmin && userBlocked && (
<span className="comment__status">blocked</span>
)
}
{
isAdmin && !userBlocked && deleted && (
<span className="comment__status">deleted</span>
)
}
{
isAdmin && !userBlocked && deleted && (
<span className="comment__status">deleted</span>
)
}
{
!mods.disabled && !isGuest && (
<span className="comment__controls">
<span
className="comment__action"
tabIndex="0"
onClick={this.toggleInputVisibility}
>reply</span>
</span>
)
}
{
!mods.disabled && !isGuest && (
<span className="comment__controls">
<span
className="comment__action"
tabIndex="0"
onClick={this.toggleInputVisibility}
>reply</span>
</span>
)
}
{
isAdmin &&
(
<span className={b('comment__controls', {}, { view: 'admin' })}>
{
isAdmin &&
(
<span className={b('comment__controls', {}, { view: 'admin' })}>
{
!pinned && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onPinClick}
>pin</span>
)
}
{
!pinned && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onPinClick}
>pin</span>
)
}
{
pinned && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onUnpinClick}
>unpin</span>
)
}
{
pinned && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onUnpinClick}
>unpin</span>
)
}
{
userBlocked && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onUnblockClick}
>unblock</span>
)
}
{
userBlocked && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onUnblockClick}
>unblock</span>
)
}
{
!userBlocked && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onBlockClick}
>block</span>
)
}
{
!userBlocked && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onBlockClick}
>block</span>
)
}
{
!deleted && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onDeleteClick}
>delete</span>
)
}
</span>
)
}
</div>
<div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>
{
!deleted && (
<span
className="comment__action"
tabIndex="0"
onClick={this.onDeleteClick}
>delete</span>
)
}
</span>
)
}
</div>
<div className="comment__text" dangerouslySetInnerHTML={{ __html: o.text }}/>
</div>
{
web/app/components/comment/index.js
-1
View File
@@ -4,7 +4,6 @@ require('./comment.scss');
require('./__action/comment__action.scss');
require('./__avatar/comment__avatar.scss');
require('./__body/comment__body.scss');
require('./__controls/comment__controls.scss');
require('./__info/comment__info.scss');
require('./__input/comment__input.scss');