mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
better appearance for text only nodes
This commit is contained in:
parent
d4eb186d20
commit
f440a5f4c3
3 changed files with 98 additions and 70 deletions
|
@ -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(() => {
|
||||||
|
|
|
@ -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;
|
// height: auto;
|
||||||
width: auto;
|
// width: auto;
|
||||||
padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
|
// padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.horizontal > &.has_text {
|
// .horizontal > &.has_text {
|
||||||
top: auto;
|
// top: auto;
|
||||||
left: 0;
|
// left: 0;
|
||||||
height: 100%;
|
// height: 100%;
|
||||||
max-width: 50%;
|
// max-width: 50%;
|
||||||
// height: auto;
|
// // height: auto;
|
||||||
width: auto;
|
// width: auto;
|
||||||
bottom: 0;
|
// bottom: 0;
|
||||||
padding: $grid_line ($grid_line / 2) $grid_line $grid_line;
|
// padding: $grid_line ($grid_line / 2) $grid_line $grid_line;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.quadro > &.has_text {
|
// .quadro > &.has_text {
|
||||||
padding: ($grid_line / 2) ($grid_line / 2) $grid_line $grid_line;
|
// padding: ($grid_line / 2) ($grid_line / 2) $grid_line $grid_line;
|
||||||
top: auto;
|
// top: auto;
|
||||||
max-height: 50%;
|
// max-height: 50%;
|
||||||
max-width: 50%;
|
// max-width: 50%;
|
||||||
height: auto;
|
// height: auto;
|
||||||
width: auto;
|
// width: auto;
|
||||||
bottom: 0;
|
// bottom: 0;
|
||||||
left: 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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue