From 331054870f827493b6f739eacc7314d339f5dbe2 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 6 Feb 2020 16:06:09 +0100 Subject: [PATCH 1/6] Better sidebar layout for mobile --- .../src/less2/include/sidebar-layout.less | 21 ++++++++++++++++++- www/settings/app-settings.less | 6 ++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 59ea22c76..5525f0fb8 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -1,6 +1,7 @@ @import (reference) "/customize/src/less2/include/colortheme-all.less"; @import (reference) "/customize/src/less2/include/leftside-menu.less"; @import (reference) "/customize/src/less2/include/buttons.less"; +@import (reference) "/customize/src/less2/include/browser.less"; @sidebar_button-width: 400px; @@ -73,6 +74,7 @@ padding: 5px 20px; color: @rightside-color; overflow: auto; + padding-bottom: 200px; // Following rules are only in settings .cp-sidebarlayout-element { @@ -96,7 +98,7 @@ } } margin-bottom: 20px; - .buttons_main(); + .buttons_main(); } [type="text"], [type="password"], button { vertical-align: middle; @@ -107,6 +109,7 @@ .cp-sidebarlayout-input-block { display: inline-flex; width: @sidebar_button-width; + max-width: 100%; input { flex: 1; //border-radius: 0.25em 0 0 0.25em; @@ -118,6 +121,7 @@ //border: 1px solid #adadad; border-left: 0px; height: @variables_input-height; + margin: 0 !important; } } &>div { @@ -162,6 +166,21 @@ } */ } + @media screen and (max-width: @browser_media-medium-screen) { + flex-flow: column; + overflow: auto; + #cp-sidebarlayout-leftside { + width: 100%; + .cp-sidebarlayout-categories { + .cp-sidebarlayout-category { + margin: 0; + } + } + } + #cp-sidebarlayout-rightside { + overflow: unset; + } + } } } diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index b6cd22fc1..251b7097c 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -121,8 +121,13 @@ border: 1px solid black; } .cp-settings-language-selector { + #cp-language-selector { + display: inline; + } button.btn { width: @sidebar_button-width; + max-width: 100%; + margin: 0 !important; background-color: @colortheme_sidebar-button-alt-bg; border-color: #adadad; color: black; @@ -149,6 +154,7 @@ .cp-settings-info-block { [type="text"] { width: @sidebar_button-width; + max-width: 100%; } } From 0efbc77370e13b1619a05b964202ec2191f2289a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Thu, 6 Feb 2020 17:27:16 +0000 Subject: [PATCH 2/6] add max-width to settings --- customize.dist/src/less2/include/sidebar-layout.less | 1 + 1 file changed, 1 insertion(+) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 5525f0fb8..6e4017acc 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -97,6 +97,7 @@ margin-left: 10px; } } + max-width: 650px; margin-bottom: 20px; .buttons_main(); } From 961cb8e427906d4a50cba6cf6a012b210680434d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 10 Feb 2020 10:07:16 +0000 Subject: [PATCH 3/6] apply max-width only to settings --- customize.dist/src/less2/include/sidebar-layout.less | 1 - www/settings/app-settings.less | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 6e4017acc..5525f0fb8 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -97,7 +97,6 @@ margin-left: 10px; } } - max-width: 650px; margin-bottom: 20px; .buttons_main(); } diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index 251b7097c..e7c7cd5fb 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -17,6 +17,12 @@ flex-flow: column; font: @colortheme_app-font; + .cp-sidebarlayout-element { + &[class*="cp-settings"] { + max-width: 650px; + } + } + #cp-export-container { font-size: 16px; display: flex; From 6c23afdcc6e9624a86f5d5414f6d9482aef5fd65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 10 Feb 2020 10:16:17 +0000 Subject: [PATCH 4/6] fix max-width --- www/settings/app-settings.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less index e7c7cd5fb..091fd8263 100644 --- a/www/settings/app-settings.less +++ b/www/settings/app-settings.less @@ -18,9 +18,7 @@ font: @colortheme_app-font; .cp-sidebarlayout-element { - &[class*="cp-settings"] { - max-width: 650px; - } + max-width: 650px; } #cp-export-container { From fbd8700a18065e0b08f4369007bd37a73a429fbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Benqu=C3=A9?= Date: Mon, 10 Feb 2020 10:58:17 +0000 Subject: [PATCH 5/6] fix highlighting of support messages --- www/admin/app-admin.less | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less index eb2a8c0f8..84532c6c5 100644 --- a/www/admin/app-admin.less +++ b/www/admin/app-admin.less @@ -27,12 +27,15 @@ .cp-support-list-actions { margin: 10px 0px 10px 2px; } - .cp-support-list-message { - &:last-child:not(.cp-support-fromadmin) { - color: @colortheme_cp-red; - background-color: lighten(@colortheme_cp-red, 25%); - .cp-support-showdata { - background-color: lighten(@colortheme_cp-red, 30%); + + .cp-support-list-ticket:not(.cp-support-list-closed) { + .cp-support-list-message { + &:last-child:not(.cp-support-fromadmin) { + color: @colortheme_cp-red; + background-color: lighten(@colortheme_cp-red, 25%); + .cp-support-showdata { + background-color: lighten(@colortheme_cp-red, 30%); + } } } } From 3d2538c3cad38c2aa67ae6738b1a549f216c2bf4 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 10 Feb 2020 16:13:29 +0100 Subject: [PATCH 6/6] Fix narrow sidebar in teams --- customize.dist/src/less2/include/sidebar-layout.less | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/customize.dist/src/less2/include/sidebar-layout.less b/customize.dist/src/less2/include/sidebar-layout.less index 5525f0fb8..7961e1bee 100644 --- a/customize.dist/src/less2/include/sidebar-layout.less +++ b/customize.dist/src/less2/include/sidebar-layout.less @@ -170,10 +170,14 @@ flex-flow: column; overflow: auto; #cp-sidebarlayout-leftside { - width: 100%; + width: 100% !important; // Override "narrow" mode + padding-bottom: 20px; .cp-sidebarlayout-categories { .cp-sidebarlayout-category { margin: 0; + span.cp-sidebar-layout-category-name { + display: inline !important; // override "narrow" mode + } } } }