[28373] Add `-no-ellipsis` to disable default overflow

https://community.openproject.com/wp/28373

[ci skip]
pull/6596/head
Oliver Günther 6 years ago
parent 27de26cd36
commit 58a5b7033a
No known key found for this signature in database
GPG Key ID: A3A8BDAD7C0C552C
  1. 83
      app/assets/stylesheets/content/_table.lsg
  2. 4
      app/assets/stylesheets/content/_table.sass
  3. 2
      app/views/boards/index.html.erb

@ -107,6 +107,89 @@
```
## Text overflow / ellipse styles
Use `-no-ellipse` class to a TD element to disable the text-overflow applied usually.
```
<div class="generic-table--container">
<div class="generic-table--results-container" style="max-height: 340px;">
<table class="generic-table" interactive-table>
<colgroup>
<col highlight-col>
<col highlight-col>
<col highlight-col>
<col highlight-col>
<col highlight-col>
</colgroup>
<thead>
<tr>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span class="sort asc">
Content wraps in new lines
</span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span class="sort asc">
clipped
</span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span class="sort desc">
Third
</span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span class="sort desc">
Fourth
</span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span class="sort desc">
Fifth
</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="-no-ellipsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lorem congue lacus euismod egestas. Mauris odio orci, semper sed molestie viverra, vestibulum et nisi.
</td>
<td>Nullam a sem et metus congue placerat. Text will overflow once max-width is exceeded</td>
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td>
<td>Maecenas elementum orci a varius suscipit.</td>
<td>Nunc molestie neque sit amet eros semper dapibus.</td>
</tr>
</tbody>
</table>
</div>
</div>
```
## with footer
```

@ -137,8 +137,10 @@ table.generic-table
tr:not(.-no-highlighting)
border-bottom: 1px solid $table-row-border-color
td
td:not(.-no-ellipsis)
@include text-shortener
td
max-width: 300px
text-align: left
line-height: 1.6

@ -80,7 +80,7 @@ See docs/COPYRIGHT.rdoc for more details.
<tbody>
<% for board in @boards %>
<tr>
<td>
<td class="-no-ellipsis">
<%= link_to h(board.name), { action: 'show', id: board }, class: "board" %><br />
<%=h board.description %>
</td>

Loading…
Cancel
Save