diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx index d1a9337e..7fbddc87 100644 --- a/src/components/comment/CommentForm/index.tsx +++ b/src/components/comment/CommentForm/index.tsx @@ -3,7 +3,7 @@ import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik'; import { FormikProvider } from 'formik'; import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea'; import { Button } from '~/components/input/Button'; -import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploader'; +import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/useFileUploader'; import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants'; import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons'; import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons'; diff --git a/src/components/comment/CommentFormAttaches/index.tsx b/src/components/comment/CommentFormAttaches/index.tsx index 7422c134..c0d2b0af 100644 --- a/src/components/comment/CommentFormAttaches/index.tsx +++ b/src/components/comment/CommentFormAttaches/index.tsx @@ -7,7 +7,7 @@ import { SortEnd } from 'react-sortable-hoc'; import { moveArrItem } from '~/utils/fn'; import { useDropZone } from '~/utils/hooks'; import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants'; -import { useFileUploaderContext } from '~/utils/hooks/fileUploader'; +import { useFileUploaderContext } from '~/utils/hooks/useFileUploader'; const CommentFormAttaches: FC = () => { const uploader = useFileUploaderContext(); diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx index 538ccc3a..e6955762 100644 --- a/src/components/common/Avatar/index.tsx +++ b/src/components/common/Avatar/index.tsx @@ -10,11 +10,20 @@ interface Props extends DivProps { url?: string; username?: string; size?: number; + preset?: typeof PRESETS[keyof typeof PRESETS]; innerRef?: React.Ref; } -const Avatar: FC = ({ url, username, size, className, innerRef, ...rest }) => { - const backgroundImage = !!url ? `url('${getURLFromString(url, PRESETS.avatar)}')` : undefined; +const Avatar: FC = ({ + url, + username, + size, + className, + innerRef, + preset = PRESETS.avatar, + ...rest +}) => { + const backgroundImage = !!url ? `url('${getURLFromString(url, preset)}')` : undefined; const onOpenProfile = useCallback(() => openUserProfile(username), [username]); return ( diff --git a/src/components/editors/AudioEditor/index.tsx b/src/components/editors/AudioEditor/index.tsx index 4eab9548..c817a16a 100644 --- a/src/components/editors/AudioEditor/index.tsx +++ b/src/components/editors/AudioEditor/index.tsx @@ -11,7 +11,7 @@ import { NodeEditorProps } from '~/redux/node/types'; import { useNodeImages } from '~/utils/hooks/node/useNodeImages'; import { useNodeAudios } from '~/utils/hooks/node/useNodeAudios'; import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik'; -import { useFileUploaderContext } from '~/utils/hooks/fileUploader'; +import { useFileUploaderContext } from '~/utils/hooks/useFileUploader'; type IProps = NodeEditorProps; diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx index c2cb1dc3..8553c120 100644 --- a/src/components/editors/EditorUploadButton/index.tsx +++ b/src/components/editors/EditorUploadButton/index.tsx @@ -3,7 +3,7 @@ import styles from './styles.module.scss'; import { Icon } from '~/components/input/Icon'; import { UPLOAD_TYPES } from '~/redux/uploads/constants'; import { IEditorComponentProps } from '~/redux/node/types'; -import { useFileUploaderContext } from '~/utils/hooks/fileUploader'; +import { useFileUploaderContext } from '~/utils/hooks/useFileUploader'; import { getFileType } from '~/utils/uploader'; import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik'; import { Button } from '~/components/input/Button'; diff --git a/src/components/editors/EditorUploadCoverButton/index.tsx b/src/components/editors/EditorUploadCoverButton/index.tsx index dcf46f32..56cd55cd 100644 --- a/src/components/editors/EditorUploadCoverButton/index.tsx +++ b/src/components/editors/EditorUploadCoverButton/index.tsx @@ -11,7 +11,7 @@ import { getURL } from '~/utils/dom'; import { Icon } from '~/components/input/Icon'; import { PRESETS } from '~/constants/urls'; import { IEditorComponentProps } from '~/redux/node/types'; -import { useFileUploader, useFileUploaderContext } from '~/utils/hooks/fileUploader'; +import { useFileUploader, useFileUploaderContext } from '~/utils/hooks/useFileUploader'; import { useNodeFormContext } from '~/utils/hooks/useNodeFormFormik'; import { getFileType } from '~/utils/uploader'; diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx index 43ae7502..d401bbb6 100644 --- a/src/components/editors/ImageEditor/index.tsx +++ b/src/components/editors/ImageEditor/index.tsx @@ -6,7 +6,7 @@ import { selectUploads } from '~/redux/uploads/selectors'; import { ImageGrid } from '~/components/editors/ImageGrid'; import styles from './styles.module.scss'; import { NodeEditorProps } from '~/redux/node/types'; -import { useFileUploaderContext } from '~/utils/hooks/fileUploader'; +import { useFileUploaderContext } from '~/utils/hooks/useFileUploader'; type IProps = NodeEditorProps; diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 0fa54f5e..988bf793 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -7,7 +7,7 @@ import { CoverBackdrop } from '~/components/containers/CoverBackdrop'; import { prop } from 'ramda'; import { useNodeFormFormik } from '~/utils/hooks/useNodeFormFormik'; import { EditorButtons } from '~/components/editors/EditorButtons'; -import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploader'; +import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/useFileUploader'; import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants'; import { FormikProvider } from 'formik'; import { INode } from '~/redux/types'; diff --git a/src/containers/profile/ProfilePageLeft/index.tsx b/src/containers/profile/ProfilePageLeft/index.tsx index fb2af296..6559c065 100644 --- a/src/containers/profile/ProfilePageLeft/index.tsx +++ b/src/containers/profile/ProfilePageLeft/index.tsx @@ -9,6 +9,9 @@ import classNames from 'classnames'; import styles from './styles.module.scss'; import markdown from '~/styles/common/markdown.module.scss'; +import { ProfileAvatar } from '~/containers/profile/ProfileAvatar'; +import { Avatar } from '~/components/common/Avatar'; +import { Markdown } from '~/components/containers/Markdown'; interface IProps { profile: IAuthState['profile']; @@ -16,49 +19,30 @@ interface IProps { } const ProfilePageLeft: FC = ({ username, profile }) => { - const thumb = useMemo(() => { - if (!profile || !profile.user || !profile.user.photo) return ''; - - return getURL(profile.user.photo, PRESETS.small_hero); - }, [profile]); - return (
-
+ -
-
-
- {profile.is_loading ? : profile?.user?.fullname} -
+
+
+ {profile.is_loading ? : profile?.user?.fullname} +
-
- {profile.is_loading ? : `~${profile?.user?.username}`} -
- -
- - - Профиль - - - - - Настройки - - - - - Сообщения - -
+
+ {profile.is_loading ? : `~${profile?.user?.username}`}
- {profile && profile.user && profile.user.description && false && ( -
- {formatText(profile?.user?.description || '')} -
+ {profile && profile.user && profile.user.description && ( + )}
); diff --git a/src/containers/profile/ProfilePageLeft/styles.module.scss b/src/containers/profile/ProfilePageLeft/styles.module.scss index 94b59f8a..0de94bc0 100644 --- a/src/containers/profile/ProfilePageLeft/styles.module.scss +++ b/src/containers/profile/ProfilePageLeft/styles.module.scss @@ -1,92 +1,51 @@ @import "src/styles/variables"; .wrap { + @include outer_shadow; + + padding: $gap $gap $gap * 2; + box-sizing: border-box; display: flex; align-items: stretch; justify-content: stretch; flex-direction: column; + background: $comment_bg; + height: 100%; + border-radius: $radius; } .avatar { width: 100%; - padding-bottom: 75%; - border-radius: 0 $radius 0 0; - background: 50% 50% no-repeat; - background-size: cover; -} - -.region_wrap { - width: 100%; - // padding: 0 10px; - position: relative; - margin-top: -$radius; - box-sizing: border-box; + height: 0; + padding-bottom: 100%; + margin-bottom: $gap * 2; } .region { - // background: $content_bg; - background: darken($content_bg, 2%); width: 100%; - border-radius: 0 $radius $radius 0; + text-align: center; } .name { font: $font_24_semibold; color: white; - padding: $gap $gap 0 $gap; text-transform: uppercase; width: 100%; box-sizing: border-box; + margin-bottom: 4px; } .username { - font: $font_14_semibold; - padding: 0 $gap $gap $gap; + font: $font_14_regular; box-sizing: border-box; width: 100%; color: transparentize(white, 0.5); - margin-top: $gap / 2; -} - -.menu { - padding: $gap 0 $gap 0; - display: flex; - align-items: stretch; - width: 100%; - flex-direction: column; - box-sizing: border-box; - display: none; - - a { - width: 100%; - color: inherit; - text-decoration: none; - text-transform: uppercase; - font: $font_18_semibold; - padding: $gap $gap; - display: flex; - align-items: center; - justify-content: flex-start; - opacity: 0.5; - box-sizing: border-box; - transition: opacity 0.25s; - - &:hover { - opacity: 1; - } - } - - svg { - margin-right: $gap; - fill: currentColor; - } } .description { - padding: $gap; - box-sizing: border-box; - // background: darken($content_bg, 2%); - background: darken($content_bg, 4%); - // margin: 0 $gap; - border-radius: 0 0 $radius $radius; + @include clamp(3, 21px * 3); + line-height: 21px; + font: $font_14_regular; + margin-top: $gap * 3; + display: none; } diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index e9f96bdd..4c919f4c 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -9,66 +9,15 @@ $cols: $content_width / $cell; -@mixin fluid { - @media(min-width: $content_width) { - .fluid & { - @content - } - } -} - .container { max-width: $content_width; width: 100%; - - &.fluid { - padding: 0 $gap; - box-sizing: border-box; - max-width: none; - } } .grid { - width: 100%; - box-sizing: border-box; - display: grid; - - grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr)); grid-template-rows: 50vh $cell; - grid-auto-rows: $cell; - grid-auto-flow: row dense; - grid-column-gap: $gap; - grid-row-gap: $gap; - - @include fluid { - grid-template-columns: repeat(auto-fit, minmax($fluid_cell - 5, 1fr)); - grid-template-rows: $fluid_cell; - grid-auto-rows: $fluid_cell; - } - - @media (max-width: ($cell + 10) * 3) { - grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr)); - grid-auto-rows: $fluid_cell; - grid-template-rows: calc(50vw - 10px) $fluid_cell; - } - - @media (max-width: $cell_tablet) { - grid-template-rows: calc(66vw - 10px) auto $fluid_cell; - } - - @media (max-width: $cell_mobile) { - // rework stamp, so it will be shown as smaller one on mobiles - grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); - grid-template-rows: calc(80vw - 10px) auto 50vw; - grid-auto-rows: 50vw; - } - - @media (max-width: ($fluid_cell + 5) * 1.5 + 20) { - grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); - grid-template-rows: calc(80vw - 10px) auto 50vw; - grid-auto-rows: 50vw; - } + @include flow_grid; } .pad_last { @@ -86,15 +35,6 @@ $cols: $content_width / $cell; align-items: center; justify-content: center; font: $font_24_semibold; - - @include fluid { - grid-row-end: span 2; - grid-column-end: span 4; - - @media(max-width: $content_width) { - grid-column-end: -1; - } - } } .stamp { diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx index 950f4ca0..24b6dca9 100644 --- a/src/layouts/ProfileLayout/index.tsx +++ b/src/layouts/ProfileLayout/index.tsx @@ -4,9 +4,13 @@ import { Route, RouteComponentProps, Switch } from 'react-router'; import { useDispatch } from 'react-redux'; import { authLoadProfile } from '~/redux/auth/actions'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; -import { selectAuthProfile } from '~/redux/auth/selectors'; +import { selectAuthProfile, selectUser } from '~/redux/auth/selectors'; import { ProfilePageLeft } from '~/containers/profile/ProfilePageLeft'; import { Container } from '~/containers/main/Container'; +import { FlowGrid } from '~/components/flow/FlowGrid'; +import { FlowLayout } from '~/layouts/FlowLayout'; +import { Sticky } from '~/components/containers/Sticky'; +import { selectFlow } from '~/redux/flow/selectors'; type Props = RouteComponentProps<{ username: string }> & {}; @@ -15,6 +19,9 @@ const ProfileLayout: FC = ({ params: { username }, }, }) => { + const { nodes } = useShallowSelect(selectFlow); + const user = useShallowSelect(selectUser); + const dispatch = useDispatch(); useEffect(() => { @@ -25,7 +32,15 @@ const ProfileLayout: FC = ({ return ( - +
+ + + +
+ +
+ +
); }; diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss index 104bc693..aa05c21f 100644 --- a/src/layouts/ProfileLayout/styles.module.scss +++ b/src/layouts/ProfileLayout/styles.module.scss @@ -1,20 +1,16 @@ @import "src/styles/variables"; .wrap { - flex: 1; - display: flex; - align-items: stretch; - justify-content: stretch; - border-radius: $radius; + display: grid; + grid-template-columns: $cell auto; + grid-column-gap: $gap; } +.grid { + @include flow_grid; +} .left { - flex: 1; - background: darken($content_bg, 2%); - border-radius: 0 $radius $radius 0; - box-sizing: border-box; } .right { - flex: 4; } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e7f42e0c..baf86e5e 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -268,3 +268,39 @@ $sidebar_border: transparentize(white, 0.95); $color: mix($wisegreen, $content_bg, 30%); background: linear-gradient(170deg, lighten($color, 10%), $color); } + +@mixin flow_grid { + width: 100%; + box-sizing: border-box; + display: grid; + + grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr)); + grid-auto-rows: $cell; + + grid-auto-flow: row dense; + grid-column-gap: $gap; + grid-row-gap: $gap; + + @media (max-width: ($cell + 10) * 3) { + grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr)); + grid-auto-rows: $fluid_cell; + grid-template-rows: calc(50vw - 10px) $fluid_cell; + } + + @media (max-width: $cell_tablet) { + grid-template-rows: calc(66vw - 10px) auto $fluid_cell; + } + + @media (max-width: $cell_mobile) { + // rework stamp, so it will be shown as smaller one on mobiles + grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); + grid-template-rows: calc(80vw - 10px) auto 50vw; + grid-auto-rows: 50vw; + } + + @media (max-width: ($fluid_cell + 5) * 1.5 + 20) { + grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); + grid-template-rows: calc(80vw - 10px) auto 50vw; + grid-auto-rows: 50vw; + } +} diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts index cd222db5..24592101 100644 --- a/src/utils/hooks/useCommentFormFormik.ts +++ b/src/utils/hooks/useCommentFormFormik.ts @@ -2,7 +2,7 @@ import { IComment, INode } from '~/redux/types'; import { useCallback, useEffect, useRef } from 'react'; import { FormikHelpers, useFormik, useFormikContext } from 'formik'; import { array, object, string } from 'yup'; -import { FileUploader } from '~/utils/hooks/fileUploader'; +import { FileUploader } from '~/utils/hooks/useFileUploader'; import { useDispatch } from 'react-redux'; import { nodePostLocalComment } from '~/redux/node/actions'; diff --git a/src/utils/hooks/fileUploader.tsx b/src/utils/hooks/useFileUploader.tsx similarity index 100% rename from src/utils/hooks/fileUploader.tsx rename to src/utils/hooks/useFileUploader.tsx diff --git a/src/utils/hooks/useNodeFormFormik.ts b/src/utils/hooks/useNodeFormFormik.ts index d04e9200..f570811e 100644 --- a/src/utils/hooks/useNodeFormFormik.ts +++ b/src/utils/hooks/useNodeFormFormik.ts @@ -1,5 +1,5 @@ import { IComment, INode } from '~/redux/types'; -import { FileUploader } from '~/utils/hooks/fileUploader'; +import { FileUploader } from '~/utils/hooks/useFileUploader'; import { useCallback, useEffect, useRef } from 'react'; import { FormikHelpers, useFormik, useFormikContext } from 'formik'; import { object, string } from 'yup';