muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

fixed show more appearance

Browse source
This commit is contained in:
Fedor Katurov 2020-04-09 14:51:52 +07:00
parent c9d45d97dc
commit b38e9d2f1d
2 changed files with 27 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/node/NodeComments/index.tsx
View file

@ -56,6 +56,10 @@ const NodeComments: FC<IProps> = memo(
'комментариев' 'комментариев'
)} )}
{comments_left > COMMENTS_DISPLAY ? ` из ${comments_left} оставшихся` : ''} {comments_left > COMMENTS_DISPLAY ? ` из ${comments_left} оставшихся` : ''}
<div
className={styles.bar}
style={{ width: `${(comments_left / comment_count) * 100}%` }}
/>
</div> </div>
), ),
[comments_left, onLoadMore, COMMENTS_DISPLAY] [comments_left, onLoadMore, COMMENTS_DISPLAY]

28
src/components/node/NodeComments/styles.scss
View file

@ -15,16 +15,34 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: darken($comment_bg, 8%);
border-radius: $radius; border-radius: $radius;
text-transform: uppercase; text-transform: uppercase;
color: darken(white, 50%); color: darken(white, 60%);
font: $font_14_regular; font: $font_14_medium;
cursor: pointer; cursor: pointer;
transition: background-color 0.25s; transition: all 0.25s;
user-select: none; user-select: none;
background: url('~/sprites/stripes.svg');
position: relative;
&:hover { &:hover {
background-color: lighten($comment_bg, 4%); color: $wisegreen;
background-color: darken($wisegreen, 12%);
.bar {
background: $wisegreen;
} }
} }
}
.bar {
position: absolute;
height: 2px;
border-radius: 2px;
background: darken(white, 60%);
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
width: 50%;
transition: width 0.25s;
}