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

better appearance for text only nodes

Browse source
This commit is contained in:
Fedor Katurov 2019-11-18 12:25:11 +07:00
parent d4eb186d20
commit f440a5f4c3
3 changed files with 98 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/flow/Cell/index.tsx
View file

@ -8,6 +8,7 @@ import { Icon } from "~/components/input/Icon";
import { flowSetCellView } from "~/redux/flow/actions"; import { flowSetCellView } from "~/redux/flow/actions";
import { PRESETS } from "~/constants/urls"; import { PRESETS } from "~/constants/urls";
import { debounce } from "throttle-debounce"; import { debounce } from "throttle-debounce";
import { NODE_TYPES } from "~/redux/node/constants";
interface IProps { interface IProps {
node: INode; node: INode;
@ -64,12 +65,11 @@ const Cell: FC<IProps> = ({
}, [setIsLoaded]); }, [setIsLoaded]);
const onClick = useCallback(() => onSelect(id, type), [onSelect, id, type]); const onClick = useCallback(() => onSelect(id, type), [onSelect, id, type]);
const has_description = description && description.length > 160; const has_description = description && description.length > 32;
const text = const text =
(((flow && !!flow.show_description) || type === "text") && (type === NODE_TYPES.TEXT && description) ||
has_description && (flow && flow.show_description && has_description && description) ||
description) ||
null; null;
const toggleViewDescription = useCallback(() => { const toggleViewDescription = useCallback(() => {

159
src/components/flow/Cell/styles.scss
View file

@ -8,7 +8,7 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
color: white; color: white;
background: 50% 50% no-repeat/cover; background: 50% 50% no-repeat/cover $content_bg;
.is_hero { .is_hero {
.title { .title {
@ -185,78 +185,78 @@
// touch-action: none; // touch-action: none;
animation: appear 1s forwards; animation: appear 1s forwards;
@media (min-width: $cell * 2 + $grid_line) { // @media (min-width: $cell * 2 + $grid_line) {
.vertical > &.has_text, // .vertical > &.has_text,
.horizontal > &.has_text, // .horizontal > &.has_text,
.quadro > &.has_text { // .quadro > &.has_text {
box-sizing: border-box; // box-sizing: border-box;
background: none; // background: none;
box-shadow: none; // box-shadow: none;
padding: $grid_line; // padding: $grid_line;
&::after { // &::after {
display: none; // display: none;
} // }
.face_content { // .face_content {
padding: $gap; // padding: $gap;
background: rgba(25, 25, 25, 0.9); // background: rgba(25, 25, 25, 0.9);
border-radius: $radius; // border-radius: $radius;
overflow: hidden; // overflow: hidden;
position: relative; // position: relative;
&:after { // &:after {
content: ""; // content: "";
background: linear-gradient( // background: linear-gradient(
transparentize($content_bg, 1), // transparentize($content_bg, 1),
$content_bg // $content_bg
); // );
position: absolute; // position: absolute;
bottom: 0; // bottom: 0;
left: 0; // left: 0;
height: 50px; // height: 50px;
width: 100%; // width: 100%;
border-radius: 0 0 $cell_radius $cell_radius; // border-radius: 0 0 $cell_radius $cell_radius;
} // }
} // }
.text::after { // .text::after {
display: none; // display: none;
} // }
} // }
.vertical > &.has_text { // .vertical > &.has_text {
top: auto; // top: auto;
bottom: 0; // bottom: 0;
max-height: 50%; // max-height: 50%;
max-width: 100%; // max-width: 100%;
height: auto;
width: auto;
padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
}
.horizontal > &.has_text {
top: auto;
left: 0;
height: 100%;
max-width: 50%;
// height: auto; // height: auto;
width: auto; // width: auto;
bottom: 0; // padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
padding: $grid_line ($grid_line / 2) $grid_line $grid_line; // }
}
.quadro > &.has_text { // .horizontal > &.has_text {
padding: ($grid_line / 2) ($grid_line / 2) $grid_line $grid_line; // top: auto;
top: auto; // left: 0;
max-height: 50%; // height: 100%;
max-width: 50%; // max-width: 50%;
height: auto; // // height: auto;
width: auto; // width: auto;
bottom: 0; // bottom: 0;
left: 0; // padding: $grid_line ($grid_line / 2) $grid_line $grid_line;
} // }
}
// .quadro > &.has_text {
// padding: ($grid_line / 2) ($grid_line / 2) $grid_line $grid_line;
// top: auto;
// max-height: 50%;
// max-width: 50%;
// height: auto;
// width: auto;
// bottom: 0;
// left: 0;
// }
// }
} }
.menu { .menu {
@ -367,4 +367,31 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
width: 100%;
}
.text_only {
width: 100%;
height: 100%;
padding: $gap / 2;
overflow: hidden;
box-sizing: border-box;
position: relative;
&::after {
content: " ";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 160px;
pointer-events: none;
touch-action: none;
background: linear-gradient(
transparentize($content_bg, 1),
$content_bg 95%
);
z-index: 1;
border-radius: 0 0 $radius $radius;
}
} }

1
src/index.tsx
View file

@ -22,6 +22,7 @@ render(
[Stage 0]: [Stage 0]:
- fix: text nodes cell has no preview (actually, that's a problem of brief) - fix: text nodes cell has no preview (actually, that's a problem of brief)
- password restore - password restore
- signup? - signup?
- better node brief update - better node brief update