@ludo.ninja/components 2.3.42 → 2.3.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -24,7 +24,7 @@ const StyledSearchSuggestions = styled_components_1.default.div `
|
|
|
24
24
|
border-bottom-left-radius: 28px;
|
|
25
25
|
border-bottom-right-radius: 28px;
|
|
26
26
|
|
|
27
|
-
.content {
|
|
27
|
+
.suggestions-content {
|
|
28
28
|
position: relative;
|
|
29
29
|
height: 100%;
|
|
30
30
|
padding: 0 44px;
|
|
@@ -42,7 +42,7 @@ const StyledSearchSuggestions = styled_components_1.default.div `
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 768px) {
|
|
45
|
-
.scroller {
|
|
45
|
+
.suggestions-scroller {
|
|
46
46
|
max-height: calc(var(--app-height) - 40px - 24px - 10px - 24px - 44px);
|
|
47
47
|
padding-left: 20px;
|
|
48
48
|
padding-right: 20px;
|
|
@@ -58,7 +58,7 @@ const StyledSearchSuggestions = styled_components_1.default.div `
|
|
|
58
58
|
border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
|
|
59
59
|
border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
|
|
60
60
|
|
|
61
|
-
.content {
|
|
61
|
+
.suggestions-content {
|
|
62
62
|
padding: 0 ${(0, _4k_1.adaptiveValueCalc)(44)};
|
|
63
63
|
border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(20)};
|
|
64
64
|
border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(20)};
|
|
@@ -74,8 +74,8 @@ const SearchSuggestions = ({ searchTerm, assets = [], profiles = [], collections
|
|
|
74
74
|
getVideoDomain: state.getVideoDomain,
|
|
75
75
|
}));
|
|
76
76
|
const isNotFound = !assets?.length && !profiles?.length && !collections?.length && !projects?.length;
|
|
77
|
-
return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestions, { children: (0, jsx_runtime_1.jsxs)("div", { className: "content", children: [isLoading && (0, jsx_runtime_1.jsx)(searchSuggestionsItemSkeleton_1.SearchSuggestionsItemsSkeleton, {}), !isLoading &&
|
|
78
|
-
(isNotFound ? ((0, jsx_runtime_1.jsx)(searchSuggestionsNotFound_1.default, { notFoundText: searchTerm })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "scroller", children: [...(projects?.length
|
|
77
|
+
return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestions, { children: (0, jsx_runtime_1.jsxs)("div", { className: "suggestions-content", children: [isLoading && (0, jsx_runtime_1.jsx)(searchSuggestionsItemSkeleton_1.SearchSuggestionsItemsSkeleton, {}), !isLoading &&
|
|
78
|
+
(isNotFound ? ((0, jsx_runtime_1.jsx)(searchSuggestionsNotFound_1.default, { notFoundText: searchTerm })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "suggestions-scroller", children: [...(projects?.length
|
|
79
79
|
? [
|
|
80
80
|
{
|
|
81
81
|
caption: "Projects",
|
|
@@ -15,7 +15,7 @@ const StyledSearchSuggestionsCaption = styled_components_1.default.div `
|
|
|
15
15
|
border-top: 1px solid ${colors_1.BorderColorLight};
|
|
16
16
|
line-height: 22px;
|
|
17
17
|
|
|
18
|
-
.caption {
|
|
18
|
+
.suggestions-caption {
|
|
19
19
|
${typography_1.FH5};
|
|
20
20
|
color: ${colors_1.TextGrayColor};
|
|
21
21
|
user-select: none;
|
|
@@ -39,7 +39,7 @@ const StyledSearchSuggestionsCaption = styled_components_1.default.div `
|
|
|
39
39
|
`;
|
|
40
40
|
// Components
|
|
41
41
|
const SearchSuggestionsCaption = ({ caption, children }) => {
|
|
42
|
-
return ((0, jsx_runtime_1.jsxs)(StyledSearchSuggestionsCaption, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'caption', children: caption }), children] }));
|
|
42
|
+
return ((0, jsx_runtime_1.jsxs)(StyledSearchSuggestionsCaption, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'suggestions-caption', children: caption }), children] }));
|
|
43
43
|
};
|
|
44
44
|
// Export
|
|
45
45
|
exports.default = SearchSuggestionsCaption;
|
|
@@ -12,7 +12,7 @@ const typography_1 = require("../../../../styles/typography");
|
|
|
12
12
|
const vars_1 = require("../../../../fonts/vars");
|
|
13
13
|
// Styles
|
|
14
14
|
const StyledSearchSuggestionsFooter = styled_components_1.default.div `
|
|
15
|
-
.footer {
|
|
15
|
+
.suggestions-footer {
|
|
16
16
|
font-family: ${vars_1.dmsansFontVarCss.css};
|
|
17
17
|
${typography_1.TextSmall};
|
|
18
18
|
border-top: 1px solid ${colors_1.BorderColorLight};
|
|
@@ -21,7 +21,7 @@ const StyledSearchSuggestionsFooter = styled_components_1.default.div `
|
|
|
21
21
|
margin-top: auto;
|
|
22
22
|
user-select: none;
|
|
23
23
|
|
|
24
|
-
.text {
|
|
24
|
+
.suggestions-text {
|
|
25
25
|
padding: 12px 0;
|
|
26
26
|
|
|
27
27
|
strong {
|
|
@@ -35,10 +35,10 @@ const StyledSearchSuggestionsFooter = styled_components_1.default.div `
|
|
|
35
35
|
//border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
|
|
36
36
|
//border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
|
|
37
37
|
|
|
38
|
-
.footer {
|
|
38
|
+
.suggestions-footer {
|
|
39
39
|
border-top: ${(0, _4k_1.adaptiveValueCalc)(1)} solid ${colors_1.BorderColorLight};
|
|
40
40
|
|
|
41
|
-
.text {
|
|
41
|
+
.suggestions-text {
|
|
42
42
|
padding: ${(0, _4k_1.adaptiveValueCalc)(12)} 0;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
@@ -46,7 +46,7 @@ const StyledSearchSuggestionsFooter = styled_components_1.default.div `
|
|
|
46
46
|
`;
|
|
47
47
|
// Components
|
|
48
48
|
const SearchSuggestionsFooter = () => {
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestionsFooter, { children: (0, jsx_runtime_1.jsx)("div", { className: `
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestionsFooter, { children: (0, jsx_runtime_1.jsx)("div", { className: `suggestions-footer`, children: (0, jsx_runtime_1.jsxs)("p", { className: 'suggestions-text', children: ["Press ", (0, jsx_runtime_1.jsx)("strong", { children: "Enter" }), " to search all results"] }) }) }));
|
|
50
50
|
};
|
|
51
51
|
// Export
|
|
52
52
|
exports.default = SearchSuggestionsFooter;
|