diff --git a/src/components/boris/BorisContactItem/index.tsx b/src/components/boris/BorisContactItem/index.tsx index b9b9a074..65e001d2 100644 --- a/src/components/boris/BorisContactItem/index.tsx +++ b/src/components/boris/BorisContactItem/index.tsx @@ -1,6 +1,6 @@ -import React, { FC } from "react"; -import styles from "./styles.module.scss"; -import { Icon } from "~/components/input/Icon"; +import React, { FC } from 'react'; +import styles from './styles.module.scss'; +import { Icon } from '~/components/input/Icon'; interface Props { icon: string; @@ -10,7 +10,7 @@ interface Props { } const BorisContactItem: FC = ({ icon, title, subtitle, link }) => ( - +
diff --git a/src/components/boris/BorisStatsGit/index.tsx b/src/components/boris/BorisStatsGit/index.tsx index 66e0b217..1f5aa0fd 100644 --- a/src/components/boris/BorisStatsGit/index.tsx +++ b/src/components/boris/BorisStatsGit/index.tsx @@ -1,8 +1,8 @@ -import React, { FC, useMemo } from "react"; -import { GithubIssue } from "~/types/boris"; -import styles from "./styles.module.scss"; -import { Placeholder } from "~/components/placeholders/Placeholder"; -import { BorisStatsGitCard } from "../BorisStatsGitCard"; +import React, { FC, useMemo } from 'react'; +import { GithubIssue } from '~/types/boris'; +import styles from './styles.module.scss'; +import { Placeholder } from '~/components/placeholders/Placeholder'; +import { BorisStatsGitCard } from '../BorisStatsGitCard'; interface IProps { issues: GithubIssue[]; @@ -43,7 +43,7 @@ const BorisStatsGit: FC = ({ issues, isLoading }) => {
КОММИТС - +
{open.map(data => ( diff --git a/src/components/boris/BorisStatsGitCard/index.tsx b/src/components/boris/BorisStatsGitCard/index.tsx index 0b371d58..fde28291 100644 --- a/src/components/boris/BorisStatsGitCard/index.tsx +++ b/src/components/boris/BorisStatsGitCard/index.tsx @@ -1,8 +1,8 @@ -import React, { FC, useMemo } from "react"; -import styles from "./styles.module.scss"; -import { getPrettyDate } from "~/utils/dom"; -import { GithubIssue } from "~/types/boris"; -import classNames from "classnames"; +import React, { FC, useMemo } from 'react'; +import styles from './styles.module.scss'; +import { getPrettyDate } from '~/utils/dom'; +import { GithubIssue } from '~/types/boris'; +import classNames from 'classnames'; interface IProps { data: GithubIssue; @@ -25,7 +25,7 @@ const BorisStatsGitCard: FC = ({ data: { created_at, title, html_url, st {date}
- + {title} diff --git a/src/components/comment/CommentEmbedBlock/index.tsx b/src/components/comment/CommentEmbedBlock/index.tsx index 264916ce..5ff71877 100644 --- a/src/components/comment/CommentEmbedBlock/index.tsx +++ b/src/components/comment/CommentEmbedBlock/index.tsx @@ -1,16 +1,16 @@ -import React, { FC, memo, useMemo } from "react"; -import { ICommentBlockProps } from "~/constants/comment"; -import styles from "./styles.module.scss"; -import { getYoutubeThumb } from "~/utils/dom"; -import { Icon } from "~/components/input/Icon"; -import { useYoutubeMetadata } from "~/hooks/metadata/useYoutubeMetadata"; +import React, { FC, memo, useMemo } from 'react'; +import { ICommentBlockProps } from '~/constants/comment'; +import styles from './styles.module.scss'; +import { getYoutubeThumb } from '~/utils/dom'; +import { Icon } from '~/components/input/Icon'; +import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata'; type Props = ICommentBlockProps & {}; const CommentEmbedBlock: FC = memo(({ block }) => { const id = useMemo(() => { const match = block.content.match( - /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-\=]+)/ + /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/ ); return (match && match[1]) || ''; diff --git a/src/components/containers/CoverBackdrop/index.tsx b/src/components/containers/CoverBackdrop/index.tsx index c3feefcc..cd3b141d 100644 --- a/src/components/containers/CoverBackdrop/index.tsx +++ b/src/components/containers/CoverBackdrop/index.tsx @@ -1,9 +1,9 @@ -import React, { FC, useCallback, useEffect, useRef, useState } from "react"; -import { IUser } from "~/redux/auth/types"; -import styles from "./styles.module.scss"; -import { getURL } from "~/utils/dom"; -import { PRESETS } from "~/constants/urls"; -import classNames from "classnames"; +import React, { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { IUser } from '~/redux/auth/types'; +import styles from './styles.module.scss'; +import { getURL } from '~/utils/dom'; +import { PRESETS } from '~/constants/urls'; +import classNames from 'classnames'; interface IProps { cover: IUser['cover']; @@ -33,7 +33,7 @@ const CoverBackdrop: FC = ({ cover }) => { className={classNames(styles.cover, { [styles.active]: is_loaded })} style={{ backgroundImage: `url("${image}")` }} > - + ); }; diff --git a/src/components/editors/EditorUploadCoverButton/index.tsx b/src/components/editors/EditorUploadCoverButton/index.tsx index 7238fa95..8f9f509d 100644 --- a/src/components/editors/EditorUploadCoverButton/index.tsx +++ b/src/components/editors/EditorUploadCoverButton/index.tsx @@ -1,17 +1,17 @@ -import React, { ChangeEvent, FC, useCallback, useEffect } from "react"; -import styles from "./styles.module.scss"; -import { UploadSubject, UploadTarget, UploadType } from "~/constants/uploads"; -import { getURL } from "~/utils/dom"; -import { Icon } from "~/components/input/Icon"; -import { PRESETS } from "~/constants/urls"; -import { IEditorComponentProps } from "~/types/node"; -import { useNodeFormContext } from "~/hooks/node/useNodeFormFormik"; -import { getFileType } from "~/utils/uploader"; -import { useUploader } from "~/hooks/data/useUploader"; +import React, { ChangeEvent, FC, useCallback, useEffect } from 'react'; +import styles from './styles.module.scss'; +import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads'; +import { getURL } from '~/utils/dom'; +import { Icon } from '~/components/input/Icon'; +import { PRESETS } from '~/constants/urls'; +import { IEditorComponentProps } from '~/types/node'; +import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik'; +import { getFileType } from '~/utils/uploader'; +import { useUploader } from '~/hooks/data/useUploader'; type IProps = IEditorComponentProps & {}; -const EditorUploadCoverButton: FC = ({}) => { +const EditorUploadCoverButton: FC = () => { const { values, setFieldValue } = useNodeFormContext(); const { uploadFiles, files, pendingImages } = useUploader( UploadSubject.Editor, diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx deleted file mode 100644 index b02d3976..00000000 --- a/src/components/flow/Cell/index.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import React, { FC, useCallback, useMemo, useRef, useState } from 'react'; -import { INode } from '~/redux/types'; -import { formatCellText, getURL } from '~/utils/dom'; -import classNames from 'classnames'; - -import styles from './styles.module.scss'; -import markdown from '~/styles/common/markdown.module.scss'; -import { Icon } from '~/components/input/Icon'; -import { PRESETS } from '~/constants/urls'; -import { NODE_TYPES } from '~/constants/node'; -import { Link } from 'react-router-dom'; -import { CellShade } from '~/components/flow/CellShade'; - -const THUMBNAIL_SIZES = { - horizontal: PRESETS.small_hero, - default: PRESETS.cover, -}; -interface IProps { - node: INode; - is_text?: boolean; - can_edit?: boolean; - - onSelect: (id: INode['id']) => void; - onChangeCellView: (id: INode['id'], flow: INode['flow']) => void; -} - -const Cell: FC = ({ - node: { id, title, thumbnail, type, flow, description }, - can_edit, - onChangeCellView, -}) => { - const ref = useRef(null); - const [is_loaded, setIsLoaded] = useState(false); - const [is_visible, setIsVisible] = useState(true); - - const onImageLoad = useCallback(() => { - setIsLoaded(true); - }, [setIsLoaded]); - - const has_description = description && description.length > 32; - const text = - (type === NODE_TYPES.TEXT && description) || - (flow && flow.show_description && has_description && description) || - null; - - const toggleViewDescription = useCallback(() => { - const show_description = !(flow && flow.show_description); - const display = (flow && flow.display) || 'single'; - onChangeCellView(id, { show_description, display }); - }, [id, flow, onChangeCellView]); - - const setViewSingle = useCallback(() => { - const show_description = (flow && flow.show_description) || false; - onChangeCellView(id, { show_description, display: 'single' }); - }, [id, flow, onChangeCellView]); - - const setViewHorizontal = useCallback(() => { - const show_description = (flow && flow.show_description) || false; - onChangeCellView(id, { show_description, display: 'horizontal' }); - }, [id, flow, onChangeCellView]); - - const setViewVertical = useCallback(() => { - const show_description = (flow && !!flow.show_description) || false; - onChangeCellView(id, { show_description, display: 'vertical' }); - }, [id, flow, onChangeCellView]); - - const setViewQuadro = useCallback(() => { - const show_description = (flow && !!flow.show_description) || false; - onChangeCellView(id, { show_description, display: 'quadro' }); - }, [id, flow, onChangeCellView]); - - const thumb = useMemo(() => { - const preset = - (flow && flow.display && THUMBNAIL_SIZES[flow.display]) || THUMBNAIL_SIZES.default; - return getURL({ url: thumbnail }, preset); - }, [thumbnail, flow]); - - const titleSize = useMemo(() => { - if (title.length > 100) { - return styles.small; - } else if (title.length > 64) { - return styles.medium; - } else { - return; - } - }, [title]); - - const cellText = useMemo(() => formatCellText(text || ''), [text]); - - return ( -
- {is_visible && ( - <> - {can_edit && ( -
-
- -
- {has_description && ( - <> - -
- - )} - - - - -
-
- )} - - - - -
- {!text &&
{title || '...'}
} - - {!!text && !!thumbnail && ( -
- {title &&
{title}
} - -
-
- )} - - {!!text && !thumbnail && ( -
- {title &&
{title}
} - -
-
- )} -
- - - {thumbnail && ( -
- -
- )} - - )} -
- ); -}; - -export { Cell }; diff --git a/src/components/flow/Cell/styles.module.scss b/src/components/flow/Cell/styles.module.scss deleted file mode 100644 index 209b10a7..00000000 --- a/src/components/flow/Cell/styles.module.scss +++ /dev/null @@ -1,338 +0,0 @@ -@import "src/styles/variables"; - -.cell { - padding: $gap / 4; - box-sizing: border-box; - display: flex; - flex: 0 0; - background: $cell_bg; - border-radius: $cell_radius; - position: relative; - cursor: pointer; - color: white; - background: 50% 50% no-repeat $content_bg; - background-size: cover; - overflow: hidden; - - .is_hero { - .title { - font: $font_hero_title; - } - } - - .is_text { - .title { - display: none; - } - } - - &:hover { - .thumbnail { - transform: scale(1.1); - } - } - @include outer_shadow(); -} - -.text { - font: $font_18_regular; - line-height: 23px; - background: transparentize($color: $content_bg, $amount: 0.3) url('../../../sprites/stripes.svg'); - padding: $gap; - box-sizing: border-box; - border-radius: $radius; - overflow: hidden; - position: relative; - word-break: break-word; - - width: 100%; - height: 100%; - - p { - margin-bottom: $gap; - } - - &::after { - content: ' '; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 160px; - pointer-events: none; - touch-action: none; - background: linear-gradient(transparentize($content_bg, 1), $content_bg 95%); - z-index: 1; - border-radius: 0 0 $radius $radius; - } - - @media (max-width: $cell * 2 + $grid_line) { - display: none; - } -} - -.title, -.text_title { - font: $font_18_semibold; - line-height: 1.25em; - - text-transform: uppercase; - overflow: hidden; - - box-sizing: border-box; - word-break: break-word; - - @media (max-width: $cell * 2) { - font: $font_16_semibold; - } -} - -.title { - padding: $gap / 2; - opacity: 1; - transform: translate(0, 0); - transition: opacity 0.5s, transform 1s; - - &.small { - @include clamp(8, 1.25em); - font: $font_16_semibold; - } - - &.medium{ - @include clamp(6, 1.25em); - font: $font_18_semibold; - } -} - -.text_title { - @include clamp(3, 1.25em); - margin-bottom: $gap / 2; -} - -.horizontal, -.quadro { - grid-column-end: span 2; - - .text { - width: 50%; - height: 100%; - } -} - -.vertical, -.quadro { - grid-row-end: span 2; - - .text { - width: 100%; - height: 50%; - } - - .face_content { - align-items: flex-end; - } -} - -.quadro { - .text { - width: 50%; - } -} -@media (max-width: $cell * 2) { - .horizontal, - .quadro, - .vertical, - .quadro { - grid-row-end: span 1; - grid-column-end: span 1; - } -} - -.is_text { - background: none; - padding: 10px; - box-shadow: inset $cell_shade 0 0 0 1px; -} - -.thumbnail { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: 50% 50% no-repeat; - background-size: cover; - z-index: 1; - border-radius: $cell_radius + 2px; - opacity: 0; - transition: opacity 0.5s, transform 1s; - will-change: transform; - - & > img { - opacity: 0; - width: 0; - height: 0; - } -} - -@keyframes appear { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.face { - @include outer_shadow(); - - display: flex; - overflow: hidden; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 2; - border-radius: $cell_radius; - padding: $gap / 2; - animation: appear 1s forwards; - color: white; - text-decoration: none; -} - -.menu { - position: absolute; - top: -$gap; - right: -$gap; - z-index: 4; - border-radius: $radius; - pointer-events: none; - touch-action: none; - transition: opacity 0.5s; - box-sizing: border-box; - display: flex; - align-items: stretch; - justify-content: center; - padding: $gap; - - &:hover { - opacity: 1; - pointer-events: all; - touch-action: auto; - - .menu_content { - opacity: 1; - } - } - - @media (max-width: $cell * 2 + $grid_line) { - right: 0; - top: 0; - display: none; - } -} - -.menu_button { - pointer-events: all; - touch-action: auto; - position: absolute; - z-index: 4; - width: 32px; - height: 32px; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.9; - right: $gap; - - &::after { - @include inner_shadow(); - - content: ' '; - width: 20px; - height: 20px; - background: $content_bg; - border-radius: 100%; - transform: scale(0.5); - transition: transform 0.25s; - } - - &:hover { - &::after { - transform: scale(1); - } - } -} - -.menu_content { - flex: 1; - opacity: 0; - background: $red_gradient; - padding: (32px + $gap * 2) $gap $gap $gap; - border-radius: $radius; - display: flex; - align-items: center; - justify-content: center; - display: flex; - flex-direction: column; - transition: opacity 0.5s; - will-change: opacity; - - & > * { - margin-top: $gap; - opacity: 0.5; - transition: opacity 0.25s; - - &:hover { - opacity: 1; - } - } - - svg { - fill: #222222; - width: 30px; - height: 30px; - } -} - -.menu_sep { - width: 20px; - height: 2px; - flex: 0 0 4px; - background-color: #222222; - opacity: 0.2; - border-radius: 2px; -} - -.face_content { - display: flex; - align-items: flex-end; - justify-content: flex-start; - width: 100%; -} - -.text_only { - width: 100%; - height: 100%; - padding: $gap / 2; - overflow: hidden; - box-sizing: border-box; - position: relative; - - &::after { - content: ' '; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 160px; - pointer-events: none; - touch-action: none; - background: linear-gradient(transparentize($content_bg, 1), $content_bg 95%); - z-index: 1; - border-radius: 0 0 $radius $radius; - } -} diff --git a/src/components/lab/LabImage/index.tsx b/src/components/lab/LabImage/index.tsx index d0a41e02..6b701fa5 100644 --- a/src/components/lab/LabImage/index.tsx +++ b/src/components/lab/LabImage/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { INodeComponentProps } from '~/constants/node'; -import SwiperCore, { A11y, Navigation, Pagination, SwiperOptions } from 'swiper'; +import SwiperCore, { A11y, Navigation, Pagination } from 'swiper'; import styles from './styles.module.scss'; import { useNodeImages } from '~/hooks/node/useNodeImages'; @@ -13,12 +13,6 @@ SwiperCore.use([Navigation, Pagination, A11y]); interface IProps extends INodeComponentProps {} -const breakpoints: SwiperOptions['breakpoints'] = { - 599: { - navigation: true, - }, -}; - const LabImage: FC = ({ node, isLoading }) => { const images = useNodeImages(node); const onClick = useGotoNode(node.id); diff --git a/src/components/main/GodRays/index.tsx b/src/components/main/GodRays/index.tsx index 3c9a8a63..299fc562 100644 --- a/src/components/main/GodRays/index.tsx +++ b/src/components/main/GodRays/index.tsx @@ -1,4 +1,4 @@ -import * as React from "react"; +import * as React from 'react'; interface IGodRaysProps { raised?: boolean; @@ -30,7 +30,7 @@ export class GodRays extends React.Component { return setTimeout(() => window.requestAnimationFrame(this.draw), 500); } - const { width, height, rays, particles } = this.state; + const { width, height, rays } = this.state; const ctx = this.canvas.getContext('2d'); @@ -42,7 +42,7 @@ export class GodRays extends React.Component { ctx.clearRect(0, 0, width, height + 100); // clear canvas ctx.save(); - rays.map(({ angle, iterator, weight, speed, pulsar, opacity }, index) => { + rays.forEach(({ angle, iterator, weight, speed, pulsar, opacity }, index) => { const gradient = ctx.createLinearGradient(0, 0, 0, height * 1.3); gradient.addColorStop(0.2, `rgba(160, 255, 60, ${opacity * 0.1})`); gradient.addColorStop(1, 'rgba(160, 255, 60, 0)'); diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx index 0d3ede5f..e952bc87 100644 --- a/src/components/main/SidePane/index.tsx +++ b/src/components/main/SidePane/index.tsx @@ -1,21 +1,20 @@ -import React, { FC, useCallback, useEffect, useState } from "react"; -import classNames from "classnames"; -import styles from "./styles.module.scss"; -import { Group } from "~/components/containers/Group"; +import React, { FC, useCallback, useEffect, useState } from 'react'; +import classNames from 'classnames'; +import styles from './styles.module.scss'; +import { Group } from '~/components/containers/Group'; -interface IProps { -} +interface IProps {} -export const SidePane: FC = ({ -}) => { +export const SidePane: FC = () => { const content_width = 1100; const [left, setLeft] = useState(0); const moveThis = useCallback(() => { const { width } = document.body.getBoundingClientRect(); - const shift = width > (content_width + 64 + 20) - ? ((width - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74 - : 10; + const shift = + width > content_width + 64 + 20 + ? (width - content_width - 64 - 20) / 2 - 54 + 64 // + content_width + 74 + : 10; setLeft(shift); }, [setLeft]); @@ -34,15 +33,17 @@ export const SidePane: FC = ({ return (
-
+
V
-
P
+
+
P
+
-
F
+
+
F
+
diff --git a/src/components/node/NodeDeletedBadge/index.tsx b/src/components/node/NodeDeletedBadge/index.tsx index 1f84f879..2c87f773 100644 --- a/src/components/node/NodeDeletedBadge/index.tsx +++ b/src/components/node/NodeDeletedBadge/index.tsx @@ -1,9 +1,9 @@ -import React, { FC } from "react"; -import styles from "./styles.module.scss"; +import React, { FC } from 'react'; +import styles from './styles.module.scss'; interface IProps {} -const NodeDeletedBadge: FC = ({}) => { +const NodeDeletedBadge: FC = () => { return
Эта ячейка заблокирована. Её не никто не увидит.
; }; diff --git a/src/components/node/NodeTagsBlock/index.tsx b/src/components/node/NodeTagsBlock/index.tsx index c5437b86..3cd17fec 100644 --- a/src/components/node/NodeTagsBlock/index.tsx +++ b/src/components/node/NodeTagsBlock/index.tsx @@ -1,10 +1,10 @@ -import React, { FC } from "react"; -import { NodeTags } from "~/components/node/NodeTags"; -import { useTagContext } from "~/utils/context/TagsContextProvider"; +import React, { FC } from 'react'; +import { NodeTags } from '~/components/node/NodeTags'; +import { useTagContext } from '~/utils/context/TagsContextProvider'; interface IProps {} -const NodeTagsBlock: FC = ({}) => { +const NodeTagsBlock: FC = () => { const { tags, canAppend, diff --git a/src/components/node/NodeVideoBlock/index.tsx b/src/components/node/NodeVideoBlock/index.tsx index 86e84073..7bcda3eb 100644 --- a/src/components/node/NodeVideoBlock/index.tsx +++ b/src/components/node/NodeVideoBlock/index.tsx @@ -1,7 +1,7 @@ -import React, { FC, useMemo } from "react"; -import styles from "./styles.module.scss"; -import { path } from "ramda"; -import { INodeComponentProps } from "~/constants/node"; +import React, { FC, useMemo } from 'react'; +import styles from './styles.module.scss'; +import { path } from 'ramda'; +import { INodeComponentProps } from '~/constants/node'; interface IProps extends INodeComponentProps {} @@ -11,7 +11,7 @@ const NodeVideoBlock: FC = ({ node }) => { const match = url && url.match( - /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-\_]*)(&(amp;)?[\w\?=]*)?/ + /http(?:s?):\/\/(?:www\.)?youtu(?:be\.com\/watch\?v=|\.be\/)([\w\-_]*)(&(amp;)?[\w?=]*)?/ ); return match && match[1]; diff --git a/src/containers/dialogs/TestDialog/index.tsx b/src/containers/dialogs/TestDialog/index.tsx index 64195dcb..b512fa2e 100644 --- a/src/containers/dialogs/TestDialog/index.tsx +++ b/src/containers/dialogs/TestDialog/index.tsx @@ -1,10 +1,10 @@ -import React, { FC } from "react"; -import { BetterScrollDialog } from "../BetterScrollDialog"; -import styles from "./styles.module.scss"; +import React, { FC } from 'react'; +import { BetterScrollDialog } from '../BetterScrollDialog'; +import styles from './styles.module.scss'; interface IProps {} -const TestDialog: FC = ({}) => ( +const TestDialog: FC = () => ( HEAD
} footer={
FOOTER
} diff --git a/src/containers/profile/ProfileLoader/index.tsx b/src/containers/profile/ProfileLoader/index.tsx index 0ded3dac..4b586fb4 100644 --- a/src/containers/profile/ProfileLoader/index.tsx +++ b/src/containers/profile/ProfileLoader/index.tsx @@ -1,10 +1,10 @@ -import React, { FC } from "react"; -import styles from "./styles.module.scss"; -import { LoaderCircle } from "~/components/input/LoaderCircle"; +import React, { FC } from 'react'; +import styles from './styles.module.scss'; +import { LoaderCircle } from '~/components/input/LoaderCircle'; interface IProps {} -const ProfileLoader: FC = ({}) => { +const ProfileLoader: FC = () => { return (