ddp/books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

now using jinja2 block / template, rather than jscript to fill content

Browse Source
This commit is contained in:
Damien De Paoli
2020-11-14 11:20:52 +11:00
parent 5fd4479555
commit b885bf30e4
3 changed files with 66 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/author.html
View File

@@ -1,16 +1,5 @@
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
{% import "bootstrap/wtf.html" as wtf %}
</head>
<body>
{% extends "base.html" %}
{% block main_content %}
<h3><center>Author</center></h3>
<div class="container">
<right>
@@ -35,5 +24,4 @@
</form>
</div class="row">
</div class="container">
</body>
</html>
{% endblock main_content %}

4
templates/authors.html
View File

@@ -1,3 +1,6 @@
{% extends "base.html" %}
{% block main_content %}
<h3>Authors</h3>
<table id="book_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
<thead>
@@ -11,3 +14,4 @@
{% endfor %}
</tbody>
</table>
{% endblock main_content %}

59
templates/base.html Normal file
View File

@@ -0,0 +1,59 @@
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script src="https://kit.fontawesome.com/9b4c7cf470.js" crossorigin="anonymous"></script>
{% import "bootstrap/wtf.html" as wtf %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="">Books DB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Stats</a>
<div class="nav-item dropdown">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="BookMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Books</a>
<div class="dropdown-menu" aria-labelledby="BookMenu">
<a class="dropdown-item" href="#">Show All</a>
</div>
</div>
<div class="nav-item dropdown">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="AuthorMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Authors</a>
<div class="dropdown-menu" aria-labelledby="AuthorMenu">
<a class="dropdown-item" href="/authors">Show All</a>
</div>
</div>
<div class="nav-item dropdown">
<a class="nav-item dropdown nav-link dropdown-toggle" href="#" id="PublisherMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Publishers</a>
<div class="dropdown-menu" aria-labelledby="PublisherMenu">
<a class="dropdown-item" href="#">Show All</a>
</div>
</div>
</div>
</div>
</nav>
{% block main_content %}{% endblock main_content %}
<!-- code to get bootstrap & bootstrap datatable to work -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$('#book_table').DataTable( { 'pageLength': 25 } );
} );
</script>
</body>
</html>