diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx index b132691d..8bc085a4 100644 --- a/src/components/lab/LabImage/index.tsx +++ b/src/components/lab/LabImage/index.tsx @@ -1,13 +1,16 @@ import React, { FC } from 'react'; +import Image from 'next/future/image'; import SwiperCore, { A11y, Navigation, Pagination } from 'swiper'; import { ImagePreloader } from '~/components/media/ImagePreloader'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { INodeComponentProps } from '~/constants/node'; +import { imagePresets } from '~/constants/urls'; import { useGotoNode } from '~/hooks/node/useGotoNode'; import { useNodeImages } from '~/hooks/node/useNodeImages'; import { normalizeBrightColor } from '~/utils/color'; +import { getURL } from '~/utils/dom'; import styles from './styles.module.scss'; @@ -19,7 +22,7 @@ const LabImage: FC = ({ node, isLoading }) => { const images = useNodeImages(node); const onClick = useGotoNode(node.id); - if (!images?.length && !isLoading) { + if (!images?.length) { return null; } @@ -28,9 +31,12 @@ const LabImage: FC = ({ node, isLoading }) => { return (
- diff --git a/src/components/lab/LabImage/styles.module.scss b/src/components/lab/LabImage/styles.module.scss index bf0e220c..a8aecef7 100644 --- a/src/components/lab/LabImage/styles.module.scss +++ b/src/components/lab/LabImage/styles.module.scss @@ -51,6 +51,8 @@ max-height: calc(100vh - 70px - 70px); max-width: 100%; transition: box-shadow 1s; + max-inline-size: 100%; + block-size: auto; @include tablet { padding-bottom: 0; diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx index 040a3c44..07b4807b 100644 --- a/src/components/node/NodeImageSwiperBlock/index.tsx +++ b/src/components/node/NodeImageSwiperBlock/index.tsx @@ -2,28 +2,23 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import classNames from 'classnames'; import { observer } from 'mobx-react-lite'; -import Image from 'next/future/image'; import SwiperCore, { Keyboard, + Lazy, Navigation, Pagination, SwiperOptions, - Lazy, } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperClass from 'swiper/types/swiper-class'; import { ImagePreloader } from '~/components/media/ImagePreloader'; import { INodeComponentProps } from '~/constants/node'; -import { imagePresets } from '~/constants/urls'; import { useModal } from '~/hooks/modal/useModal'; import { useImageModal } from '~/hooks/navigation/useImageModal'; import { useNodeImages } from '~/hooks/node/useNodeImages'; -import { IFile } from '~/types'; import { normalizeBrightColor } from '~/utils/color'; -import { getURL } from '~/utils/dom'; - -import { imageSrcSets, ImagePreset } from '../../../constants/urls'; +import { getFileSrcSet } from '~/utils/srcset'; import styles from './styles.module.scss'; @@ -47,14 +42,6 @@ const lazy = { checkInView: true, }; -const generateSrcSet = (file: IFile) => - Object.keys(imageSrcSets) - .map( - (preset) => - `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`, - ) - .join(', '); - const NodeImageSwiperBlock: FC = observer(({ node }) => { const [controlledSwiper, setControlledSwiper] = useState< SwiperClass | undefined @@ -154,7 +141,7 @@ const NodeImageSwiperBlock: FC = observer(({ node }) => { + Object.keys(imageSrcSets) + .map( + (preset) => + `${getURL(file, preset as ImagePreset)} ${imageSrcSets[preset]}w`, + ) + .join(', ');