muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +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

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

@ -43,11 +43,11 @@ 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 && ( {user && user.username && (
<div className={styles.name}> <div className={styles.name}>
{is_loading ? ( {is_loading ? (
@ -57,10 +57,10 @@ const NodePanelInner: FC<IProps> = memo(
)} )}
</div> </div>
)} )}
</Filler> </div>
</Group>
<div className={styles.buttons}> {can_edit && (
<div className={styles.editor_buttons}>
{can_star && ( {can_star && (
<div className={classNames(styles.star, { is_heroic })}> <div className={classNames(styles.star, { is_heroic })}>
{is_heroic ? ( {is_heroic ? (
@ -71,8 +71,6 @@ const NodePanelInner: FC<IProps> = memo(
</div> </div>
)} )}
{can_edit && (
<>
<div> <div>
<Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} /> <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
</div> </div>
@ -80,9 +78,10 @@ const NodePanelInner: FC<IProps> = memo(
<div> <div>
<Icon icon="edit" size={24} onClick={onEdit} /> <Icon icon="edit" size={24} onClick={onEdit} />
</div> </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;
} }
} }