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

made better hoverables

Browse source
This commit is contained in:
Fedor Katurov 2022-12-20 15:30:50 +06:00
parent ae7347fbb7
commit 0dd006d397
3 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/comment/CommentImageGrid/styles.module.scss
View file

@ -3,6 +3,7 @@
.images { .images {
cursor: pointer; cursor: pointer;
overflow: visible !important;
&.multiple { &.multiple {
// Desktop devices // Desktop devices

3
src/components/common/Hoverable/styles.module.scss
View file

@ -11,7 +11,6 @@
border-radius: $radius; border-radius: $radius;
opacity: 0; opacity: 0;
transition: all 100ms; transition: all 100ms;
box-shadow: inset $color_primary 0 0 0 2px;
touch-action: none; touch-action: none;
pointer-events: none; pointer-events: none;
} }
@ -23,6 +22,8 @@
&:hover { &:hover {
z-index: 10; z-index: 10;
transition: all 100ms; transition: all 100ms;
transform: scale(1.025) translateY(-2%);
box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px 5px;
&::after { &::after {
opacity: 1; opacity: 1;

4
src/containers/lab/LabGrid/index.tsx
View file

@ -1,5 +1,6 @@
import { FC, memo } from 'react'; import { FC, memo } from 'react';
import { Hoverable } from '~/components/common/Hoverable';
import { Columns } from '~/components/containers/Columns'; import { Columns } from '~/components/containers/Columns';
import { InfiniteScroll } from '~/components/containers/InfiniteScroll'; import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
import { LabNoResults } from '~/components/lab/LabNoResults'; import { LabNoResults } from '~/components/lab/LabNoResults';
@ -22,12 +23,13 @@ const LabGrid: FC<IProps> = memo(() => {
<div className={styles.wrap}> <div className={styles.wrap}>
<Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}> <Columns hasMore={hasMore && !isLoading} onScrollEnd={loadMore}>
{nodes.map((node) => ( {nodes.map((node) => (
<Hoverable key={node.node.id}>
<LabNode <LabNode
node={node.node} node={node.node}
key={node.node.id}
lastSeen={node.last_seen} lastSeen={node.last_seen}
commentCount={node.comment_count} commentCount={node.comment_count}
/> />
</Hoverable>
))} ))}
</Columns> </Columns>
</div> </div>