muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed flexbin props

Browse source
This commit is contained in:
Fedor Katurov 2021-06-23 20:36:58 +07:00
parent 45c935af3b
commit c37f727aad
2 changed files with 27 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/comment/CommentContent/index.tsx
View file

@ -15,6 +15,8 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
import { CommentForm } from '~/components/comment/CommentForm'; import { CommentForm } from '~/components/comment/CommentForm';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { selectNode } from '~/redux/node/selectors'; import { selectNode } from '~/redux/node/selectors';
import classNames from 'classnames';
import 'flexbin/flexbin.scss';
interface IProps { interface IProps {
comment: IComment; comment: IComment;
@ -84,7 +86,9 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalSho
<div className={classnames(styles.block, styles.block_image)}> <div className={classnames(styles.block, styles.block_image)}>
{menu} {menu}
<div className={styles.images}> <div
className={classNames(styles.images, { [styles.multiple]: groupped.image.length > 1 })}
>
{groupped.image.map((file, index) => ( {groupped.image.map((file, index) => (
<div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}> <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
<img src={getURL(file, PRESETS['600'])} alt={file.name} /> <img src={getURL(file, PRESETS['600'])} alt={file.name} />

27
src/components/comment/CommentContent/styles.module.scss
View file

@ -1,6 +1,5 @@
@import "src/styles/variables"; @import "src/styles/variables";
@import "~flexbin/flexbin";
@import 'flexbin/flexbin.scss';
.wrap { .wrap {
position: relative; position: relative;
@ -114,7 +113,6 @@
font: $font_12_regular; font: $font_12_regular;
color: transparentize($color: white, $amount: 0.8); color: transparentize($color: white, $amount: 0.8);
padding: 0 6px 2px; padding: 0 6px 2px;
border-radius: 0 0 $radius 0;
z-index: 2; z-index: 2;
background: $comment_bg; background: $comment_bg;
border-radius: 4px; border-radius: 4px;
@ -123,10 +121,29 @@
} }
.images { .images {
@include flexbin(240px, 5px);
img { img {
max-height: 400px;
border-radius: $radius; 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);
}
} }
} }