diff --git a/.gitignore b/.gitignore index 1bea4fc..f7db621 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ _build node_modules .vscode *.bc.js +web/brr_lwd_ui.css diff --git a/vendor/brr_lwd_ui/examples/virtual-table/brr_lwd_ui.css b/vendor/brr_lwd_ui/examples/virtual-table/brr_lwd_ui.css index 7e659d8..70260ac 100644 --- a/vendor/brr_lwd_ui/examples/virtual-table/brr_lwd_ui.css +++ b/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; diff --git a/vendor/brr_lwd_ui/examples/virtual-table/main.ml b/vendor/brr_lwd_ui/examples/virtual-table/main.ml index 25cfcb4..ea186c4 100644 --- a/vendor/brr_lwd_ui/examples/virtual-table/main.ml +++ b/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 _ = diff --git a/web/app.css b/web/app.css index fc91029..63cff3a 100644 --- a/web/app.css +++ b/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; } -} \ No newline at end of file +} diff --git a/web/dune b/web/dune index 5d735ee..f199ce9 100644 --- a/web/dune +++ b/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)) diff --git a/web/index.html b/web/index.html index ba4941c..fb4b259 100644 --- a/web/index.html +++ b/web/index.html @@ -5,6 +5,7 @@ OCAMIX + @@ -14,4 +15,4 @@ - \ No newline at end of file + diff --git a/web/main.css b/web/main.css index aa69aa1..0e23b5a 100644 --- a/web/main.css +++ b/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; - } -} \ No newline at end of file