@brillout/docpress 0.15.13-commit-f8fc961 → 0.15.13-commit-a35cb87

package/Layout.tsx

@@ -7,7 +7,9 @@ export { navLeftWidthMax }
 export { unexpandNav }
 export { blockMargin }
 
-// - We use `@container container-viewport` instead of @media because @media doesn't consider the scrollbar width.
+// - @media VS @container
+//   - Using `@container container-viewport` instead of @media would be interesting because @media doesn't consider the scrollbar width.
+//   - But we still use @media because using @container is complicated(/buggy?) to use inside <MenuModal> because of `position: fixed`.
 // - We use --padding-side because we cannot set a fixed max-width on the <NavHead> container .nav-head-content — DocPress doesn't know how many extra <NavHead> elements the user adds using the +docpress.topNavigation setting.
 
 import React from 'react'
@@ -15,7 +17,12 @@ import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemCom
 import { parseMarkdownMini } from './parseMarkdownMini'
 import { usePageContext } from './renderer/usePageContext'
 import { ExternalLinks } from './ExternalLinks'
-import { coseMenuModalOnMouseLeave, openMenuModal, toggleMenuModal } from './MenuModal/toggleMenuModal'
+import {
+  closeMenuModalOnMouseLeaveToggle,
+  ignoreHoverOnTouchStart,
+  openMenuModalOnMouseEnter,
+  toggleMenuModal,
+} from './MenuModal/toggleMenuModal'
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { initializeJsToggle_SSR } from './code-blocks/hooks/useSelectCodeLang'
@@ -34,7 +41,7 @@ const mainViewWidthMax = (mainViewWidthMaxInner + mainViewPadding * 2) as 840 //
 const navLeftWidthMin = 300
 const navLeftWidthMax = 370
 const viewMobile = 450
-const viewTablet = 1000
+const viewTablet = 1016
 const viewDesktop = (mainViewWidthMax + navLeftWidthMin) as 1140 // 1140 = 840 + 300
 const viewDesktopLarge = (mainViewWidthMax + navLeftWidthMax + blockMargin) as 1213 // 1213 = 840 + 370 + 3
 
