@brillout/docpress 0.7.9-commit-ea6d0e2 → 0.7.9-commit-30ac702

package/navigation/Navigation-layout.css

@@ -120,12 +120,14 @@ html.navigation-fullscreen {
 }
 html.navigation-fullscreen #navigation-body {
   display: flex;
+  justify-content: center;
 }
 html.navigation-fullscreen #navigation-content-main {
   flex-grow: 1;
-  display: grid;
   margin-top: -25px;
+  column-gap: 20px;
 }
 html.navigation-fullscreen .nav-items-group {
-  padding: 0 10px;
+  break-inside: avoid;
+  width: 100%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.7.9-commit-ea6d0e2",
+  "version": "0.7.9-commit-30ac702",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/renderer/getCSSForResponsiveFullcreenNavItems.ts

@@ -1,5 +1,14 @@
 export { getCSSForResponsiveFullcreenNavItems }
 
+// There doens't seem to be as simpler way to have a column layout that uses the whole width real estate.
+// - https://stackoverflow.com/questions/9683425/css-column-count-not-respected
+// - https://stackoverflow.com/questions/25446921/get-flexbox-column-wrap-to-use-full-width-and-minimize-height
+// - https://stackoverflow.com/questions/74873283/how-to-create-a-css-grid-with-3-columns-having-column-flow
+// - https://stackoverflow.com/questions/50693793/3-columns-grid-top-to-bottom-using-grid-css
+// - https://stackoverflow.com/questions/9119347/html-css-vertical-flow-layout-columnar-style-how-to-implement
+// - https://stackoverflow.com/questions/27119691/how-to-start-a-new-column-in-flex-column-wrap-layout
+// - https://stackoverflow.com/questions/45264354/is-it-possible-to-place-more-than-one-element-into-a-css-grid-cell-without-overl/49047281#49047281
+
 import assert from 'assert'
 import { type NavItemGrouped } from '../navigation/Navigation'
 
@@ -14,18 +23,18 @@ function getCSSForResponsiveFullcreenNavItems(navItemsGrouped: NavItemGrouped[])
       ...[
         //
         `  html.navigation-fullscreen #navigation-content-main {`,
-        `    max-width: ${columnWidthMax * numberOfColumns}px;`,
-        `    grid-template-columns: repeat(${numberOfColumns}, auto);`,
+        `    column-count: ${numberOfColumns};`,
+        `    max-width: min(100%, ${columnWidthMax * numberOfColumns}px);`,
         `  }`,
       ],
     )
     const columnsIdMap = determineColumns(columnsUnmerged, numberOfColumns)
-    columnsIdMap.forEach((columnGroupedId, columnUngroupedId) => {
+    columnsIdMap.forEach((columnBreakPoint, columnUngroupedId) => {
       CSS_block.push(
         ...[
           //
           `  .nav-items-group:nth-child(${columnUngroupedId + 1}) {`,
-          `    grid-column: ${columnGroupedId + 1};`,
+          `    break-after: ${columnBreakPoint ? 'column' : 'avoid'};`,
           `  }`,
         ],
       )
@@ -45,6 +54,24 @@ function getCSSForResponsiveFullcreenNavItems(navItemsGrouped: NavItemGrouped[])
   return CSS
 }
 
+function determineColumnBreakPoints(columnsIdMap: number[]): boolean[] {
+  assert(columnsIdMap[0] === 0)
+  let columnGroupedIdBefore = 0
+  const columnBreakPoints = columnsIdMap.map((columnGroupedId, columnUngroupedId) => {
+    assert(
+      [
+        //
+        columnGroupedIdBefore,
+        columnGroupedIdBefore + 1,
+      ].includes(columnGroupedId),
+    )
+    const val = columnGroupedId !== columnGroupedIdBefore
+    columnGroupedIdBefore = columnGroupedId
+    return val
+  })
+  return columnBreakPoints
+}
+
 function determineColumns(columnsUnmerged: number[], numberOfColumns: number): number[] {
   assert(numberOfColumns <= columnsUnmerged.length)
   const columnsMergingInit: ColumnMerging[] = columnsUnmerged.map((columnHeight, i) => ({
@@ -60,6 +87,7 @@ function determineColumns(columnsUnmerged: number[], numberOfColumns: number): n
     })
   })
   assert(columnsIdMap.length === columnsUnmerged.length)
+
   return columnsIdMap
 }
 type ColumnMerging = { columnIdsMerged: number[]; heightTotal: number }