diff --git a/web/app/components/comment/__avatar/comment__avatar.scss b/web/app/components/comment/__avatar/comment__avatar.scss index 124aeaa5..c77c6491 100644 --- a/web/app/components/comment/__avatar/comment__avatar.scss +++ b/web/app/components/comment/__avatar/comment__avatar.scss @@ -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; } diff --git a/web/app/components/comment/__body/comment__body.scss b/web/app/components/comment/__body/comment__body.scss deleted file mode 100644 index d0d91822..00000000 --- a/web/app/components/comment/__body/comment__body.scss +++ /dev/null @@ -1,3 +0,0 @@ -.comment__body { - display: flex; -} diff --git a/web/app/components/comment/__controls/comment__controls.scss b/web/app/components/comment/__controls/comment__controls.scss index f8f97d0d..0f4b0bbf 100644 --- a/web/app/components/comment/__controls/comment__controls.scss +++ b/web/app/components/comment/__controls/comment__controls.scss @@ -1,5 +1,6 @@ .comment__controls { display: inline; + vertical-align: middle; user-select: none; @media (hover: hover) { diff --git a/web/app/components/comment/__score/comment__score.scss b/web/app/components/comment/__score/comment__score.scss index a5bb33b0..d2b8095b 100644 --- a/web/app/components/comment/__score/comment__score.scss +++ b/web/app/components/comment/__score/comment__score.scss @@ -1,5 +1,7 @@ .comment__score { + display: inline-block; margin-left: 8px; + vertical-align: middle; font-size: 0; color: #666; cursor: default; diff --git a/web/app/components/comment/__status/comment__status.scss b/web/app/components/comment/__status/comment__status.scss index ad8b164e..b72e5a54 100644 --- a/web/app/components/comment/__status/comment__status.scss +++ b/web/app/components/comment/__status/comment__status.scss @@ -1,4 +1,5 @@ .comment__status { margin-left: 8px; + vertical-align: middle; font-weight: 700; } diff --git a/web/app/components/comment/__time/comment__time.scss b/web/app/components/comment/__time/comment__time.scss index 5c6f0910..7a313507 100644 --- a/web/app/components/comment/__time/comment__time.scss +++ b/web/app/components/comment/__time/comment__time.scss @@ -1,5 +1,6 @@ .comment__time { margin-left: 8px; + vertical-align: middle; font-size: 14px; color: #666; } diff --git a/web/app/components/comment/__username/comment__username.scss b/web/app/components/comment/__username/comment__username.scss index ea3a492a..34b12dd2 100644 --- a/web/app/components/comment/__username/comment__username.scss +++ b/web/app/components/comment/__username/comment__username.scss @@ -1,7 +1,8 @@ .comment__username { - color: #777; + vertical-align: middle; font-weight: 700; text-decoration: none; + color: #777; &:link { &:hover { diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index cb81cfa0..9a30df77 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -212,140 +212,140 @@ export default class Comment extends Component { replying: isInputVisible, }; + // TODO: remove so much mods.view !== 'preview' + return (
- { - mods.view !== 'preview' && ( - - ) - } +
+ { + mods.view !== 'preview' && ( + + ) + } -
-
- { - mods.view !== 'preview' && ( - {o.user.name} - ) - } + { + mods.view !== 'preview' && ( + {o.user.name} + ) + } - { - mods.view === 'preview' && ( - {o.user.name} - ) - } + { + mods.view === 'preview' && ( + {o.user.name} + ) + } - { - !isGuest && ( - - vote up + { + !isGuest && ( + + vote up - {o.score.sign} + {o.score.sign} - {o.score.value} + {o.score.value} - vote down - - ) - } + vote down + + ) + } - { - mods.view !== 'preview' && ( - {o.time} - ) - } + { + mods.view !== 'preview' && ( + {o.time} + ) + } - { - isAdmin && userBlocked && ( - blocked - ) - } + { + isAdmin && userBlocked && ( + blocked + ) + } - { - isAdmin && !userBlocked && deleted && ( - deleted - ) - } + { + isAdmin && !userBlocked && deleted && ( + deleted + ) + } - { - !mods.disabled && !isGuest && ( - - reply - - ) - } + { + !mods.disabled && !isGuest && ( + + reply + + ) + } - { - isAdmin && - ( - + { + isAdmin && + ( + - { - !pinned && ( - pin - ) - } + { + !pinned && ( + pin + ) + } - { - pinned && ( - unpin - ) - } + { + pinned && ( + unpin + ) + } - { - userBlocked && ( - unblock - ) - } + { + userBlocked && ( + unblock + ) + } - { - !userBlocked && ( - block - ) - } + { + !userBlocked && ( + block + ) + } - { - !deleted && ( - delete - ) - } - - ) - } -
- -
+ { + !deleted && ( + delete + ) + } + + ) + }
+ +
{ diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js index 58028e39..69d94136 100644 --- a/web/app/components/comment/index.js +++ b/web/app/components/comment/index.js @@ -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');