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

fixed node title on mobiles

Browse source
This commit is contained in:
Fedor Katurov 2020-04-29 18:40:24 +07:00
parent d1dc914572
commit 3d398f23ed
2 changed files with 58 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/node/NodePanelInner/index.tsx
View file

@ -43,46 +43,45 @@ const NodePanelInner: FC<IProps> = memo(
return ( return (
<div className={classNames(styles.wrap, { stack })}> <div className={classNames(styles.wrap, { stack })}>
<div className={styles.content}> <div className={styles.content}>
<Group horizontal className={styles.panel}> <div className={styles.panel}>
<Filler> <div className={styles.title}>
<div className={styles.title}> {is_loading ? <Placeholder width="40%" /> : title || '...'}
{is_loading ? <Placeholder width="40%" /> : title || '...'} </div>
</div>
{user && user.username && (
<div className={styles.name}>
{is_loading ? (
<Placeholder width="100px" />
) : (
`~${user.username}, ${getPrettyDate(created_at)}`
)}
</div>
)}
</Filler>
</Group>
<div className={styles.buttons}> {user && user.username && (
{can_star && ( <div className={styles.name}>
<div className={classNames(styles.star, { is_heroic })}> {is_loading ? (
{is_heroic ? ( <Placeholder width="100px" />
<Icon icon="star_full" size={24} onClick={onStar} />
) : ( ) : (
<Icon icon="star" size={24} onClick={onStar} /> `~${user.username}, ${getPrettyDate(created_at)}`
)} )}
</div> </div>
)} )}
</div>
{can_edit && ( {can_edit && (
<> <div className={styles.editor_buttons}>
<div> {can_star && (
<Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} /> <div className={classNames(styles.star, { is_heroic })}>
{is_heroic ? (
<Icon icon="star_full" size={24} onClick={onStar} />
) : (
<Icon icon="star" size={24} onClick={onStar} />
)}
</div> </div>
)}
<div> <div>
<Icon icon="edit" size={24} onClick={onEdit} /> <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
</div> </div>
</>
)}
<div>
<Icon icon="edit" size={24} onClick={onEdit} />
</div>
</div>
)}
<div className={styles.buttons}>
{can_like && ( {can_like && (
<div className={classNames(styles.like, { is_liked })}> <div className={classNames(styles.like, { is_liked })}>
{is_liked ? ( {is_liked ? (

39
src/components/node/NodePanelInner/styles.scss
View file

@ -8,6 +8,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
min-width: 0;
&:global(.stack) { &:global(.stack) {
padding: 0 $gap; padding: 0 $gap;
@ -31,14 +32,13 @@
padding: $gap $gap; padding: $gap $gap;
background: $node_bg; background: $node_bg;
height: 64px; height: 64px;
min-width: 0;
@include outer_shadow(); @include outer_shadow();
@include tablet { @include tablet {
border-radius: 0; border-radius: 0;
// flex-direction: column; height: auto;
// align-items: flex-start;
height: 128px;
} }
@include can_backdrop { @include can_backdrop {
@ -50,20 +50,25 @@
.title { .title {
text-transform: uppercase; text-transform: uppercase;
font: $font_24_semibold; font: $font_24_semibold;
// height: 24px; overflow: hidden;
// padding-bottom: 6px; flex: 1;
text-overflow: ellipsis;
@include tablet { @include tablet {
// font-size: 16px; white-space: nowrap;
word-break: break-word;
padding-bottom: 0; padding-bottom: 0;
padding-top: 10px; font: $font_16_semibold;
} }
} }
.name { .name {
font: $font_14_regular; font: $font_14_regular;
color: transparentize(white, 0.5); color: transparentize(white, 0.5);
text-transform: lowercase;
@include tablet {
font: $font_12_regular;
}
} }
.btn { .btn {
@ -77,9 +82,11 @@
.panel { .panel {
flex: 1; flex: 1;
min-width: 0;
} }
.buttons { .buttons,
.editor_buttons {
flex: 0; flex: 0;
padding-right: $gap; padding-right: $gap;
fill: transparentize(white, 0.7); fill: transparentize(white, 0.7);
@ -119,18 +126,28 @@
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }
}
@include tablet {
align-self: center;
}
}
.buttons {
& > * {
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
&::after { &::after {
display: none; display: none;
} }
} }
} }
}
.editor_buttons {
@include tablet { @include tablet {
margin-top: $gap * 2; display: none;
align-self: center;
} }
} }