-
@@ -105,17 +101,20 @@
} else {
jQuery(function() {
jQuery('.body').show();
- jQuery('[data-toggle="offcanvas"]').click(function() {
- jQuery('.row-offcanvas').toggleClass('active');
+ jQuery('[data-toggle="menu"]').click(function() {
+ jQuery('#menu').toggleClass('hidden');
+ jQuery('#tabs').toggleClass('hidden-xs');
});
jQuery('#tabs').on('ready', function() {
// MAB: I removed b08b13cb commit code in this script as it seems contradictory with what b2ck do
var mq = window.matchMedia('(max-width: 991px)');
if (mq.matches) {
if (jQuery('#tablist').children().length) {
- jQuery('.row-offcanvas').removeClass('active');
+ jQuery('#menu').addClass('hidden');
+ jQuery('#tabs').removeClass('hidden-xs');
} else {
- jQuery('.row-offcanvas').addClass('active');
+ jQuery('#menu').removeClass('hidden');
+ jQuery('#tabs').addClass('hidden-xs');
}
}
});
diff --git a/sao/src/offcanvas.less b/sao/src/offcanvas.less
deleted file mode 100644
index d8d8560b738..00000000000
--- a/sao/src/offcanvas.less
+++ /dev/null
@@ -1,78 +0,0 @@
-/* This file is part of Tryton. The COPYRIGHT file at the top level of
- this repository contains the full copyright notices and license terms. */
-@import "variables";
-
-@offcanvas-md: @screen-md-max;
-
-body {
- overflow-x: hidden;
-}
-
-.row-offcanvas {
- position: relative;
- -webkit-transition: all .25s ease-out;
- -o-transition: all .25s ease-out;
- transition: all .25s ease-out;
-}
-
-.row-offcanvas-right {
- right: 0;
-}
-
-.row-offcanvas-left {
- left: 0;
-}
-
-.row-offcanvas:not(.active) .main-offcanvas {
- width: 100%;
-}
-
-.sidebar-offcanvas {
- position: absolute !important;
- top: 0;
-}
-
-.make-offcanvas(@size) {
- .row-offcanvas-right
- .sidebar-offcanvas {
- right: -@size;
- }
-
- .row-offcanvas-left
- .sidebar-offcanvas {
- left: -@size;
- }
-
- .row-offcanvas-right.active {
- right: @size;
- }
-
- .row-offcanvas-left.active {
- left: @size;
- }
-
- .sidebar-offcanvas {
- width: @size;
- }
-
- .main-offcanvas {
- width: 100%-@size;
- }
-}
-
-
-@media (min-width: @screen-lg-min) {
- .make-offcanvas(15%);
-}
-
-@media (max-width: @screen-md-max) {
- .make-offcanvas(33.3333%);
-}
-
-@media (max-width: (@screen-sm-max)) {
- .make-offcanvas(50%);
-}
-
-@media (max-width: (@screen-xs-max)) {
- .make-offcanvas(100%);
-}
diff --git a/sao/src/sao.js b/sao/src/sao.js
index 701bd2c7dc9..c3a386ee946 100644
--- a/sao/src/sao.js
+++ b/sao/src/sao.js
@@ -438,9 +438,6 @@ var Sao = {
Sao.i18n.set_direction = function(direction) {
Sao.i18n.rtl = (direction === 'rtl');
jQuery('html').attr('dir', direction);
- jQuery('.row-offcanvas')
- .removeClass('row-offcanvas-left row-offcanvas-right')
- .addClass(Sao.i18n.rtl ? 'row-offcanvas-right' : 'row-offcanvas-left');
};
Sao.i18n.locale = {};
diff --git a/sao/src/sao.less b/sao/src/sao.less
index f599990953e..35ce458a405 100644
--- a/sao/src/sao.less
+++ b/sao/src/sao.less
@@ -8,6 +8,18 @@ html[theme="default"] {
user-select: none;
}
+.body {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ > .navbar {
+ margin-bottom: 0;
+ }
+}
+
// Fix double rtl prefix
.float-rtl-grid-columns(@class, @rtl-prefix) {
.col(@index) { // initial
@@ -150,8 +162,20 @@ html[theme="default"] {
}
}
+#main {
+ bottom: 0;
+ display: flex;
+ flex-direction: row;
+ gap: .5rem;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 6rem;
+}
+
#menu, #tabs {
- margin-top: 5px;
+ display: flex;
+ overflow: auto;
.navbar-brand {
.title {
@@ -163,6 +187,12 @@ html[theme="default"] {
}
}
+#tabs {
+ flex: 1;
+ overflow-x: hidden;
+ padding: 0 5px;
+}
+
@media screen and (max-width: @screen-md-max) {
#menu, #tabs {
.navbar-brand {
@@ -200,19 +230,30 @@ html[theme="default"] {
}
#menu {
+ overflow-y: auto;
+ padding: 0;
background-color: @navbar-default-bg;
border-color: @panel-default-border;
border-style: solid;
border-radius: 0 @panel-border-radius @panel-border-radius 0;
border-width: 1px;
- margin-top: 5px;
.treeview {
height: auto;
.cell {
user-select: none;
}
}
+ @media (min-width: @screen-md-min) {
+ resize: horizontal;
+ width: 35rem;
+ min-width: 20ch;
+ max-width: 100vw;
+ }
+ @media (max-width: (@screen-sm-max)) {
+ width: 100%;
+ }
}
+
[dir="rtl"] #menu {
border-right: none;
}
@@ -1345,5 +1386,4 @@ img.favorite-icon {
}
@import "input-icon";
-@import "offcanvas";
@import (optional) "custom.less";
diff --git a/sao/src/theme/coog/sao.less b/sao/src/theme/coog/sao.less
index 51d133497e8..6a8344a1af5 100644
--- a/sao/src/theme/coog/sao.less
+++ b/sao/src/theme/coog/sao.less
@@ -342,13 +342,9 @@ nav.toolbar.panel-heading {
// The computation of the columns width when resizing sets a width
width: 0px;
}
-}
-// Do not use too much space for the menu
-@media (min-width: @screen-lg-min) {
- .make-offcanvas(min(calc(25%), @coog-max-menu-width));
- .main-offcanvas {
- width: calc(100% - min(calc(25%), @coog-max-menu-width));
+ @media (min-width: @screen-lg-min) {
+ width: min(calc(25%), @coog-max-menu-width);
}
}