@brillout/docpress 0.9.0 → 0.9.2
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.
- package/Layout.tsx +25 -14
- package/MenuModal.tsx +4 -4
- package/css/link.css +1 -4
- package/dist/Layout.js +16 -13
- package/dist/MenuModal.js +5 -1
- package/package.json +1 -1
package/Layout.tsx
CHANGED
|
@@ -395,20 +395,31 @@ function unexpandNav() {
|
|
|
395
395
|
|
|
396
396
|
function NavHeaderLeftFullWidthBackground() {
|
|
397
397
|
return (
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
398
|
+
<>
|
|
399
|
+
<div
|
|
400
|
+
className="nav-bg show-on-nav-hover add-transition"
|
|
401
|
+
style={{
|
|
402
|
+
height: '100%',
|
|
403
|
+
zIndex: -1,
|
|
404
|
+
background: 'var(--bg-color)',
|
|
405
|
+
position: 'absolute',
|
|
406
|
+
left: 0,
|
|
407
|
+
top: 0,
|
|
408
|
+
boxSizing: 'content-box',
|
|
409
|
+
borderBottom: 'var(--block-margin) solid white',
|
|
410
|
+
}}
|
|
411
|
+
/>
|
|
412
|
+
<Style>{
|
|
413
|
+
// (min-width: 0px) => trick to always apply => @container seems to always require a condition
|
|
414
|
+
css`
|
|
415
|
+
@container container-viewport (min-width: 0px) {
|
|
416
|
+
.nav-bg {
|
|
417
|
+
width: 100cqw;
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
`
|
|
421
|
+
}</Style>
|
|
422
|
+
</>
|
|
412
423
|
)
|
|
413
424
|
}
|
|
414
425
|
|
package/MenuModal.tsx
CHANGED
|
@@ -39,6 +39,10 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
|
|
|
39
39
|
overflow: 'scroll',
|
|
40
40
|
background: '#ededef',
|
|
41
41
|
transitionProperty: 'opacity',
|
|
42
|
+
// https://github.com/brillout/docpress/issues/23
|
|
43
|
+
// https://stackoverflow.com/questions/64514118/css-overscroll-behavior-contain-when-target-element-doesnt-overflow
|
|
44
|
+
// https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened
|
|
45
|
+
overscrollBehavior: 'none',
|
|
42
46
|
}}
|
|
43
47
|
onMouseOver={openMenuModal}
|
|
44
48
|
onMouseLeave={closeMenuModal}
|
|
@@ -88,10 +92,6 @@ html:not(.menu-modal-show) #menu-modal {
|
|
|
88
92
|
opacity: 0;
|
|
89
93
|
pointer-events: none;
|
|
90
94
|
}
|
|
91
|
-
// disable scroll of main view
|
|
92
|
-
html.menu-modal-show {
|
|
93
|
-
overflow: hidden !important;
|
|
94
|
-
}
|
|
95
95
|
@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
|
|
96
96
|
#menu-modal .nav-item-level-3 {
|
|
97
97
|
display: none;
|
package/css/link.css
CHANGED
package/dist/Layout.js
CHANGED
|
@@ -238,17 +238,20 @@ function unexpandNav() {
|
|
|
238
238
|
}, 1000);
|
|
239
239
|
}
|
|
240
240
|
function NavHeaderLeftFullWidthBackground() {
|
|
241
|
-
return (React.createElement(
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
241
|
+
return (React.createElement(React.Fragment, null,
|
|
242
|
+
React.createElement("div", { className: "nav-bg show-on-nav-hover add-transition", style: {
|
|
243
|
+
height: '100%',
|
|
244
|
+
zIndex: -1,
|
|
245
|
+
background: 'var(--bg-color)',
|
|
246
|
+
position: 'absolute',
|
|
247
|
+
left: 0,
|
|
248
|
+
top: 0,
|
|
249
|
+
boxSizing: 'content-box',
|
|
250
|
+
borderBottom: 'var(--block-margin) solid white',
|
|
251
|
+
} }),
|
|
252
|
+
React.createElement(Style, null,
|
|
253
|
+
// (min-width: 0px) => trick to always apply => @container seems to always require a condition
|
|
254
|
+
css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n@container container-viewport (min-width: 0px) {\n .nav-bg {\n width: 100cqw;\n }\n}\n"], ["\n@container container-viewport (min-width: 0px) {\n .nav-bg {\n width: 100cqw;\n }\n}\n"]))))));
|
|
252
255
|
}
|
|
253
256
|
function NavLogo(_a) {
|
|
254
257
|
var className = _a.className;
|
|
@@ -302,7 +305,7 @@ function MenuLink(props) {
|
|
|
302
305
|
React.createElement("span", { className: "text-menu" },
|
|
303
306
|
React.createElement(MenuIcon, null),
|
|
304
307
|
" Menu"),
|
|
305
|
-
React.createElement(Style, null, css(
|
|
308
|
+
React.createElement(Style, null, css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n@media(max-width: ", "px) {\n .text-docs {\n display: none;\n }\n}\n@media(min-width: ", "px) {\n .text-menu {\n display: none;\n }\n}\n"], ["\n@media(max-width: ", "px) {\n .text-docs {\n display: none;\n }\n}\n@media(min-width: ", "px) {\n .text-menu {\n display: none;\n }\n}\n"])), containerQueryMobileMenu, containerQueryMobileMenu + 1))));
|
|
306
309
|
}
|
|
307
310
|
function DocsIcon() {
|
|
308
311
|
return (React.createElement("span", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)' }, className: "decolorize-6" }, "\uD83D\uDCDA"));
|
|
@@ -311,4 +314,4 @@ function MenuIcon() {
|
|
|
311
314
|
return (React.createElement("svg", { style: { marginRight: 'calc(var(--icon-text-padding) + 2px)', verticalAlign: 'top', width: '1.3em' }, className: "decolorize-6", viewBox: "0 0 448 512" },
|
|
312
315
|
React.createElement("path", { fill: "currentColor", d: "M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" })));
|
|
313
316
|
}
|
|
314
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
317
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
package/dist/MenuModal.js
CHANGED
|
@@ -37,6 +37,10 @@ function MenuModal(_a) {
|
|
|
37
37
|
overflow: 'scroll',
|
|
38
38
|
background: '#ededef',
|
|
39
39
|
transitionProperty: 'opacity',
|
|
40
|
+
// https://github.com/brillout/docpress/issues/23
|
|
41
|
+
// https://stackoverflow.com/questions/64514118/css-overscroll-behavior-contain-when-target-element-doesnt-overflow
|
|
42
|
+
// https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened
|
|
43
|
+
overscrollBehavior: 'none',
|
|
40
44
|
}, onMouseOver: openMenuModal, onMouseLeave: closeMenuModal },
|
|
41
45
|
React.createElement("div", { style: {
|
|
42
46
|
// Place <LinksBottom /> to the bottom
|
|
@@ -66,7 +70,7 @@ function NavSecondary(_a) {
|
|
|
66
70
|
React.createElement(NavSecondaryContent, { style: { height: 70 } })));
|
|
67
71
|
}
|
|
68
72
|
function getStyle() {
|
|
69
|
-
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n opacity: 0;\n pointer-events: none;\n}\n
|
|
73
|
+
return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nhtml:not(.menu-modal-show) #menu-modal {\n opacity: 0;\n pointer-events: none;\n}\n@container container-viewport (min-width: ", "px) {\n #menu-modal .nav-item-level-3 {\n display: none;\n }\n}\n@media(max-width: ", "px) {\n #menu-modal {\n --nav-head-height: 0px !important;\n }\n}\n@media(min-width: ", "px) {\n .show-only-for-mobile {\n display: none !important;\n }\n}\n"], ["\nhtml:not(.menu-modal-show) #menu-modal {\n opacity: 0;\n pointer-events: none;\n}\n@container container-viewport (min-width: ", "px) {\n #menu-modal .nav-item-level-3 {\n display: none;\n }\n}\n@media(max-width: ", "px) {\n #menu-modal {\n --nav-head-height: 0px !important;\n }\n}\n@media(min-width: ", "px) {\n .show-only-for-mobile {\n display: none !important;\n }\n}\n"])), containerQueryMobileLayout, containerQueryMobileMenu, containerQueryMobileMenu + 1);
|
|
70
74
|
}
|
|
71
75
|
function CloseButton(_a) {
|
|
72
76
|
var className = _a.className;
|