mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
refactor flow components
This commit is contained in:
Fedor Katurov
parent
7f411713f4
commit
d0e99adc9f
32 changed files with 31 additions and 107 deletions
|
|
@ -10,13 +10,13 @@ import { getPrettyDate } from '~/utils/dom';
|
|||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
interface Props {
|
||||
node: Partial<INode>;
|
||||
has_new?: boolean;
|
||||
hasNew?: boolean;
|
||||
onClick?: MouseEventHandler;
|
||||
}
|
||||
|
||||
const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
|
||||
const NodeHorizontalCard: FC<Props> = ({ node, hasNew, onClick }) => {
|
||||
return (
|
||||
<Anchor
|
||||
key={node.id}
|
||||
|
|
@ -26,7 +26,7 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
|
|||
>
|
||||
<div
|
||||
className={classNames(styles.thumb, {
|
||||
[styles.new]: has_new,
|
||||
[styles.new]: hasNew,
|
||||
[styles.lab]: !node.is_promoted,
|
||||
})}
|
||||
>
|
||||
|
|
@ -44,4 +44,4 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
|
|||
);
|
||||
};
|
||||
|
||||
export { FlowRecentItem };
|
||||
export { NodeHorizontalCard };
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { FC, useMemo } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { transparentize } from 'color2k';
|
||||
|
||||
import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
|
||||
import { normalizeBrightColor } from '~/utils/color';
|
||||
import { DivProps } from '~/utils/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props extends DivProps {
|
||||
color?: string;
|
||||
size?: number;
|
||||
angle?: number;
|
||||
}
|
||||
|
||||
const CellShade: FC<Props> = ({ color, size = 50, angle = 7, ...rest }) => {
|
||||
const background = useMemo(() => {
|
||||
const normalized = normalizeBrightColor(color);
|
||||
|
||||
if (!color || color === DEFAULT_DOMINANT_COLOR || !normalized) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return `linear-gradient(${angle}deg, ${normalized} ${size}px, ${transparentize(
|
||||
normalized,
|
||||
1,
|
||||
)} ${size * 5}px)`;
|
||||
}, [angle, color, size]);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...rest}
|
||||
className={classNames(rest.className, styles.shade)}
|
||||
style={{ background }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { CellShade };
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.shade {
|
||||
background: linear-gradient(7deg, $content_bg 30px, transparent 250px);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
|
||||
&.black::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
import { FC, useMemo } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Anchor } from '~/components/common/Anchor';
|
||||
import { CellShade } from '~/components/flow/CellShade';
|
||||
import { FlowCellImage } from '~/components/flow/FlowCellImage';
|
||||
import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
|
||||
import { FlowCellText } from '~/components/flow/FlowCellText';
|
||||
import { MenuDots } from '~/components/menu/MenuDots';
|
||||
import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
|
||||
import { useWindowSize } from '~/hooks/dom/useWindowSize';
|
||||
import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
|
||||
import { FlowDisplay, INode } from '~/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props {
|
||||
id: INode['id'];
|
||||
to: string;
|
||||
title: string;
|
||||
image?: string;
|
||||
color?: string;
|
||||
|
||||
text?: string;
|
||||
flow: FlowDisplay;
|
||||
canEdit?: boolean;
|
||||
onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
|
||||
}
|
||||
|
||||
const FlowCell: FC<Props> = ({
|
||||
id,
|
||||
color,
|
||||
to,
|
||||
image,
|
||||
flow,
|
||||
text,
|
||||
title,
|
||||
canEdit = false,
|
||||
onChangeCellView,
|
||||
}) => {
|
||||
const { isTablet } = useWindowSize();
|
||||
|
||||
const withText =
|
||||
((!!flow.display && flow.display !== 'single') || !image) &&
|
||||
flow.show_description &&
|
||||
!!text;
|
||||
const {
|
||||
hasDescription,
|
||||
setViewHorizontal,
|
||||
setViewVertical,
|
||||
setViewQuadro,
|
||||
setViewSingle,
|
||||
toggleViewDescription,
|
||||
} = useFlowCellControls(id, text, flow, onChangeCellView);
|
||||
const {
|
||||
isActive: isMenuActive,
|
||||
activate,
|
||||
ref,
|
||||
deactivate,
|
||||
} = useClickOutsideFocus();
|
||||
|
||||
const shadeSize = useMemo(() => {
|
||||
const min = isTablet ? 10 : 15;
|
||||
const max = isTablet ? 20 : 40;
|
||||
|
||||
return withText ? min : max;
|
||||
}, [withText, isTablet]);
|
||||
|
||||
const shadeAngle = useMemo(() => {
|
||||
if (flow.display === 'vertical') {
|
||||
return 9;
|
||||
}
|
||||
|
||||
if (flow.display === 'horizontal') {
|
||||
return 15;
|
||||
}
|
||||
|
||||
return 7;
|
||||
}, [flow.display]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.cell, styles[flow.display || 'single'])}
|
||||
ref={ref as any}
|
||||
>
|
||||
{canEdit && !isMenuActive && (
|
||||
<div className={styles.menu}>
|
||||
<MenuDots onClick={activate} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{canEdit && isMenuActive && (
|
||||
<div className={styles.display_modal}>
|
||||
<FlowCellMenu
|
||||
onClose={deactivate}
|
||||
currentView={flow.display}
|
||||
descriptionEnabled={flow.show_description}
|
||||
hasDescription={hasDescription}
|
||||
setViewHorizontal={setViewHorizontal}
|
||||
setViewQuadro={setViewQuadro}
|
||||
setViewSingle={setViewSingle}
|
||||
setViewVertical={setViewVertical}
|
||||
toggleViewDescription={toggleViewDescription}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Anchor className={styles.link} href={to}>
|
||||
{withText && (
|
||||
<FlowCellText
|
||||
className={styles.text}
|
||||
heading={<h4 className={styles.title}>{title}</h4>}
|
||||
>
|
||||
{text!}
|
||||
</FlowCellText>
|
||||
)}
|
||||
|
||||
{image && (
|
||||
<FlowCellImage
|
||||
src={image}
|
||||
className={styles.thumb}
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!!title && (
|
||||
<CellShade
|
||||
color={color}
|
||||
className={styles.shade}
|
||||
size={shadeSize}
|
||||
angle={shadeAngle}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!withText && (
|
||||
<div className={styles.title_wrapper}>
|
||||
<h4 className={styles.title}>{title}</h4>
|
||||
</div>
|
||||
)}
|
||||
</Anchor>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FlowCell };
|
||||
|
|
@ -1,118 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.cell {
|
||||
@include inner_shadow;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: $radius;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $content_bg;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
@include outer_shadow;
|
||||
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.shade {
|
||||
@include outer_shadow;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
border-radius: $radius;
|
||||
max-height: calc(100% - 10px);
|
||||
max-width: calc(100% - 10px);
|
||||
box-sizing: border-box;
|
||||
font: $font_16_regular;
|
||||
|
||||
@include tablet {
|
||||
font: $font_14_regular;
|
||||
left: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
& :global(.grey) {
|
||||
color: inherit;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.quadro &,
|
||||
.horizontal & {
|
||||
max-width: calc(50% - 15px);
|
||||
}
|
||||
|
||||
.quadro &,
|
||||
.vertical & {
|
||||
max-height: calc(50% - 15px);
|
||||
}
|
||||
}
|
||||
|
||||
.title_wrapper {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
padding: $gap;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.title {
|
||||
font: $font_cell_title;
|
||||
text-transform: uppercase;
|
||||
word-break: break-word;
|
||||
|
||||
@include tablet {
|
||||
font: $font_18_semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: row;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.display_modal {
|
||||
@include appear;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
import { FC } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import Image from 'next/image';
|
||||
|
||||
import { IMGProps } from '~/utils/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props extends IMGProps {
|
||||
height?: number;
|
||||
}
|
||||
|
||||
const FlowCellImage: FC<Props> = ({
|
||||
className,
|
||||
children,
|
||||
src,
|
||||
alt,
|
||||
...rest
|
||||
}) => (
|
||||
<div className={classNames(styles.wrapper, className)}>
|
||||
<Image
|
||||
{...rest}
|
||||
src={src!}
|
||||
alt={alt}
|
||||
placeholder="empty"
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export { FlowCellImage };
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { FC } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import LazyLoad from 'react-lazyload';
|
||||
|
||||
import { IMGProps } from '~/utils/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props extends IMGProps {
|
||||
height?: number;
|
||||
}
|
||||
|
||||
const FlowCellImageLazyLoad: FC<Props> = ({ className, children, ...rest }) => (
|
||||
<LazyLoad once offset={600} className={classNames(styles.wrapper, className)}>
|
||||
<img {...rest} src={rest.src} alt="" />
|
||||
{children}
|
||||
</LazyLoad>
|
||||
);
|
||||
|
||||
export { FlowCellImageLazyLoad };
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
import { FC } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Group } from '~/components/common/Group';
|
||||
import { Icon } from '~/components/common/Icon';
|
||||
import { Toggle } from '~/components/input/Toggle';
|
||||
import { FlowDisplayVariant } from '~/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
currentView: FlowDisplayVariant;
|
||||
descriptionEnabled: boolean;
|
||||
hasDescription: boolean;
|
||||
toggleViewDescription: () => void;
|
||||
setViewSingle: () => void;
|
||||
setViewHorizontal: () => void;
|
||||
setViewVertical: () => void;
|
||||
setViewQuadro: () => void;
|
||||
}
|
||||
|
||||
const FlowCellMenu: FC<Props> = ({
|
||||
onClose,
|
||||
hasDescription,
|
||||
toggleViewDescription,
|
||||
descriptionEnabled,
|
||||
setViewSingle,
|
||||
setViewHorizontal,
|
||||
setViewVertical,
|
||||
setViewQuadro,
|
||||
}) => {
|
||||
return (
|
||||
<div className={classNames(styles.dropdown)}>
|
||||
{onClose && (
|
||||
<button className={styles.close} onClick={onClose} type="button">
|
||||
<Icon icon="close" size={24} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className={styles.menu}>
|
||||
<div className={styles.display}>
|
||||
<Icon icon="cell-single" onMouseDown={setViewSingle} size={48} />
|
||||
<Icon
|
||||
icon={descriptionEnabled ? 'cell-double-h-text' : 'cell-double-h'}
|
||||
onMouseDown={setViewHorizontal}
|
||||
size={48}
|
||||
/>
|
||||
<Icon
|
||||
icon={descriptionEnabled ? 'cell-double-v-text' : 'cell-double-v'}
|
||||
onMouseDown={setViewVertical}
|
||||
size={48}
|
||||
/>
|
||||
<Icon
|
||||
icon={descriptionEnabled ? 'cell-quadro-text' : 'cell-quadro'}
|
||||
onMouseDown={setViewQuadro}
|
||||
size={48}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{hasDescription && (
|
||||
<Group
|
||||
className={styles.description}
|
||||
horizontal
|
||||
onClick={toggleViewDescription}
|
||||
>
|
||||
<Toggle color="white" value={descriptionEnabled} />
|
||||
<span>Текст</span>
|
||||
</Group>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FlowCellMenu };
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.dropdown {
|
||||
@include outer_shadow;
|
||||
@include blur($content_bg_info);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $radius;
|
||||
padding: $gap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
fill: white;
|
||||
grid-row-gap: $gap;
|
||||
|
||||
svg {
|
||||
fill: white;
|
||||
stroke: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.sep {
|
||||
@include outer_shadow;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.display {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-row-gap: $gap;
|
||||
grid-column-gap: $gap;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-top: $gap;
|
||||
font: $font_12_semibold;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 4px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { FC, ReactElement } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Markdown } from '~/components/common/Markdown';
|
||||
import { formatText } from '~/utils/dom';
|
||||
import { DivProps } from '~/utils/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props extends DivProps {
|
||||
children: string;
|
||||
heading: string | ReactElement;
|
||||
}
|
||||
|
||||
const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
|
||||
<div {...rest} className={classNames(styles.text, rest.className)}>
|
||||
{heading && <div className={styles.heading}>{heading}</div>}
|
||||
<Markdown className={styles.description}>{formatText(children)}</Markdown>
|
||||
</div>
|
||||
);
|
||||
|
||||
export { FlowCellText };
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.text {
|
||||
padding: $gap;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { FC, Fragment } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
|
||||
import { FlowCell } from '~/components/flow/FlowCell';
|
||||
import { flowDisplayToPreset, URLS } from '~/constants/urls';
|
||||
import { useAuth } from '~/hooks/auth/useAuth';
|
||||
import { FlowDisplay, IFlowNode, INode } from '~/types';
|
||||
import { IUser } from '~/types/auth';
|
||||
import { getURLFromString } from '~/utils/dom';
|
||||
import { canEditNode } from '~/utils/node';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props {
|
||||
nodes: IFlowNode[];
|
||||
user: Partial<IUser>;
|
||||
onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
|
||||
}
|
||||
|
||||
export const FlowGrid: FC<Props> = observer(
|
||||
({ user, nodes, onChangeCellView }) => {
|
||||
const { fetched, isUser } = useAuth();
|
||||
|
||||
if (!nodes) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{nodes.map((node) => (
|
||||
<div
|
||||
className={classNames(styles.cell, styles[node.flow.display])}
|
||||
key={node.id}
|
||||
>
|
||||
<FlowCell
|
||||
id={node.id}
|
||||
color={node.flow.dominant_color}
|
||||
to={URLS.NODE_URL(node.id)}
|
||||
image={getURLFromString(
|
||||
node.thumbnail,
|
||||
flowDisplayToPreset[node.flow.display],
|
||||
)}
|
||||
flow={node.flow}
|
||||
text={node.description}
|
||||
title={node.title}
|
||||
canEdit={fetched && isUser && canEditNode(node, user)}
|
||||
onChangeCellView={onChangeCellView}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: $cell * 2) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.cell {
|
||||
&.horizontal,
|
||||
&.quadro {
|
||||
grid-column-end: span 2;
|
||||
}
|
||||
|
||||
&.vertical,
|
||||
&.quadro {
|
||||
grid-row-end: span 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import { useCallback } from 'react';
|
||||
|
||||
import { Filler } from '~/components/common/Filler';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import { Dialog } from '~/constants/modal';
|
||||
import { useWindowSize } from '~/hooks/dom/useWindowSize';
|
||||
import { useShowModal } from '~/hooks/modal/useShowModal';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
const FlowLoginStamp = () => {
|
||||
const showModal = useShowModal(Dialog.Login);
|
||||
|
||||
const onClick = useCallback(() => showModal({}), [showModal]);
|
||||
const { isTablet } = useWindowSize();
|
||||
|
||||
return (
|
||||
<div className={styles.stamp} onClick={onClick}>
|
||||
<Filler />
|
||||
|
||||
<div className={styles.content}>
|
||||
<h2>Привет, друг</h2>
|
||||
<p>Ночь темна и полна опасностей, не желаешь ли войти?</p>
|
||||
<Button
|
||||
stretchy
|
||||
color="outline-white"
|
||||
className={styles.button}
|
||||
size={isTablet ? 'small' : 'normal'}
|
||||
>
|
||||
Впустите!
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FlowLoginStamp };
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.stamp {
|
||||
@include outer_shadow;
|
||||
|
||||
background: #2b0011 url('/images/join_us.svg') 50% 100%;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
border-radius: $cell_radius;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: $gap;
|
||||
box-sizing: border-box;
|
||||
flex: 0 1;
|
||||
|
||||
@include phone {
|
||||
padding: $gap / 2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: $font_cell_title;
|
||||
text-transform: uppercase;
|
||||
word-break: break-word;
|
||||
|
||||
@include tablet {
|
||||
font: $font_16_semibold;
|
||||
}
|
||||
|
||||
@include phone {
|
||||
font: $font_14_semibold;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.4em;
|
||||
font: $font_16_medium;
|
||||
opacity: 0.7;
|
||||
|
||||
@include tablet {
|
||||
font: $font_14_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 1.4em;
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
font: $font_12_semibold;
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { FC } from 'react';
|
||||
|
||||
import { IFlowNode } from '~/types';
|
||||
|
||||
import { FlowRecentItem } from '../FlowRecentItem';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
recent: IFlowNode[];
|
||||
updated: IFlowNode[];
|
||||
}
|
||||
|
||||
const FlowRecent: FC<IProps> = ({ recent, updated }) => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.updates}>
|
||||
{updated &&
|
||||
updated.map((node) => (
|
||||
<FlowRecentItem node={node} key={node.id} has_new />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className={styles.recent}>
|
||||
{recent &&
|
||||
recent.map((node) => <FlowRecentItem node={node} key={node.id} />)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { FlowRecent };
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.recent {
|
||||
@media (max-width: $flow_hide_recents) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.updates {
|
||||
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import { FC } from 'react';
|
||||
|
||||
import { Icon } from '~/components/common/Icon';
|
||||
import { InfiniteScroll } from '~/components/common/InfiniteScroll';
|
||||
import { INode } from '~/types';
|
||||
|
||||
import { FlowRecentItem } from '../FlowRecentItem';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface IProps {
|
||||
isLoading: boolean;
|
||||
results: INode[];
|
||||
hasMore: boolean;
|
||||
onLoadMore: () => void;
|
||||
}
|
||||
|
||||
const FlowSearchResults: FC<IProps> = ({
|
||||
results,
|
||||
isLoading,
|
||||
onLoadMore,
|
||||
hasMore,
|
||||
}) => {
|
||||
if (!results.length) {
|
||||
return (
|
||||
<div className={styles.loading}>
|
||||
<Icon size={96} icon="search" />
|
||||
<div className={styles.nothing}>Ничего не найдено</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<InfiniteScroll hasMore={hasMore} loadMore={onLoadMore}>
|
||||
{results.map((node) => (
|
||||
<FlowRecentItem node={node} key={node.id} />
|
||||
))}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FlowSearchResults };
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.wrap {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
opacity: 0.3;
|
||||
fill: $gray_75;
|
||||
stroke: none;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.nothing {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font: $font_18_semibold;
|
||||
font-weight: 900;
|
||||
opacity: 0.3;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
import { FC, useCallback, useMemo, useState } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import Image from 'next/future/image';
|
||||
import { Autoplay, EffectFade, Navigation } from 'swiper/modules';
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import SwiperClass from 'swiper/types/swiper-class';
|
||||
|
||||
import { Icon } from '~/components/common/Icon';
|
||||
import { LoaderCircle } from '~/components/common/LoaderCircle';
|
||||
import { imagePresets, URLS } from '~/constants/urls';
|
||||
import { useWindowSize } from '~/hooks/dom/useWindowSize';
|
||||
import { useNavigation } from '~/hooks/navigation/useNavigation';
|
||||
import { IFlowNode } from '~/types';
|
||||
import { getURLFromString } from '~/utils/dom';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
interface Props {
|
||||
heroes: IFlowNode[];
|
||||
}
|
||||
|
||||
const autoplay = {
|
||||
delay: 3000,
|
||||
pauseOnMouseEnter: false,
|
||||
stopOnLastSlide: false,
|
||||
disableOnInteraction: false,
|
||||
};
|
||||
|
||||
const lazy = {
|
||||
enabled: true,
|
||||
loadPrevNextAmount: 2,
|
||||
loadOnTransitionStart: true,
|
||||
loadPrevNext: true,
|
||||
checkInView: true,
|
||||
};
|
||||
|
||||
const getSrcSet = (url?: string) =>
|
||||
[
|
||||
`${getURLFromString(url, imagePresets.cover)} 768w`,
|
||||
`${getURLFromString(url, imagePresets.small_hero)}`,
|
||||
].join(', ');
|
||||
|
||||
export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
|
||||
const { isTablet } = useWindowSize();
|
||||
const { push } = useNavigation();
|
||||
|
||||
const [controlledSwiper, setControlledSwiper] = useState<
|
||||
SwiperClass | undefined
|
||||
>(undefined);
|
||||
const [currentIndex, setCurrentIndex] = useState(heroes.length);
|
||||
const preset = useMemo(
|
||||
() => (isTablet ? imagePresets.cover : imagePresets.small_hero),
|
||||
[isTablet],
|
||||
);
|
||||
|
||||
const onNext = useCallback(() => {
|
||||
controlledSwiper?.slideNext(1);
|
||||
}, [controlledSwiper]);
|
||||
|
||||
const onPrev = useCallback(() => {
|
||||
controlledSwiper?.slidePrev(1);
|
||||
}, [controlledSwiper]);
|
||||
|
||||
const onIndexChange = useCallback((swiper: SwiperClass) => {
|
||||
if (!swiper.slides.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentIndex(swiper.realIndex);
|
||||
}, []);
|
||||
|
||||
const onClick = useCallback(
|
||||
(sw: SwiperClass) => {
|
||||
push(URLS.NODE_URL(heroes[sw.realIndex]?.id));
|
||||
},
|
||||
[push, heroes],
|
||||
);
|
||||
|
||||
if (!heroes.length) {
|
||||
return (
|
||||
<div className={styles.loader}>
|
||||
<LoaderCircle size={200} fill="currentColor" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const title = heroes[currentIndex]?.title;
|
||||
|
||||
return (
|
||||
<div className={styles.wrap}>
|
||||
<div className={styles.slide}>
|
||||
<div className={styles.info}>
|
||||
<div className={styles.title}>{title}</div>
|
||||
|
||||
<div className={styles.buttons}>
|
||||
<button className={styles.button} onClick={onPrev} type="button">
|
||||
<Icon icon="left" />
|
||||
</button>
|
||||
|
||||
<button className={styles.button} onClick={onNext} type="button">
|
||||
<Icon icon="right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Swiper
|
||||
spaceBetween={300}
|
||||
effect="fade"
|
||||
speed={3000}
|
||||
className={styles.swiper}
|
||||
modules={[EffectFade, Autoplay, Navigation]}
|
||||
loop
|
||||
slidesPerView={1}
|
||||
autoplay={autoplay}
|
||||
runCallbacksOnInit
|
||||
onSwiper={setControlledSwiper}
|
||||
onSlidesLengthChange={onIndexChange}
|
||||
onRealIndexChange={onIndexChange}
|
||||
onAfterInit={onIndexChange}
|
||||
onClick={onClick}
|
||||
followFinger
|
||||
shortSwipes={false}
|
||||
watchSlidesProgress
|
||||
lazyPreloadPrevNext={3}
|
||||
>
|
||||
{heroes
|
||||
.filter((node) => node.thumbnail)
|
||||
.map((node) => (
|
||||
<SwiperSlide key={node.id}>
|
||||
<Image
|
||||
width={800}
|
||||
height={300}
|
||||
src={getURLFromString(node.thumbnail, preset)}
|
||||
alt=""
|
||||
className={classNames(styles.preview, 'swiper-lazy')}
|
||||
loading="lazy"
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
@import '~/styles/variables';
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
@include outer_shadow;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: $radius;
|
||||
|
||||
:global(.swiper-slide) {
|
||||
object-fit: cover;
|
||||
|
||||
img {
|
||||
min-width: 100%;
|
||||
min-height: 120%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: $gap;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
box-sizing: border-box;
|
||||
border-radius: $radius;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $content_bg_hero;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
box-shadow: inset $gray_90 0 1px;
|
||||
touch-action: none;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
img.preview {
|
||||
transform: translate(0, 0);
|
||||
transition: transform 10s linear, opacity 1s linear;
|
||||
opacity: 0;
|
||||
will-change: transform;
|
||||
|
||||
:global(.swiper-slide-active) &,
|
||||
:global(.swiper-slide-duplicate-active) & {
|
||||
transform: translate(0, -20%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
padding: $gap;
|
||||
box-sizing: border-box;
|
||||
z-index: 5;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include clamp(2, 1.2 * 40px * 2);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
margin-right: $gap;
|
||||
overflow: hidden;
|
||||
font: $font_hero_title;
|
||||
text-transform: uppercase;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2em;
|
||||
word-break: break-word;
|
||||
|
||||
@include tablet {
|
||||
@include clamp(3, 3.6em);
|
||||
white-space: initial;
|
||||
word-wrap: break-word;
|
||||
font: $font_24_bold;
|
||||
max-height: 3.6em;
|
||||
}
|
||||
|
||||
@include phone {
|
||||
white-space: initial;
|
||||
word-wrap: break-word;
|
||||
font: $font_24_bold;
|
||||
max-height: 3.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 58px;
|
||||
flex-direction: row;
|
||||
width: 128px;
|
||||
border-radius: $radius;
|
||||
pointer-events: all;
|
||||
touch-action: auto;
|
||||
margin: 0 -10px -10px 0;
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
flex: 0 0 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.5s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $gray_90;
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import * as React from 'react';
|
||||
|
||||
const style = require('./style.scss');
|
||||
|
||||
export const HeroPlaceholder = () => (
|
||||
<div className={style.container} />
|
||||
);
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@import 'src/styles/variables';
|
||||
|
||||
.container {
|
||||
height: 280px;
|
||||
width: 100%;
|
||||
background: $gray_90
|
||||
url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
|
||||
no-repeat 50% 30%;
|
||||
background-size: cover;
|
||||
opacity: 0.7;
|
||||
will-change: transform;
|
||||
//box-shadow: white 0 0 0 1px;
|
||||
//border-radius: $panel_radius $panel_radius 0 0;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { FC } from 'react';
|
||||
|
||||
import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
|
||||
import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
|
||||
import { INode } from '~/types';
|
||||
|
||||
import styles from './styles.module.scss';
|
||||
|
|
@ -12,7 +12,7 @@ interface IProps {
|
|||
const TagSidebarList: FC<IProps> = ({ nodes }) => (
|
||||
<div className={styles.list}>
|
||||
{nodes.map((node) => (
|
||||
<FlowRecentItem node={node} key={node.id} />
|
||||
<NodeHorizontalCard node={node} key={node.id} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue