mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 04:46:40 +07:00
removed obsolete components
This commit is contained in:
Fedor Katurov
parent
eb41e9a8cc
commit
15095b3116
6 changed files with 0 additions and 786 deletions
|
|
@ -1,35 +0,0 @@
|
|||
import React, { FC } from 'react';
|
||||
import range from 'ramda/es/range';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
total: number;
|
||||
current: number;
|
||||
loaded?: Record<number, boolean>;
|
||||
onChange: (current: number) => void;
|
||||
}
|
||||
|
||||
const ImageSwitcher: FC<IProps> = ({ total, current, onChange, loaded }) => {
|
||||
if (total <= 1) return null;
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.switcher}>
|
||||
{range(0, total).map(item => (
|
||||
<div
|
||||
className={classNames({
|
||||
is_active: item === current,
|
||||
is_loaded: loaded && loaded[item],
|
||||
})}
|
||||
key={item}
|
||||
onClick={() => onChange(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { ImageSwitcher };
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.switcher {
|
||||
position: absolute;
|
||||
// background: darken($content_bg, 2%);
|
||||
background: url('../../../../src/sprites/noise.png') $main_bg_color;
|
||||
display: flex;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
top: -60px;
|
||||
border-radius: 24px;
|
||||
padding: 0 3px;
|
||||
// flex-wrap: wrap;
|
||||
transition: background-color 0.5s;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
& > div {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.25s;
|
||||
opacity: 0.5;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 8px;
|
||||
box-shadow: inset white 0 0 0 2px;
|
||||
transform: scale(0.5);
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
&:global(.is_active) {
|
||||
&::after {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.is_loaded)::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { ImageSwitcher } from '../ImageSwitcher';
|
||||
import styles from './styles.module.scss';
|
||||
import { INode } from '~/redux/types';
|
||||
import classNames from 'classnames';
|
||||
import { getURL } from '~/utils/dom';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import * as MODAL_ACTIONS from '~/redux/modal/actions';
|
||||
import { LoaderCircle } from '~/components/input/LoaderCircle';
|
||||
|
||||
interface IProps {
|
||||
is_loading: boolean;
|
||||
node: INode;
|
||||
layout: {};
|
||||
updateLayout: () => void;
|
||||
modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
|
||||
}
|
||||
|
||||
const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
|
||||
const [is_animated, setIsAnimated] = useState(false);
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [height, setHeight] = useState(window.innerHeight - 150);
|
||||
const [loaded, setLoaded] = useState<Record<number, boolean>>({});
|
||||
const refs = useRef<Record<number, HTMLDivElement>>({});
|
||||
|
||||
const images = useMemo(
|
||||
() =>
|
||||
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
|
||||
[node]
|
||||
);
|
||||
|
||||
const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
|
||||
|
||||
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
|
||||
setLoaded,
|
||||
loaded,
|
||||
]);
|
||||
|
||||
useEffect(() => updateLayout(), [loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!refs || !refs.current[current] || !loaded[current])
|
||||
return setHeight(window.innerHeight - 150);
|
||||
|
||||
const el = refs.current[current];
|
||||
const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
|
||||
|
||||
setHeight(element_height);
|
||||
}, [refs, current, loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setIsAnimated(true), 250);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const onOpenPhotoSwipe = useCallback(() => modalShowPhotoswipe(images, current), [
|
||||
modalShowPhotoswipe,
|
||||
images,
|
||||
current,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className={classNames(styles.wrap, { is_loading, is_animated })}>
|
||||
<div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
|
||||
{(is_loading || !loaded[0] || !images.length) && (
|
||||
<div className={styles.placeholder}>
|
||||
<LoaderCircle size={72} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{images.map((file, index) => (
|
||||
<div
|
||||
className={classNames(styles.image_wrap, {
|
||||
is_active: index === current && loaded[index],
|
||||
})}
|
||||
ref={setRef(index)}
|
||||
key={file.id}
|
||||
>
|
||||
<img
|
||||
className={styles.image}
|
||||
src={getURL(file, PRESETS['1600'])}
|
||||
alt=""
|
||||
key={file.id}
|
||||
onLoad={onImageLoad(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<ImageSwitcher
|
||||
total={images.length}
|
||||
current={current}
|
||||
onChange={setCurrent}
|
||||
loaded={loaded}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { NodeImageBlock };
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
padding-bottom: $gap * 2;
|
||||
|
||||
&:global(.is_animated) {
|
||||
.image_container {
|
||||
transition: height 0.5s;
|
||||
}
|
||||
|
||||
.image_wrap {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image_container {
|
||||
width: 100%;
|
||||
border-radius: $panel_radius 0 0 $panel_radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
.image {
|
||||
max-height: calc(100vh - 150px);
|
||||
max-width: 100%;
|
||||
opacity: 1;
|
||||
border-radius: $radius;
|
||||
|
||||
@include outer_shadow();
|
||||
}
|
||||
}
|
||||
|
||||
.image_wrap {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:global(.is_active) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
width: 100%;
|
||||
height: calc(100vh - 130px);
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1,345 +0,0 @@
|
|||
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import classNames from 'classnames';
|
||||
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
|
||||
import { INodeComponentProps } from '~/redux/node/constants';
|
||||
import { getURL } from '~/utils/dom';
|
||||
import { PRESETS } from '~/constants/urls';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { useArrows } from '~/utils/hooks/keys';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { modalShowPhotoswipe } from '~/redux/modal/actions';
|
||||
import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
|
||||
import { selectModal } from '~/redux/modal/selectors';
|
||||
|
||||
interface IProps extends INodeComponentProps {
|
||||
updateLayout?: () => void;
|
||||
}
|
||||
|
||||
const getX = event =>
|
||||
(event.touches && event.touches.length) || (event.changedTouches && event.changedTouches.length)
|
||||
? (event.touches.length && event.touches[0].clientX) || event.changedTouches[0].clientX
|
||||
: event.clientX;
|
||||
|
||||
const NodeImageSlideBlock: FC<IProps> = ({ node, isLoading, updateLayout = () => {} }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { is_shown } = useShallowSelect(selectModal);
|
||||
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [height, setHeight] = useState(window.innerHeight - 143);
|
||||
const [max_height, setMaxHeight] = useState(960);
|
||||
const [loaded, setLoaded] = useState<Record<number, boolean>>({});
|
||||
const refs = useRef<Record<number, HTMLDivElement>>({});
|
||||
const [heights, setHeights] = useState({});
|
||||
|
||||
const [initial_offset, setInitialOffset] = useState(0);
|
||||
const [initial_x, setInitialX] = useState(0);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [is_dragging, setIsDragging] = useState(false);
|
||||
const [drag_start, setDragStart] = useState(0);
|
||||
|
||||
const slide = useRef<HTMLDivElement>(null);
|
||||
const wrap = useRef<HTMLDivElement>(null);
|
||||
|
||||
const setHeightThrottled = useCallback(throttle(100, setHeight), [setHeight]);
|
||||
|
||||
const images = useMemo(
|
||||
() =>
|
||||
(node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
|
||||
[node.files]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded({});
|
||||
refs.current = {};
|
||||
}, [images]);
|
||||
|
||||
const updateSizes = useCallback(() => {
|
||||
const values = Object.keys(refs.current).reduce((obj, key) => {
|
||||
const ref = refs.current[key];
|
||||
|
||||
if (!ref || !ref.getBoundingClientRect) return 0;
|
||||
|
||||
return { ...obj, [key]: ref.getBoundingClientRect().height };
|
||||
}, {});
|
||||
|
||||
setHeights(values);
|
||||
}, [refs]);
|
||||
|
||||
const setRef = useCallback(
|
||||
index => el => {
|
||||
refs.current[index] = el;
|
||||
},
|
||||
[refs, heights, setHeights, images]
|
||||
);
|
||||
|
||||
const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
|
||||
setLoaded,
|
||||
loaded,
|
||||
]);
|
||||
|
||||
// update outside hooks
|
||||
useEffect(updateLayout, [loaded, height, images]);
|
||||
useEffect(updateSizes, [refs, current, loaded, images]);
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(updateLayout, 300);
|
||||
|
||||
if (!wrap || !wrap.current) return () => clearTimeout(timeout);
|
||||
|
||||
const { width } = wrap.current.getBoundingClientRect();
|
||||
const fallback = window.innerHeight - 143;
|
||||
|
||||
if (isLoading) {
|
||||
setHeight(fallback);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
|
||||
const selected = Math.abs(-offset / width);
|
||||
|
||||
if (!heights[Math.round(selected)]) {
|
||||
setHeight(fallback);
|
||||
return () => clearTimeout(timeout);
|
||||
}
|
||||
|
||||
const minimal = Math.min(fallback, 120);
|
||||
|
||||
const prev = Math.max(heights[Math.floor(selected)] || fallback, minimal);
|
||||
const next = Math.max(heights[Math.ceil(selected)] || fallback, minimal);
|
||||
const now = prev - (prev - next) * (selected % 1);
|
||||
|
||||
if (current !== Math.round(selected)) setCurrent(Math.round(selected));
|
||||
|
||||
if (!is_dragging) {
|
||||
setHeight(now);
|
||||
} else {
|
||||
setHeightThrottled(now);
|
||||
}
|
||||
|
||||
// update layout after all manipulations
|
||||
return () => {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
};
|
||||
}, [is_dragging, wrap, offset, heights, max_height, images, isLoading, updateLayout]);
|
||||
|
||||
const onDrag = useCallback(
|
||||
event => {
|
||||
if (
|
||||
!is_dragging ||
|
||||
!slide.current ||
|
||||
!wrap.current ||
|
||||
(event.touches && event.clientY > event.clientX)
|
||||
)
|
||||
return;
|
||||
|
||||
const { width: slide_width } = slide.current.getBoundingClientRect();
|
||||
const { width: wrap_width } = wrap.current.getBoundingClientRect();
|
||||
|
||||
setOffset(
|
||||
Math.min(Math.max(initial_offset + getX(event) - initial_x, wrap_width - slide_width), 0)
|
||||
);
|
||||
},
|
||||
[is_dragging, initial_x, setOffset, initial_offset]
|
||||
);
|
||||
|
||||
const normalizeOffset = useCallback(() => {
|
||||
if (!slide.current || !wrap.current) return;
|
||||
|
||||
const { width: wrap_width } = wrap.current.getBoundingClientRect();
|
||||
const { width: slide_width } = slide.current.getBoundingClientRect();
|
||||
|
||||
const shift = (initial_offset - offset) / wrap_width; // percent / 100
|
||||
const diff = initial_offset - (shift > 0 ? Math.ceil(shift) : Math.floor(shift)) * wrap_width;
|
||||
const new_offset =
|
||||
Math.abs(shift) > 0.25
|
||||
? Math.min(Math.max(diff, wrap_width - slide_width), 0) // next or prev slide
|
||||
: Math.round(offset / wrap_width) * wrap_width; // back to this one
|
||||
|
||||
setOffset(new_offset);
|
||||
}, [wrap, offset, initial_offset]);
|
||||
|
||||
const updateMaxHeight = useCallback(() => {
|
||||
if (!wrap.current) return;
|
||||
setMaxHeight(window.innerHeight - 143);
|
||||
normalizeOffset();
|
||||
}, [wrap, setMaxHeight, normalizeOffset]);
|
||||
|
||||
const onOpenPhotoSwipe = useCallback(() => dispatch(modalShowPhotoswipe(images, current)), [
|
||||
dispatch,
|
||||
images,
|
||||
current,
|
||||
]);
|
||||
|
||||
const stopDragging = useCallback(
|
||||
event => {
|
||||
if (!is_dragging) return;
|
||||
|
||||
setIsDragging(false);
|
||||
normalizeOffset();
|
||||
|
||||
if (
|
||||
Math.abs(new Date().getTime() - drag_start) < 200 &&
|
||||
Math.abs(initial_x - getX(event)) < 5
|
||||
) {
|
||||
onOpenPhotoSwipe();
|
||||
}
|
||||
},
|
||||
[setIsDragging, is_dragging, normalizeOffset, onOpenPhotoSwipe, drag_start]
|
||||
);
|
||||
|
||||
const startDragging = useCallback(
|
||||
event => {
|
||||
setIsDragging(true);
|
||||
setInitialX(getX(event));
|
||||
setInitialOffset(offset);
|
||||
setDragStart(new Date().getTime());
|
||||
},
|
||||
[setIsDragging, setInitialX, offset, setInitialOffset, setDragStart]
|
||||
);
|
||||
|
||||
useEffect(() => updateMaxHeight(), [images]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('resize', updateSizes);
|
||||
window.addEventListener('resize', updateMaxHeight);
|
||||
|
||||
window.addEventListener('mousemove', onDrag);
|
||||
window.addEventListener('touchmove', onDrag);
|
||||
|
||||
window.addEventListener('mouseup', stopDragging);
|
||||
window.addEventListener('touchend', stopDragging);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateSizes);
|
||||
window.removeEventListener('resize', updateMaxHeight);
|
||||
|
||||
window.removeEventListener('mousemove', onDrag);
|
||||
window.removeEventListener('touchmove', onDrag);
|
||||
|
||||
window.removeEventListener('mouseup', stopDragging);
|
||||
window.removeEventListener('touchend', stopDragging);
|
||||
};
|
||||
}, [onDrag, stopDragging, updateMaxHeight, updateSizes]);
|
||||
|
||||
const changeCurrent = useCallback(
|
||||
(item: number) => {
|
||||
if (!wrap.current) return;
|
||||
|
||||
const { width } = wrap.current.getBoundingClientRect();
|
||||
setOffset(-1 * item * width);
|
||||
},
|
||||
[wrap]
|
||||
);
|
||||
|
||||
const onPrev = useCallback(() => changeCurrent(current > 0 ? current - 1 : images.length - 1), [
|
||||
changeCurrent,
|
||||
current,
|
||||
images,
|
||||
]);
|
||||
|
||||
const onNext = useCallback(() => changeCurrent(current < images.length - 1 ? current + 1 : 0), [
|
||||
changeCurrent,
|
||||
current,
|
||||
images,
|
||||
]);
|
||||
|
||||
useArrows(onNext, onPrev, is_shown);
|
||||
|
||||
useEffect(() => {
|
||||
setOffset(0);
|
||||
}, [node.id]);
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={classNames(styles.cutter, { [styles.is_loading]: isLoading })} ref={wrap}>
|
||||
<div
|
||||
className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
|
||||
style={{
|
||||
height,
|
||||
transform: `translate(${offset}px, 0)`,
|
||||
width: `${images.length * 100}%`,
|
||||
}}
|
||||
onMouseDown={startDragging}
|
||||
onTouchStart={startDragging}
|
||||
ref={slide}
|
||||
>
|
||||
{!isLoading &&
|
||||
images.map((file, index) => (
|
||||
<div
|
||||
className={classNames(styles.image_wrap, {
|
||||
[styles.is_active]: index === current,
|
||||
})}
|
||||
ref={setRef(index)}
|
||||
key={`${node?.updated_at || ''} + ${file?.id || ''} + ${index}`}
|
||||
>
|
||||
<svg
|
||||
viewBox={`0 0 ${file?.metadata?.width || 0} ${file?.metadata?.height || 0}`}
|
||||
className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
|
||||
style={{
|
||||
maxHeight: max_height,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<defs>
|
||||
<filter id="f1" x="0" y="0">
|
||||
<feGaussianBlur
|
||||
stdDeviation="5 5"
|
||||
x="0%"
|
||||
y="0%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
in="blend"
|
||||
edgeMode="none"
|
||||
result="blur2"
|
||||
/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
|
||||
|
||||
<image
|
||||
xlinkHref={getURL(file, PRESETS['300'])}
|
||||
width="100%"
|
||||
height="100%"
|
||||
filter="url(#f1)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<img
|
||||
className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
|
||||
src={getURL(file, PRESETS['1600'])}
|
||||
alt=""
|
||||
key={file.id}
|
||||
onLoad={onImageLoad(index)}
|
||||
style={{ maxHeight: max_height }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className={styles.image_count}>
|
||||
{current + 1}
|
||||
<small> / </small>
|
||||
{images.length}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className={classNames(styles.image_arrow)} onClick={onPrev}>
|
||||
<Icon icon="left" size={40} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{images.length > 1 && (
|
||||
<div className={classNames(styles.image_arrow, styles.image_arrow_right)} onClick={onNext}>
|
||||
<Icon icon="right" size={40} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { NodeImageSlideBlock };
|
||||
|
|
@ -1,187 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cutter {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
transition: height 0.25s;
|
||||
border-radius: $radius;
|
||||
margin-right: -$gap / 2;
|
||||
margin-left: -$gap / 2;
|
||||
|
||||
.is_loading {
|
||||
.placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image_container {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
will-change: transform, height;
|
||||
transition: height 500ms, transform 500ms;
|
||||
padding: 0 0 20px 0;
|
||||
|
||||
&:active {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
&.is_dragging {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image_wrap {
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 $gap / 2;
|
||||
position: relative;
|
||||
|
||||
&.is_active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image_count {
|
||||
position: absolute;
|
||||
color: transparentize(white, 0.5);
|
||||
bottom: $gap * 3;
|
||||
right: 50%;
|
||||
padding: $gap / 3 $gap;
|
||||
border-radius: 20px;
|
||||
background: $content_bg;
|
||||
font: $font_12_semibold;
|
||||
transform: translate(50%, 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
|
||||
small {
|
||||
font-size: 0.8em;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.image_arrow {
|
||||
position: absolute;
|
||||
left: -$gap;
|
||||
top: 50%;
|
||||
width: 40px;
|
||||
height: 64px;
|
||||
border-radius: $radius;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-100%, -50%);
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&_right {
|
||||
right: -$gap;
|
||||
left: auto;
|
||||
transform: translate(100%, -50%);
|
||||
}
|
||||
|
||||
@media (max-width: $content_width + 80px + 40px) {
|
||||
background: $content_bg;
|
||||
left: 0;
|
||||
transform: translate(0, -50%);
|
||||
border-radius: 0 $radius $radius 0;
|
||||
|
||||
&_right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
border-radius: $radius 0 0 $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: relative;
|
||||
left: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $content_bg;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: opacity 2s;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
|
||||
&.is_loading {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
opacity: 0.025;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
|
||||
.image, .preview {
|
||||
max-width: 100%;
|
||||
border-radius: $radius;
|
||||
|
||||
@include tablet {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
|
||||
&.is_loaded {
|
||||
opacity: 1;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
&.is_loaded {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue