jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

responsive tables experiment ~ need a second opinion

pull/776/head
razvanaldea89 6 years ago
parent
4f284007e3
commit
2084f14fd2
2 changed files with 526 additions and 345 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 62
      build/css/custom.css
  2. 809
      production/projects.html

62
build/css/custom.css
Unescape View File

@ -4867,4 +4867,66 @@ ul.notifications {
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
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;
}
}

809
production/projects.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save