diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index b3d542996..a80879ebf 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: 27px 19px - margin-top: 1px - top: -7px - 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 @@ -160,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 @@ -215,7 +200,6 @@ display: flex align-items: center .list-header-left-icon - display: inline padding: 7px padding-right: 27px margin-top: 1px @@ -238,6 +222,30 @@ 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: 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 align-items: baseline 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