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

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

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