diff --git a/app.css b/app.css index fc91029..63cff3a 100644 --- a/app.css +++ b/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/brr_lwd_ui.css b/brr_lwd_ui.css new file mode 100644 index 0000000..70260ac --- /dev/null +++ b/brr_lwd_ui.css @@ -0,0 +1,129 @@ +/* Reset box-sizing */ + +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +/* Utility classes */ +.display-none { + display: none; +} + +/* Style */ + +.on { + background-color: red; +} + +/* Ham menu */ +.hover-menu { + /* Required for absolute positioning of child */ + /* position: relative; */ +} + + +.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; +} + +/* Virtual table */ + +.lwdui-lazy-table { + display: inline-grid; + position: relative; + width: 100%; + height: 100%; + + align-content: start; + + + border-top: 1px solid black; + 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{ + height: 100%; + overflow: auto; + } + + & .lwdui-virtual-table-row { + padding: 0; + overflow-x: auto; + overflow-y: hidden; + + border-bottom: 1px solid black; + + &>div { + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + border-right: 1px solid black; + } + + &>.row_spacer { + padding: 0; + } + } +} + +.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; + } +} diff --git a/dune b/dune index 5d735ee..f199ce9 100644 --- a/dune +++ b/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/index.html b/index.html index ba4941c..fb4b259 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@