diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx index 318380f3..347aa1e9 100644 --- a/src/components/comment/CommentContent/index.tsx +++ b/src/components/comment/CommentContent/index.tsx @@ -15,6 +15,8 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions'; import { CommentForm } from '~/components/comment/CommentForm'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { selectNode } from '~/redux/node/selectors'; +import classNames from 'classnames'; +import 'flexbin/flexbin.scss'; interface IProps { comment: IComment; @@ -84,7 +86,9 @@ const CommentContent: FC = memo(({ comment, can_edit, onDelete, modalSho
{menu} -
+
1 })} + > {groupped.image.map((file, index) => (
modalShowPhotoswipe(groupped.image, index)}> {file.name} diff --git a/src/components/comment/CommentContent/styles.module.scss b/src/components/comment/CommentContent/styles.module.scss index cb02f44f..ac9a4bcf 100644 --- a/src/components/comment/CommentContent/styles.module.scss +++ b/src/components/comment/CommentContent/styles.module.scss @@ -1,6 +1,5 @@ @import "src/styles/variables"; - -@import 'flexbin/flexbin.scss'; +@import "~flexbin/flexbin"; .wrap { position: relative; @@ -114,7 +113,6 @@ font: $font_12_regular; color: transparentize($color: white, $amount: 0.8); padding: 0 6px 2px; - border-radius: 0 0 $radius 0; z-index: 2; background: $comment_bg; border-radius: 4px; @@ -123,10 +121,29 @@ } .images { - @include flexbin(240px, 5px); - img { + max-height: 400px; border-radius: $radius; + max-width: 100%; + } + + &.multiple { + img { + max-height: none; + } + + // Desktop devices + @include flexbin(25vh, $flexbin-space); + + // Tablet devices + @media (max-width: $flexbin-tablet-max) { + @include flexbin($flexbin-row-height-tablet, $flexbin-space-tablet); + } + + // Phone devices + @media (max-width: $flexbin-phone-max) { + @include flexbin($flexbin-row-height-phone, $flexbin-space-phone); + } } }