From a36e80099aab6fcc235714dfbf169adaa94c09d4 Mon Sep 17 00:00:00 2001 From: Nadav Tasher Date: Thu, 21 Nov 2024 00:10:49 +0200 Subject: [PATCH] Revert "Revert some scrollbar, sidebar and list width changes." This reverts commit 096fe130f68e0d8d082d309901c75ed04285b7e2. --- client/components/boards/boardBody.css | 3 -- client/components/boards/boardBody.jade | 2 +- client/components/boards/boardColors.css | 6 ---- client/components/cards/cardDetails.css | 3 +- client/components/lists/list.css | 6 ++++ client/components/lists/list.jade | 2 +- client/components/sidebar/sidebar.css | 36 +++++++++------------- client/components/sidebar/sidebar.jade | 12 ++++---- client/components/swimlanes/swimlanes.css | 6 +--- client/components/swimlanes/swimlanes.jade | 2 +- client/components/users/userAvatar.css | 1 + 11 files changed, 34 insertions(+), 45 deletions(-) diff --git a/client/components/boards/boardBody.css b/client/components/boards/boardBody.css index cb091b57d..1138aa19a 100644 --- a/client/components/boards/boardBody.css +++ b/client/components/boards/boardBody.css @@ -16,9 +16,6 @@ transition: margin 0.1s; overflow-y: auto; } -.board-wrapper .board-canvas.is-sibling-sidebar-open { - margin-right: 248px; -} .board-wrapper .board-canvas .board-overlay { position: fixed; left: 0; diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 6dce982d9..32cd274f2 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -17,7 +17,6 @@ template(name="boardBody") | {{_ 'tableVisibilityMode-allowPrivateOnly'}} else .board-wrapper(class=currentBoard.colorClass) - +sidebar .board-canvas.js-swimlanes.dragscroll( class="{{#if Sidebar.isOpen}}is-sibling-sidebar-open{{/if}}" class="{{#if MultiSelection.isActive}}is-multiselection-active{{/if}}" @@ -36,6 +35,7 @@ template(name="boardBody") +calendarView else +listsGroup(currentBoard) + +sidebar template(name="calendarView") if isViewCalendar diff --git a/client/components/boards/boardColors.css b/client/components/boards/boardColors.css index dc794f365..38161eff2 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -3269,11 +3269,6 @@ THEME - Clean Light color: #FFFFFF; } -.board-color-cleanlight .list:first-child, -.board-color-cleandark .list:first-child { - margin-right: -32px; -} - .board-color-cleanlight .list .list-header .list-header-menu, .board-color-cleandark .list .list-header .list-header-menu { display: flex; @@ -3357,7 +3352,6 @@ THEME - Clean Light .board-color-cleanlight .swimlane, .board-color-cleandark .swimlane { background: none; - gap: 32px; } .board-color-cleanlight .swimlane-height-apply, diff --git a/client/components/cards/cardDetails.css b/client/components/cards/cardDetails.css index 370cafb76..f18fcb962 100644 --- a/client/components/cards/cardDetails.css +++ b/client/components/cards/cardDetails.css @@ -5,7 +5,7 @@ float: left; height: 30px; width: 30px; - margin: 0 4px 4px 0; + margin: .3vh; cursor: pointer; user-select: none; z-index: 1; @@ -89,6 +89,7 @@ box-shadow: 0 0 7px 0 #b3b3b3; transition: flex-basis 0.1s; box-sizing: border-box; + scrollbar-width: none; } .card-details .mCustomScrollBox { padding-left: 0; diff --git a/client/components/lists/list.css b/client/components/lists/list.css index 2205af526..0f1bb8e2f 100644 --- a/client/components/lists/list.css +++ b/client/components/lists/list.css @@ -7,12 +7,14 @@ border-left: 1px solid #ccc; padding: 0; float: left; + flex: 1; } [id^="swimlane-"] .list:first-child { min-width: 20px; } .list:first-child { border-left: none; + flex: none; } .card-details + .list { border-left: none; @@ -31,6 +33,9 @@ box-shadow: none; height: 100px; } +.list.list-collapsed { + flex: none; +} .list.list-composer .open-list-composer, .list .list-composer .open-list-composer { color: #8c8c8c; @@ -147,6 +152,7 @@ display: flex; overflow-y: auto; padding: 5px 11px; + scrollbar-width: none; } .list-body .minicards { flex-grow: 1; diff --git a/client/components/lists/list.jade b/client/components/lists/list.jade index e7f06c6ca..62a719f92 100644 --- a/client/components/lists/list.jade +++ b/client/components/lists/list.jade @@ -1,6 +1,6 @@ template(name='list') .list.js-list(id="js-list-{{_id}}" - style="{{#unless collapsed}}width:{{listWidth}}px;{{/unless}}" + style="{{#unless collapsed}}min-width:{{listWidth}}px;{{/unless}}" class="{{#if collapsed}}list-collapsed{{/if}}") +listHeader +listBody diff --git a/client/components/sidebar/sidebar.css b/client/components/sidebar/sidebar.css index d50c2f933..4533c3ef3 100644 --- a/client/components/sidebar/sidebar.css +++ b/client/components/sidebar/sidebar.css @@ -3,16 +3,13 @@ top: 0; bottom: 0; right: 0; + overflow-y: scroll; + scrollbar-width: none; } .sidebar .sidebar-shadow { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; background: #f7f7f7; box-shadow: -10px 0px 5px -10px #b3b3b3; - z-index: 10; + height: 100%; } .sidebar-xmark { position: absolute; @@ -24,17 +21,16 @@ .sidebar-xmark:hover { background: rgba(0,0,0,0.15); } +.sidebar-actions { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: 10px 10px 0px 10px; +} .sidebar .sidebar-content { - padding: 12px; + padding: 0 12px; margin-bottom: 1.6em; - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - overflow-x: hidden; - overflow-y: auto; - width: 90%; } .sidebar .sidebar-content .hide-btn { display: none; @@ -110,21 +106,19 @@ margin-right: 10px; } .sidebar .sidebar-shortcuts { - position: absolute; - margin-left: 40%; - padding: 0; top: 7px; font-size: 0.8em; line-height: 1.6em; color: #999; } .board-sidebar { - width: 548px; - right: -548px; + display: none; + width: 30vw; + z-index: 100; transition: top 0.1s, right 0.1s, width 0.1s; } .board-sidebar.is-open { - right: 0; + display: block; } .board-widget h4 { margin: 5px 0; diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index a2a788aad..0924fcd28 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -5,7 +5,12 @@ template(name="sidebar") // title="{{showTongueTitle}}") // i.fa.fa-navicon .sidebar-shadow - a.sidebar-xmark.js-close-sidebar ✕ + .sidebar-actions + .sidebar-shortcuts + a.board-header-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}") + i.fa.fa-keyboard-o + span {{_ 'keyboard-shortcuts' }} + a.sidebar-xmark.js-close-sidebar ✕ .sidebar-content.js-board-sidebar-content //a.hide-btn.js-hide-sidebar // i.fa.fa-navicon @@ -47,11 +52,6 @@ template(name="membersWidget") a.board-header-btn.js-open-board-menu(title="{{_ 'boardMenuPopup-title'}}") i.board-header-btn-icon.fa.fa-cog | {{_ 'boardMenuPopup-title'}} - .board-widget.board-widget-members - .sidebar-shortcuts - a.board-header-btn.js-shortcuts(title="{{_ 'keyboard-shortcuts' }}") - i.fa.fa-keyboard-o - span {{_ 'keyboard-shortcuts' }} hr h3 i.fa.fa-users diff --git a/client/components/swimlanes/swimlanes.css b/client/components/swimlanes/swimlanes.css index 9fb0ad275..8101bcf62 100644 --- a/client/components/swimlanes/swimlanes.css +++ b/client/components/swimlanes/swimlanes.css @@ -1,8 +1,3 @@ -@media screen and (min-width: 801px) { - .swimlane.ui-sortable { - width: max-content; - } -} [class=swimlane] { position: sticky; left: 0; @@ -13,6 +8,7 @@ flex-direction: row; overflow: auto; max-height: 100%; + scrollbar-width: none; } .swimlane-header-menu .swimlane-header-collapse-down { font-size: 50%; diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index f01ca7efd..2643b4575 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -2,7 +2,7 @@ template(name="swimlane") .swimlane.nodragscroll +swimlaneHeader unless collapseSwimlane - .swimlane.js-lists.js-swimlane(id="swimlane-{{_id}}" + .swimlane.js-lists.js-swimlane.dragscroll(id="swimlane-{{_id}}" style="height:{{swimlaneHeight}};") if isMiniScreen if currentListIsInThisSwimlane _id diff --git a/client/components/users/userAvatar.css b/client/components/users/userAvatar.css index a26ed10e4..b65a98bd9 100644 --- a/client/components/users/userAvatar.css +++ b/client/components/users/userAvatar.css @@ -5,6 +5,7 @@ float: left; height: 30px; width: 30px; + margin: .3vh; cursor: pointer; user-select: none; z-index: 1;