From daa5de70112ad96a54995151edb11f374eb45386 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Mon, 29 Nov 2021 20:15:51 +0100 Subject: [PATCH 1/6] Move list header menu to top - fix overflow bug if list name is too long https://github.com/wekan/wekan/pull/4195#issuecomment-981878664 --- client/components/lists/list.styl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index b3d542996..7e366e103 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -86,9 +86,9 @@ .list-header-menu position: absolute - padding: 27px 19px + padding: 0px 19px margin-top: 1px - top: -7px + top: 0px right: 3px .list-header-plus-top From f660dcaa86abf91dc47875100c58425b14110ef8 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 30 Nov 2021 09:28:14 +0100 Subject: [PATCH 2/6] List header menu in the right of "cards count" --- client/components/lists/list.styl | 9 +++------ client/components/lists/listHeader.jade | 6 +++--- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 7e366e103..289aa2a2d 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -85,11 +85,7 @@ color: #a6a6a6 .list-header-menu - position: absolute - padding: 0px 19px - margin-top: 1px - top: 0px - right: 3px + float: right .list-header-plus-top color: #a6a6a6 @@ -100,7 +96,8 @@ .cardCount color: #8c8c8c - font-size: 0.8em + font-size: 12px + font-weight: bold .list-header .list-header-plus-top, .js-open-list-menu, .list-header-menu a color #4d4d4d diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 26ce44108..e28eb04ee 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -18,9 +18,9 @@ template(name="listHeader") span(class="{{#if exceededWipLimit}}highlight{{/if}}") {{cards.count}} |/#{wipLimit.value}) - if showCardsCountForList cards.count - |  - span(class="cardCount") {{cardsCount}} {{cardsCountForListIsOne cards.count}} + if showCardsCountForList cards.count + span.cardCount {{cardsCount}} {{cardsCountForListIsOne cards.count}} + if isMiniScreen if currentList if isWatching From f0ebfb7f58c8f044ae25d2e40661cebf581e57d3 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 30 Nov 2021 13:07:43 +0100 Subject: [PATCH 3/6] List header styling on mobile view - nearly to the same as in desktop view --- client/components/lists/list.styl | 33 +++++++++++++++++++------------ 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 289aa2a2d..52fbbb82c 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -157,18 +157,6 @@ float: left @media screen and (max-width: 800px) - .list-header-menu - position: absolute - padding: 27px 19px - margin-top: 1px - top: -7px - margin-right: 7px - right: -3px - - .list-header - .list-header-name - margin-left: 1.4rem - .mini-list flex: 0 0 60px height: auto @@ -212,7 +200,6 @@ display: flex align-items: center .list-header-left-icon - display: inline padding: 7px padding-right: 27px margin-top: 1px @@ -235,6 +222,26 @@ right: 10px font-size: 24px + .list-header + display: grid + grid-template-columns: 30px 5fr 1fr + .list-header-left-icon + display: grid + grid-row: 1/3 + grid-column: 1 + .list-header-name + grid-row: 1 + grid-column: 2 + align-self: end + .cardCount + grid-row: 2 + grid-column: 2 + align-self: start + .list-header-menu + grid-row: 2 + grid-column: 3 + align-self: start + .link-board-wrapper display: flex align-items: baseline From d7f903f3cd8737657d16b187155b86f19c77319e Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 30 Nov 2021 13:10:36 +0100 Subject: [PATCH 4/6] Fixed inlined form (title edit) on mobile view --- client/components/lists/list.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 52fbbb82c..e708978e1 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -229,7 +229,7 @@ display: grid grid-row: 1/3 grid-column: 1 - .list-header-name + .list-header-name, .inlined-form grid-row: 1 grid-column: 2 align-self: end From e32225e18fc6e4cb876e70bc8c65ecffcb3cbe3e Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 30 Nov 2021 13:56:20 +0100 Subject: [PATCH 5/6] Vertical center align list hamburger menu on mobile view --- client/components/lists/list.styl | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index e708978e1..cf16eaa61 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -238,9 +238,8 @@ grid-column: 2 align-self: start .list-header-menu - grid-row: 2 + grid-row: 1/3 grid-column: 3 - align-self: start .link-board-wrapper display: flex From 7aaa853d1baeda8f3362d0dfddce291f459d7212 Mon Sep 17 00:00:00 2001 From: Martin Filser Date: Tue, 30 Nov 2021 13:58:37 +0100 Subject: [PATCH 6/6] Edit list title on mobile view uses whole grid layout --- client/components/lists/list.styl | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index cf16eaa61..a80879ebf 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -229,7 +229,7 @@ display: grid grid-row: 1/3 grid-column: 1 - .list-header-name, .inlined-form + .list-header-name grid-row: 1 grid-column: 2 align-self: end @@ -240,6 +240,11 @@ .list-header-menu grid-row: 1/3 grid-column: 3 + .inlined-form + grid-row: 1/3 + grid-column: 1/4 + .edit-controls + align-items: initial .link-board-wrapper display: flex