More css improvements. Update ocamix usage.

.gitignore

@@ -3,3 +3,4 @@ _build
 node_modules
 .vscode
 *.bc.js
+web/brr_lwd_ui.css

vendor/brr_lwd_ui/examples/virtual-table/brr_lwd_ui.css

@@ -76,17 +76,20 @@ html {
     border-left: 1px solid black;
     border-bottom: 1px solid black;
 
+    & .lwdui-lazy-table-content,
+    & .lwdui-lazy-table-content-wrapper,
+    & .lwdui-virtual-table-row {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1/-1;
+    }
 
-    & .lwdui-lazy-table-content-wrapper {
-        width: 100%;
+    & .lwdui-lazy-table-content-wrapper{
         height: 100%;
         overflow: auto;
     }
 
     & .lwdui-virtual-table-row {
-        display: grid;
-        grid-template-columns: subgrid;
-        grid-column: 1/-1;
         padding: 0;
         overflow-x: auto;
         overflow-y: hidden;

vendor/brr_lwd_ui/examples/virtual-table/main.ml

@@ -5,22 +5,30 @@ open Brr_lwd_ui.Table
 
 let data =
   {
-    Virtual.total_items = Lwd.pure (*93_300*) 200;
+    Virtual.total_items = Lwd.pure 93_300;
     fetch =
       Lwd.pure (fun i ->
-          Console.log [ "Loading"; Jv.of_array Jv.of_int i ];
-          Fut.ok (Array.map (fun i -> Some i) i));
+          (* Console.log [ "Loading"; Jv.of_array Jv.of_int i ]; *)
+          Fut.ok (Array.map (fun i -> Some (i * i)) i));
     render =
       Lwd.pure (fun i data ->
           [ `P (El.txt' (string_of_int i)); `P (El.txt' (string_of_int data)) ]);
   }
 
 let app =
-  let table = { columns = [| Columns.v "a" "5em" [ `P (El.txt' "toto") ] |] } in
+  let table =
+    {
+      columns =
+        [|
+          Columns.v "a" "5em" [ `P (El.txt' "id") ];
+          Columns.v "a" "1fr" [ `P (El.txt' "square") ];
+        |];
+    }
+  in
   let table = { table; row_height = Em 5. } in
   let table = Virtual.make ~ui_table:table data in
   Elwd.div
-    ~at:Attrs.O.(v (`P (A (At.style (Jstr.v "height:15em")))))
+    ~at:Attrs.O.(v (`P (A (At.style (Jstr.v "height:50vh")))))
     [ `R table ]
 
 let _ =

web/app.css

@@ -35,8 +35,8 @@ body {
     justify-items: stretch;
     align-items: stretch;
 
-    width: 100%;
-    height: 100%;
+    width: 100wv;
+    height: 100wh;
 
     & .item-list,
     & .playlist {
@@ -129,4 +129,4 @@ body {
         background-repeat: no-repeat;
         background-position: center;
     }
-}
+}

web/dune

@@ -11,3 +11,9 @@
  (mode
   (promote (until-clean)))
  (files ../bin/db_worker/db_worker.bc.js))
+
+(copy_files
+ (mode
+  (promote (until-clean)))
+ (alias default)
+ (files ../vendor/brr_lwd_ui/examples/virtual-table/brr_lwd_ui.css))

web/index.html

@@ -5,6 +5,7 @@
 	<title>OCAMIX</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link rel="stylesheet" href="./reset.css">
+	<link rel="stylesheet" href="./brr_lwd_ui.css">
 	<link rel="stylesheet" href="./main.css">
 	<link rel="stylesheet" href="./theme.css">
 	<link rel="stylesheet" href="./app.css">
@@ -14,4 +15,4 @@
 	<script src="main.bc.js"></script>
 </body>
 
-</html>
+</html>

web/main.css

@@ -14,124 +14,12 @@ body {
     background-color: red;
 }
 
-/* Ham menu */
-.hover-menu {
-    /* Required for absolute positioning of child */
-    /* position: relative; */
+.item-list>.lwdui-lazy-table {
+    height: auto;
+    flex-grow: 1;
 }
 
-
-.hover-menu menu {
-    visibility: collapse;
-    position: absolute;
-    translate: -50%;
-    opacity: 0;
-    transition: all 125ms;
-}
-
-
-.hover-menu:hover menu,
-.hover-menu.active menu {
-    visibility: visible;
-    opacity: 1;
-}
-
-/* Draggable table */
-/* todo: borders should be in theme */
-.draggable-table {
-    display: inline-grid;
-}
-
-.draggable-table>div {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: 1/-1;
-}
-
-.draggable-table .hover-top {
-    box-shadow: 0px 200px 15px -200px rgba(255, 200, 0, 1) inset;
-}
-
-.draggable-table .hover-bottom {
-    box-shadow: 0px -200px 15px -200px rgba(255, 200, 0, 1) inset;
+#main-layout {
+    width: 100wv;
+    height: 100wh;
 }
-
-
-.lwdui-lazy-table-wrapper {
-    width: 100%;
-    height: 100%;
-    border-radius: 0.5rem;
-    overflow: hidden;
-}
-
-.lwdui-lazy-table {
-    display: inline-grid;
-    align-content: start;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-    background-color: rgb(207, 207, 207);
-    position: relative;
-    font-size: 1.2rem;
-}
-
-.lwdui-lazy-table div {
-    box-sizing: border-box;
-}
-
-.lwdui-lazy-table>div {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: 1/-1;
-    padding: 0.5rem;
-    background-color: #3c4146;
-    overflow: hidden;
-}
-
-.lwdui-lazy-table>.row_spacer {
-    padding: 0;
-}
-
-.lwdui-lazy-table>div>div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.lwdui-lazy-table>div:first-child {
-    position: sticky;
-    top: -1px;
-    /* Without that slight offset there is some glitching happening in firefox */
-    background-color: #3c4146;
-    z-index: 10;
-}
-
-.lwdui-lazy-table>div:first-child>div {
-    text-align: center;
-}
-
-.lwdui-lazy-table span {
-    vertical-align: middle;
-}
-
-.lwdui-controlled-scroll-wrapper {
-    position: relative;
-    overflow: hidden;
-
-    & .lwdui-controlled-scroll-controls {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-
-        transition: opacity 0.3s, visibility 0.3s;
-    }
-
-    &.locked .lwdui-controlled-scroll-controls {
-        visibility: hidden;
-        opacity: 0;
-    }
-}