[tryton-commits] changeset in sao:default Use better breakdown of menu offcanvas ...

[Cédric Krier]

changeset 6ce9fa777d09 in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=6ce9fa777d09
description:
        Use better breakdown of menu offcanvas size

        We keep the menu with a minimum size of 300px for all screen sizes.

        issue8691
        review268011002
diffstat:

 index.html         |   4 ++--
 src/offcanvas.less |  12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diffs (42 lines):

diff -r 041357d0c1be -r 6ce9fa777d09 index.html
--- a/index.html        Fri Oct 11 12:06:14 2019 +0200
+++ b/index.html        Sun Oct 13 23:58:49 2019 +0200
@@ -69,9 +69,9 @@
         <div id="main" class="container-fluid" style="padding: 0px;">
             <div class="row row-offcanvas row-offcanvas-left active"
                 style="height: calc(100vh - 50px - 1px - 20px); margin: 0px;">
-                <div class="col-xs-12 col-sm-3 col-lg-2 sidebar-offcanvas" 
id="menu" role="navigation"
+                <div class="col-xs-12 col-sm-4 col-lg-3 sidebar-offcanvas" 
id="menu" role="navigation"
                     style="overflow-y: auto; height: 100%;"></div>
-                <div class="col-xs-12 col-md-9 col-lg-10 main-offcanvas" 
style="overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
+                <div class="col-xs-12 col-sm-8 col-lg-9 main-offcanvas" 
style="overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
                     <div id="tabcontent" class="tab-content"></div>
                 </div>
             </div>
diff -r 041357d0c1be -r 6ce9fa777d09 src/offcanvas.less
--- a/src/offcanvas.less        Fri Oct 11 12:06:14 2019 +0200
+++ b/src/offcanvas.less        Sun Oct 13 23:58:49 2019 +0200
@@ -60,17 +60,17 @@
 
 
 @media (min-width: @screen-lg-min) {
-    .make-offcanvas(16.6666%);
-}
-
-@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
     .make-offcanvas(25%);
 }
 
-@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
+@media (max-width: @screen-md-max) {
+    .make-offcanvas(33.3333%);
+}
+
+@media (max-width: (@screen-sm-max)) {
     .make-offcanvas(50%);
 }
 
-@media (max-width: (@screen-xs-min - 1)) {
+@media (max-width: (@screen-xs-max)) {
     .make-offcanvas(100%);
 }