muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

fixed tag sidebar sidebar appearance

Browse source
This commit is contained in:
Fedor Katurov 2022-01-17 12:57:43 +07:00
parent 155138a5dd
commit 237f978cbd
2 changed files with 38 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/containers/sidebars/TagSidebar/index.tsx
View file

@ -8,6 +8,7 @@ import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
import { Tag } from '~/components/tags/Tag'; import { Tag } from '~/components/tags/Tag';
import { useTagNodes } from '~/hooks/tag/useTagNodes'; import { useTagNodes } from '~/hooks/tag/useTagNodes';
import { DialogComponentProps } from '~/types/modal'; import { DialogComponentProps } from '~/types/modal';
import { SidebarStack } from '~/components/sidebar/SidebarStack';
interface TagSidebarProps extends DialogComponentProps { interface TagSidebarProps extends DialogComponentProps {
tag: string; tag: string;
@ -19,43 +20,45 @@ const TagSidebar: VFC<TagSidebarProps> = ({ tag, onRequestClose }) => {
return ( return (
<SidebarWrapper onClose={onRequestClose}> <SidebarWrapper onClose={onRequestClose}>
<div className={styles.wrap}> <SidebarStack>
<div className={styles.content}> <div className={styles.wrap}>
<div className={styles.head}> <div className={styles.content}>
<div className={styles.tag}> <div className={styles.head}>
<Tag tag={{ title }} size="big" /> <div className={styles.tag}>
<Tag tag={{ title }} size="big" />
</div>
{isLoading && (
<div className={styles.sync}>
<LoaderCircle size={20} />
</div>
)}
<div className={styles.close}>
<button onClick={onRequestClose}>
<Icon icon="close" size={32} />
</button>
</div>
</div> </div>
{isLoading && ( {!nodes.length && !isLoading ? (
<div className={styles.sync}> <div className={styles.none}>
<LoaderCircle size={20} /> <Icon icon="sad" size={120} />
<div>
У этого тэга нет постов
<br />
<br />
Такие дела
</div>
</div> </div>
) : (
<InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
<TagSidebarList nodes={nodes} />
</InfiniteScroll>
)} )}
<div className={styles.close}>
<button onClick={onRequestClose}>
<Icon icon="close" size={32} />
</button>
</div>
</div> </div>
{!nodes.length && !isLoading ? (
<div className={styles.none}>
<Icon icon="sad" size={120} />
<div>
У этого тэга нет постов
<br />
<br />
Такие дела
</div>
</div>
) : (
<InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
<TagSidebarList nodes={nodes} />
</InfiniteScroll>
)}
</div> </div>
</div> </SidebarStack>
</SidebarWrapper> </SidebarWrapper>
); );
}; };

5
src/containers/sidebars/TagSidebar/styles.module.scss
View file

@ -2,6 +2,8 @@
.wrap { .wrap {
@include sidebar_content(400px); @include sidebar_content(400px);
width: 100vw;
max-width: 400px;
} }
.content { .content {
@ -17,11 +19,12 @@
} }
.head { .head {
@include row_shadow;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: $gap; padding: $gap;
box-shadow: transparentize(white, 0.95) 0 1px;
} }
.tag { .tag {