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:
Fedor Katurov
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 { PRESETS } from "~/constants/urls";
|
||||
import { debounce } from "throttle-debounce";
|
||||
import { NODE_TYPES } from "~/redux/node/constants";
|
||||
|
||||
interface IProps {
|
||||
node: INode;
|
||||
|
|
@ -64,12 +65,11 @@ const Cell: FC<IProps> = ({
|
|||
}, [setIsLoaded]);
|
||||
|
||||
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 =
|
||||
(((flow && !!flow.show_description) || type === "text") &&
|
||||
has_description &&
|
||||
description) ||
|
||||
(type === NODE_TYPES.TEXT && description) ||
|
||||
(flow && flow.show_description && has_description && description) ||
|
||||
null;
|
||||
|
||||
const toggleViewDescription = useCallback(() => {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
position: relative;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
background: 50% 50% no-repeat/cover;
|
||||
background: 50% 50% no-repeat/cover $content_bg;
|
||||
|
||||
.is_hero {
|
||||
.title {
|
||||
|
|
@ -185,78 +185,78 @@
|
|||
// touch-action: none;
|
||||
animation: appear 1s forwards;
|
||||
|
||||
@media (min-width: $cell * 2 + $grid_line) {
|
||||
.vertical > &.has_text,
|
||||
.horizontal > &.has_text,
|
||||
.quadro > &.has_text {
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: $grid_line;
|
||||
// @media (min-width: $cell * 2 + $grid_line) {
|
||||
// .vertical > &.has_text,
|
||||
// .horizontal > &.has_text,
|
||||
// .quadro > &.has_text {
|
||||
// box-sizing: border-box;
|
||||
// background: none;
|
||||
// box-shadow: none;
|
||||
// padding: $grid_line;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
// &::after {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.face_content {
|
||||
padding: $gap;
|
||||
background: rgba(25, 25, 25, 0.9);
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// .face_content {
|
||||
// padding: $gap;
|
||||
// background: rgba(25, 25, 25, 0.9);
|
||||
// border-radius: $radius;
|
||||
// overflow: hidden;
|
||||
// position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: linear-gradient(
|
||||
transparentize($content_bg, 1),
|
||||
$content_bg
|
||||
);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border-radius: 0 0 $cell_radius $cell_radius;
|
||||
}
|
||||
}
|
||||
// &:after {
|
||||
// content: "";
|
||||
// background: linear-gradient(
|
||||
// transparentize($content_bg, 1),
|
||||
// $content_bg
|
||||
// );
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// height: 50px;
|
||||
// width: 100%;
|
||||
// border-radius: 0 0 $cell_radius $cell_radius;
|
||||
// }
|
||||
// }
|
||||
|
||||
.text::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// .text::after {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
.vertical > &.has_text {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
max-height: 50%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: auto;
|
||||
padding: ($grid_line / 2) $grid_line $grid_line $grid_line;
|
||||
}
|
||||
// .vertical > &.has_text {
|
||||
// top: auto;
|
||||
// bottom: 0;
|
||||
// max-height: 50%;
|
||||
// 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;
|
||||
width: auto;
|
||||
bottom: 0;
|
||||
padding: $grid_line ($grid_line / 2) $grid_line $grid_line;
|
||||
}
|
||||
// .horizontal > &.has_text {
|
||||
// top: auto;
|
||||
// left: 0;
|
||||
// height: 100%;
|
||||
// max-width: 50%;
|
||||
// // height: auto;
|
||||
// width: auto;
|
||||
// bottom: 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;
|
||||
}
|
||||
}
|
||||
// .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 {
|
||||
|
|
@ -367,4 +367,31 @@
|
|||
display: flex;
|
||||
align-items: flex-end;
|
||||
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]:
|
||||
- fix: text nodes cell has no preview (actually, that's a problem of brief)
|
||||
|
||||
- password restore
|
||||
- signup?
|
||||
- better node brief update
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue