[tryton-commits] changeset in sao:default Set treeview header sticky on top

[Cédric Krier]

changeset 476cc60cf02e in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=476cc60cf02e
description:
        Set treeview header sticky on top

        We set a default height to treeview which is 100% of the viewport 
height minus
        a default of the height of the toolbars.
        The height is reset to treeview inside form and for the menu.

        issue9163
        review256781002
diffstat:

 CHANGELOG    |   1 +
 src/sao.less |  15 ++++++++++++++-
 2 files changed, 15 insertions(+), 1 deletions(-)

diffs (61 lines):

diff -r dacc8442bbae -r 476cc60cf02e CHANGELOG
--- a/CHANGELOG Wed Apr 01 23:58:49 2020 +0200
+++ b/CHANGELOG Thu Apr 02 00:09:47 2020 +0200
@@ -1,3 +1,4 @@
+* Set treeview header sticky on top
 * Add noreferrer noopener to external URL (issue9089)
 * Manage readonly dates in calendar view
 * Manage editable on calendar view
diff -r dacc8442bbae -r 476cc60cf02e src/sao.less
--- a/src/sao.less      Wed Apr 01 23:58:49 2020 +0200
+++ b/src/sao.less      Thu Apr 02 00:09:47 2020 +0200
@@ -28,6 +28,9 @@
     border-radius: 0 @panel-border-radius @panel-border-radius 0;
     border-width: 1px;
     margin-top: 5px;
+    .treeview {
+        height: auto;
+    }
 }
 [dir="rtl"] #menu {
     border-right: none;
@@ -225,6 +228,7 @@
     -moz-user-select: none;
     -webkit-user-select: none;
     overflow-x: auto;
+    height: calc(100vh - 300px);
 
     > table.tree {
         width: 100%;
@@ -262,6 +266,11 @@
                 text-align: end;
             }
         }
+        > thead > tr:first-child th {
+            background-color: @body-bg;
+            position: sticky;
+            top: 0;
+        }
         > tbody > tr > td {
             cursor: pointer;
             > * {
@@ -480,7 +489,8 @@
     }
     .form-one2many-content, .form-many2many-content {
         .treeview, .list-form {
-            min-height: 100px;
+            height: auto;
+            min-height: 150px;
             max-height: 300px;
         }
     }
@@ -604,6 +614,9 @@
 }
 
 @media screen and (max-width: @screen-xs-max) {
+    .treeview {
+        height: calc(100vh - 370px);
+    }
     .dict-label {
         text-align: left;
         text-align: start;