diff --git a/src/components/Views/Expo/Expo.tsx b/src/components/Views/Expo/Expo.tsx
index e7f4591f..2f93e6ac 100644
--- a/src/components/Views/Expo/Expo.tsx
+++ b/src/components/Views/Expo/Expo.tsx
@@ -43,7 +43,7 @@ export const Expo = (props: Props) => {
const getLoadShoutsFilters = (additionalFilters: LoadShoutsFilters = {}): LoadShoutsFilters => {
const filters = { published: true, ...additionalFilters }
- filters.layouts = []
+ if (!filters.layouts) filters.layouts = []
if (props.layout) {
filters.layouts.push(props.layout)
} else {
@@ -132,7 +132,6 @@ export const Expo = (props: Props) => {
loadRandomTopArticles()
loadRandomTopMonthArticles()
},
- { defer: true },
),
)
@@ -143,6 +142,7 @@ export const Expo = (props: Props) => {
const handleLoadMoreClick = () => {
loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
}
+
return (
0} fallback={}>
diff --git a/src/components/_shared/Lightbox/Lightbox.module.scss b/src/components/_shared/Lightbox/Lightbox.module.scss
index 6add1468..4958b65a 100644
--- a/src/components/_shared/Lightbox/Lightbox.module.scss
+++ b/src/components/_shared/Lightbox/Lightbox.module.scss
@@ -80,6 +80,28 @@
animation-fill-mode: backwards;
}
+.scalePercentage {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ width: 40px;
+ height: 24px;
+ margin: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10001;
+
+ font-size: 1.2rem;
+ border-radius: 6px;
+ background-color: rgb(0 0 0 / 80%);
+ color: #fff;
+
+ pointer-events: none;
+}
+
@keyframes fadeIn {
0% {
opacity: 0;
diff --git a/src/components/_shared/Lightbox/Lightbox.tsx b/src/components/_shared/Lightbox/Lightbox.tsx
index 89c7d94b..e4ad4f5a 100644
--- a/src/components/_shared/Lightbox/Lightbox.tsx
+++ b/src/components/_shared/Lightbox/Lightbox.tsx
@@ -1,6 +1,7 @@
import { clsx } from 'clsx'
-import { createMemo, createSignal, onCleanup } from 'solid-js'
+import { Show, createEffect, on, createMemo, createSignal, onCleanup } from 'solid-js'
+import { getImageUrl } from '../../../utils/getImageUrl'
import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
import { Icon } from '../Icon'
@@ -18,6 +19,7 @@ const TRANSITION_SPEED = 300
export const Lightbox = (props: Props) => {
const [zoomLevel, setZoomLevel] = createSignal(1)
+ const [pictureScalePercentage, setPictureScalePercentage] = createSignal(null)
const [translateX, setTranslateX] = createSignal(0)
const [translateY, setTranslateY] = createSignal(0)
const [transitionEnabled, setTransitionEnabled] = createSignal(false)
@@ -33,7 +35,7 @@ export const Lightbox = (props: Props) => {
setTimeout(() => {
props.onClose()
- }, 300)
+ }, 200)
}
const zoomIn = (event) => {
@@ -64,6 +66,7 @@ export const Lightbox = (props: Props) => {
scale = Math.min(Math.max(0.125, scale), 4)
+ setTransitionEnabled(true)
setZoomLevel(scale * ZOOM_STEP)
}
@@ -105,12 +108,33 @@ export const Lightbox = (props: Props) => {
cursor: 'grab',
}))
+ let fadeTimer
+
+ createEffect(
+ on(
+ () => zoomLevel(),
+ () => {
+ clearTimeout(fadeTimer)
+
+ fadeTimer = setTimeout(() => {
+ setPictureScalePercentage(null)
+ }, 2200)
+
+ setPictureScalePercentage(Math.round(zoomLevel() * 100))
+ },
+ { defer: true },
+ ),
+ )
+
return (
(lightboxRef.current = el)}
>
+
+ {`${pictureScalePercentage()}%`}
+
@@ -127,7 +151,7 @@ export const Lightbox = (props: Props) => {
event.stopPropagation()}
onWheel={handleWheelZoom}
diff --git a/src/components/_shared/SolidSwiper/ImageSwiper.tsx b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
index e9ebbda3..188a95f8 100644
--- a/src/components/_shared/SolidSwiper/ImageSwiper.tsx
+++ b/src/components/_shared/SolidSwiper/ImageSwiper.tsx
@@ -143,7 +143,6 @@ export const ImageSwiper = (props: Props) => {
slides-per-view={1}
thumbs-swiper={'.thumbSwiper'}
observer={true}
- // slide-change={handleSlideChange}
space-between={isMobileView() ? 20 : 10}
>
diff --git a/src/components/_shared/SolidSwiper/Swiper.module.scss b/src/components/_shared/SolidSwiper/Swiper.module.scss
index 3e9cdf82..703a3337 100644
--- a/src/components/_shared/SolidSwiper/Swiper.module.scss
+++ b/src/components/_shared/SolidSwiper/Swiper.module.scss
@@ -130,6 +130,7 @@
box-sizing: border-box;
overflow: hidden;
width: 100%;
+ max-height: var(--slide-height);
.counter {
@include font-size(1.2rem);
diff --git a/src/utils/getImageUrl.ts b/src/utils/getImageUrl.ts
index 7805efa0..661e3951 100644
--- a/src/utils/getImageUrl.ts
+++ b/src/utils/getImageUrl.ts
@@ -13,15 +13,25 @@ const getSizeUrlPart = (options: { width?: number; height?: number } = {}) => {
return `${widthString}x${heightString}/`
}
-export const getImageUrl = (src: string, options: { width?: number; height?: number } = {}) => {
+export const getImageUrl = (
+ src: string,
+ options: { width?: number; height?: number; noSizeUrlPart?: boolean } = {},
+) => {
const sizeUrlPart = getSizeUrlPart(options)
+ let modifiedSrc = src // Используйте новую переменную вместо переназначения параметра
+
+ if (options.noSizeUrlPart) {
+ modifiedSrc = modifiedSrc.replace(/\d+x.*?\//, '')
+ }
+
if (src.startsWith(thumborPrefix)) {
- const thumborKey = src.replace(thumborPrefix, '')
+ const thumborKey = modifiedSrc.replace(thumborPrefix, '')
+
return `${thumborUrl}/unsafe/${sizeUrlPart}${thumborKey}`
}
- return `${thumborUrl}/unsafe/${sizeUrlPart}${src}`
+ return `${thumborUrl}/unsafe/${sizeUrlPart}${modifiedSrc}`
}
export const getOpenGraphImageUrl = (