TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
26247 Commits
139 Branches
203 Tags
1.2 GiB
Tag: Branch: Tree: ce503e3306
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ce503e3306'
${ noResults }
openproject/app/assets/stylesheets/content/_table.lsg

249 lines
7.8 KiB
Raw Normal View History Unescape

add table component in LSG
9 years ago
# Table component
fixed style bugs
9 years ago
## style emulation from
add table component in LSG
9 years ago
[WP tables](http://localhost:8080/assets/css/styleguide.html#with-work-packages)
```
specify interactive-table to be used on table tag only It was formerly used on the container elements as well which looked to be ok on first glance but failed to calculate the table width correctly.
9 years ago
<div class="generic-table--container">
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--results-container" style="max-height: 340px;">
Remove role="grid" from tables As described in https://community.openproject.org/work_packages/20429/activity#activity-19, the role 'grid' effectively blocks impaired users from detecting input elements in cells of those tables.
9 years ago
<table class="generic-table" interactive-table>
styled the new table component according to the working package table
9 years ago
<colgroup>
inserted the classes responsible for highlighting the colums when hovered
9 years ago
<col highlight-col>
<col highlight-col>
<col highlight-col>
<col highlight-col>
<col highlight-col>
styled the new table component according to the working package table
9 years ago
</colgroup>
<thead>
<tr>
<th>
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
styled the new table component according to the working package table
9 years ago
<span class="sort asc">
First
</span>
</div>
</div>
</th>
<th>
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
styled the new table component according to the working package table
9 years ago
<span class="sort asc">
Second
</span>
</div>
</div>
</th>
<th>
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
styled the new table component according to the working package table
9 years ago
<span class="sort desc">
Third
</span>
</div>
</div>
</th>
<th>
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
styled the new table component according to the working package table
9 years ago
<span class="sort desc">
Fourth
</span>
</div>
</div>
</th>
<th>
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
styled the new table component according to the working package table
9 years ago
<span class="sort desc">
Fifth
</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Nullam a sem et metus congue placerat.</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>
<tr>
<td>Nullam a sem et metus congue placerat.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</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>
<tr>
<td>Nullam a sem et metus congue placerat.</td>
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Maecenas elementum orci a varius suscipit.</td>
<td>Nunc molestie neque sit amet eros semper dapibus.</td>
</tr>
<tr>
<td>Nullam a sem et metus congue placerat.</td>
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td>
<td>Maecenas elementum orci a varius suscipit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Nunc molestie neque sit amet eros semper dapibus.</td>
</tr>
copied the sass from wp table for the generic table
9 years ago
<tr>
styled the new table component according to the working package table
9 years ago
<td>Nullam a sem et metus congue placerat.</td>
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td>
<td>Maecenas elementum orci a varius suscipit.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Nunc molestie neque sit amet eros semper dapibus.</td>
</tr>
</tbody>
</table>
copied the sass from wp table for the generic table
9 years ago
<div class="generic-table--header-background"></div>
styled the new table component according to the working package table
9 years ago
</div>
add table component in LSG
9 years ago
</div>
styled the new table component according to the working package table
9 years ago
add table component in LSG
9 years ago
```
the work packages table is now inheriting from the generic table
9 years ago
Update the LSG table component -> table with footer
9 years ago
## with footer
```
<div class="generic-table--container -with-footer">
<div class="generic-table--results-container" style="max-height: 340px;">
Remove role="grid" from tables As described in https://community.openproject.org/work_packages/20429/activity#activity-19, the role 'grid' effectively blocks impaired users from detecting input elements in cells of those tables.
9 years ago
<table class="generic-table" interactive-table>
Update the LSG table component -> table with footer
9 years ago
<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">
First
</span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span class="sort asc">
Second
</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Nullam a sem et metus congue placerat.</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>
<tr>
<td>Nullam a sem et metus congue placerat.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</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>
<tr>
<td>Nullam a sem et metus congue placerat.</td>
<td>Mauris ut augue viverra, consequat eros eu, maximus quam.</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit</td>
<td>Maecenas elementum orci a varius suscipit.</td>
<td>Nunc molestie neque sit amet eros semper dapibus.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<div class="generic-table--footer-outer">
Sum1
</div>
</td>
<td>
<div class="generic-table--footer-outer">
Sum2
</div>
</td>
<td>
<div class="generic-table--footer-outer">
Sum3
</div>
</td>
<td>
<div class="generic-table--footer-outer">
Sum4
</div>
</td>
<td>
<div class="generic-table--footer-outer">
Sum5
</div>
</td>
</tr>
</tfoot>
</table>
<div class="generic-table--header-background"></div>
<div class="generic-table--footer-background"></div>
</div>
</div>
```
the work packages table is now inheriting from the generic table
9 years ago
## with no content
```
<div class="generic-table--container" style="height:150px">
<div class="generic-table--no-results-container">
Update icon classes from 'help' until 'mute1'
9 years ago
<i class="icon-info1"></i>
the work packages table is now inheriting from the generic table
9 years ago
<h2 class="generic-table--no-results-title">
Nothing to display
</h2>
<div class="generic-table--no-results-description">
<p>Either nothing have been created or everything is filtered out.</p>
</div>
</div>
</div>
```