mirror of https://github.com/ColorlibHQ/AdminLTE
added table page
Daniel
parent
41d9d08c55
commit
368478ad27
|
|
@ -0,0 +1,324 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!-- For RTL verison -->
|
||||
<!-- <html lang="en" dir="rtl"> -->
|
||||
<head>
|
||||
@@include('./_head.html', {
|
||||
"path": "../..",
|
||||
"title": "AdminLTE 4 | Simple Tables"
|
||||
})
|
||||
</head>
|
||||
<body class="layout-fixed">
|
||||
<div class="wrapper">
|
||||
@@include('./dashboard/_topbar.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
|
||||
@@include('./dashboard/_sidenav.html', {
|
||||
"mainPage": "tables",
|
||||
"page": "simple",
|
||||
"path": "../.."
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content-wrapper">
|
||||
@@include('./dashboard/_content-header.html', {
|
||||
"header_name": "Simple Tables"
|
||||
})
|
||||
<!-- Main content -->
|
||||
<div class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Bordered Table</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer clearfix">
|
||||
<ul class="pagination pagination-sm m-0 float-right">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Condensed Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Simple Full Width Table</h3>
|
||||
|
||||
<div class="card-tools">
|
||||
<ul class="pagination pagination-sm float-right">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Striped Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-danger">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar bg-warning" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-warning">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-primary">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar bg-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-success">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
@@include('./dashboard/_footer.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
@@include('./_scripts.html', {
|
||||
"path": "../.."
|
||||
})
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -67,6 +67,23 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item @@if (context.mainPage === 'tables') {menu-open}">
|
||||
<a href="#" class="nav-link @@if (context.mainPage === 'tables') {active}">
|
||||
<i class="nav-icon fas fa-circle"></i>
|
||||
<p>
|
||||
Tables
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="@@path/pages/tables/simple.html" class="nav-link @@if (context.page === 'simple') {active}">
|
||||
<i class="nav-icon far fa-circle"></i>
|
||||
<p>Simple Tables</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">MULTI LEVEL EXAMPLE</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
|
|
|
|||
|
|
@ -107,13 +107,13 @@
|
|||
|
||||
> div,
|
||||
> p {
|
||||
padding: $table-cell-padding-y-lg;
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
width: subtract(100%, $table-cell-padding-y-lg);
|
||||
margin: 0 0 0 $table-cell-padding-y-lg;
|
||||
width: subtract(100%, $table-cell-padding-x);
|
||||
margin: 0 0 0 $table-cell-padding-x;
|
||||
|
||||
tr:first-child {
|
||||
td,
|
||||
|
|
|
|||
|
|
@ -529,8 +529,8 @@ $mark-bg: #fcf8e3 !default;
|
|||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
// scss-docs-start table-variables
|
||||
$table-cell-padding-y: .5rem !default;
|
||||
$table-cell-padding-x: .5rem !default;
|
||||
$table-cell-padding-y: .75rem !default;
|
||||
$table-cell-padding-x: .75rem !default;
|
||||
$table-cell-padding-y-sm: .25rem !default;
|
||||
$table-cell-padding-x-sm: .25rem !default;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue