From 096fe130f68e0d8d082d309901c75ed04285b7e2 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Wed, 20 Nov 2024 21:08:06 +0200 Subject: [PATCH] Revert some scrollbar, sidebar and list width changes. Thanks to xet7 ! Fixes #5585, fixes https://github.com/wekan/wekan/pull/5583 --- 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, 45 insertions(+), 34 deletions(-) diff --git a/client/components/boards/boardBody.css b/client/components/boards/boardBody.css index 1138aa19a..cb091b57d 100644 --- a/client/components/boards/boardBody.css +++ b/client/components/boards/boardBody.css @@ -16,6 +16,9 @@ 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 32cd274f2..6dce982d9 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -17,6 +17,7 @@ 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}}" @@ -35,7 +36,6 @@ 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 38161eff2..dc794f365 100644 --- a/client/components/boards/boardColors.css +++ b/client/components/boards/boardColors.css @@ -3269,6 +3269,11 @@ 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; @@ -3352,6 +3357,7 @@ 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 f18fcb962..370cafb76 100644 --- a/client/components/cards/cardDetails.css +++ b/client/components/cards/cardDetails.css @@ -5,7 +5,7 @@ float: left; height: 30px; width: 30px; - margin: .3vh; + margin: 0 4px 4px 0; cursor: pointer; user-select: none; z-index: 1; @@ -89,7 +89,6 @@ 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 0f1bb8e2f..2205af526 100644 --- a/client/components/lists/list.css +++ b/client/components/lists/list.css @@ -7,14 +7,12 @@ 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; @@ -33,9 +31,6 @@ box-shadow: none; height: 100px; } -.list.list-collapsed { - flex: none; -} .list.list-composer .open-list-composer, .list .list-composer .open-list-composer { color: #8c8c8c; @@ -152,7 +147,6 @@ 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 62a719f92..e7f06c6ca 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}}min-width:{{listWidth}}px;{{/unless}}" + style="{{#unless collapsed}}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 4533c3ef3..d50c2f933 100644 --- a/client/components/sidebar/sidebar.css +++ b/client/components/sidebar/sidebar.css @@ -3,13 +3,16 @@ 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; - height: 100%; + z-index: 10; } .sidebar-xmark { position: absolute; @@ -21,16 +24,17 @@ .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: 0 12px; + padding: 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; @@ -106,19 +110,21 @@ 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 { - display: none; - width: 30vw; - z-index: 100; + width: 548px; + right: -548px; transition: top 0.1s, right 0.1s, width 0.1s; } .board-sidebar.is-open { - display: block; + right: 0; } .board-widget h4 { margin: 5px 0; diff --git a/client/components/sidebar/sidebar.jade b/client/components/sidebar/sidebar.jade index 0924fcd28..a2a788aad 100644 --- a/client/components/sidebar/sidebar.jade +++ b/client/components/sidebar/sidebar.jade @@ -5,12 +5,7 @@ template(name="sidebar") // title="{{showTongueTitle}}") // i.fa.fa-navicon .sidebar-shadow - .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 ✕ + a.sidebar-xmark.js-close-sidebar ✕ .sidebar-content.js-board-sidebar-content //a.hide-btn.js-hide-sidebar // i.fa.fa-navicon @@ -52,6 +47,11 @@ 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 8101bcf62..9fb0ad275 100644 --- a/client/components/swimlanes/swimlanes.css +++ b/client/components/swimlanes/swimlanes.css @@ -1,3 +1,8 @@ +@media screen and (min-width: 801px) { + .swimlane.ui-sortable { + width: max-content; + } +} [class=swimlane] { position: sticky; left: 0; @@ -8,7 +13,6 @@ 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 2643b4575..f01ca7efd 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.dragscroll(id="swimlane-{{_id}}" + .swimlane.js-lists.js-swimlane(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 b65a98bd9..a26ed10e4 100644 --- a/client/components/users/userAvatar.css +++ b/client/components/users/userAvatar.css @@ -5,7 +5,6 @@ float: left; height: 30px; width: 30px; - margin: .3vh; cursor: pointer; user-select: none; z-index: 1;