Skip to content

Commit

Permalink
fix(component): tables
Browse files Browse the repository at this point in the history 
checkbox
icons
thumbnails
doc
  • Loading branch information
@ygatesoupe
ygatesoupe committed Oct 17, 2016
1 parent fa3447c commit be31c0b
Show file tree
Hide file tree
Showing 7 changed files with 462 additions and 28 deletions.
207 changes: 188 additions & 19 deletions docs-orange/_includes/boostwatch/tableSorter.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<h2 id="tables">Tables</h2>
<h3 id="default-tables">Default tables</h3>
<h3>Striped table</h3>

<div class="container-fluid">
<div class="row">
<div class="row">
<table class="table table-striped table-hover ">
<caption>Optional table caption.</caption>
<caption></caption>
<thead>
<tr>
<th>#</th>
Expand Down Expand Up @@ -32,8 +32,6 @@ <h3 id="default-tables">Default tables</h3>
<tr>
<th scope="row">3</th>
<td>
<span class="icon-tick text-success" aria-hidden="true"></span>
<span class="sr-only">success</span>
</td>
<td>Column content</td>
<td>Column content</td>
Expand All @@ -49,54 +47,225 @@ <h3 id="default-tables">Default tables</h3>
<tr>
<th scope="row">5</th>
<td>
<span class="icon-info text-info" aria-hidden="true"></span>
<span class="sr-only">information</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
</div>

<h3>Checkbox table</h3>
<div class="container-fluid">
<div class="row">
<table class="table table-hover has-checkbox">
<caption></caption>
<thead>
<tr>
<th scope="row">6</th>
<th>
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select all</span>
</label>
</th>
<th>Status</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 1</span>
</label>
</th>
<td></td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">7</th>
<tr class="selected">
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 2</span>
</label>
</th>
<td></td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="selected">
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 3</span>
</label>
</th>
<td>
<span class="glyphicon glyphicon-warning-sign text-warning" aria-hidden="true"></span>
<span class="sr-only">warning</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 4</span>
</label>
</th>
<td></td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">9</th>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 5</span>
</label>
</th>
<td>
<span class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true"></span>
<span class="sr-only">danger</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div><!-- /example -->
</div>
</div>

<h3>Thumbnails & Icons table</h3>
<div class="container-fluid">
<div class="row">
<table class="table table-hover has-checkbox has-icon">
<caption></caption>
<thead>
<tr>
<th>
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select all</span>
</label>
</th>
<th>Name</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 1</span>
</label>
</th>
<td>
<span class="icon-folder-document"></span>
<span class="sr-only">folder</span>
<span>Finance</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 2</span>
</label>
</th>
<td>
<span class="icon-unknown-file"></span>
<span class="sr-only">file</span>
<span>File</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="selected">
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 3</span>
</label>
</th>
<td>
<img src="../../assets/img/thumb_yellow.png" alt="thumb_yellow.png"><span>Img 1</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 4</span>
</label>
</th>
<td>
<img src="../../assets/img/thumb_blue.png" alt="thumb_blue.png"><span>Img 2</span>
</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 5</span>
</label>
</th>
<td>
<span class="icon-info" style="color: #527EDB;"></span>
<span class="sr-only">info</span>
</td>
<td>
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td>
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td>
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>

<h3 id="complextable">Complex table</h3>
<p class="lead">Table with sortable columns.</p>
<h3 id="complextable">Sortable table</h3>
<div class="container-fluid">
<div class="row">
<table id="myTable" class="table tablesorter">
Expand Down
2 changes: 1 addition & 1 deletion docs-orange/_includes/nav-boostwatch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<a class="bd-toc-link" href="#modal">Modal window</a>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#tables">Complex tables</a>
<a class="bd-toc-link" href="#tables">Tables</a>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#bulletpoint">Bullet point</a>
Expand Down
Binary file added docs-orange/assets/img/thumb_blue.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs-orange/assets/img/thumb_yellow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit be31c0b

Please sign in to comment.