djLint/tests/jinja_adminlte/tables-simple.html
2021-07-29 13:41:34 -05:00

1075 lines
66 KiB
HTML

{% extends "layouts/base.html" %}
{% block title %}Tables {% endblock %}
<!-- Element injected in the BODY element -->
{% block body_class %}{% endblock body_class %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
{% endblock stylesheets %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Simple Tables</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item active">
Simple Tables
</li>
</ol>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- Main content -->
<section 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="#">&laquo;</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="#">
&raquo;
</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="#">
&laquo;
</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="#">
&raquo;
</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 class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Responsive Hover Table
</h3>
<div class="card-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text"
name="table_search"
class="form-control float-right"
placeholder="Search">
<div class="input-group-append">
<button type="submit" class="btn btn-default">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover text-nowrap">
<thead>
<tr>
<th>
ID
</th>
<th>
User
</th>
<th>
Date
</th>
<th>
Status
</th>
<th>
Reason
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
183
</td>
<td>
John Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-success">
Approved
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
219
</td>
<td>
Alexander Pierce
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-warning">
Pending
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
657
</td>
<td>
Bob Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-primary">
Approved
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
175
</td>
<td>
Mike Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-danger">
Denied
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Fixed Header Table
</h3>
<div class="card-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text"
name="table_search"
class="form-control float-right"
placeholder="Search">
<div class="input-group-append">
<button type="submit" class="btn btn-default">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0" style="height: 300px;">
<table class="table table-head-fixed text-nowrap">
<thead>
<tr>
<th>
ID
</th>
<th>
User
</th>
<th>
Date
</th>
<th>
Status
</th>
<th>
Reason
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
183
</td>
<td>
John Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-success">
Approved
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
219
</td>
<td>
Alexander Pierce
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-warning">
Pending
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
657
</td>
<td>
Bob Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-primary">
Approved
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
175
</td>
<td>
Mike Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-danger">
Denied
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
134
</td>
<td>
Jim Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-success">
Approved
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
494
</td>
<td>
Victoria Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-warning">
Pending
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
832
</td>
<td>
Michael Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-primary">
Approved
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr>
<td>
982
</td>
<td>
Rocky Doe
</td>
<td>
11-7-2014
</td>
<td>
<span class="tag tag-danger">
Denied
</span>
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">
Expandable Table
</h3>
</div>
<!-- ./card-header -->
<div class="card-body">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
#
</th>
<th>
User
</th>
<th>
Date
</th>
<th>
Status
</th>
<th>
Reason
</th>
</tr>
</thead>
<tbody>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
183
</td>
<td>
John Doe
</td>
<td>
11-7-2014
</td>
<td>
Approved
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="true">
<td>
219
</td>
<td>
Alexander Pierce
</td>
<td>
11-7-2014
</td>
<td>
Pending
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="true">
<td>
657
</td>
<td>
Alexander Pierce
</td>
<td>
11-7-2014
</td>
<td>
Approved
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
175
</td>
<td>
Mike Doe
</td>
<td>
11-7-2014
</td>
<td>
Denied
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
134
</td>
<td>
Jim Doe
</td>
<td>
11-7-2014
</td>
<td>
Approved
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
494
</td>
<td>
Victoria Doe
</td>
<td>
11-7-2014
</td>
<td>
Pending
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
832
</td>
<td>
Michael Doe
</td>
<td>
11-7-2014
</td>
<td>
Approved
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
<tr data-widget="expandable-table" aria-expanded="false">
<td>
982
</td>
<td>
Rocky Doe
</td>
<td>
11-7-2014
</td>
<td>
Denied
</td>
<td>
Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.
</td>
</tr>
<tr class="expandable-body">
<td colspan="5">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
</div>
<!-- -->
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/assets/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/assets/js/demo.js"></script>
{% endblock javascripts %}