luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GH-1542] Limit card title to 5 lines (#1548)

Browse source 
* limited card text to 5 lines

* Update kanbanCard.tsx

* Moved attributes to new lines

* Adding exception for vendor prefix in the styles

* Updating snapshots

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
Co-authored-by: Jesús Espino <jespinog@gmail.com>
This commit is contained in:
Jenya 2021-12-14 20:37:59 +02:00 committed by GitHub
parent 23a444290b
commit 53b6b723f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 102 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
webapp/src/components/__snapshots__/centerPanel.test.tsx.snap
View file

@ -493,7 +493,9 @@ exports[`components/centerPanel return centerPanel and click on card to show car
>
i
</div>
<div>
<div
class="octo-titletext"
>
card1
</div>
</div>
@ -525,7 +527,9 @@ exports[`components/centerPanel return centerPanel and click on card to show car
>
i
</div>
<div>
<div
class="octo-titletext"
>
card2
</div>
</div>
@ -7970,7 +7974,9 @@ exports[`components/centerPanel should match snapshot for Kanban 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card1
</div>
</div>

48
webapp/src/components/__snapshots__/workspace.test.tsx.snap
View file

@ -660,7 +660,9 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-1
</div>
</div>
@ -702,7 +704,9 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-2
</div>
</div>
@ -744,7 +748,9 @@ exports[`src/components/workspace return workspace and showcard 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-3
</div>
</div>
@ -1042,7 +1048,9 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-1
</div>
</div>
@ -1070,7 +1078,9 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-2
</div>
</div>
@ -1098,7 +1108,9 @@ exports[`src/components/workspace return workspace readonly and showcard 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-3
</div>
</div>
@ -1807,7 +1819,9 @@ exports[`src/components/workspace should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-1
</div>
</div>
@ -1849,7 +1863,9 @@ exports[`src/components/workspace should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-2
</div>
</div>
@ -1891,7 +1907,9 @@ exports[`src/components/workspace should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-3
</div>
</div>
@ -2189,7 +2207,9 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-1
</div>
</div>
@ -2217,7 +2237,9 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-2
</div>
</div>
@ -2245,7 +2267,9 @@ exports[`src/components/workspace should match snapshot with readonly 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
card-3
</div>
</div>

36
webapp/src/components/kanban/__snapshots__/kanban.test.tsx.snap
View file

@ -174,7 +174,9 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -206,7 +208,9 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -249,7 +253,9 @@ exports[`src/component/kanban/kanban return kanban and change title on KanbanCol
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -461,7 +467,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -493,7 +501,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -536,7 +546,9 @@ exports[`src/component/kanban/kanban return kanban and click on KanbanCalculatio
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -748,7 +760,9 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -780,7 +794,9 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -823,7 +839,9 @@ exports[`src/component/kanban/kanban should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>

20
webapp/src/components/kanban/__snapshots__/kanbanCard.test.tsx.snap
View file

@ -116,7 +116,9 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy li
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -248,7 +250,9 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -380,7 +384,9 @@ exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplica
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -425,7 +431,9 @@ exports[`src/components/kanban/kanbanCard should match snapshot 1`] = `
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>
@ -456,7 +464,9 @@ exports[`src/components/kanban/kanbanCard should match snapshot with readonly 1`
>
i
</div>
<div>
<div
class="octo-titletext"
>
title
</div>
</div>

9
webapp/src/components/kanban/kanbanCard.scss
View file

@ -67,6 +67,15 @@
width: 20px;
height: 20px;
}
.octo-titletext {
display: -webkit-box; // stylelint-disable-line
overflow: hidden;
text-overflow: ellipsis;
max-height: 100px;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical; // stylelint-disable-line
}
}
.IconButton {

7
webapp/src/components/kanban/kanbanCard.tsx
View file

@ -142,7 +142,12 @@ const KanbanCard = React.memo((props: Props) => {
<div className='octo-icontitle'>
{ card.fields.icon ? <div className='octo-icon'>{card.fields.icon}</div> : undefined }
<div key='__title'>{card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}</div>
<div
key='__title'
className='octo-titletext'
>
{card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}
</div>
</div>
{visiblePropertyTemplates.map((template) => (
<Tooltip