tryton-do/tryton
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Simplify menu handling by using flex instead of offcanvas and make it resizable

Browse Source 
Closes #13444
This commit is contained in:
José Antonio Díaz Miralles
2024-10-10 12:52:07 +02:00
parent 91d7ec1289
commit 9b3d3f85d6
4 changed files with 55 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sao/index.html
+13 -14
View File
@@ -36,14 +36,14 @@ this repository contains the full copyright notices and license terms. -->
<strong>Sorry sao does not work without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="body" style="display: none;">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="margin-bottom: 0px;">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#main_navbar">
<span class="caret"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)" data-toggle="offcanvas">
<a class="navbar-brand" href="javascript:void(0)" data-toggle="menu">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none"/>
@@ -76,14 +76,10 @@ this repository contains the full copyright notices and license terms. -->
</div>
</div>
</nav>
<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-4 col-lg-3 sidebar-offcanvas" id="menu" role="navigation"
style="overflow-y: auto; height: 100%;"></div>
<div class="col-xs-12 col-sm-8 col-lg-9 main-offcanvas" style="display:flex; overflow-y: auto; height: 100%;" id="tabs" role="tabpanel">
<div id="tabcontent" class="tab-content"></div>
</div>
<div id="main">
<div id="menu" role="navigation"></div>
<div id="tabs" class="hidden-xs" role="tabpanel">
<div id="tabcontent" class="tab-content"></div>
</div>
</div>
</div>
@@ -93,16 +89,19 @@ this repository contains the full copyright notices and license terms. -->
} 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() {
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');
}
}
});
sao/src/offcanvas.less
-74
View File
@@ -1,74 +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;
}
}
@media (min-width: @screen-lg-min) {
.make-offcanvas(25%);
}
@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%);
}
sao/src/sao.js
-3
View File
@@ -439,9 +439,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 = {};
sao/src/sao.less
+42 -3
View File
@@ -11,6 +11,18 @@ html[theme="default"] {
@import "theme";
}
.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
@@ -157,8 +169,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 {
@@ -170,6 +194,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 {
@@ -207,20 +237,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;
}
@@ -1366,5 +1406,4 @@ img.favorite-icon {
}
@import "input-icon";
@import "offcanvas";
@import (optional) "custom.less";