@brillout/docpress 0.15.13-commit-39924f0 → 0.15.13-commit-5e3f8e9

package/EditLink.tsx

@@ -5,16 +5,20 @@ import { usePageContext } from './renderer/usePageContext'
 import { iconPencil } from './icons'
 import { getRepoHref } from './components'
 
-function EditLink({ className, style }: { className?: string; style: React.CSSProperties }) {
+function EditLink({
+  className,
+  style,
+  verbose,
+}: { className?: string; style: React.CSSProperties; verbose?: boolean }) {
   const pageContext = usePageContext()
-  const iconSize = 17
+  const iconSize = 13
   const icon = (
     <img
       src={iconPencil}
       width={iconSize}
       height={iconSize}
       style={{
-        marginRight: 9,
+        marginRight: 6,
         position: 'relative',
         top: -1,
       }}
@@ -25,8 +29,26 @@ function EditLink({ className, style }: { className?: string; style: React.CSSPr
   const docsDir = pageContext.globalContext.config.docpress.docsDir ?? 'docs'
   const editLink = getRepoHref(`/${docsDir}/pages${fsPath}`, true)
   return (
-    <a href={editLink} className={className} style={{ display: 'flex', alignItems: 'center', ...style }}>
-      {icon} Edit this page
+    <a
+      href={editLink}
+      className={className}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        paddingTop: 4,
+        paddingBottom: 2,
+        paddingLeft: 9,
+        paddingRight: 8,
+        border: '1px solid #e0e0e0',
+        borderRadius: 7,
+        fontSize: '0.91em',
+        color: '#6c6c6c',
+        background: '#f8f8f8',
+        letterSpacing: 0.4,
+        ...style,
+      }}
+    >
+      {icon} Edit{verbose ? ' this page' : ''}
     </a>
   )
 }

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'
@@ -39,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
 
@@ -159,7 +161,7 @@ function PageContent({ children }: { children: React.ReactNode }) {
         {/* globalNote */}
         {pageTitleParsed && !pageContext.resolved.pageDesign?.hideTitle && (
           <div>
-            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 6, padding: 10 }} />
+            <EditLink className="show-only-on-desktop" style={{ float: 'right', marginTop: 13 }} />
             <h1 id={`${pageContext.urlPathname.replace('/', '')}`}>{pageTitleParsed}</h1>
           </div>
         )}
@@ -341,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;
@@ -358,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;
@@ -368,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;
@@ -379,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);
@@ -547,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}
@@ -578,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;
   }

package/MenuModal.tsx

@@ -50,7 +50,9 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
             >
               <ExternalLinks style={{ height: 50 }} />
             </div>
-            <EditLink style={{ justifyContent: 'center', padding: 10, marginTop: 0, marginBottom: 13 }} />
+            <Center>
+              <EditLink style={{ justifyContent: 'center', marginTop: 8, marginBottom: 20 }} verbose />
+            </Center>
           </div>
         </div>
         <CloseButton className="show-only-on-mobile" />
@@ -176,3 +178,17 @@ function CloseButton({ className }: { className: string }) {
     </div>
   )
 }
+
+function Center({ style, ...props }: any) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...style,
+      }}
+      {...props}
+    ></div>
+  )
+}

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-39924f0",
+  "version": "0.15.13-commit-5e3f8e9",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",