@@ -336,7 +343,7 @@ function getStyleNav() {
 
   // Mobile
   style += css`
-@container container-viewport (max-width: ${viewMobile}px) {
+@media(max-width: ${viewMobile}px) {
   .nav-head:not(.is-nav-left) {
     .nav-head-menu-toggle {
       justify-content: flex-end !important;
@@ -353,7 +360,7 @@ function getStyleNav() {
 
   // Mobile + tablet
   style += css`
-@container container-viewport (max-width: ${viewTablet}px) {
+@media(max-width: ${viewTablet}px) {
   .nav-head:not(.is-nav-left) {
     .nav-head-secondary {
       display: none !important;
@@ -363,7 +370,7 @@ function getStyleNav() {
 
   // Tablet
   style += css`
-@container container-viewport (max-width: ${viewTablet}px) and (min-width: ${viewMobile + 1}px) {
+@media(max-width: ${viewTablet}px) and (min-width: ${viewMobile + 1}px) {
   .nav-head:not(.is-nav-left) {
     .nav-head-content {
       --icon-text-padding: 8px;
@@ -374,7 +381,7 @@ function getStyleNav() {
 
   // Desktop small + desktop
   style += css`
-@container container-viewport (min-width: ${viewTablet + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   .nav-head:not(.is-nav-left) {
     .nav-head-content {
       --icon-text-padding: min(8px, 0.5cqw);
@@ -542,7 +549,10 @@ function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
               paddingLeft: 'var(--main-view-padding)',
               paddingRight: 'var(--padding-side)',
             }
-          : {}),
+          : {
+              paddingLeft: 15,
+              marginLeft: -10,
+            }),
       }}
       href="/"
       onContextMenu={!navLogo ? undefined : onContextMenu}
@@ -562,7 +572,6 @@ function isProjectNameShort(name: string) {
   return name.length <= 4
 }
 
-let onMouseIgnore: ReturnType<typeof setTimeout> | undefined
 type PropsDiv = React.HTMLProps<HTMLDivElement>
 function MenuToggleMain(props: PropsDiv) {
   return (
@@ -574,12 +583,12 @@ function MenuToggleMain(props: PropsDiv) {
         <MenuIcon /> Menu
       </span>
       <Style>{css`
-@container container-viewport (max-width: ${viewTablet}px) {
+@media(max-width: ${viewTablet}px) {
   .text-docs, .caret-icon {
     display: none !important;
   }
 }
-@container container-viewport (min-width: ${viewTablet + 1}px) {
+@media(min-width: ${viewTablet + 1}px) {
   .text-menu {
     display: none;
   }
@@ -607,20 +616,12 @@ function MenuToggle({ menuId, ...props }: PropsDiv & { menuId: number }) {
         toggleMenuModal(menuId)
       }}
       onMouseEnter={() => {
-        if (onMouseIgnore) return
-        if (isMobileNav()) return
-        openMenuModal(menuId)
+        openMenuModalOnMouseEnter(menuId)
       }}
       onMouseLeave={() => {
-        if (onMouseIgnore) return
-        if (isMobileNav()) return
-        coseMenuModalOnMouseLeave(menuId)
-      }}
-      onTouchStart={() => {
-        onMouseIgnore = setTimeout(() => {
-          onMouseIgnore = undefined
-        }, 1000)
+        closeMenuModalOnMouseLeaveToggle(menuId)
       }}
+      onTouchStart={ignoreHoverOnTouchStart}
     >
       <Style>{getAnimation()}</Style>
       {props.children}
@@ -728,7 +729,3 @@ function MenuIcon() {
     </svg>
   )
 }
-
-function isMobileNav() {
-  return window.innerWidth <= viewTablet
-}

package/MenuModal/toggleMenuModal.ts

@@ -1,8 +1,11 @@
 export { toggleMenuModal }
-export { openMenuModal }
-export { keepMenuModalOpen }
 export { closeMenuModal }
-export { coseMenuModalOnMouseLeave }
+// Hover handling
+export { ignoreHoverOnTouchStart }
+export { openMenuModalOnMouseEnter }
+export { keepMenuModalOpenOnMouseOver }
+export { closeMenuModalOnMouseLeave }
+export { closeMenuModalOnMouseLeaveToggle }
 
 import { viewTablet } from '../Layout'
 import { getHydrationPromise } from '../renderer/getHydrationPromise'
@@ -11,9 +14,6 @@ import { isBrowser } from '../utils/isBrowser'
 
 initScrollListener()
 
-function keepMenuModalOpen() {
-  open()
-}
 function openMenuModal(menuNavigationId: number) {
   open(menuNavigationId)
 }
@@ -72,7 +72,8 @@ let toggleLock:
       timeoutAction: NodeJS.Timeout
     }
   | undefined
-function coseMenuModalOnMouseLeave(menuId: number) {
+function closeMenuModalOnMouseLeaveToggle(menuId: number) {
+  if (ignoreHover()) return
   clearTimeout(toggleLock?.timeoutAction)
   const timeoutAction = setTimeout(action, 100)
   toggleLock = {
@@ -111,7 +112,7 @@ function toggleMenuModal(menuId: number) {
     closeMenuModal()
   } else {
     openMenuModal(menuId)
-    if (getViewportWidth() < viewTablet) autoScroll()
+    if (isMobileNav()) autoScroll()
   }
 }
 
@@ -137,3 +138,29 @@ function findCollapsibleEl(navLink: HTMLElement | undefined) {
   }
   return null
 }
+
+function closeMenuModalOnMouseLeave() {
+  if (ignoreHover()) return
+  closeMenuModal()
+}
+function keepMenuModalOpenOnMouseOver() {
+  if (ignoreHover()) return
+  open()
+}
+
+let isTouchStart: ReturnType<typeof setTimeout> | undefined
+function ignoreHoverOnTouchStart() {
+  isTouchStart = setTimeout(() => {
+    isTouchStart = undefined
+  }, 1000)
+}
+function openMenuModalOnMouseEnter(menuId: number) {
+  if (ignoreHover()) return
+  openMenuModal(menuId)
+}
+function ignoreHover() {
+  return isTouchStart || isMobileNav()
+}
+function isMobileNav() {
+  return getViewportWidth() <= viewTablet
+}

package/MenuModal.tsx

@@ -7,7 +7,7 @@ import { viewDesktop, viewTablet } from './Layout'
 import { ExternalLinks } from './ExternalLinks'
 import { Style } from './utils/Style'
 import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
-import { closeMenuModal, keepMenuModalOpen } from './MenuModal/toggleMenuModal'
+import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
 import { EditLink } from './EditLink'
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
@@ -27,8 +27,8 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
           transitionProperty: 'opacity',
           transitionTimingFunction: 'ease',
         }}
-        onMouseOver={() => keepMenuModalOpen()}
-        onMouseLeave={closeMenuModal}
+        onMouseOver={keepMenuModalOpenOnMouseOver}
+        onMouseLeave={closeMenuModalOnMouseLeave}
       >
         <div
           id="menu-modal-scroll-container"

package/code-blocks/components/Pre.tsx

@@ -40,7 +40,7 @@ function CopyButton() {
     <button
       className="copy-button raised"
       aria-label={tooltip}
-      data-label-position="top"
+      data-label-position="top-left"
       type="button"
       onClick={onClick}
     >

package/css/tooltip.css

@@ -37,9 +37,10 @@
     top: 100%;
     margin-top: 5px;
   }
-  /* Show above */
-  [aria-label][data-label-position='top']::before {
+  /* Show above-left */
+  [aria-label][data-label-position='top-left']::before {
     bottom: 100%;
     margin-bottom: 7px;
+    transform: translate(calc(-100% + 25px), 0);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.13-commit-f8fc961",
+  "version": "0.15.13-commit-a35cb87",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/utils/getViewportWidth.ts

@@ -1,4 +1,4 @@
 export function getViewportWidth(): number {
-  // `window.innerWidth` inlcudes scrollbar width: https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  return document.documentElement.clientWidth
+  // Width without scrollbar
+  return document.documentElement.scrollWidth
 }