diff --git a/src/components/containers/CommentWrapper/index.tsx b/src/components/containers/CommentWrapper/index.tsx index 4847ae2a..e93b61dc 100644 --- a/src/components/containers/CommentWrapper/index.tsx +++ b/src/components/containers/CommentWrapper/index.tsx @@ -3,21 +3,26 @@ import classNames from 'classnames'; import * as styles from './styles.scss'; import { Card } from '../Card'; +import { IUser } from '~/redux/auth/types'; +import { getURL } from '~/utils/dom'; +import path from 'ramda/es/path'; type IProps = HTMLAttributes & { - photo?: string; + // photo?: string; + user: IUser; is_empty?: boolean; is_loading?: boolean; is_same?: boolean; }; const CommentWrapper: FC = ({ - photo, + // photo, children, is_empty, is_loading, className, is_same, + user, ...props }) => ( = ({ {...props} >
- {!is_same && photo && ( -
- )} +
+
~{path(['username'], user)}
{children}
diff --git a/src/components/containers/CommentWrapper/styles.scss b/src/components/containers/CommentWrapper/styles.scss index 05a9b126..23988d3f 100644 --- a/src/components/containers/CommentWrapper/styles.scss +++ b/src/components/containers/CommentWrapper/styles.scss @@ -14,6 +14,10 @@ margin: 0 !important; border-radius: 0; } + + @include tablet { + flex-direction: column; + } } .text { @@ -25,6 +29,17 @@ flex: 0 0 $comment_height; border-radius: $panel_radius 0 0 $panel_radius; background-color: transparentize(black, 0.9); + display: flex; + flex-direction: column; + box-sizing: border-box; + + @include tablet { + flex-direction: row; + flex: 0 0 40px; + padding: 8px; + box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px; + border-radius: $panel_radius $panel_radius 0 0; + } } .thumb_image { @@ -32,4 +47,25 @@ background: transparentize(white, 0.97) no-repeat 50% 50%; border-radius: $panel_radius 0 0 $panel_radius; background-size: cover; + flex: 0 0 $comment_height; + + @include tablet { + height: 32px; + flex: 0 0 32px; + border-radius: $panel_radius; + } +} + +.thumb_user { + display: none; + flex: 1; + align-items: center; + justify-content: flex-start; + box-sizing: border-box; + padding: 0 $gap; + font: $font_14_medium; + + @include tablet { + display: flex; + } } diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index 5fd8b9f6..e3b1f3b0 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/node/Comment/index.tsx @@ -25,7 +25,7 @@ const Comment: FC = ({ className={className} is_empty={is_empty} is_loading={is_loading} - photo={getURL(comment_group.user.photo)} + user={comment_group.user} is_same={is_same} {...props} > diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx index a096ea7e..c66dae7c 100644 --- a/src/components/node/CommentForm/index.tsx +++ b/src/components/node/CommentForm/index.tsx @@ -42,7 +42,7 @@ type IProps = ReturnType & const CommentFormUnconnected: FC = ({ node: { comment_data, is_sending_comment }, uploads: { statuses, files }, - user: { photo }, + user, id, nodePostComment, nodeSetCommentData, @@ -122,7 +122,7 @@ const CommentFormUnconnected: FC = ({ const comment = comment_data[id]; return ( - +