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

editor buttons fix on mobile

Browse source
This commit is contained in:
Fedor Katurov 2020-04-29 18:52:27 +07:00
parent 3d398f23ed
commit b794a44c4f
3 changed files with 97 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/node/NodeImageSlideBlock/styles.scss
View file

@ -20,11 +20,11 @@
@include tablet {
margin-left: 0;
margin-right: 0;
border-radius: 0;
}
}
.image_container {
border-radius: $panel_radius 0 0 $panel_radius;
display: flex;
align-items: flex-start;
justify-content: flex-start;
@ -45,6 +45,10 @@
border-radius: $radius;
box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
@include tablet {
border-radius: 0;
}
}
&.is_dragging {

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

@ -60,23 +60,29 @@ const NodePanelInner: FC<IProps> = memo(
</div>
{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={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
<div className={styles.editor_menu}>
<div className={styles.editor_menu_button}>
<Icon icon="dots-vertical" size={24} onClick={onStar} />
</div>
<div>
<Icon icon="edit" size={24} onClick={onEdit} />
<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={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
</div>
<div>
<Icon icon="edit" size={24} onClick={onEdit} />
</div>
</div>
</div>
)}

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

@ -1,3 +1,32 @@
@mixin button {
margin: 0 $gap;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
svg {
fill: darken(white, 50%);
transition: fill 0.25s;
}
&:hover {
svg {
fill: $red;
}
}
&::after {
content: ' ';
flex: 0 0 6px;
height: $gap;
width: 6px;
border-radius: 4px;
background: transparentize(black, 0.7);
margin-left: $gap * 2;
}
}
.wrap {
display: flex;
align-items: center;
@ -96,36 +125,7 @@
justify-content: center;
& > * {
margin: 0 $gap;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
svg {
fill: darken(white, 50%);
transition: fill 0.25s;
}
&:hover {
svg {
fill: $red;
}
}
&::after {
content: ' ';
flex: 0 0 6px;
height: $gap;
width: 6px;
border-radius: 4px;
background: transparentize(black, 0.7);
margin-left: $gap * 2;
}
&:first-child {
margin-left: 0;
}
@include button;
}
@include tablet {
@ -148,6 +148,20 @@
.editor_buttons {
@include tablet {
display: none;
& > * {
&:last-child {
margin-right: 0;
&::after {
display: none;
}
}
&:first-child {
margin-left: 0;
}
}
}
}
@ -227,3 +241,30 @@
fill: $orange;
}
}
.editor_menu_button {
display: none !important;
@include button();
@include tablet {
display: flex !important;
}
}
.editor_menu {
// position: relative;
&:hover {
.editor_buttons {
display: flex;
position: absolute;
right: 0;
top: 100%;
background: darken($content_bg, 4%);
padding: $gap $gap * 2;
border-radius: $radius;
box-shadow: transparentize(black, 0.8) 5px 5px 5px;
}
}
}