diff --git a/web/app/components/comment/__action/comment__action.scss b/web/app/components/comment/__action/comment__action.scss index 14822b91..2403bc3e 100644 --- a/web/app/components/comment/__action/comment__action.scss +++ b/web/app/components/comment/__action/comment__action.scss @@ -1,14 +1,23 @@ .comment__action { - margin-left: 8px; - font-weight: 700; - color: #0aa; + font-size: 14px; cursor: pointer; + user-select: none; + color: #8CD4D4; &:hover { - color: #06c5c5; + color: #0aa; } &:focus { outline: none; } + + + .comment__controls { + &::before { + content: '•'; + margin-left: 8px; + margin-right: 8px; + color: #777; + } + } } diff --git a/web/app/components/comment/__avatar/_default/comment__avatar_default.scss b/web/app/components/comment/__avatar/_default/comment__avatar_default.scss new file mode 100644 index 00000000..13fb036f --- /dev/null +++ b/web/app/components/comment/__avatar/_default/comment__avatar_default.scss @@ -0,0 +1,3 @@ +.comment__avatar_default { + border: 1px solid #9cdddb; +} diff --git a/web/app/components/comment/__avatar/comment__avatar.scss b/web/app/components/comment/__avatar/comment__avatar.scss index c77c6491..2084bc5c 100644 --- a/web/app/components/comment/__avatar/comment__avatar.scss +++ b/web/app/components/comment/__avatar/comment__avatar.scss @@ -1,10 +1,8 @@ -@import '../comment.vars'; - .comment__avatar { display: inline-block; - width: $avatarSize; - height: $avatarSize; - margin-right: $avatarOffset; + width: 24px; + height: 24px; + margin-right: 8px; vertical-align: middle; border-radius: 4px; } diff --git a/web/app/components/comment/__avatar/comment__avatar.svg b/web/app/components/comment/__avatar/comment__avatar.svg new file mode 100644 index 00000000..768b8b70 --- /dev/null +++ b/web/app/components/comment/__avatar/comment__avatar.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/web/app/components/comment/__control/comment__control.scss b/web/app/components/comment/__control/comment__control.scss new file mode 100644 index 00000000..b1b1e100 --- /dev/null +++ b/web/app/components/comment/__control/comment__control.scss @@ -0,0 +1,17 @@ +.comment__control { + margin-right: 8px; + cursor: pointer; + color: #8CD4D4; + + &:last-child { + margin-right: 0; + } + + &:hover { + color: #0aa; + } + + &:focus { + outline: none; + } +} diff --git a/web/app/components/comment/__controls/comment__controls.scss b/web/app/components/comment/__controls/comment__controls.scss index 0f4b0bbf..90b58b37 100644 --- a/web/app/components/comment/__controls/comment__controls.scss +++ b/web/app/components/comment/__controls/comment__controls.scss @@ -2,17 +2,11 @@ display: inline; vertical-align: middle; user-select: none; + font-size: 14px; + font-weight: 700; @media (hover: hover) { font-weight: 700; opacity: 0; } - - + .comment__controls_view_admin { - &::before { - content: '•'; - margin-left: 8px; - color: #777; - } - } } diff --git a/web/app/components/comment/__info/comment__info.scss b/web/app/components/comment/__info/comment__info.scss index 92fa999d..dbf9b6cc 100644 --- a/web/app/components/comment/__info/comment__info.scss +++ b/web/app/components/comment/__info/comment__info.scss @@ -1,3 +1,6 @@ .comment__info { - margin-bottom: 4px; + margin-bottom: 6px; + padding-right: 64px; + font-size: 14px; + line-height: 16px; } diff --git a/web/app/components/comment/__input/comment__input.scss b/web/app/components/comment/__input/comment__input.scss index a2286454..a4df654d 100644 --- a/web/app/components/comment/__input/comment__input.scss +++ b/web/app/components/comment/__input/comment__input.scss @@ -1,4 +1,3 @@ .comment__input { - padding-left: 32px; margin-top: 8px; } diff --git a/web/app/components/comment/__score-sign/comment__score-sign.scss b/web/app/components/comment/__score-sign/comment__score-sign.scss deleted file mode 100644 index d5770a3f..00000000 --- a/web/app/components/comment/__score-sign/comment__score-sign.scss +++ /dev/null @@ -1,3 +0,0 @@ -.comment__score-sign { - font-size: 14px; -} diff --git a/web/app/components/comment/__score-value/comment__score-value.scss b/web/app/components/comment/__score-value/comment__score-value.scss index 6f2c9ac9..294ea8f4 100644 --- a/web/app/components/comment/__score-value/comment__score-value.scss +++ b/web/app/components/comment/__score-value/comment__score-value.scss @@ -1,3 +1,6 @@ .comment__score-value { + display: inline-block; + min-width: 24px; + text-align: center; font-size: 14px; } diff --git a/web/app/components/comment/__score/_view/_negative/comment__score_view_negative.scss b/web/app/components/comment/__score/_view/_negative/comment__score_view_negative.scss new file mode 100644 index 00000000..6d80a2c7 --- /dev/null +++ b/web/app/components/comment/__score/_view/_negative/comment__score_view_negative.scss @@ -0,0 +1,3 @@ +.comment__score_view_negative { + color: #cc0606; +} diff --git a/web/app/components/comment/__score/_view/_positive/comment__score_view_positive.scss b/web/app/components/comment/__score/_view/_positive/comment__score_view_positive.scss new file mode 100644 index 00000000..9fe0f848 --- /dev/null +++ b/web/app/components/comment/__score/_view/_positive/comment__score_view_positive.scss @@ -0,0 +1,3 @@ +.comment__score_view_positive { + color: #259e06; +} diff --git a/web/app/components/comment/__score/comment__score.scss b/web/app/components/comment/__score/comment__score.scss index d2b8095b..a1c2660d 100644 --- a/web/app/components/comment/__score/comment__score.scss +++ b/web/app/components/comment/__score/comment__score.scss @@ -1,8 +1,12 @@ .comment__score { - display: inline-block; - margin-left: 8px; - vertical-align: middle; + position: absolute; + top: 4px; + right: 0; + min-width: 60px; font-size: 0; - color: #666; + font-weight: 700; + text-align: right; + color: #AAA; + user-select: none; cursor: default; } diff --git a/web/app/components/comment/__time/comment__time.scss b/web/app/components/comment/__time/comment__time.scss index 7a313507..c45e1378 100644 --- a/web/app/components/comment/__time/comment__time.scss +++ b/web/app/components/comment/__time/comment__time.scss @@ -1,6 +1,5 @@ .comment__time { margin-left: 8px; vertical-align: middle; - font-size: 14px; - color: #666; + color: #999; } diff --git a/web/app/components/comment/__vote/comment__vote.scss b/web/app/components/comment/__vote/comment__vote.scss index 5e578d08..d1a9efa7 100644 --- a/web/app/components/comment/__vote/comment__vote.scss +++ b/web/app/components/comment/__vote/comment__vote.scss @@ -1,6 +1,6 @@ .comment__vote { display: inline-block; - border-top: 9px solid #ccc; + border-top: 9px solid #dedede; border-right: 7px solid transparent; border-left: 7px solid transparent; font-size: 0; diff --git a/web/app/components/comment/_level/comment_level.scss b/web/app/components/comment/_level/comment_level.scss index 3036dd31..2e9d6e69 100644 --- a/web/app/components/comment/_level/comment_level.scss +++ b/web/app/components/comment/_level/comment_level.scss @@ -1,13 +1,13 @@ -@import '../comment.vars'; +$step: 24px; @for $i from 1 through 5 { .comment_level { &_#{$i} { - padding-left: $i * ($avatarSize + $avatarOffset); + padding-left: $i * $step; &.comment_replying { .comment__input { - margin-left: -$i * ($avatarSize + $avatarOffset); + margin-left: -$i * $step; @media (min-width: 768px) { margin-left: 0; diff --git a/web/app/components/comment/_pinned/comment_pinned.scss b/web/app/components/comment/_pinned/comment_pinned.scss index b7950eaf..5a30cbec 100644 --- a/web/app/components/comment/_pinned/comment_pinned.scss +++ b/web/app/components/comment/_pinned/comment_pinned.scss @@ -1,5 +1,3 @@ -@import 'common/variables'; - .comment_pinned { &, &.comment_view_admin { .comment__username { diff --git a/web/app/components/comment/_replying/comment_replying.scss b/web/app/components/comment/_replying/comment_replying.scss index 6f388d9d..fa54e0dc 100644 --- a/web/app/components/comment/_replying/comment_replying.scss +++ b/web/app/components/comment/_replying/comment_replying.scss @@ -1,5 +1,6 @@ .comment_replying { border: 3px solid #eee; + padding-bottom: 0; @media (min-width: 768px) { border: 0; @@ -18,11 +19,19 @@ border-left-width: 0; border-right-width: 0; border-bottom-width: 0; - padding-left: 0; @media (min-width: 768px) { border: 3px solid #eee; - padding-left: 32px; + } + } + + .comment__score { + top: 12px; + right: 8px; + + @media (min-width: 768px) { + top: 4px; + right: 0; } } } diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 64ce3b32..9f17bd28 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -176,13 +176,6 @@ export default class Comment extends Component { const isAdmin = !guest && store.get('user').admin; const isGuest = guest || !Object.keys(store.get('user')).length; - const time = new Date(data.time); - // TODO: which format for datetime should we choose? - // TODO: add smth that will count 'hours ago' (mb this: https://github.com/catamphetamine/javascript-time-ago) - // TODO: check out stash's impl; - // TODO: don't forget about optional locales, m? - // TODO: also date must be a link to the comment - const timeStr = `${time.toLocaleDateString([], { month: 'short', day: 'numeric' })}, ${time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`; const o = { ...data, text: @@ -197,14 +190,16 @@ export default class Comment extends Component { : data.text ) ), - time: timeStr, + time: formatTime(new Date(data.time)), score: { value: Math.abs(score), - sign: score > 0 ? '+' : (score < 0 ? '−' : ''), + sign: score > 0 ? '+' : (score < 0 ? '−' : null), + view: score > 0 ? 'positive' : (score < 0 ? 'negative' : null), }, user: { ...data.user, picture: data.user.picture.indexOf(API_BASE) === 0 ? `${BASE_URL}${data.user.picture}` : data.user.picture, + isDefaultPicture: data.user.picture.indexOf('/avatar/remark.image') > -1, // TODO: rewrite it on backend }, }; @@ -234,116 +229,120 @@ export default class Comment extends Component {
- + {o.user.name} - { - !isGuest && ( - - vote up - - {o.score.sign} - - {o.score.value} - - vote down - - ) - } - {o.time} { isAdmin && userBlocked && ( - blocked + Blocked ) } { isAdmin && !userBlocked && deleted && ( - deleted + Deleted ) } { - !mods.disabled && !isGuest && ( - + !isGuest && ( + reply - - ) - } + className={b('comment__vote', {}, { type: 'up', selected: scoreIncreased })} + onClick={this.increaseScore} + >Vote up - { - isAdmin && - ( - + + {o.score.sign}{o.score.value} + - { - !pinned && ( - pin - ) - } - { - pinned && ( - unpin - ) - } - - { - userBlocked && ( - unblock - ) - } - - { - !userBlocked && ( - block - ) - } - - { - !deleted && ( - delete - ) - } + Vote down ) }
+ +
+ { + !mods.disabled && !isGuest && ( + {isInputVisible ? 'Cancel' : 'Reply'} + ) + } + + { + isAdmin && + ( + + { + !pinned && ( + Pin + ) + } + + { + pinned && ( + Unpin + ) + } + + { + userBlocked && ( + Unblock + ) + } + + { + !userBlocked && ( + Block + ) + } + + { + !deleted && ( + Delete + ) + } + + ) + } +
{ @@ -366,3 +365,14 @@ function getTextSnippet(html) { return (snippet.length === LENGTH && result.length !== LENGTH) ? `${snippet}...` : snippet; } + +function formatTime(time) { + // 'ru-RU' adds a dot as a separator + const date = time.toLocaleDateString(['ru-RU'], { day: '2-digit', month: '2-digit', year: '2-digit' }); + + // do it manually because Intl API doesn't add leading zeros to hours; idk why + const hours = `0${time.getHours()}`.slice(-2); + const mins = `0${time.getMinutes()}`.slice(-2); + + return `${date} at ${hours}:${mins}`; +} diff --git a/web/app/components/comment/comment.scss b/web/app/components/comment/comment.scss index bf3711e0..c725d7cc 100644 --- a/web/app/components/comment/comment.scss +++ b/web/app/components/comment/comment.scss @@ -1,9 +1,9 @@ -@import 'common/variables'; - .comment { position: relative; overflow: hidden; - margin-bottom: $offset / 2; + margin-bottom: 16px; + padding-bottom: 8px; + border-bottom: 1px solid #fcfcfc; font-size: 16px; line-height: 1.2; diff --git a/web/app/components/comment/comment.vars.scss b/web/app/components/comment/comment.vars.scss deleted file mode 100644 index e7310866..00000000 --- a/web/app/components/comment/comment.vars.scss +++ /dev/null @@ -1,2 +0,0 @@ -$avatarSize: 24px; -$avatarOffset: 8px; diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js index 69d94136..b5f5e405 100644 --- a/web/app/components/comment/index.js +++ b/web/app/components/comment/index.js @@ -3,12 +3,19 @@ export { default } from './comment'; require('./comment.scss'); require('./__action/comment__action.scss'); + require('./__avatar/comment__avatar.scss'); +require('./__avatar/_default/comment__avatar_default.scss'); + +require('./__control/comment__control.scss'); require('./__controls/comment__controls.scss'); require('./__info/comment__info.scss'); require('./__input/comment__input.scss'); + require('./__score/comment__score.scss'); -require('./__score-sign/comment__score-sign.scss'); +require('./__score/_view/_negative/comment__score_view_negative.scss'); +require('./__score/_view/_positive/comment__score_view_positive.scss'); + require('./__score-value/comment__score-value.scss'); require('./__status/comment__status.scss'); require('./__text/comment__text.scss'); diff --git a/web/app/components/input/__button/input__button.scss b/web/app/components/input/__button/input__button.scss index ba5cd3aa..7e183fa8 100644 --- a/web/app/components/input/__button/input__button.scss +++ b/web/app/components/input/__button/input__button.scss @@ -3,6 +3,7 @@ padding: 8px 12px; font-size: 16px; border: 0; + border-radius: 2px; cursor: pointer; &:focus { diff --git a/web/app/components/input/input.scss b/web/app/components/input/input.scss index cfd5f6d0..84ecf657 100644 --- a/web/app/components/input/input.scss +++ b/web/app/components/input/input.scss @@ -3,5 +3,6 @@ display: block; font-size: 0; border: 3px solid #eee; + border-radius: 2px; background: #eee; } diff --git a/web/app/components/root/__pinned-comment/root__pinned-comment.scss b/web/app/components/root/__pinned-comment/root__pinned-comment.scss index 208448cb..0765cfda 100644 --- a/web/app/components/root/__pinned-comment/root__pinned-comment.scss +++ b/web/app/components/root/__pinned-comment/root__pinned-comment.scss @@ -1,5 +1,7 @@ .root__pinned-comment { &:last-child { margin-bottom: 0; + border-bottom: 0; + padding-bottom: 0; } } diff --git a/web/app/components/root/__pinned-comments/root__pinned-comments.scss b/web/app/components/root/__pinned-comments/root__pinned-comments.scss index 547c776a..e0c3f88c 100644 --- a/web/app/components/root/__pinned-comments/root__pinned-comments.scss +++ b/web/app/components/root/__pinned-comments/root__pinned-comments.scss @@ -4,5 +4,5 @@ margin-top: 24px; padding: ($offset / 3) ($offset / 2); border: 2px solid #0aa; - border-radius: 4px; + border-radius: 2px; } diff --git a/web/app/components/root/root.scss b/web/app/components/root/root.scss index 848f0443..960774f1 100644 --- a/web/app/components/root/root.scss +++ b/web/app/components/root/root.scss @@ -1,4 +1,8 @@ .root { position: relative; font-family: 'PT Sans', Helvetica, Arial, sans-serif; + + ::selection { + background: #c6efef; + } } diff --git a/web/app/components/thread/index.js b/web/app/components/thread/index.js index c774686b..0f6a8dc8 100644 --- a/web/app/components/thread/index.js +++ b/web/app/components/thread/index.js @@ -1,3 +1 @@ export { default } from './thread'; - -require('./thread.scss'); diff --git a/web/app/components/thread/thread.scss b/web/app/components/thread/thread.scss deleted file mode 100644 index a8149d32..00000000 --- a/web/app/components/thread/thread.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'common/variables'; - -.thread { - margin-bottom: $offset / 2; -} diff --git a/web/webpack.config.js b/web/webpack.config.js index 4469c61b..7d65f4c2 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -83,7 +83,7 @@ module.exports = { ], }, { - test: /\.(png|jpg|jpeg|gif)$/, + test: /\.(png|jpg|jpeg|gif|svg)$/, use: { loader: 'file-loader', options: {