responsive tables experiment ~ need a second opinion

pull/776/head
razvanaldea89 2019-02-18 20:17:22 +02:00
parent 4f284007e3
commit 2084f14fd2
2 changed files with 499 additions and 318 deletions

View File

@ -4868,3 +4868,65 @@ ul.notifications {
text-align: left; text-align: left;
} }
} }
/* Experiment for responsive tables - from https://codepen.io/AllThingsSmitty/pen/MyqmdM */
@media screen and (max-width: 600px) {
table.responsive-experimental {
border: 0;
}
table.responsive-experimental caption {
font-size: 1.3em;
}
table.responsive-experimental thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.responsive-experimental tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.responsive-experimental td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
clear:both;
}
table.responsive-experimental td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
font-size:13px;
width: 30%;
text-align: left;
}
table.responsive-experimental td:last-child {
border-bottom: 0;
}
table.responsive-experimental ul {
float:right;
}
table.responsive-experimental .td-wrapper {
width:70%;
float:right;
}
}

View File

@ -332,7 +332,7 @@
<p>Simple table with project listing with progress and editing options</p> <p>Simple table with project listing with progress and editing options</p>
<!-- start project list --> <!-- start project list -->
<table class="table table-striped projects"> <table class="table table-striped projects responsive-experimental">
<thead> <thead>
<tr> <tr>
<th style="width: 1%">#</th> <th style="width: 1%">#</th>
@ -345,369 +345,488 @@
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wraper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="57"></div> data-transitiongoal="57"></div>
</div> </div>
<small>57% Complete</small> <small>57% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="47"></div> data-transitiongoal="47"></div>
</div> </div>
<small>47% Complete</small> <small>47% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-abel="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" da ta-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="77"></div> data-transitiongoal="77"></div>
</div> </div>
<small>77% Complete</small> <small>77% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="60"></div> data-transitiongoal="60"></div>
</div> </div>
<small>60% Complete</small> <small>60% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="12"></div> data-transitiongoal="12"></div>
</div> </div>
<small>12% Complete</small> <small>12% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="35"></div> data-transitiongoal="35"></div>
</div> </div>
<small>35% Complete</small> <small>35% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="87"></div> data-transitiongoal="87"></div>
</div> </div>
<small>87% Complete</small> <small>87% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="77"></div> data-transitiongoal="77"></div>
</div> </div>
<small>77% Complete</small> <small>77% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>#</td> <td data-label="#">#</td>
<td> <td data-label="Project Name" class="clearfix">
<div class="td-wrapper">
<a>Pesamakini Backend UI</a> <a>Pesamakini Backend UI</a>
<br/> <br/>
<small>Created 01.01.2015</small> <small>Created 01.01.2015</small>
</div>
</td> </td>
<td> <td data-label="Team Members" class="clearfix">
<div class="td-wrapper">
<ul class="list-inline"> <ul class="list-inline">
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
<li> <li>
<img src="images/user.png" class="avatar" alt="Avatar"> <img src="images/user.png" class="avatar"
alt="Avatar">
</li> </li>
</ul> </ul>
</div>
</td> </td>
<td class="project_progress"> <td class="project_progress clearfix" data-label="Project Progress">
<div class="td-wrapper">
<div class="progress progress_sm"> <div class="progress progress_sm">
<div class="progress-bar bg-green" role="progressbar" <div class="progress-bar bg-green" role="progressbar"
data-transitiongoal="77"></div> data-transitiongoal="77"></div>
</div> </div>
<small>77% Complete</small> <small>77% Complete</small>
</div>
</td> </td>
<td> <td data-label="Status" class="clearfix">
<div class="td-wrapper">
<button type="button" class="btn btn-success btn-xs">Success <button type="button" class="btn btn-success btn-xs">Success
</button> </button>
</div>
</td> </td>
<td> <td data-label="Edit" class="clearfix">
<div class="td-wrapper">
<a href="#" class="btn btn-primary btn-xs"><i <a href="#" class="btn btn-primary btn-xs"><i
class="fa fa-folder"></i> View </a> class="fa fa-folder"></i> View </a>
<a href="#" class="btn btn-info btn-xs"><i <a href="#" class="btn btn-info btn-xs"><i
class="fa fa-pencil"></i> Edit </a> class="fa fa-pencil"></i> Edit </a>
<a href="#" class="btn btn-danger btn-xs"><i <a href="#" class="btn btn-danger btn-xs"><i
class="fa fa-trash-o"></i> Delete </a> class="fa fa-trash-o"></i> Delete </a>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>